修改

src/views/newQuery/index.vue

@@ -6,7 +6,7 @@
           <div class="title">高级查询</div>
           <div class="btns">
             <el-scrollbar ref="scrollContainer" :vertical="false">
-              <el-button v-for="(item,index) in queryItems" :key="index" @click="handleClick(item)" size="mini" plain type="primary">
+              <el-button v-for="(item,index) in queryItems" :key="index" @click="handleClick(item,index)" :class="activeIndex == index ? 'active':''" size="mini" plain type="primary">
                 <span class="btnName">{{ item.name }}</span>
                 <span @click.stop="handleRemove(item)" class="btnIcon"><i class="el-icon-close"></i></span>
               </el-button>
@@ -39,14 +39,14 @@
       <div class="dialog-content">
         <div class="title">查询条件保存</div>
         <div class="contents">
-          <el-form ref="form" :model="formObj" label-width="80px">
-            <el-form-item label="条件名称">
+          <el-form ref="form" :model="formObj" :rules="rules" label-width="80px">
+            <el-form-item prop="name" label="条件名称">
               <el-input clearable v-model="formObj.name" placeholder="请输入条件名称"></el-input>
             </el-form-item>
           </el-form>
         </div>
         <div class="foot right">
-          <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
+          <el-button size="medium" @click="handleOk('form')" class="r24" type="primary">确定</el-button>
           <el-button @click="diaFlag = false" size="medium">取消</el-button>
         </div>
       </div>
