Jeecg-Boot 2.2.0 版本发布 | 重磅升级

ant-design-vue-jeecg/src/components/jeecg/JSuperQuery.vue

@@ -1,31 +1,37 @@
 <template>
 <div class="j-super-query-box">
 
-  <div @click="visible=true">
-    <slot>
-      <a-tooltip v-if="superQueryFlag" :mouseLeaveDelay="0.2">
-        <template slot="title">
-          <span>已有高级查询条件生效</span>
-          <a-divider type="vertical"/>
-          <a @click="handleReset">清空</a>
-        </template>
-        <a-button type="primary">
-          <a-icon type="appstore" theme="twoTone" :spin="true"></a-icon>
+  <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-tooltip>
-      <a-button v-else type="primary" icon="filter" @click="visible=true">高级查询</a-button>
-    </slot>
-  </div>
+        <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>
 
-  <a-modal
+  <j-modal
     title="高级查询构造器"
     :width="1000"
     :visible="visible"
     @cancel="handleCancel"
     :mask="false"
+    :fullscreen="izMobile"
     class="j-super-query-modal"
-    style="top:5%;max-height: 95%;">
+    style="top:5%;max-height: 95%;"
+  >
 
     <template slot="footer">
       <div style="float: left">
@@ -40,7 +46,7 @@
       <a-row>
         <a-col :sm="24" :md="24-5">
 
-          <a-empty v-if="queryParamsModel.length === 0">
+          <a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
             <div slot="description">
               <span>没有任何查询条件</span>
               <a-divider type="vertical"/>
@@ -50,16 +56,20 @@
 
           <a-form v-else layout="inline">
 
-            <a-form-item label="过滤条件匹配" style="margin-bottom: 12px;">
-              <a-select v-model="selectValue" :getPopupContainer="node=>node.parentNode">
-                <a-select-option value="and">AND（所有条件都要求匹配）</a-select-option>
-                <a-select-option value="or">OR（条件中的任意一个匹配）</a-select-option>
-              </a-select>
-            </a-form-item>
+            <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 :span="8">
+              <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
                 <a-tree-select
                   showSearch
                   v-model="item.field"
@@ -75,22 +85,22 @@
                 </a-tree-select>
               </a-col>
 
-              <a-col :span="4">
-                <a-select placeholder="匹配规则" v-model="item.rule" :getPopupContainer="node=>node.parentNode">
+              <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-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="8">
+              <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
                 <template v-if="item.dictCode">
                   <template v-if="item.type === 'table-dict'">
                     <j-popup
@@ -101,10 +111,14 @@
                       :destFields="item.dictCode"
                     ></j-popup>
                   </template>
-                  <j-dict-select-tag v-else v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
+                  <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'"
+                  v-else-if="item.type === 'select-user' || item.type === 'sel_user'"
                   v-model="item.val"
                   :buttons="false"
                   :multiple="false"
@@ -112,20 +126,34 @@
                   :returnKeys="['id', item.customReturnField || 'username']"
                 />
                 <j-select-depart
-                  v-else-if="item.type === '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="请选择"/>
+                <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 :span="4">
+              <a-col :md="4" :xs="0" style="margin-bottom: 12px;">
+                <a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
+                <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>&nbsp;
                 <a-button @click="handleDel( index )" icon="minus"></a-button>
               </a-col>
@@ -142,14 +170,14 @@
               保存的查询
             </div>
 
-            <a-empty v-if="treeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
+            <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="treeData"
+              :treeData="saveTreeData"
+              :selectedKeys="[]"
               @select="handleTreeSelect"
-              @rightClick="handleTreeRightClick"
             >
             </a-tree>
           </a-card>
@@ -165,19 +193,24 @@
       <a-input v-model="prompt.value"></a-input>
     </a-modal>
 
-  </a-modal>
+  </j-modal>
 </div>
 </template>
 
 <script>
