修改

src/views/newQuery/components/search.vue

@@ -2,131 +2,59 @@
   <div class="advance">
     <!--高级查询-->
     <div class="advance-wrapper">
-      <el-form
-        ref="paramsForm"
-        class="query-params"
-        :model="paramsForm"
-        :rules="paramsForm.validateRules"
-      >
+      <el-form ref="paramsForm" class="query-params" :model="paramsForm" :rules="paramsForm.validateRules">
         <el-row class="query-params-wrapper">
-          <el-col
-            v-for="(row, rowIndex) in paramsForm.params"
-            :key="rowIndex"
-            :span="12"
-          >
-            <el-form-item
-              v-for="(col, colIndex) in paramsTableCols"
-              :key="colIndex"
-              :prop="'params.' + rowIndex + '.' + col.prop"
-              :rules="paramsForm.validateRules[col.prop]"
-            >
-              <template
-                v-if="
+          <el-col v-for="(row, rowIndex) in paramsForm.params" :key="rowIndex" :span="12">
+            <el-form-item v-for="(col, colIndex) in paramsTableCols" :key="colIndex" :prop="'params.' + rowIndex + '.' + col.prop" :rules="paramsForm.validateRules[col.prop]">
+              <template v-if="
                   col.prop === 'comparisonOperator' ||
                   col.inputType[rowIndex] === 'select'
-                "
-              >
-                <el-select
-                  v-model="row[col.prop]"
-                  placeholder="请选择"
-                  @change="
+                ">
+                <el-select v-model="row[col.prop]" placeholder="请选择" @change="
                     value => {
                       selectChangeHandler(value, rowIndex, colIndex)
                     }
-                  "
-                >
-                  <el-option
-                    v-for="(option, i) in col.options[rowIndex]"
-                    :key="i"
-                    :value="option.value"
-                    :label="option.label"
-                  />
+                  ">
+                  <el-option v-for="(option, i) in col.options[rowIndex]" :key="i" :value="option.value" :label="option.label" />
                 </el-select>
               </template>
               <template v-else-if="col.inputType === 'select'">
-                <el-select
-                  v-model="row[col.prop]"
-                  placeholder="请选择"
-                  @change="
+                <el-select v-model="row[col.prop]" placeholder="请选择" @change="
                     value => {
                       selectChangeHandler(value, rowIndex, colIndex)
                     }
-                  "
-                >
-                  <el-option
-                    v-for="(option, i) in col.options"
-                    :key="i"
-                    :value="option.value"
-                    :label="option.label"
-                  />
+                  ">
+                  <el-option v-for="(option, i) in col.options" :key="i" :value="option.value" :label="option.label" />
                 </el-select>
               </template>
-              <template
-                v-else-if="
+              <template v-else-if="
                   ['varchar', 'text', 'longtext'].includes(
                     col.inputType[rowIndex]
                   )
-                "
-              >
-                <el-input
-                  v-model="row[col.prop]"
-                  placeholder="请输入"
-                  :disabled="
+                ">
+                <el-input v-model="row[col.prop]" placeholder="请输入" :disabled="
                     col.prop === 'paramValue' && paramsForm.disabled[rowIndex]
-                  "
-                />
+                  " />
               </template>
               <template v-else-if="col.inputType[rowIndex] === 'number'">
-                <el-input
-                  v-model="row[col.prop]"
-                  placeholder="请输入"
-                  :disabled="
+                <el-input v-model="row[col.prop]" placeholder="请输入" :disabled="
                     col.prop === 'paramValue' && paramsForm.disabled[rowIndex]
-                  "
-                  @keydown.native="inputHold(row[col.prop])"
-                  @input="inputLimit(row[col.prop], rowIndex)"
-                  @blur="inputFix(row[col.prop], rowIndex)"
-                />
+                  " @keydown.native="inputHold(row[col.prop])" @input="inputLimit(row[col.prop], rowIndex)" @blur="inputFix(row[col.prop], rowIndex)" />
               </template>
               <template v-else-if="col.inputType[rowIndex] === 'date'">
-                <el-date-picker
-                  v-model="row[col.prop]"
-                  type="date"
-                  format="yyyy-MM-dd"
-                  value-format="yyyy-MM-dd"
-                  placeholder="请选择"
-                  :clearable="false"
-                />
+                <el-date-picker v-model="row[col.prop]" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false" />
               </template>
               <template v-else-if="col.inputType[rowIndex] === 'datetime'">
-                <el-date-picker
-                  v-model="row[col.prop]"
-                  type="datetime"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  placeholder="请选择"
-                  :clearable="false"
-                />
+                <el-date-picker v-model="row[col.prop]" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :clearable="false" />
               </template>
               <template v-else-if="col.inputType === 'delete'">
-                <i
-                  class="clickable-delete el-icon-error"
-                  @click="deleteParam(rowIndex)"
-                />
+                <i class="clickable-delete el-icon-error" @click="deleteParam(rowIndex)" />
               </template>
               <template v-else-if="col.inputType === 'connector'">
