|
@@ -1,89 +1,225 @@
|
|
<template>
|
|
<template>
|
|
- <a-modal
|
|
|
|
|
|
+<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="高级查询构造器"
|
|
title="高级查询构造器"
|
|
- :width="800"
|
|
|
|
|
|
+ :width="1000"
|
|
:visible="visible"
|
|
:visible="visible"
|
|
- :confirmLoading="confirmLoading"
|
|
|
|
@cancel="handleCancel"
|
|
@cancel="handleCancel"
|
|
:mask="false"
|
|
:mask="false"
|
|
- wrapClassName="ant-modal-cust-warp"
|
|
|
|
- style="top:5%;max-height: 95%;">
|
|
|
|
|
|
+ :fullscreen="izMobile"
|
|
|
|
+ class="j-super-query-modal"
|
|
|
|
+ style="top:5%;max-height: 95%;"
|
|
|
|
+ >
|
|
|
|
+
|
|
<template slot="footer">
|
|
<template slot="footer">
|
|
- <a-button @click="handleCancel">关 闭</a-button>
|
|
|
|
- <a-button @click="handleReset" style="float: left">重 置</a-button>
|
|
|
|
- <a-button type="primary" @click="handleOk">查 询</a-button>
|
|
|
|
|
|
+ <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>
|
|
</template>
|
|
|
|
|
|
- <a-spin :spinning="confirmLoading">
|
|
|
|
- <a-form>
|
|
|
|
- <div>
|
|
|
|
- <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel"
|
|
|
|
- :key="index">
|
|
|
|
-
|
|
|
|
- <a-col :span="6">
|
|
|
|
- <a-select placeholder="选择查询字段" v-model="item.field" @select="(val,option)=>handleSelected(option,item)">
|
|
|
|
- <a-select-option v-for="(f,fIndex) in fieldList" :key=" 'field'+fIndex" :value="f.value"
|
|
|
|
- :data-type="f.type">{{ f.text }}
|
|
|
|
- </a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </a-col>
|
|
|
|
-
|
|
|
|
- <a-col :span="6">
|
|
|
|
- <a-select placeholder="选择匹配规则" v-model="item.rule">
|
|
|
|
- <a-select-option value="eq">等于</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-option value="right_like">以..开始</a-select-option>
|
|
|
|
- <a-select-option value="left_like">以..结尾</a-select-option>
|
|
|
|
- <a-select-option value="like">包含</a-select-option>
|
|
|
|
- <a-select-option value="in">在...中</a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </a-col>
|
|
|
|
-
|
|
|
|
- <a-col :span="6">
|
|
|
|
- <j-date v-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期"></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"></j-date>
|
|
|
|
- <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 :span="6">
|
|
|
|
- <a-button @click="handleAdd" icon="plus"></a-button>
|
|
|
|
- <a-button @click="handleDel( index )" icon="minus"></a-button>
|
|
|
|
- </a-col>
|
|
|
|
-
|
|
|
|
- </a-row>
|
|
|
|
- </div>
|
|
|
|
- </a-form>
|
|
|
|
|
|
+ <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-spin>
|
|
- </a-modal>
|
|
|
|
|
|
+
|
|
|
|
+ <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>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
|
- import JDate from '@/components/jeecg/JDate.vue';
|
|
|
|
|
|
+ import moment from 'moment'
|
|
|
|
+ import * as utils from '@/utils/util'
|
|
|
|
+ import { mixinDevice } from '@/utils/mixin'
|
|
|
|
+ import JDate from '@/components/jeecg/JDate.vue'
|
|
|
|
+ import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
|
|
|
|
+ import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
|
|
|
+ import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
|
|
|
|
+ import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: 'JSuperQuery',
|
|
name: 'JSuperQuery',
|
|
- components: {
|
|
|
|
- ACol,
|
|
|
|
- JDate
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- visible: false,
|
|
|
|
- confirmLoading: false,
|
|
|
|
- queryParamsModel: [{}]
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ mixins: [mixinDevice],
|
|
|
|
+ components: { JAreaLinkage, JMultiSelectTag, JDate, JSelectDepart, JSelectMultiUser },
|
|
props: {
|
|
props: {
|
|
- /* fieldList:[{value:'',text:'',type:''}]
|
|
|
|
- * type:date datetime int number string
|
|
|
|
|
|
+ /*
|
|
|
|
+ fieldList: [{
|
|
|
|
+ value:'',
|
|
|
|
+ text:'',
|
|
|
|
+ type:'',
|
|
|
|
+ dictCode:'' // 只要 dictCode 有值,无论 type 是什么,都显示为字典下拉框
|
|
|
|
+ }]
|
|
|
|
+ type:date datetime int number string
|
|
* */
|
|
* */
|
|
fieldList: {
|
|
fieldList: {
|
|
type: Array,
|
|
type: Array,
|
|
@@ -96,62 +232,409 @@
|
|
type: String,
|
|
type: String,
|
|
required: false,
|
|
required: false,
|
|
default: 'handleSuperQuery'
|
|
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: {
|
|
methods: {
|
|
show() {
|
|
show() {
|
|
- if (!this.queryParamsModel || this.queryParamsModel.length == 0) {
|
|
|
|
- this.queryParamsModel = [{}]
|
|
|
|
|
|
+ if (!this.queryParamsModel || this.queryParamsModel.length === 0) {
|
|
|
|
+ this.resetLine()
|
|
}
|
|
}
|
|
- this.visible = true;
|
|
|
|
|
|
+ this.visible = true
|
|
},
|
|
},
|
|
handleOk() {
|
|
handleOk() {
|
|
- console.log("---高级查询参数--->", this.queryParamsModel)
|
|
|
|
- if (!this.isNullArray()) {
|
|
|
|
- this.$emit(this.callback, this.queryParamsModel)
|
|
|
|
|
|
+ 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 {
|
|
} else {
|
|
- this.$emit(this.callback)
|
|
|
|
|
|
+ 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() {
|
|
handleCancel() {
|
|
this.close()
|
|
this.close()
|
|
},
|
|
},
|
|
close() {
|
|
close() {
|
|
- this.$emit('close');
|
|
|
|
- this.visible = false;
|
|
|
|
|
|
+ this.$emit('close')
|
|
|
|
+ this.visible = false
|
|
},
|
|
},
|
|
handleAdd() {
|
|
handleAdd() {
|
|
- this.queryParamsModel.push({});
|
|
|
|
|
|
+ this.addNewLine()
|
|
|
|
+ },
|
|
|
|
+ addNewLine() {
|
|
|
|
+ this.queryParamsModel.push({ rule: 'eq' })
|
|
|
|
+ },
|
|
|
|
+ resetLine() {
|
|
|
|
+ this.superQueryFlag = false
|
|
|
|
+ this.queryParamsModel = []
|
|
|
|
+ this.addNewLine()
|
|
},
|
|
},
|
|
handleDel(index) {
|
|
handleDel(index) {
|
|
-
|
|
|
|
- this.queryParamsModel.splice(index, 1);
|
|
|
|
- this.$message.warning("请关闭后重新打开")
|
|
|
|
|
|
+ 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)
|
|
},
|
|
},
|
|
- handleSelected(option, item) {
|
|
|
|
- item['type'] = option.data.attrs['data-type']
|
|
|
|
|
|
+ handleOpen() {
|
|
|
|
+ this.show()
|
|
},
|
|
},
|
|
handleReset() {
|
|
handleReset() {
|
|
- this.queryParamsModel = [{}]
|
|
|
|
- this.$emit(this.callback)
|
|
|
|
|
|
+ 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
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- isNullArray() {
|
|
|
|
|
|
+ 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 (!this.queryParamsModel || this.queryParamsModel.length == 0) {
|
|
|
|
|
|
+ if (!array || array.length === 0) {
|
|
return true
|
|
return true
|
|
}
|
|
}
|
|
- if (this.queryParamsModel.length == 1) {
|
|
|
|
- let obj = this.queryParamsModel[0]
|
|
|
|
- if (!obj.field || !obj.val || !obj.rule) {
|
|
|
|
|
|
+ if (array.length === 1) {
|
|
|
|
+ let obj = array[0]
|
|
|
|
+ if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
|
|
return true
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return false;
|
|
|
|
- }
|
|
|
|
|
|
+ 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>
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
|
|
|
+<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>
|
|
</style>
|