|
1
2
3
4
5
6
7
8
9
10
|
<template>
<j-modal
:title="title"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
wrapClassName="j-popup-modal"
@ok="handleSubmit"
@cancel="handleCancel"
|
|
11
12
|
cancelText="关闭"
>
|
|
13
14
15
|
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchByquery">
<a-row :gutter="24" v-if="showSearchFlag">
|
|
16
17
18
19
20
21
22
23
|
<template v-for="(item, index) in queryInfo">
<template v-if="item.hidden === '1'">
<a-col :md="8" :sm="24" :key="'query' + index" v-show="toggleSearchStatus">
<online-query-form-item
:queryParam="queryParam"
:item="item"
:dictOptions="dictOptions"
></online-query-form-item>
|
|
24
25
26
|
</a-col>
</template>
<template v-else>
|
|
27
28
29
30
31
32
|
<a-col :md="8" :sm="24" :key="'query' + index">
<online-query-form-item
:queryParam="queryParam"
:item="item"
:dictOptions="dictOptions"
></online-query-form-item>
|
|
33
34
35
36
37
38
39
40
41
42
|
</a-col>
</template>
</template>
<a-col :md="8" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
|
|
43
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
|
|
44
45
46
47
48
49
50
51
52
|
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
|
|
53
|
已选择 <a style="font-weight: 600">{{ table.selectedRowKeys.length }}</a> 项
|
|
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
<a v-if="!showSearchFlag" style="margin-left: 24px" @click="onlyReload">刷新</a>
</div>
<a-table
ref="table"
size="middle"
bordered
:rowKey="combineRowKey"
:columns="table.columns"
:dataSource="table.dataSource"
:pagination="table.pagination"
:loading="table.loading"
|
|
68
69
70
71
72
73
|
:rowSelection="{
type: rowSelectionType,
fixed: true,
selectedRowKeys: table.selectedRowKeys,
onChange: handleChangeInTableSelect
}"
|
|
74
75
76
|
@change="handleChangeInTable"
style="min-height: 300px"
:scroll="tableScroll"
|
|
77
78
|
:customRow="clickThenCheck"
>
|
|
79
80
81
82
83
|
</a-table>
</j-modal>
</template>
<script>
|
|
84
85
86
87
|
import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { httpGroupRequest } from '@/api/GroupRequest.js'
|
|
88
|
import md5 from 'md5'
|
|
89
|
|
|
90
|
const MODAL_WIDTH = 1200
|
|
91
92
93
94
95
96
97
|
export default {
name: 'JPopupOnlReport',
props: ['multi', 'code', 'sorter', 'groupId', 'param'],
components: {},
data() {
return {
visible: false,
|
|
98
|
title: '',
|
|
99
100
101
102
103
104
105
106
107
|
confirmLoading: false,
queryInfo: [],
toggleSearchStatus: false,
queryParam: {},
dictOptions: {},
url: {
getColumns: '/online/cgreport/api/getRpColumns/',
getData: '/online/cgreport/api/getData/',
getQueryInfo: '/online/cgreport/api/getQueryInfo/'
|
|
108
|
},
|
|
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
table: {
loading: true,
// 表头
columns: [],
//数据集
dataSource: [],
// 选择器
selectedRowKeys: [],
selectionRows: [],
// 分页参数
pagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
}
|
|
130
|
},
|
|
131
|
cgRpConfigId: '',
|
|
132
|
modalWidth: MODAL_WIDTH,
|
|
133
|
tableScroll: { x: true },
|
|
134
135
|
dynamicParam: {},
// 排序字段,默认无排序
|
|
136
|
iSorter: null
|
|
137
138
139
140
141
142
143
144
|
}
},
mounted() {
//this.loadColumnsInfo()
},
watch: {
code() {
this.loadColumnsInfo()
|
|
145
|
},
|
|
146
147
148
149
150
151
|
param: {
deep: true,
handler() {
// update--begin--autor:liusq-----date:20210706------for:JPopup组件在modal中使用报错#2729------
if (this.visible) {
this.dynamicParamHandler()
|
|
152
|
this.loadData()
|
|
153
154
|
}
// update--begin--autor:liusq-----date:20210706------for:JPopup组件在modal中使用报错#2729------
|
|
155
|
}
|
|
156
|
},
|
|
157
158
159
160
161
162
|
sorter: {
immediate: true,
handler() {
if (this.sorter) {
let arr = this.sorter.split('=')
if (arr.length === 2 && ['asc', 'desc'].includes(arr[1].toLowerCase())) {
|
|
163
|
this.iSorter = { column: arr[0], order: arr[1].toLowerCase() }
|
|
164
165
166
167
168
169
|
// 排序字段受控
this.table.columns.forEach(col => {
if (col.dataIndex === this.iSorter.column) {
this.$set(col, 'sortOrder', this.iSorter.order === 'asc' ? 'ascend' : 'descend')
} else {
this.$set(col, 'sortOrder', false)
|
|
170
171
172
|
}
})
} else {
|
|
173
|
console.warn('【JPopup】sorter参数不合法')
|
|
174
175
|
}
}
|
|
176
177
|
}
}
|
|
178
179
180
181
182
183
184
185
|
},
computed: {
showSearchFlag() {
return this.queryInfo && this.queryInfo.length > 0
},
// 行选择框类型,根据是否多选来控制显示为单选框还是多选框
rowSelectionType() {
return this.multi ? 'checkbox' : 'radio'
|
|
186
|
}
|
|
187
188
189
190
191
192
193
194
195
196
197
|
},
methods: {
loadColumnsInfo() {
let url = `${this.url.getColumns}${this.code}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url
}
httpGroupRequest(() => getAction(url), groupIdKey).then(res => {
if (res.success) {
|
|
198
|
this.initDictOptionData(res.result.dictOptions)
|
|
199
200
201
202
203
|
this.cgRpConfigId = res.result.cgRpConfigId
this.title = res.result.cgRpConfigName
let currColumns = res.result.columns
for (let a = 0; a < currColumns.length; a++) {
if (currColumns[a].customRender) {
|
|
204
205
206
|
let dictCode = currColumns[a].customRender
currColumns[a].customRender = text => {
return filterMultiDictText(this.dictOptions[dictCode], text + '')
|
|
207
208
|
}
}
|
|
209
210
211
212
213
214
215
216
217
218
|
// 排序字段受控
if (this.iSorter && currColumns[a].dataIndex === this.iSorter.column) {
currColumns[a].sortOrder = this.iSorter.order === 'asc' ? 'ascend' : 'descend'
}
}
this.table.columns = [...currColumns]
this.initQueryInfo()
} else {
this.$error({
title: '出错了',
|
|
219
220
221
222
223
224
225
226
|
content: (
<p>
Popup初始化失败,请检查你的配置或稍后重试!
<br />
错误信息如下:{res.message}
</p>
),
onOk: () => this.close()
|
|
227
228
|
})
}
|
|
229
230
231
232
233
234
235
236
237
|
})
},
initQueryInfo() {
let url = `${this.url.getQueryInfo}${this.cgRpConfigId}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url
}
|
|
238
|
httpGroupRequest(() => getAction(url), groupIdKey).then(res => {
|
|
239
240
241
242
243
244
245
246
|
// console.log("获取查询条件", res);
if (res.success) {
this.dynamicParamHandler(res.result)
this.queryInfo = res.result
//查询条件加载后再请求数据
this.loadData(1)
} else {
this.$message.warning(res.message)
|
|
247
|
}
|
|
248
249
250
251
252
253
254
255
256
257
|
})
},
//处理动态参数
dynamicParamHandler(arr) {
if (arr && arr.length > 0) {
//第一次加载查询条件前 初始化queryParam为空对象
let queryTemp = {}
for (let item of arr) {
if (item.mode === 'single') {
queryTemp[item.field] = ''
|
|
258
259
|
}
}
|
|
260
|
this.queryParam = { ...queryTemp }
|
|
261
262
263
264
265
266
267
268
|
}
let dynamicTemp = {}
if (this.param) {
Object.keys(this.param).map(key => {
let str = this.param[key]
if (key in this.queryParam) {
if (str && str.startsWith("'") && str.endsWith("'")) {
str = str.substring(1, str.length - 1)
|
|
269
|
}
|
|
270
271
|
//如果查询条件包含参数 设置值
this.queryParam[key] = str
|
|
272
|
}
|
|
273
274
275
|
dynamicTemp[key] = this.param[key]
})
}
|
|
276
|
this.dynamicParam = { ...dynamicTemp }
|
|
277
278
279
280
281
|
},
loadData(arg) {
if (arg == 1) {
this.table.pagination.current = 1
}
|
|
282
|
let params = this.getQueryParams() //查询条件
|
|
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
|
this.table.loading = true
let url = `${this.url.getData}${this.cgRpConfigId}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url + JSON.stringify(params)
}
httpGroupRequest(() => getAction(url, params), groupIdKey).then(res => {
this.table.loading = false
// console.log("daa",res)
let data = res.result
if (data) {
this.table.pagination.total = Number(data.total)
this.table.dataSource = data.records
} else {
this.table.pagination.total = 0
this.table.dataSource = []
|
|
300
|
}
|
|
301
302
303
304
305
306
307
308
309
310
|
})
},
getQueryParams() {
let paramTarget = {}
if (this.dynamicParam) {
//处理自定义参数
Object.keys(this.dynamicParam).map(key => {
paramTarget['self_' + key] = this.dynamicParam[key]
})
}
|
|
311
312
313
314
|
let param = Object.assign(paramTarget, this.queryParam, this.iSorter)
param.pageNo = this.table.pagination.current
param.pageSize = this.table.pagination.pageSize
return filterObj(param)
|
|
315
316
317
318
319
320
321
322
323
324
|
},
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
//update-begin-author:taoyan date:2020902 for:【issue】开源online的几个问题 LOWCOD-844
if (!selectedRowKeys || selectedRowKeys.length == 0) {
this.table.selectionRows = []
} else if (selectedRowKeys.length == selectionRows.length) {
this.table.selectionRows = selectionRows
} else {
//当两者长度不一的时候 需要判断
let keys = this.table.selectedRowKeys
|
|
325
|
let rows = this.table.selectionRows
|
|
326
327
328
329
330
331
|
//这个循环 添加新的记录
for (let i = 0; i < selectionRows.length; i++) {
let combineKey = this.combineRowKey(selectionRows[i])
if (keys.indexOf(combineKey) < 0) {
//如果 原来的key 不包含当前记录 push
rows.push(selectionRows[i])
|
|
332
333
|
}
}
|
|
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
|
//这个循环 移除取消选中的数据
this.table.selectionRows = rows.filter(item => {
let combineKey = this.combineRowKey(item)
return selectedRowKeys.indexOf(combineKey) >= 0
})
}
//update-end-author:taoyan date:2020902 for:【issue】开源online的几个问题 LOWCOD-844
this.table.selectedRowKeys = selectedRowKeys
},
handleChangeInTable(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
if (Object.keys(sorter).length > 0) {
this.iSorter = {
column: sorter.field,
order: 'ascend' === sorter.order ? 'asc' : 'desc'
|
|
349
|
}
|
|
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
|
// 排序字段受控
this.table.columns.forEach(col => {
if (col.dataIndex === sorter.field) {
this.$set(col, 'sortOrder', sorter.order)
} else {
this.$set(col, 'sortOrder', false)
}
})
}
this.table.pagination = pagination
this.loadData()
},
handleCancel() {
this.close()
},
handleSubmit() {
if (!this.multi) {
if (this.table.selectionRows && this.table.selectionRows.length > 1) {
|
|
368
|
this.$message.warning('请选择一条记录')
|
|
369
370
|
return false
}
|
|
371
372
|
}
if (!this.table.selectionRows || this.table.selectionRows.length == 0) {
|
|
373
|
this.$message.warning('请选择一条记录')
|
|
374
375
|
return false
}
|
|
376
|
this.$emit('ok', this.table.selectionRows)
|
|
377
378
379
|
this.close()
},
close() {
|
|
380
381
|
this.$emit('close')
this.visible = false
|
|
382
383
384
385
386
387
388
|
this.onClearSelected()
},
show() {
this.visible = true
this.loadColumnsInfo()
},
handleToggleSearch() {
|
|
389
|
this.toggleSearchStatus = !this.toggleSearchStatus
|
|
390
391
|
},
searchByquery() {
|
|
392
|
this.loadData(1)
|
|
393
394
|
},
onlyReload() {
|
|
395
|
this.loadData()
|
|
396
397
398
|
},
searchReset() {
Object.keys(this.queryParam).forEach(key => {
|
|
399
|
this.queryParam[key] = ''
|
|
400
|
})
|
|
401
|
this.loadData(1)
|
|
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
|
},
onClearSelected() {
this.table.selectedRowKeys = []
this.table.selectionRows = []
},
combineRowKey(record) {
let res = ''
Object.keys(record).forEach(key => {
//update-begin---author:liusq Date:20210203 for:pop选择器列主键问题 issues/I29P9Q------------
if (key == 'id') {
res = record[key] + res
} else {
res += record[key]
}
//update-end---author:liusq Date:20210203 for:pop选择器列主键问题 issues/I29P9Q------------
})
// update-begin---author:taoyan Date:20211025 for:jpopup 表格key重复BUG /issues/3121
res = md5(res)
/*if(res.length>50){
res = res.substring(0,50)
}*/
// update-end---author:taoyan Date:20211025 for:jpopup 表格key重复BUG /issues/3121
return res
},
|
|
426
|
|
|
427
428
429
430
431
432
|
clickThenCheck(record) {
return {
on: {
click: () => {
let rowKey = this.combineRowKey(record)
if (!this.table.selectedRowKeys || this.table.selectedRowKeys.length == 0) {
|
|
433
434
|
let arr1 = [],
arr2 = []
|
|
435
436
437
438
439
440
441
442
443
444
|
arr1.push(record)
arr2.push(rowKey)
this.table.selectedRowKeys = arr2
this.table.selectionRows = arr1
} else {
if (this.table.selectedRowKeys.indexOf(rowKey) < 0) {
this.table.selectedRowKeys.push(rowKey)
this.table.selectionRows.push(record)
} else {
let rowKey_index = this.table.selectedRowKeys.indexOf(rowKey)
|
|
445
446
|
this.table.selectedRowKeys.splice(rowKey_index, 1)
this.table.selectionRows.splice(rowKey_index, 1)
|
|
447
448
|
}
}
|
|
449
450
451
452
453
|
// 判断是否允许多选,如果不允许多选,就只存储最后一个选中的行
if (!this.multi && this.table.selectedRowKeys.length > 1) {
this.table.selectionRows = [this.table.selectionRows.pop()]
this.table.selectedRowKeys = [this.table.selectedRowKeys.pop()]
}
|
|
454
455
456
|
}
}
}
|
|
457
458
459
460
461
462
463
|
},
//防止字典中有垃圾数据
initDictOptionData(dictOptions) {
let obj = {}
Object.keys(dictOptions).map(k => {
obj[k] = dictOptions[k].filter(item => {
return item != null
|
|
464
465
|
})
})
|
|
466
|
this.dictOptions = obj
|
|
467
468
|
}
}
|
|
469
|
}
|
|
470
471
472
473
|
</script>
<style scoped>
</style>
|