+  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 {
     name: 'JSuperQuery',
-    components: { JDate, JSelectDepart, JSelectMultiUser },
+    mixins: [mixinDevice],
+    components: { JAreaLinkage, JMultiSelectTag, JDate, JSelectDepart, JSelectMultiUser },
     props: {
       /*
        fieldList: [{
@@ -208,14 +241,16 @@
       },
 
       // 保存查询条件的唯一 code，通过该 code 区分
+      // 默认为 null，代表以当前路由全路径为区分Code
       saveCode: {
         type: String,
-        default: 'testSaveCode'
+        default: null
       }
 
     },
     data() {
       return {
+        moment,
         fieldTreeData: [],
 
         prompt: {
@@ -224,26 +259,40 @@
         },
 
         visible: false,
-        queryParamsModel: [{}],
+        queryParamsModel: [],
         treeIcon: <a-icon type="file-text"/>,
-        treeData: [],
+        // 保存查询条件的treeData
+        saveTreeData: [],
         // 保存查询条件的前缀名
         saveCodeBefore: 'JSuperQuerySaved_',
-        selectValue: 'and',
-        superQueryFlag: false
+        // 查询类型，过滤条件匹配（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 变化时，重新查询已保存的条件
-      saveCode: {
+      fullSaveCode: {
         immediate: true,
-        handler(val) {
-          let list = this.$ls.get(this.saveCodeBefore + val)
+        handler() {
+          let list = this.$ls.get(this.fullSaveCode)
           if (list instanceof Array) {
-            this.treeData = list.map(item => {
-              item.icon = this.treeIcon
-              return item
-            })
+            this.saveTreeData = list.map(i => this.renderSaveTreeData(i))
           }
         }
       },
@@ -280,25 +329,35 @@
 
     methods: {
       show() {
-        if (!this.queryParamsModel || this.queryParamsModel.length == 0) {
-          this.queryParamsModel = [{}]
+        if (!this.queryParamsModel || this.queryParamsModel.length === 0) {
+          this.resetLine()
         }
         this.visible = true
       },
       handleOk() {
         if (!this.isNullArray(this.queryParamsModel)) {
           let event = {
-            matchType: this.selectValue,
-            params: this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
+            matchType: this.matchType,
+            params: this.removeEmptyObject(this.queryParamsModel)
           }
-          console.log('---高级查询参数--->', event)
-          this.emitCallback(event.params, event.matchType)
+          // 移动端模式下关闭弹窗
+          if (this.izMobile) {
+            this.visible = false
+          }
+          this.emitCallback(event)
         } else {
-          this.emitCallback()
+          this.$message.warn("不能查询空条件")
         }
       },
-      emitCallback(params, matchType) {
-        this.superQueryFlag = !!params
+      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() {
@@ -309,27 +368,40 @@
         this.visible = false
       },
       handleAdd() {
-        this.queryParamsModel.push({})
+        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 } = node.dataRef
+        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.superQueryFlag = false
-        this.queryParamsModel = [{}]
+        this.resetLine()
         this.emitCallback()
       },
       handleSave() {
-        let queryParams = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
+        let queryParams = this.removeEmptyObject(this.queryParamsModel)
         if (this.isNullArray(queryParams)) {
           this.$message.warning('空条件不能保存')
         } else {
@@ -338,56 +410,65 @@
         }
       },
       handlePromptOk() {
-
         let { value } = this.prompt
-        // 判断有没有重名
-
-        let filterList = this.treeData.filter(i => i.title === value)
+        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 = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
+              filterList[0].records = records
               this.saveToLocalStore()
               this.$message.success('保存成功')
             }
           })
         } else {
+          // 没有重名的，直接添加
           this.prompt.visible = false
-          this.treeData.push({
+          // 添加到树列表中
+          this.saveTreeData.push(this.renderSaveTreeData({
             title: value,
-            icon: this.treeIcon,
-            records: this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
-          })
+            matchType: this.matchType,
+            records: records
+          }))
+          // 保存到 LocalStore
           this.saveToLocalStore()
           this.$message.success('保存成功')
         }
-
-
       },
       handleTreeSelect(idx, event) {
         if (event.selectedNodes[0]) {
-          this.queryParamsModel = utils.cloneObject(event.selectedNodes[0].data.props.records)
+          let { matchType, records } = event.selectedNodes[0].data.props
+          // 将保存的matchType取出，兼容旧数据，如果没有保存就还是使用原来的
+          this.matchType = matchType || this.matchType
+          this.queryParamsModel = utils.cloneObject(records)
         }
       },
-      handleTreeRightClick(args) {
+      handleRemoveSaveTreeItem(event, vNode) {
+        // 阻止事件冒泡
+        event.stopPropagation()
+
         this.$confirm({
           content: '是否删除当前查询？',
           onOk: () => {
-            let { node: { eventKey } } = args
-            this.treeData.splice(Number.parseInt(eventKey.substring(2)), 1)
+            let { eventKey } = vNode
+            this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1)
             this.saveToLocalStore()
-            this.$message.success('删除成功')
           },
         })
       },
 
       // 将查询保存到 LocalStore 里
       saveToLocalStore() {
-        this.$ls.set(this.saveCodeBefore + this.saveCode, this.treeData.map(item => {
-          return { title: item.title, records: item.records }
-        }))
+        let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records }))
+        this.$ls.set(this.fullSaveCode, saveValue)
       },
 
       isNullArray(array) {
@@ -404,18 +485,70 @@
         return false
       },
       // 去掉数组中的空对象
-      removeEmptyObject(array) {
+      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 {
-            // 去掉特殊属性
-            delete item.options
+            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>
@@ -428,42 +561,76 @@
 
   .j-super-query-modal {
 
-    .j-super-query-history-card /deep/ {
-      .ant-card-body,
-      .ant-card-head-title {
+    .j-super-query-history-card {
+      /deep/ .ant-card-body,
+      /deep/ .ant-card-head-title {
         padding: 0;
       }
 
-      .ant-card-head {
+      /deep/ .ant-card-head {
         padding: 4px 8px;
         min-height: initial;
       }
     }
 
-    .j-super-query-history-empty /deep/ {
-      .ant-empty-image {
+    .j-super-query-history-empty {
+      /deep/ .ant-empty-image {
         height: 80px;
         line-height: 80px;
         margin-bottom: 0;
       }
 
-      img {
+      /deep/ img {
         width: 80px;
         height: 65px;
       }
 
-      .ant-empty-description {
+      /deep/ .ant-empty-description {
         color: #afafaf;
         margin: 8px 0;
       }
     }
 
-    .j-super-query-history-tree /deep/ {
-      .ant-tree-switcher {
+    .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;
       }
 
-      .ant-tree-node-content-wrapper {
+      /deep/ .ant-tree-node-content-wrapper {
         width: 100%;
       }
     }