You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
638 lines
21 KiB
638 lines
21 KiB
<template> |
|
<div class="j-super-query-box"> |
|
|
|
<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/> |
|
<span>高级查询</span> |
|
</a-button> |
|
<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> |
|
|
|
<j-modal |
|
title="高级查询构造器" |
|
:width="1000" |
|
:visible="visible" |
|
@cancel="handleCancel" |
|
:mask="false" |
|
:fullscreen="izMobile" |
|
class="j-super-query-modal" |
|
style="top:5%;max-height: 95%;" |
|
> |
|
|
|
<template slot="footer"> |
|
<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> |
|
</template> |
|
|
|
<a-spin :spinning="loading"> |
|
<a-row> |
|
<a-col :sm="24" :md="24-5"> |
|
|
|
<a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;"> |
|
<div slot="description"> |
|
<span>没有任何查询条件</span> |
|
<a-divider type="vertical"/> |
|
<a @click="handleAdd">点击新增</a> |
|
</div> |
|
</a-empty> |
|
|
|
<a-form v-else layout="inline"> |
|
|
|
<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> |
|
|
|
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index"> |
|
|
|
<a-col :md="8" :xs="24" style="margin-bottom: 12px;"> |
|
<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> |
|
</a-col> |
|
|
|
<a-col :md="4" :xs="24" style="margin-bottom: 12px;"> |
|
<a-select placeholder="匹配规则" :value="item.rule" :getPopupContainer="node=>node.parentNode" @change="handleRuleChange(item,$event)"> |
|
<a-select-option value="eq">等于</a-select-option> |
|
<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> |
|
<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> |
|
|
|
<a-col :md="8" :xs="24" style="margin-bottom: 12px;"> |
|
<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> |
|
<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> |
|
</template> |
|
<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)"/> |
|
<j-select-multi-user |
|
v-else-if="item.type === 'select-user' || item.type === 'sel_user'" |
|
v-model="item.val" |
|
:buttons="false" |
|
:multiple="false" |
|
placeholder="请选择用户" |
|
:returnKeys="['id', item.customReturnField || 'username']" |
|
/> |
|
<j-select-depart |
|
v-else-if="item.type === 'select-depart' || item.type === 'sel_depart'" |
|
v-model="item.val" |
|
:multi="false" |
|
placeholder="请选择部门" |
|
:customReturnField="item.customReturnField || 'id'" |
|
/> |
|
<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%"/> |
|
<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> |
|
<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"/> |
|
<a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/> |
|
<a-input v-else v-model="item.val" placeholder="请输入值"/> |
|
</a-col> |
|
|
|
<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;"> |
|
<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> |
|
|
|
<a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/> |
|
<a-tree |
|
v-else |
|
class="j-super-query-history-tree" |
|
showIcon |
|
:treeData="saveTreeData" |
|
:selectedKeys="[]" |
|
@select="handleTreeSelect" |
|
> |
|
</a-tree> |
|
</a-card> |
|
|
|
|
|
</a-col> |
|
</a-row> |
|
|
|
|
|
</a-spin> |
|
|
|
<a-modal title="请输入保存的名称" :visible="prompt.visible" @cancel="prompt.visible=false" @ok="handlePromptOk"> |
|
<a-input v-model="prompt.value"></a-input> |
|
</a-modal> |
|
|
|
</j-modal> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import moment from 'moment' |
|
import * as utils from '@/utils/util' |
|
import JDate from '@/components/jeecg/JDate.vue' |
|
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart' |
|
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser' |
|
import JAreaLinkage from '@comp/jeecg/JAreaLinkage' |
|
|
|
export default { |
|
name: 'JSuperQuery', |
|
// mixins: [mixinDevice], |
|
components: { JAreaLinkage, JDate, JSelectDepart, JSelectMultiUser }, |
|
props: { |
|
/* |
|
fieldList: [{ |
|
value:'', |
|
text:'', |
|
type:'', |
|
dictCode:'' // 只要 dictCode 有值，无论 type 是什么，都显示为字典下拉框 |
|
}] |
|
type:date datetime int number string |
|
* */ |
|
fieldList: { |
|
type: Array, |
|
required: true |
|
}, |
|
/* |
|
* 这个回调函数接收一个数组参数 即查询条件 |
|
* */ |
|
callback: { |
|
type: String, |
|
required: false, |
|
default: 'handleSuperQuery' |
|
}, |
|
|
|
// 当前是否在加载中 |
|
loading: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
|
|
// 保存查询条件的唯一 code，通过该 code 区分 |
|
// 默认为 null，代表以当前路由全路径为区分Code |
|
saveCode: { |
|
type: String, |
|
default: null |
|
} |
|
|
|
}, |
|
data() { |
|
return { |
|
moment, |
|
fieldTreeData: [], |
|
|
|
prompt: { |
|
visible: false, |
|
value: '' |
|
}, |
|
|
|
visible: false, |
|
queryParamsModel: [], |
|
treeIcon: <a-icon type="file-text"/>, |
|
// 保存查询条件的treeData |
|
saveTreeData: [], |
|
// 保存查询条件的前缀名 |
|
saveCodeBefore: 'JSuperQuerySaved_', |
|
// 查询类型，过滤条件匹配（and、or） |
|
matchType: 'and', |
|
superQueryFlag: false, |
|
} |
|
}, |
|
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 |
|
}, |
|
}, |
|
watch: { |
|
// 当 saveCode 变化时，重新查询已保存的条件 |
|
fullSaveCode: { |
|
immediate: true, |
|
handler() { |
|
let list = this.$ls.get(this.fullSaveCode) |
|
if (list instanceof Array) { |
|
this.saveTreeData = list.map(i => this.renderSaveTreeData(i)) |
|
} |
|
} |
|
}, |
|
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) |
|
} |
|
} |
|
}, |
|
|
|
methods: { |
|
show() { |
|
if (!this.queryParamsModel || this.queryParamsModel.length === 0) { |
|
this.resetLine() |
|
} |
|
this.visible = true |
|
}, |
|
handleOk() { |
|
if (!this.isNullArray(this.queryParamsModel)) { |
|
let event = { |
|
matchType: this.matchType, |
|
params: this.removeEmptyObject(this.queryParamsModel) |
|
} |
|
// 移动端模式下关闭弹窗 |
|
if (this.izMobile) { |
|
this.visible = false |
|
} |
|
this.emitCallback(event) |
|
} else { |
|
this.$message.warn("不能查询空条件") |
|
} |
|
}, |
|
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 }) |
|
this.$emit(this.callback, params, matchType) |
|
}, |
|
handleCancel() { |
|
this.close() |
|
}, |
|
close() { |
|
this.$emit('close') |
|
this.visible = false |
|
}, |
|
handleAdd() { |
|
this.addNewLine() |
|
}, |
|
addNewLine() { |
|
this.queryParamsModel.push({ rule: 'eq' }) |
|
}, |
|
resetLine() { |
|
this.superQueryFlag = false |
|
this.queryParamsModel = [] |
|
this.addNewLine() |
|
}, |
|
handleDel(index) { |
|
this.queryParamsModel.splice(index, 1) |
|
}, |
|
handleSelected(node, item) { |
|
let { type, options, dictCode, dictTable, customReturnField, popup } = node.dataRef |
|
item['type'] = type |
|
item['options'] = options |
|
item['dictCode'] = dictCode |
|
item['dictTable'] = dictTable |
|
item['customReturnField'] = customReturnField |
|
if (popup) { |
|
item['popup'] = popup |
|
} |
|
this.$set(item, 'val', undefined) |
|
}, |
|
handleOpen() { |
|
this.show() |
|
}, |
|
handleReset() { |
|
this.resetLine() |
|
this.emitCallback() |
|
}, |
|
handleSave() { |
|
let queryParams = this.removeEmptyObject(this.queryParamsModel) |
|
if (this.isNullArray(queryParams)) { |
|
this.$message.warning('空条件不能保存') |
|
} else { |
|
this.prompt.value = '' |
|
this.prompt.visible = true |
|
} |
|
}, |
|
handlePromptOk() { |
|
let { value } = this.prompt |
|
if(!value){ |
|
this.$message.warning('保存名称不能为空') |
|
return |
|
} |
|
// 取出查询条件 |
|
let records = this.removeEmptyObject(this.queryParamsModel) |
|
// 判断有没有重名的 |
|
let filterList = this.saveTreeData.filter(i => i.originTitle === value) |
|
if (filterList.length > 0) { |
|
this.$confirm({ |
|
content: `${value} 已存在，是否覆盖？`, |
|
onOk: () => { |
|
this.prompt.visible = false |
|
filterList[0].records = records |
|
this.saveToLocalStore() |
|
this.$message.success('保存成功') |
|
} |
|
}) |
|
} else { |
|
// 没有重名的，直接添加 |
|
this.prompt.visible = false |
|
// 添加到树列表中 |
|
this.saveTreeData.push(this.renderSaveTreeData({ |
|
title: value, |
|
matchType: this.matchType, |
|
records: records |
|
})) |
|
// 保存到 LocalStore |
|
this.saveToLocalStore() |
|
this.$message.success('保存成功') |
|
} |
|
}, |
|
handleTreeSelect(idx, event) { |
|
if (event.selectedNodes[0]) { |
|
let { matchType, records } = event.selectedNodes[0].data.props |
|
// 将保存的matchType取出，兼容旧数据，如果没有保存就还是使用原来的 |
|
this.matchType = matchType || this.matchType |
|
this.queryParamsModel = utils.cloneObject(records) |
|
} |
|
}, |
|
handleRemoveSaveTreeItem(event, vNode) { |
|
// 阻止事件冒泡 |
|
event.stopPropagation() |
|
|
|
this.$confirm({ |
|
content: '是否删除当前查询？', |
|
onOk: () => { |
|
let { eventKey } = vNode |
|
this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1) |
|
this.saveToLocalStore() |
|
}, |
|
}) |
|
}, |
|
|
|
// 将查询保存到 LocalStore 里 |
|
saveToLocalStore() { |
|
let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records })) |
|
this.$ls.set(this.fullSaveCode, saveValue) |
|
}, |
|
|
|
isNullArray(array) { |
|
//判断是不是空数组对象 |
|
if (!array || array.length === 0) { |
|
return true |
|
} |
|
if (array.length === 1) { |
|
let obj = array[0] |
|
if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) { |
|
return true |
|
} |
|
} |
|
return false |
|
}, |
|
// 去掉数组中的空对象 |
|
removeEmptyObject(arr) { |
|
let array = utils.cloneObject(arr) |
|
for (let i = 0; i < array.length; i++) { |
|
let item = array[i] |
|
if (item == null || Object.keys(item).length <= 0) { |
|
array.splice(i--, 1) |
|
} else { |
|
if (Array.isArray(item.options)) { |
|
// 如果有字典属性，就不需要保存 options 了 |
|
if (item.dictCode) { |
|
// 去掉特殊属性 |
|
delete item.options |
|
} |
|
} |
|
} |
|
} |
|
return array |
|
}, |
|
|
|
/** 渲染保存查询条件的 title（加个删除按钮） */ |
|
renderSaveTreeData(item) { |
|
item.icon = this.treeIcon |
|
item.originTitle = item['title'] |
|
item.title = (fn, vNode) => { |
|
let { originTitle } = vNode.dataRef |
|
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']] |
|
}, |
|
|
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
.j-super-query-box { |
|
display: inline-block; |
|
} |
|
|
|
.j-super-query-modal { |
|
|
|
.j-super-query-history-card { |
|
/deep/ .ant-card-body, |
|
/deep/ .ant-card-head-title { |
|
padding: 0; |
|
} |
|
|
|
/deep/ .ant-card-head { |
|
padding: 4px 8px; |
|
min-height: initial; |
|
} |
|
} |
|
|
|
.j-super-query-history-empty { |
|
/deep/ .ant-empty-image { |
|
height: 80px; |
|
line-height: 80px; |
|
margin-bottom: 0; |
|
} |
|
|
|
/deep/ img { |
|
width: 80px; |
|
height: 65px; |
|
} |
|
|
|
/deep/ .ant-empty-description { |
|
color: #afafaf; |
|
margin: 8px 0; |
|
} |
|
} |
|
|
|
.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 { |
|
display: none; |
|
} |
|
|
|
/deep/ .ant-tree-node-content-wrapper { |
|
width: 100%; |
|
} |
|
} |
|
|
|
} |
|
|
|
</style> |