@@ -88,6 +88,8 @@ export default {
       formObj: {
         name: ''
       },
+      activeIndex: null,
+      activeNames: [],
       queryArrs: [],
       nameArrs: [],
       rmObj: {},
@@ -97,7 +99,13 @@ export default {
       tableTag: {},
       clkItem: {},
       clkArrs: [],
-      queryItems: JSON.parse(localStorage.getItem('localItems')) ?? []
+      queryItems: JSON.parse(localStorage.getItem('localItems')) ?? [],
+      rules: {
+        name: [
+          { required: true, message: '请输入条件名称', trigger: 'blur' },
+        ],
+      },
+      nums: 1
     }
   },
   computed: {
@@ -151,17 +159,59 @@ export default {
       this.$refs.searchTable.addParamsHandler()
     },
     //历史查询条件点击
-    handleClick (item) {
-      this.flag = true
+    handleClick (item, index) {
       const { name, value } = item
-      this.formObj.name = name
-      this.clkItem = item
-      setTimeout(() => {
-        this.dataQuery = value
-        this.tableTag = {
-          filter: value
+      this.activeNames.push(name)
+      if (this.activeNames.length == 1) {
+        item.flag = true
+        this.activeIndex = index
+        this.flag = true
+        this.formObj.name = name
+        this.clkItem = item
+        setTimeout(() => {
+          this.dataQuery = value
+          this.tableTag = {
+            filter: value
+          }
+        }, 50);
+      } else {
+        const arrs = this.activeNames
+        const len = this.activeNames.length
+        const [a1, a2] = [arrs[len - 2], arrs[len - 1]]
+        if (a1 == a2) {
+          item.flag = !item.flag
+          if (item.flag) {
+            this.activeIndex = index
+            this.flag = true
+            this.formObj.name = name
+            this.clkItem = item
+            setTimeout(() => {
+              this.dataQuery = value
+              this.tableTag = {
+                filter: value
+              }
+            }, 50);
+          } else {
+            this.activeIndex = null
+            this.flag = false
+            this.formObj.name = ''
+            this.clkItem = {}
+            this.dataQuery = []
+          }
+        } else {
+          item.flag = true
+          this.activeIndex = index
+          this.flag = true
+          this.formObj.name = name
+          this.clkItem = item
+          setTimeout(() => {
+            this.dataQuery = value
+            this.tableTag = {
+              filter: value
+            }
+          }, 50);
         }
-      }, 50);
+      }
     },
     //table导出
     handleDown () {
@@ -203,50 +253,57 @@ export default {
       this.$refs.searchTable?.advancedQueryHandler()
     },
     //确定-保存条件
-    handleOk () {
-      const localDatas = this.getLocalData()
-      if (Object.keys(this.clkItem).length) {
-        this.$refs.searchTable.advancedQueryHandler()
-        const { name } = this.clkItem
-        const forName = this.formObj.name
-        const newDatas = {}
-        localDatas.filter((item, index) => {
-          if (item.name === name) {
-            newDatas.index = index
-            newDatas.values = this.clkArrs.length ? this.clkArrs : item
+    handleOk (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const localDatas = this.getLocalData()
+          if (Object.keys(this.clkItem).length) {
+            this.$refs.searchTable.advancedQueryHandler()
+            const { name } = this.clkItem
+            const forName = this.formObj.name
+            const newDatas = {}
+            localDatas.filter((item, index) => {
+              if (item.name === name) {
+                newDatas.index = index
+                newDatas.values = this.clkArrs.length ? this.clkArrs : item
+              }
+            })
+            if (Array.isArray(newDatas.values)) {
+              localDatas[newDatas.index].name = forName
+              localDatas[newDatas.index].value = newDatas.values
+            } else {
+              newDatas['values'].name = forName
+              localDatas[newDatas.index] = newDatas.values
+            }
+            this.queryItems = localDatas
+          } else {
+            let datas = []
+            const name = this.formObj.name
+            this.nameArrs.push(name)
+            const nameIndex = this.nameArrs.slice(-5)
+            const arrs = _.cloneDeep(this.queryArrs).slice(-5)
+            arrs.forEach((item, index) => {
+              const obj = {
+                name: nameIndex[index],
+                value: item,
+                // userid: getToken('userid')
+              }
+              datas.push(obj)
+            })
+            if (localDatas && localDatas.length) {
+              datas = [...localDatas, ...datas]
+            }
+            const caps = _.uniqBy(datas, 'name')
+            this.queryItems = caps.slice(-5)
+            this.formObj.name = ''
           }
-        })
-        if (Array.isArray(newDatas.values)) {
-          localDatas[newDatas.index].name = forName
-          localDatas[newDatas.index].value = newDatas.values
+          localStorage.setItem('localItems', JSON.stringify(this.queryItems))
+          this.diaFlag = false
         } else {
-          newDatas['values'].name = forName
-          localDatas[newDatas.index] = newDatas.values
-        }
-        this.queryItems = localDatas
-      } else {
-        let datas = []
-        const name = this.formObj.name
-        this.nameArrs.push(name)
-        const nameIndex = this.nameArrs.slice(-5)
-        const arrs = _.cloneDeep(this.queryArrs).slice(-5)
-        arrs.forEach((item, index) => {
-          const obj = {
-            name: nameIndex[index],
-            value: item,
-            // userid: getToken('userid')
-          }
-          datas.push(obj)
-        })
-        if (localDatas && localDatas.length) {
-          datas = [...localDatas, ...datas]
+          console.log('error submit!!');
+          return false;
         }
-        const caps = _.uniqBy(datas, 'name')
-        this.queryItems = caps.slice(-5)
-        this.formObj.name = ''
-      }
-      localStorage.setItem('localItems', JSON.stringify(this.queryItems))
-      this.diaFlag = false
+      });
     },
     //确定-删除
     tableRemove () {
@@ -313,6 +370,18 @@ export default {
     .btns {
       max-width: 750px;
       white-space: nowrap;
+      .active {
+        background: #409eff !important;
+        border-color: #409eff !important;
+        color: #fff !important;
+      }
+      .el-button {
+        &:focus {
+          color: #409eff;
+          background: #ecf5ff;
+          border-color: #b3d8ff;
+        }
+      }
       .btnIcon {
         margin-left: 15px;
       }