-                <div
-                  v-if="row.connector"
-                  class="clickable-toggle"
-                  @click="toggle(rowIndex)"
-                >
+                <div v-if="row.connector" class="clickable-toggle" @click="toggle(rowIndex)">
                   {{ row.connector === 'and' ? '并且' : '或者' }}
                 </div>
-                <div
-                  v-else
-                  class="clickable-add"
-                  @click="addParamsHandler"
-                >
+                <div v-else class="clickable-add" @click="addParamsHandler">
                   <div class="clickable-wrapper">
                     <i class="el-icon-plus" />
                   </div>
@@ -195,7 +123,7 @@ export default {
       default: () => [],
     },
   },
-  data() {
+  data () {
     return {
       queryContent: [],
       flightDate: new Array(2).fill(parseTime(new Date(), '{y}-{m}-{d}')),
@@ -259,7 +187,7 @@ export default {
   },
   watch: {
     dataQuery: {
-      handler(arr) {
+      handler (arr) {
         if (arr && arr.length) {
           const datas = []
           const types = []
@@ -300,7 +228,7 @@ export default {
       immediate: true,
     },
     'paramsForm.params': {
-      handler(params) {
+      handler (params) {
         const { length } = params
         params[length - 1].connector = ''
         if (params[length - 2] && !params[length - 2].connector) {
@@ -309,11 +237,11 @@ export default {
       },
     },
   },
-  mounted() {
+  mounted () {
     this.queryHandler()
   },
   methods: {
-    queryHandler() {
+    queryHandler () {
       const colDatas = this.authMsg
       if (colDatas && colDatas.length) {
         const columns = colDatas.filter(item => String(item.is_search) === '1')
@@ -324,10 +252,10 @@ export default {
         this.addParamsHandler()
       }
     },
-    sendColData() {
+    sendColData () {
       this.$emit('getColData', this.queryContent)
     },
-    addParamsHandler() {
+    addParamsHandler () {
       this.paramsTableCols[2].inputType.push('text')
       this.paramsForm.params.push({
         paramKey: '',
@@ -336,11 +264,15 @@ export default {
         connector: '',
       })
     },
-    selectChangeHandler(value, rowIndex, colIndex) {
+    selectChangeHandler (value, rowIndex, colIndex) {
       if (colIndex === 0) {
         // const datas = this.tableColMunt.filter(item => item.columnName == value)
         const { dataType, options } = this.columnSet[value]
         // const { dataType, options } = datas[0]
+        //下拉框发生改变清空之前的数据
+        this.paramsForm.params.forEach(item => {
+          item.paramValue = ''
+        })
         if (dataType === 'date') {
           this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
             .slice(0, 5)
@@ -379,20 +311,20 @@ export default {
         }
       }
     },
-    inputHold(value) {
+    inputHold (value) {
       this.checkValue = value
     },
-    inputLimit(value, rowIndex) {
+    inputLimit (value, rowIndex) {
       if (!/^[\-|\+]?((([1-9][0-9]*)|0)(\.[0-9]{0,2})?)?$/.test(value)) {
         this.paramsForm.params[rowIndex].paramValue = this.checkValue
       }
     },
-    inputFix(value, rowIndex) {
+    inputFix (value, rowIndex) {
       if (value?.at(-1) === '.') {
         this.paramsForm.params[rowIndex].paramValue = value.slice(0, -1)
       }
     },
-    advancedQueryHandler() {
+    advancedQueryHandler () {
       try {
         this.$refs['paramsForm'].validate(valid => {
           if (!valid) {
@@ -443,17 +375,17 @@ export default {
         error.message && this.$message.error(error.message)
       }
     },
-    deleteParam(rowIndex) {
+    deleteParam (rowIndex) {
       this.paramsTableCols[2].inputType.splice(rowIndex, 1)
       this.paramsForm.params.splice(rowIndex, 1)
       this.paramsForm.disabled.splice(rowIndex, 1)
     },
-    toggle(rowIndex) {
+    toggle (rowIndex) {
       const { connector } = this.paramsForm.params[rowIndex]
       this.paramsForm.params[rowIndex].connector =
         connector === 'and' ? 'or' : 'and'
     },
-    async getColumnSet(columnSet) {
+    async getColumnSet (columnSet) {
       const reflect = {}
       columnSet.forEach(async column => {
         if (!this.columnSet[column.columnName]) {
@@ -542,7 +474,7 @@ export default {
 
         background: transparent;
         color: #101116;
-        font-family: Helvetica, 'Microsoft YaHei';
+        font-family: Helvetica, "Microsoft YaHei";
       }
       &.is-error .el-input__inner::-webkit-input-placeholder {
         visibility: hidden;
@@ -550,11 +482,11 @@ export default {
 
       .el-select {
         .el-icon-arrow-up::before {
-          content: '\e78f';
+          content: "\e78f";
           color: #101116;
         }
         .el-icon-arrow-down::before {
-          content: '\e790';
+          content: "\e790";
           color: #101116;
         }
       }