|
|
1
|
<template>
|
|
|
2
3
|
<div class="j-super-query-box">
|
|
|
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<slot name="button" :isActive="superQueryFlag" :isMobile="izMobile" :open="handleOpen" :reset="handleReset">
<a-tooltip v-if="superQueryFlag" v-bind="tooltipProps" :mouseLeaveDelay="0.2">
<!-- begin 不知道为什么不加上这段代码就无法生效 -->
<span v-show="false">{{tooltipProps}}</span>
<!-- end 不知道为什么不加上这段代码就无法生效 -->
<template slot="title">
<span>已有高级查询条件生效</span>
<a-divider type="vertical"/>
<a @click="handleReset">清空</a>
</template>
<a-button-group>
<a-button type="primary" @click="handleOpen">
<a-icon type="appstore" theme="twoTone" spin/>
|
|
|
17
18
|
<span>高级查询</span>
</a-button>
|
|
|
19
20
21
22
23
|
<a-button v-if="izMobile" type="primary" icon="delete" @click="handleReset"/>
</a-button-group>
</a-tooltip>
<a-button v-else type="primary" icon="filter" @click="handleOpen">高级查询</a-button>
</slot>
|
|
|
24
|
|
|
|
25
|
<j-modal
|
|
|
26
|
title="高级查询构造器"
|
|
|
27
|
:width="1000"
|
|
|
28
29
30
|
:visible="visible"
@cancel="handleCancel"
:mask="false"
|
|
|
31
|
:fullscreen="izMobile"
|
|
|
32
|
class="j-super-query-modal"
|
|
|
33
34
|
style="top:5%;max-height: 95%;"
>
|
|
|
35
|
|
|
|
36
|
<template slot="footer">
|
|
|
37
38
39
40
41
42
|
<div style="float: left">
<a-button :loading="loading" @click="handleReset">重置</a-button>
<a-button :loading="loading" @click="handleSave">保存查询条件</a-button>
</div>
<a-button :loading="loading" @click="handleCancel">关闭</a-button>
<a-button :loading="loading" type="primary" @click="handleOk">查询</a-button>
|
|
|
43
44
|
</template>
|
|
|
45
46
47
|
<a-spin :spinning="loading">
<a-row>
<a-col :sm="24" :md="24-5">
|
|
|
48
|
|
|
|
49
|
<a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
|
|
|
50
51
52
53
54
55
56
57
58
|
<div slot="description">
<span>没有任何查询条件</span>
<a-divider type="vertical"/>
<a @click="handleAdd">点击新增</a>
</div>
</a-empty>
<a-form v-else layout="inline">
|
|
|
59
60
61
62
63
64
65
66
67
68
|
<a-row style="margin-bottom: 12px;">
<a-col :md="12" :xs="24">
<a-form-item label="过滤条件匹配" :labelCol="{md: 6,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
<a-select v-model="matchType" :getPopupContainer="node=>node.parentNode" style="width: 100%;">
<a-select-option value="and">AND（所有条件都要求匹配）</a-select-option>
<a-select-option value="or">OR（条件中的任意一个匹配）</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
|
|
|
69
70
71
|
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
|
|
|
72
|
<a-col :md="8" :xs="24" style="margin-bottom: 12px;">
|
|
|
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<a-tree-select
showSearch
v-model="item.field"
:treeData="fieldTreeData"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="选择查询字段"
allowClear
treeDefaultExpandAll
:getPopupContainer="node=>node.parentNode"
style="width: 100%"
@select="(val,option)=>handleSelected(option,item)"
>
</a-tree-select>
|
|
|
86
87
|
</a-col>
|
|
|
88
89
|
<a-col :md="4" :xs="24" style="margin-bottom: 12px;">
<a-select placeholder="匹配规则" :value="item.rule" :getPopupContainer="node=>node.parentNode" @change="handleRuleChange(item,$event)">
|
|
|
90
|
<a-select-option value="eq">等于</a-select-option>
|
|
|
91
92
93
94
|
<a-select-option value="like">包含</a-select-option>
<a-select-option value="right_like">以..开始</a-select-option>
<a-select-option value="left_like">以..结尾</a-select-option>
<a-select-option value="in">在...中</a-select-option>
|
|
|
95
96
97
98
99
100
101
102
|
<a-select-option value="ne">不等于</a-select-option>
<a-select-option value="gt">大于</a-select-option>
<a-select-option value="ge">大于等于</a-select-option>
<a-select-option value="lt">小于</a-select-option>
<a-select-option value="le">小于等于</a-select-option>
</a-select>
</a-col>
|
|
|
103
|
<a-col :md="8" :xs="24" style="margin-bottom: 12px;">
|
|
|
104
105
106
107
108
109
110
111
112
113
|
<template v-if="item.dictCode">
<template v-if="item.type === 'table-dict'">
<j-popup
v-model="item.val"
:code="item.dictTable"
:field="item.dictCode"
:orgFields="item.dictCode"
:destFields="item.dictCode"
></j-popup>
</template>
|
|
|
114
115
116
117
|
<template v-else>
<j-multi-select-tag v-show="allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
<j-dict-select-tag v-show="!allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
</template>
|
|
|
118
|
</template>
|
|
|
119
|
<j-popup v-else-if="item.type === 'popup'" :value="item.val" v-bind="item.popup" group-id="superQuery" @input="(e,v)=>handleChangeJPopup(item,e,v)"/>
|
|
|
120
|
<j-select-multi-user
|
|
|
121
|
v-else-if="item.type === 'select-user' || item.type === 'sel_user'"
|
|
|
122
123
124
125
126
127
128
|
v-model="item.val"
:buttons="false"
:multiple="false"
placeholder="请选择用户"
:returnKeys="['id', item.customReturnField || 'username']"
/>
<j-select-depart
|
|
|
129
|
v-else-if="item.type === 'select-depart' || item.type === 'sel_depart'"
|
|
|
130
131
132
133
134
|
v-model="item.val"
:multi="false"
placeholder="请选择部门"
:customReturnField="item.customReturnField || 'id'"
/>
|
|
|
135
136
137
138
139
140
141
142
143
|
<a-select
v-else-if="item.options instanceof Array"
v-model="item.val"
:options="item.options"
allowClear
placeholder="请选择"
:mode="allowMultiple(item)?'multiple':''"
/>
<j-area-linkage v-model="item.val" v-else-if="item.type==='area-linkage' || item.type==='pca'" style="width: 100%"/>
|
|
|
144
145
|
<j-date v-else-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期" style="width: 100%"></j-date>
<j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></j-date>
|
|
|
146
|
<a-time-picker v-else-if="item.type==='time'" :value="item.val ? moment(item.val,'HH:mm:ss') : null" format="HH:mm:ss" style="width: 100%" @change="(time,value)=>item.val=value"/>
|
|
|
147
|
<a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
|
|
|
148
149
150
151
|
<a-select v-else-if="item.type=='switch'" placeholder="请选择" v-model="item.val">
<a-select-option value="Y">是</a-select-option>
<a-select-option value="N">否</a-select-option>
</a-select>
|
|
|
152
153
154
|
<a-input v-else v-model="item.val" placeholder="请输入值"/>
</a-col>
|
|
|
155
156
157
158
159
160
|
<a-col :md="4" :xs="0" style="margin-bottom: 12px;">
<a-button @click="handleAdd" icon="plus"></a-button>
<a-button @click="handleDel( index )" icon="minus"></a-button>
</a-col>
<a-col :md="0" :xs="24" style="margin-bottom: 12px;text-align: right;">
|
|
|
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
<a-button @click="handleAdd" icon="plus"></a-button>
<a-button @click="handleDel( index )" icon="minus"></a-button>
</a-col>
</a-row>
</a-form>
</a-col>
<a-col :sm="24" :md="5">
<!-- 查询记录 -->
<a-card class="j-super-query-history-card" :bordered="true">
<div slot="title">
保存的查询
</div>
|
|
|
176
|
|
|
|
177
|
<a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
|
|
|
178
|
<a-tree
|
|
|
179
|
v-else
|
|
|
180
181
|
class="j-super-query-history-tree"
showIcon
|
|
|
182
183
|
:treeData="saveTreeData"
:selectedKeys="[]"
|
|
|
184
185
186
187
188
189
190
191
192
193
|
@select="handleTreeSelect"
>
</a-tree>
</a-card>
</a-col>
</a-row>
|
|
|
194
|
</a-spin>
|
|
|
195
196
197
198
199
|
<a-modal title="请输入保存的名称" :visible="prompt.visible" @cancel="prompt.visible=false" @ok="handlePromptOk">
<a-input v-model="prompt.value"></a-input>
</a-modal>
|
|
|
200
|
</j-modal>
|
|
|
201
|
</div>
|
|
|
202
203
204
|
</template>
<script>
|
|
|
205
|
import moment from 'moment'
|
|
|
206
|
import * as utils from '@/utils/util'
|
|
|
207
|
import { mixinDevice } from '@/utils/mixin'
|
|
|
208
|
import JDate from '@/components/jeecg/JDate.vue'
|
|
|
209
210
|
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
|
|
211
212
|
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
|
|
|
213
214
215
|
export default {
name: 'JSuperQuery',
|
|
|
216
217
|
mixins: [mixinDevice],
components: { JAreaLinkage, JMultiSelectTag, JDate, JSelectDepart, JSelectMultiUser },
|
|
|
218
219
220
221
222
223
224
225
226
|
props: {
/*
fieldList: [{
value:'',
text:'',
type:'',
dictCode:'' // 只要 dictCode 有值，无论 type 是什么，都显示为字典下拉框
}]
type:date datetime int number string
|
|
|
227
|
* */
|
|
|
228
229
230
|
fieldList: {
type: Array,
required: true
|
|
|
231
232
233
234
|
},
/*
* 这个回调函数接收一个数组参数 即查询条件
* */
|
|
|
235
236
237
238
239
240
241
242
243
244
245
246
247
|
callback: {
type: String,
required: false,
default: 'handleSuperQuery'
},
// 当前是否在加载中
loading: {
type: Boolean,
default: false
},
// 保存查询条件的唯一 code，通过该 code 区分
|
|
|
248
|
// 默认为 null，代表以当前路由全路径为区分Code
|
|
|
249
250
|
saveCode: {
type: String,
|
|
|
251
|
default: null
|
|
|
252
253
254
255
256
|
}
},
data() {
return {
|
|
|
257
|
moment,
|
|
|
258
|
fieldTreeData: [],
|
|
|
259
260
261
262
263
264
265
|
prompt: {
visible: false,
value: ''
},
visible: false,
|
|
|
266
|
queryParamsModel: [],
|
|
|
267
|
treeIcon: <a-icon type="file-text"/>,
|
|
|
268
269
|
// 保存查询条件的treeData
saveTreeData: [],
|
|
|
270
271
|
// 保存查询条件的前缀名
saveCodeBefore: 'JSuperQuerySaved_',
|
|
|
272
273
274
|
// 查询类型，过滤条件匹配（and、or）
matchType: 'and',
superQueryFlag: false,
|
|
|
275
276
|
}
},
|
|
|
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
|
computed: {
izMobile() {
return this.device === 'mobile'
},
tooltipProps() {
return this.izMobile ? { visible: false } : {}
},
fullSaveCode() {
let saveCode = this.saveCode
if (saveCode == null || saveCode === '') {
saveCode = this.$route.fullPath
}
return this.saveCodeBefore + saveCode
},
},
|
|
|
292
293
|
watch: {
// 当 saveCode 变化时，重新查询已保存的条件
|
|
|
294
|
fullSaveCode: {
|
|
|
295
|
immediate: true,
|
|
|
296
297
|
handler() {
let list = this.$ls.get(this.fullSaveCode)
|
|
|
298
|
if (list instanceof Array) {
|
|
|
299
|
this.saveTreeData = list.map(i => this.renderSaveTreeData(i))
|
|
|
300
301
|
}
}
|
|
|
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
|
},
fieldList: {
deep: true,
immediate: true,
handler(val) {
let mainData = [], subData = []
val.forEach(item => {
let data = { ...item }
data.label = data.label || data.text
let hasChildren = (data.children instanceof Array)
data.disabled = hasChildren
data.selectable = !hasChildren
if (hasChildren) {
data.children = data.children.map(item2 => {
let child = { ...item2 }
child.label = child.label || child.text
child.label = data.label + '-' + child.label
child.value = data.value + ',' + child.value
child.val = ''
return child
})
data.val = ''
subData.push(data)
} else {
mainData.push(data)
}
})
this.fieldTreeData = mainData.concat(subData)
}
|
|
|
331
332
|
}
},
|
|
|
333
334
335
|
methods: {
show() {
|
|
|
336
337
|
if (!this.queryParamsModel || this.queryParamsModel.length === 0) {
this.resetLine()
|
|
|
338
|
}
|
|
|
339
|
this.visible = true
|
|
|
340
|
},
|
|
|
341
342
343
|
handleOk() {
if (!this.isNullArray(this.queryParamsModel)) {
let event = {
|
|
|
344
345
346
347
348
349
|
matchType: this.matchType,
params: this.removeEmptyObject(this.queryParamsModel)
}
// 移动端模式下关闭弹窗
if (this.izMobile) {
this.visible = false
|
|
|
350
|
}
|
|
|
351
|
this.emitCallback(event)
|
|
|
352
|
} else {
|
|
|
353
|
this.$message.warn("不能查询空条件")
|
|
|
354
355
|
}
},
|
|
|
356
357
358
359
360
361
362
363
364
|
emitCallback(event = {}) {
let { params = [], matchType = this.matchType } = event
this.superQueryFlag = (params && params.length > 0)
for (let param of params) {
if (Array.isArray(param.val)) {
param.val = param.val.join(',')
}
}
console.debug('---高级查询参数--->', { params, matchType })
|
|
|
365
366
|
this.$emit(this.callback, params, matchType)
},
|
|
|
367
|
handleCancel() {
|
|
|
368
369
|
this.close()
},
|
|
|
370
371
372
|
close() {
this.$emit('close')
this.visible = false
|
|
|
373
|
},
|
|
|
374
|
handleAdd() {
|
|
|
375
376
377
378
379
380
381
382
383
|
this.addNewLine()
},
addNewLine() {
this.queryParamsModel.push({ rule: 'eq' })
},
resetLine() {
this.superQueryFlag = false
this.queryParamsModel = []
this.addNewLine()
|
|
|
384
|
},
|
|
|
385
386
|
handleDel(index) {
this.queryParamsModel.splice(index, 1)
|
|
|
387
|
},
|
|
|
388
|
handleSelected(node, item) {
|
|
|
389
|
let { type, options, dictCode, dictTable, customReturnField, popup } = node.dataRef
|
|
|
390
|
item['type'] = type
|
|
|
391
|
item['options'] = options
|
|
|
392
|
item['dictCode'] = dictCode
|
|
|
393
394
|
item['dictTable'] = dictTable
item['customReturnField'] = customReturnField
|
|
|
395
396
397
|
if (popup) {
item['popup'] = popup
}
|
|
|
398
|
this.$set(item, 'val', undefined)
|
|
|
399
|
},
|
|
|
400
401
402
|
handleOpen() {
this.show()
},
|
|
|
403
|
handleReset() {
|
|
|
404
|
this.resetLine()
|
|
|
405
|
this.emitCallback()
|
|
|
406
|
},
|
|
|
407
|
handleSave() {
|
|
|
408
|
let queryParams = this.removeEmptyObject(this.queryParamsModel)
|
|
|
409
410
411
412
413
414
415
416
417
|
if (this.isNullArray(queryParams)) {
this.$message.warning('空条件不能保存')
} else {
this.prompt.value = ''
this.prompt.visible = true
}
},
handlePromptOk() {
let { value } = this.prompt
|
|
|
418
419
420
421
422
423
424
425
|
if(!value){
this.$message.warning('保存名称不能为空')
return
}
// 取出查询条件
let records = this.removeEmptyObject(this.queryParamsModel)
// 判断有没有重名的
let filterList = this.saveTreeData.filter(i => i.originTitle === value)
|
|
|
426
427
428
429
430
|
if (filterList.length > 0) {
this.$confirm({
content: `${value} 已存在，是否覆盖？`,
onOk: () => {
this.prompt.visible = false
|
|
|
431
|
filterList[0].records = records
|
|
|
432
433
434
435
436
|
this.saveToLocalStore()
this.$message.success('保存成功')
}
})
} else {
|
|
|
437
|
// 没有重名的，直接添加
|
|
|
438
|
this.prompt.visible = false
|
|
|
439
440
|
// 添加到树列表中
this.saveTreeData.push(this.renderSaveTreeData({
|
|
|
441
|
title: value,
|
|
|
442
443
444
445
|
matchType: this.matchType,
records: records
}))
// 保存到 LocalStore
|
|
|
446
447
448
449
450
451
|
this.saveToLocalStore()
this.$message.success('保存成功')
}
},
handleTreeSelect(idx, event) {
if (event.selectedNodes[0]) {
|
|
|
452
453
454
455
|
let { matchType, records } = event.selectedNodes[0].data.props
// 将保存的matchType取出，兼容旧数据，如果没有保存就还是使用原来的
this.matchType = matchType || this.matchType
this.queryParamsModel = utils.cloneObject(records)
|
|
|
456
457
|
}
},
|
|
|
458
459
460
461
|
handleRemoveSaveTreeItem(event, vNode) {
// 阻止事件冒泡
event.stopPropagation()
|
|
|
462
463
464
|
this.$confirm({
content: '是否删除当前查询？',
onOk: () => {
|
|
|
465
466
|
let { eventKey } = vNode
this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1)
|
|
|
467
468
469
470
471
472
473
|
this.saveToLocalStore()
},
})
},
// 将查询保存到 LocalStore 里
saveToLocalStore() {
|
|
|
474
475
|
let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records }))
this.$ls.set(this.fullSaveCode, saveValue)
|
|
|
476
477
478
|
},
isNullArray(array) {
|
|
|
479
|
//判断是不是空数组对象
|
|
|
480
|
if (!array || array.length === 0) {
|
|
|
481
482
|
return true
}
|
|
|
483
484
|
if (array.length === 1) {
let obj = array[0]
|
|
|
485
|
if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
|
|
|
486
487
488
|
return true
}
}
|
|
|
489
490
491
|
return false
},
// 去掉数组中的空对象
|
|
|
492
493
|
removeEmptyObject(arr) {
let array = utils.cloneObject(arr)
|
|
|
494
495
496
497
|
for (let i = 0; i < array.length; i++) {
let item = array[i]
if (item == null || Object.keys(item).length <= 0) {
array.splice(i--, 1)
|
|
|
498
|
} else {
|
|
|
499
500
501
502
503
504
505
|
if (Array.isArray(item.options)) {
// 如果有字典属性，就不需要保存 options 了
if (item.dictCode) {
// 去掉特殊属性
delete item.options
}
}
|
|
|
506
507
508
|
}
}
return array
|
|
|
509
510
511
512
513
514
|
},
/** 渲染保存查询条件的 title（加个删除按钮） */
renderSaveTreeData(item) {
item.icon = this.treeIcon
item.originTitle = item['title']
|
|
|
515
516
517
518
519
520
521
522
523
524
525
|
item.title = (arg1, arg2) => {
let vNode
// 兼容旧版的Antdv
if (arg1.dataRef) {
vNode = arg1
} else if (arg2.dataRef) {
vNode = arg2
} else {
return <span style="color:red;">Antdv版本不支持</span>
}
let {originTitle} = vNode.dataRef
|
|
|
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
|
return (
<div class="j-history-tree-title">
<span>{originTitle}</span>
<div class="j-history-tree-title-closer" onClick={e => this.handleRemoveSaveTreeItem(e, vNode)}>
<a-icon type="close-circle"/>
</div>
</div>
)
}
return item
},
/** 判断是否允许多选 */
allowMultiple(item) {
return item.rule === 'in'
},
handleRuleChange(item, newValue) {
let oldValue = item.rule
this.$set(item, 'rule', newValue)
// 上一个规则是否是 in，且type是字典或下拉
if (oldValue === 'in') {
if (item.dictCode || item.options instanceof Array) {
let value = item.val
if (typeof item.val === 'string') {
value = item.val.split(',')[0]
} else if (Array.isArray(item.val)) {
value = item.val[0]
}
this.$set(item, 'val', value)
}
}
},
handleChangeJPopup(item, e, values) {
item.val = values[item.popup['destFields']]
},
|
|
|
565
566
567
568
|
}
}
</script>
|
|
|
569
|
<style lang="less" scoped>
|
|
|
570
|
|
|
|
571
572
573
|
.j-super-query-box {
display: inline-block;
}
|
|
|
574
|
|
|
|
575
|
.j-super-query-modal {
|
|
|
576
|
|
|
|
577
578
579
|
.j-super-query-history-card {
/deep/ .ant-card-body,
/deep/ .ant-card-head-title {
|
|
|
580
581
582
|
padding: 0;
}
|
|
|
583
|
/deep/ .ant-card-head {
|
|
|
584
585
586
587
588
|
padding: 4px 8px;
min-height: initial;
}
}
|
|
|
589
590
|
.j-super-query-history-empty {
/deep/ .ant-empty-image {
|
|
|
591
592
593
594
595
|
height: 80px;
line-height: 80px;
margin-bottom: 0;
}
|
|
|
596
|
/deep/ img {
|
|
|
597
598
599
600
|
width: 80px;
height: 65px;
}
|
|
|
601
|
/deep/ .ant-empty-description {
|
|
|
602
603
604
605
606
|
color: #afafaf;
margin: 8px 0;
}
}
|
|
|
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
|
.j-super-query-history-tree {
.j-history-tree-title {
width: calc(100% - 24px);
position: relative;
display: inline-block;
&-closer {
color: #999999;
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
text-align: center;
opacity: 0;
transition: opacity 0.3s, color 0.3s;
&:hover {
color: #666666;
}
&:active {
color: #333333;
}
}
&:hover {
.j-history-tree-title-closer {
opacity: 1;
}
}
}
/deep/ .ant-tree-switcher {
|
|
|
643
644
645
|
display: none;
}
|
|
|
646
|
/deep/ .ant-tree-node-content-wrapper {
|
|
|
647
648
649
650
651
|
width: 100%;
}
}
}
|
|
|
652
653
|
</style>
|
