高级查询2修改

src/views/newQuery/components/search.vue

@@ -1,225 +1,247 @@
 <template>
   <div class="advance">
     <!--高级查询-->
-    <div class="content">
-      <!-- <div class="btns">
-        <el-button type="primary" size="small" plain @click="addParamsHandler">新增</el-button>
-        <el-button type="primary" size="small" @click="advancedQueryHandler(false)">查询</el-button>
-      </div> -->
-      <el-form ref="paramsForm" class="query-params" :model="paramsForm" :rules="paramsForm.validateRules" :inline="true">
-        <el-table :data="paramsForm.params" height="165" border stripe>
-          <el-table-column type="index" label="行号" :index="index => index + 1" align="center" width="60" />
-          <el-table-column v-for="(col, index) in paramsTableCols" :key="index" :label="col.label" :align="col.align || 'center'">
-            <template slot-scope="scope">
-              <el-form-item :prop="'params.' + scope.$index + '.' + col.prop" :rules="paramsForm.validateRules[col.prop]">
-                <template v-if="col.prop === 'comparisonOperator' || col.inputType[scope.$index] === 'select'">
-                  <el-select v-model="scope.row[col.prop]" placeholder="请选择" @change="
-                          value => {
-                            selectChangeHandler(value, scope.$index, index)
-                          }
-                        ">
-                    <el-option v-for="(option, index) in col.options[scope.$index]" :key="index" :value="option.value" :label="option.label" />
-                  </el-select>
-                </template>
-                <template v-else-if="col.inputType === 'select'">
-                  <el-select v-model="scope.row[col.prop]" placeholder="请选择" @change="
-                          value => {
-                            selectChangeHandler(value, scope.$index, index)
-                          }
-                        ">
-                    <el-option v-for="(option, index) in col.options" :key="index" :value="option.value" :label="option.label" />
-                  </el-select>
-                </template>
-                <template v-else-if="['varchar', 'text', 'longtext'].includes(col.inputType[scope.$index])">
-                  <el-input v-model="scope.row[col.prop]" placeholder="请输入" :disabled="col.prop === 'paramValue' && paramsForm.disabled[scope.$index]" />
-                </template>
-                <template v-else-if="col.inputType[scope.$index] === 'number'">
-                  <el-input v-model="scope.row[col.prop]" placeholder="请输入" :disabled="col.prop === 'paramValue' && paramsForm.disabled[scope.$index]" @keydown.native="inputHold(scope.row[col.prop])" @input="inputLimit(scope.row[col.prop], scope.$index)" @blur="inputFix(scope.row[col.prop], scope.$index)" />
-                </template>
-                <template v-else-if="col.inputType[scope.$index] === 'date'">
-                  <el-date-picker v-model="scope.row[col.prop]" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false" :picker-options="datePickerOptions(scope.$index, index)" @change="
-                          value => {
-                            dateChangeHandler(value, scope.$index, index)
-                          }
-                        " />
-                </template>
-                <template v-else-if="col.inputType[scope.$index] === 'datetime'">
-                  <el-date-picker v-model="scope.row[col.prop]" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :clearable="false" />
-                </template>
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="80" align="center">
-            <template slot-scope="scope">
-              <el-popconfirm title="是否要删除这一行？" @confirm="deleteParam(scope.$index)">
-                <span slot="reference" class="clickable-delete">删除</span>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
+    <div class="advance-wrapper">
+      <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="
+                  col.prop === 'comparisonOperator' ||
+                  col.inputType[rowIndex] === 'select'
+                "
+              >
+                <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-select>
+              </template>
+              <template v-else-if="col.inputType === 'select'">
+                <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-select>
+              </template>
+              <template
+                v-else-if="
+                  ['varchar', 'text', 'longtext'].includes(
+                    col.inputType[rowIndex]
+                  )
+                "
+              >
+                <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="
+                    col.prop === 'paramValue' && paramsForm.disabled[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"
+                />
+              </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"
+                />
+              </template>
+              <template v-else-if="col.inputType === 'delete'">
+                <i
+                  class="clickable-delete el-icon-error"
+                  @click="deleteParam(rowIndex)"
+                />
+              </template>
+              <template v-else-if="col.inputType === 'toggle'">
+                <div
+                  class="clickable-toggle"
+                  @click="toggle(rowIndex)"
+                >
+                  {{ row.connector === 'and' ? '并且' : '或者' }}
+                </div>
+              </template>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </div>
   </div>
 </template>
 
 <script>
-import Search from '@/components/SearchWithTooltip'
-import SimpleTable from '@/components/SimpleTable'
-import Dialog from '@/layout/components/Dialog'
 import { parseTime } from '@/utils/index'
-import { Query } from '@/api/dataIntegration'
-import { throttledExportToExcel } from '@/utils/table'
 import { mapGetters } from 'vuex'
 import { formatOrder } from '@/utils/validate'
 const comparisonOperatorOptions = [
   {
     label: '小于等于',
-    value: '<='
+    value: '<=',
   },
   {
     label: '大于等于',
-    value: '>='
+    value: '>=',
   },
   {
     label: '小于',
-    value: '<'
+    value: '<',
   },
   {
     label: '大于',
-    value: '>'
+    value: '>',
   },
   {
     label: '等于',
-    value: '='
+    value: '=',
   },
   {
     label: '不等于',
-    value: '!='
+    value: '!=',
   },
   {
     label: '为空',
-    value: 'is Null'
+    value: 'is Null',
   },
   {
     label: '不为空',
-    value: 'is not Null'
+    value: 'is not Null',
   },
   {
     label: '包含',
-    value: 'like'
-  }
+    value: 'like',
+  },
 ]
 
 export default {
   name: 'AdvancedNew',
-  components: { Search, SimpleTable, Dialog },
   props: {
     tableColMunt: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     dataQuery: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
   },
-  data () {
+  data() {
     return {
-      queryString: '',
+      queryContent: [],
       flightDate: new Array(2).fill(parseTime(new Date(), '{y}-{m}-{d}')),
-      dateRangePickerOptions: {
-        onPick: this.dateRangePickHandler,
-        disabledDate: this.dateRangeDisabled
-      },
-      loading: false,
-      page: 0,
-      noMore: false,
-      tableCols: [],
-      tableData: [],
-      dialogFlag: false,
       paramsForm: {
         params: [],
         validateRules: {
-          paramKey: [{ required: true, message: '请选择项', trigger: ['change', ['change', 'blur']] }],
-          paramValue: [{ required: true, message: '请选择或输入值', trigger: ['change', 'blur'] }]
-        },
-        disabled: []
-      },
-      checkValue: '',
-      paramsTableCols: [
-        {
-          prop: 'leftBrackets',
-          label: '左括号',
-          inputType: 'select',
-          options: [
+          paramKey: [
             {
-              label: '(',
-              value: '('
+              required: true,
+              message: '请选择项',
+              trigger: ['change', 'blur'],
             },
+          ],
+          paramValue: [
             {
-              label: '((',
-              value: '(('
+              required: true,
+              message: '请选择或输入值',
+              trigger: ['change', 'blur'],
             },
-            {
-              label: '(((',
-              value: '((('
-            }
-          ]
+          ],
         },
+        disabled: [],
+      },
+      checkValue: '',
+      paramsTableCols: [
         {
           prop: 'paramKey',
-          label: '项',
+          // label: '项',
           inputType: 'select',
-          options: []
+          options: [],
         },
         {
           prop: 'comparisonOperator',
-          label: '比较符',
+          // label: '比较符',
           inputType: 'select',
-          options: new Array(2).fill(comparisonOperatorOptions.slice(0, 5).reverse())
+          options: new Array(2).fill(
+            comparisonOperatorOptions.slice(0, 5).reverse()
+          ),
         },
         {
           prop: 'paramValue',
-          label: '值',
-          inputType: ['date', 'date'],
-          options: []
+          // label: '值',
+          inputType: [],
+          options: [],
         },
         {
-          prop: 'rightBrackets',
-          label: '右括号',
-          inputType: 'select',
-          options: [
-            {
-              label: ')',
-              value: ')'
-            },
-            {
-              label: '))',
-              value: '))'
-            },
-            {
-              label: ')))',
-              value: ')))'
-            }
-          ]
+          prop: 'delete',
+          inputType: 'delete',
         },
         {
           prop: 'connector',
-          label: '连接',
-          inputType: 'select',
-          options: [
-            {
-              label: '并且',
-              value: 'and'
-            },
-            {
-              label: '或者',
-              value: 'or'
-            }
-          ]
-        }
+          // label: '连接',
+          inputType: 'toggle',
+        },
       ],
-      columnSet: {}
+      columnSet: {},
     }
   },
   computed: {
@@ -227,7 +249,7 @@ export default {
   },
   watch: {
     dataQuery: {
-      handler (arr) {
+      handler(arr) {
         if (arr && arr.length) {
           const datas = []
           const types = []
@@ -237,41 +259,42 @@ export default {
             } else {
               types.push('text')
             }
+            const paramValue = ['is Null', 'is not Null'].includes(
+              item.comparisonOperator
+            )
+              ? ' '
+              : item.value
             const obj = {
-              leftBrackets: item.left,
+              // leftBrackets: item.left,
               paramKey: item.column,
               comparisonOperator: item.comparator,
-              rightBrackets: item.right,
-              paramValue: item.value,
-              connector: item['connector']
+              // rightBrackets: item.right,
+              paramValue,
+              connector: item.connector,
             }
             datas.push(obj)
           })
           this.queryHandler()
           setTimeout(() => {
-            this.paramsTableCols[2].options = new Array(arr.length).fill(comparisonOperatorOptions.slice(0, 5).reverse())
-            this.paramsTableCols[3].inputType = types
+            this.paramsTableCols[1].options = new Array(arr.length).fill(
+              comparisonOperatorOptions.slice(0, 5).reverse()
+            )
+            this.paramsTableCols[2].inputType = types
             this.paramsForm.params = datas
-          }, 200);
+          }, 200)
         } else {
           this.paramsForm.params = []
         }
       },
       deep: true,
-      immediate: true
+      immediate: true,
     },
   },
-  mounted () {
+  mounted() {
     this.queryHandler()
   },
-  deactivated () {
-    this.loading = false
-  },
-  beforeDestroy () {
-    this.loading = false
-  },
   methods: {
-    queryHandler () {
+    queryHandler() {
       const colDatas = this.authMsg
       if (colDatas && colDatas.length) {
         const columns = colDatas.filter(item => item.is_search == 1)
@@ -279,620 +302,251 @@ export default {
         this.getColumnSet(datas)
       }
     },
-    dateRangePickHandler ({ maxDate, minDate }) {
-      if (!maxDate) {
-        this.pickedDate = minDate
-      } else {
-        this.pickedDate = null
-        this.paramsForm.params[0].paramValue = minDate
-        this.paramsForm.params[1].paramValue = maxDate
-      }
-    },
-    dateRangeDisabled (date) {
-      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
+    sendColData() {
+      this.$emit('getColData', this.queryContent)
     },
-    toOldAdvance () {
-      this.$router.push('/advance')
-    },
-    dialogShow () {
-      this.dialogFlag = true
-      this.$nextTick(() => {
-        this.dialogFocus()
-      })
-    },
-    dialogFocus () {
-      this.$refs['dialog'].focus()
-    },
-    dialogHide () {
-      this.$emit('dialogHide')
-    },
-    sendColData () {
-      this.$emit('getColData', this.queryString)
-    },
-    addParamsHandler () {
-      this.paramsTableCols[3].inputType.push('text')
+    addParamsHandler() {
+      this.paramsTableCols[2].inputType.push('text')
       this.paramsForm.params.push({
-        leftBrackets: '(',
         paramKey: '',
         comparisonOperator: '',
         paramValue: '',
-        rightBrackets: ')',
-        connector: 'and'
+        connector: 'and',
       })
     },
-    selectChangeHandler (value, rowIndex, colIndex) {
-      if (colIndex === 1) {
-        const datas = this.tableColMunt.filter(item => item.columnName == value)
+    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]
         if (dataType === 'date') {
-          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
-          this.paramsTableCols[3].inputType[rowIndex] = 'date'
+          this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
+            .slice(0, 5)
+            .reverse()
+          this.paramsTableCols[2].inputType[rowIndex] = 'date'
         } else if (dataType === 'datetime') {
-          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
-          this.paramsTableCols[3].inputType[rowIndex] = 'datetime'
+          this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
+            .slice(0, 5)
+            .reverse()
+          this.paramsTableCols[2].inputType[rowIndex] = 'datetime'
         } else if (options) {
-          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4, 5)
-          this.paramsTableCols[3].inputType[rowIndex] = 'select'
-          this.paramsTableCols[3].options[rowIndex] = options
+          this.paramsTableCols[1].options[rowIndex] =
+            comparisonOperatorOptions.slice(4, 5)
+          this.paramsTableCols[2].inputType[rowIndex] = 'select'
+          this.paramsTableCols[2].options[rowIndex] = options
           this.paramsForm.params[rowIndex].paramValue = ''
         } else if (dataType === 'number') {
-          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
-          this.paramsTableCols[3].inputType[rowIndex] = 'number'
+          this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
+            .slice(0, 5)
+            .reverse()
+          this.paramsTableCols[2].inputType[rowIndex] = 'number'
           this.paramsForm.params[rowIndex].paramValue = ''
         } else {
-          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4)
-          this.paramsTableCols[3].inputType[rowIndex] = 'text'
+          this.paramsTableCols[1].options[rowIndex] =
+            comparisonOperatorOptions.slice(4)
+          this.paramsTableCols[2].inputType[rowIndex] = 'text'
         }
-        this.paramsForm.params[rowIndex].comparisonOperator = this.paramsTableCols[2].options[rowIndex][0].value
-      } else if (colIndex === 2) {
+        this.paramsForm.params[rowIndex].comparisonOperator =
+          this.paramsTableCols[1].options[rowIndex][0].value
+      } else if (colIndex === 1) {
         if (['is Null', 'is not Null'].includes(value)) {
-          this.paramsForm.params[rowIndex].paramValue = ''
+          this.paramsForm.params[rowIndex].paramValue = ' '
           this.paramsForm.disabled[rowIndex] = true
         } else {
           this.paramsForm.disabled[rowIndex] = false
         }
       }
     },
-    datePickerOptions (rowIndex, colIndex) {
-      return rowIndex === 1 && colIndex === 3 ? { disabledDate: this.endDateDisabled } : {}
-    },
-    endDateDisabled (endDate) {
-      const startDate = new Date(this.paramsForm.params[0].paramValue)
-      endDate = new Date(endDate)
-      return (
-        startDate.getTime() >= endDate.getTime() + 24 * 60 * 60 * 1000 ||
-        startDate.getTime() < endDate.getTime() - 3 * 24 * 60 * 60 * 1000
-      )
-    },
-    dateChangeHandler (dateString, rowIndex, colIndex) {
-      if (colIndex !== 3) {
-        return
-      }
-      let startDate, endDate
-      if (rowIndex === 0) {
-        startDate = new Date(dateString)
-        endDate = new Date(this.paramsForm.params[1].paramValue)
-      } else if (rowIndex === 1) {
-        startDate = new Date(this.paramsForm.params[0].paramValue)
-        endDate = new Date(dateString)
-      }
-      if (startDate.getTime() >= endDate.getTime() + 24 * 60 * 60 * 1000) {
-        this.$message.warning('开始日期不能大于结束日期')
-        this.paramsForm.params[1].paramValue = ''
-      } else if (startDate.getTime() < endDate.getTime() - 3 * 24 * 60 * 60 * 1000) {
-        this.$message.warning('间隔日期不能超过三天')
-        this.paramsForm.params[1].paramValue = ''
-      } else {
-        this.flightDate = [this.paramsForm.params[0].paramValue, this.paramsForm.params[1].paramValue]
-      }
-    },
-    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 (singleJump) {
+    advancedQueryHandler() {
       try {
         this.$refs['paramsForm'].validate(valid => {
           if (!valid) {
             throw new Error()
           }
         })
-        const queryString = []
-        this.paramsForm.params.forEach(item => {
+        const queryContent = []
+        const params = this.paramsForm.params
+        const len = params.length
+        for (let i = 0; i < len; i++) {
+          const prev = params[i - 1]
+          const current = params[i]
+          const next = params[i + 1]
+          const value = ['is Null', 'is not Null'].includes(
+            current.comparisonOperator
+          )
+            ? ''
+            : current.paramValue
           const obj = {
-            left: item['leftBrackets'],
-            column: item['paramKey'],
-            comparator: item['comparisonOperator'],
-            value: item['paramValue'],
-            right: item['rightBrackets'],
-            connector: item['connector']
+            column: current.paramKey,
+            comparator: current.comparisonOperator,
+            value,
+            connector: current.connector,
           }
-          queryString.push(obj)
-        })
-        this.queryString = queryString
+          if (
+            !prev ||
+            prev.connector === 'and' ||
+            (prev.paramKey && prev.paramKey !== current.paramKey)
+          ) {
+            obj.left = '('
+          } else {
+            obj.left = ''
+          }
+          if (
+            !next ||
+            current.connector === 'and' ||
+            (next.paramKey && next.paramKey !== current.paramKey)
+          ) {
+            obj.right = ')'
+          } else {
+            obj.right = ''
+          }
+          queryContent.push(obj)
+        }
+        this.queryContent = queryContent
         this.sendColData()
-        this.dialogHide()
       } catch (error) {
         error.message && this.$message.error(error.message)
       }
     },
-    deleteParam (index) {
-      this.paramsTableCols[3].inputType.splice(index, 1)
-      this.paramsForm.params.splice(index, 1)
-      this.paramsForm.disabled.splice(index, 1)
+    deleteParam(rowIndex) {
+      this.paramsTableCols[2].inputType.splice(rowIndex, 1)
+      this.paramsForm.params.splice(rowIndex, 1)
+      this.paramsForm.disabled.splice(rowIndex, 1)
     },
-    clearForm () {
-      this.paramsTableCols[2].options = new Array(2).fill(comparisonOperatorOptions.slice(0, 5).reverse())
-      this.paramsTableCols[3].inputType = ['date', 'date']
-      this.paramsTableCols[3].options = []
-      this.paramsForm.params.splice(2)
-      this.paramsForm.disabled = []
+    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]) {
           this.columnSet[column.columnName] = column
-          if ((column.listqueryTemplateID ?? '') !== '' && !this.columnSet[column.columnName].options) {
+          if (
+            (column.listqueryTemplateID ?? '') !== '' &&
+            !this.columnSet[column.columnName].options
+          ) {
             if (reflect[column.listqueryTemplateID]) {
               reflect[column.listqueryTemplateID].push(column.columnName)
             } else {
               reflect[column.listqueryTemplateID] = [column.columnName]
             }
           }
-          this.paramsTableCols[1].options.push({
+          this.paramsTableCols[0].options.push({
             label: column.columnLabel,
-            value: column.columnName
+            value: column.columnName,
           })
         }
       })
-      // const optionsList = await Promise.all(
-      //   Object.keys(reflect).map(listqueryTemplateID => this.getSelectData(Number(listqueryTemplateID)))
-      // )
-      // optionsList.forEach(({ id, options }) => {
-      //   reflect[id].forEach(columnName => {
-      //     this.columnSet[columnName].options = options.map(option => ({
-      //       label: option.k,
-      //       value: option.v
-      //     }))
-      //   })
-      // })
-    },
-    load () {
-      if (this.noMore || this.loading) {
-        return
-      }
-      this.queryTableData()
     },
-    resetTable () {
-      this.page = 0
-      this.noMore = false
-      this.tableData = []
-    },
-    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass () {
-      return function ({ row, column, rowIndex, columnIndex }) {
-        const classes = []
-        const rule = this.tableDataSortRules[column.property]
-        if (rule) {
-          classes.push(rule)
-        }
-        return classes.join(' ')
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.advance-wrapper {
+  padding: 0 24px 10px;
+  background: #f0f3f7;
+  ::v-deep .query-params {
+    padding: 0;
+    &-wrapper {
+      padding-top: 15px;
+      height: 210px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      > .el-col {
+        margin-bottom: 15px;
+        display: flex;
       }
-    },
-    rowClass () {
-      return function ({ row, rowIndex }) {
-        const classes = []
-        if (row.deleted === 'DEL') {
-          classes.push('bgl-deleted')
-        }
-        return classes.join(' ')
+    }
+    .el-form-item {
+      margin: 0;
+      height: 50px;
+      margin-bottom: 0;
+      background-color: #fff;
+      border: 1px solid #409eff;
+      border-right: none;
+      &:first-child {
+        border-radius: 4px 0px 0px 4px;
       }
-    },
-    cellClass () {
-      return function ({ row, column, rowIndex, columnIndex }) {
-        const classes = []
-        if (
-          ['flightNO', 'passengerName', 'bagSN', 'U_Device_ID', 'preFlightNO', 'transferFlightNO'].includes(
-            column.property
-          ) &&
-          row[column.property] &&
-          row[column.property] !== 'FBULK'
-        ) {
-          classes.push('cell-click')
-          if (
-            this.clickedCells.some(
-              cell =>
-                cell.pageName === 'advance' &&
-                Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
-                cell.columnProp === column.property
-            )
-          ) {
-            classes.push('cell-clicked')
-          }
-        }
-        return classes.join(' ')
+      &:nth-last-child(2) {
+        border-radius: 0px 4px 4px 0px;
+        border-right: 1px solid#409EFF;
       }
-    },
-    cellClickHandler (row, column, cell, event) {
-      if (
-        ['flightNO', 'passengerName', 'bagSN', 'U_Device_ID', 'preFlightNO', 'transferFlightNO'].includes(
-          column.property
-        ) &&
-        row[column.property] &&
-        row[column.property] !== 'FBULK'
-      ) {
-        this.$store.dispatch('keepAlive/addClickedCell', {
-          row,
-          columnProp: column.property,
-          pageName: 'advance'
-        })
-        switch (column.property) {
-          case 'flightNO':
-            this.$router.push({
-              path: '/advance/flightView',
-              query: {
-                flightNO: row.flightNO,
-                flightDate: row.flightDate
-              }
-            })
-            break
-          case 'passengerName':
-            this.$store.dispatch('app/setPassengerQueryParams', {
-              flightNO: row.flightNO,
-              flightDate: row.flightDate,
-              passengerName: row.passengerName
-            })
-            this.$store.dispatch('app/togglePassengerDialogFlag', true)
-          case 'bagSN':
-            this.$router.push({
-              path: '/advance/baggageView',
-              query: {
-                flightNO: row.flightNO,
-                flightDate: row.flightDate,
-                bagSN: row.bagSN
-              }
-            })
-            break
-          case 'U_Device_ID':
-            this.$router.push({
-              path: '/advance/containerView',
-              query: {
-                containerID: row.U_Device_ID
-              }
-            })
-            break
-          case 'transferFlightNO':
-            this.$router.push({
-              path: '/advance/flightView',
-              query: {
-                flightNO: row.transferFlightNO,
-                flightDate: row.transferFlightDate
-              }
-            })
-            break
-          case 'preFlightNO':
-            this.$router.push({
-              path: '/advance/flightView',
-              query: {
-                flightNO: row.preFlightNO,
-                flightDate: row.preFlightDate
-              }
-            })
-            break
-          default:
-            break
+      &:nth-child(3) {
+        flex: 1;
+        .el-input:not(.el-date-editor) .el-input__inner {
+          text-align: center;
         }
-      }
-    },
-    tableFormatter () {
-      return function (row, column, cellValue) {
-        switch (column.property) {
-          case 'departureTime':
-            return (cellValue ?? '').replace('T', ' ')
-          case 'deleted':
-            return cellValue === 'DEL' ? cellValue : ''
-          case 'activated':
-            return cellValue === 1 ? '激活' : '未激活'
-          default:
-            return cellValue ?? ''
+        .el-form-item__error {
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
-    },
-    // 清除查询
-    clearSearchData () {
-      // this.clearForm()
-      // this.resetTable()
-    },
-    // 统计行数
-    summaryRow (num) {
-      return function () {
-        return ['合计', `共${num}件`]
-      }
-    },
-    getSearchData (val) {
-      this.clearForm()
-      if (!val) {
-        this.$message.error('请先输入完整查询信息')
-        return
+      &:last-child {
+        width: 76px;
+        text-align: center;
+        background-color: transparent;
+        border: none;
       }
-      const az = /^[a-zA-Z]+$/
-      const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
-      const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
-      const num = /^[0-9]+$/
-      const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
-      if (az.test(val)) {
-        // 纯字母则为旅客姓名
-        this.paramsForm.params.push({
-          leftBrackets: '',
-          paramKey: 'passengerName',
-          comparisonOperator: '=',
-          paramValue: val,
-          rightBrackets: '',
-          connector: 'and'
-        })
-      } else if (azNum.test(val) && top2.test(val)) {
-        // 字母加数字且前两位为字母则为航班号
-        this.paramsForm.params.push({
-          leftBrackets: '',
-          paramKey: 'flightNO',
-          comparisonOperator: '=',
-          paramValue: val,
-          rightBrackets: '',
-          connector: 'and'
-        })
-      } else if ((num.test(val) && val.length === 10) || bagNo.test(val)) {
-        // 纯数字且位数等于10则为行李牌号
-        this.paramsForm.params.push({
-          leftBrackets: '',
-          paramKey: 'bagSN',
-          comparisonOperator: '=',
-          paramValue: val,
-          rightBrackets: '',
-          connector: 'and'
-        })
-      } else {
-        this.$message.error('请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
-        return
+      &__content {
+        line-height: 48px;
       }
-      this.paramsTableCols[2].options[2] = comparisonOperatorOptions.slice(4)
-      this.paramsTableCols[3].inputType[2] = 'text'
-      this.advancedQueryHandler()
-    },
-    // 获取下拉数据
-    async getSelectData (id) {
-      const result = { id }
-      try {
-        const { code, returnData } = await Query({
-          id,
-          dataContent: []
-        })
-        if (Number(code) === 0) {
-          result.options = returnData.listValues
-        } else {
-          result.options = []
-        }
-      } catch (error) {
-        result.options = []
+      .el-form-item__error {
+        top: 60%;
+        left: 14px;
       }
-      return result
-    },
-    async queryTableData (singleJump) {
-      this.loading = true
-      try {
-        const {
-          code,
-          returnData: { columnSet, listValues }
-        } = await Query({
-          id: DATACONTENT_ID.advancedQueryNew,
-          needPage: ++this.page,
-          dataContent: [],
-          queryConcat: this.queryString || '1 = 2'
-        })
-        if (Number(code) === 0) {
-          if (!listValues.length) {
-            this.page--
-            this.noMore = true
-          } else if (singleJump) {
-            if (listValues.length === 1) {
-              this.$router.push({
-                path: '/advance/baggageView',
-                query: {
-                  bagSN: listValues[0].bagSN,
-                  flightNO: listValues[0].flightNO,
-                  flightDate: listValues[0].flightDate
-                }
-              })
-            } else {
-              const onlyFlight = listValues.reduce((pre, curr) => {
-                if (
-                  pre === null ||
-                  (curr.flightNO &&
-                    curr.flightDate &&
-                    curr.flightNO === pre.flightNO &&
-                    curr.flightDate === pre.flightDate)
-                ) {
-                  return {
-                    flightNO: curr.flightNO,
-                    flightDate: curr.flightDate
-                  }
-                } else {
-                  return {}
-                }
-              }, null)
-              if (onlyFlight.flightNO) {
-                this.$router.push({
-                  path: '/advance/flightView',
-                  query: onlyFlight
-                })
-              }
-            }
-          }
-          this.tableCols = columnSet
-          this.tableData.push(...listValues)
-        } else {
-          this.page--
-          this.$message.error('获取表格数据失败')
-        }
-      } catch (error) {
-        this.$message.error('失败')
-      }
-      this.loading = false
-    },
-    tableMountedHandler (refName, ref) {
-      this.$refs[refName] = ref
-    },
-    exportHandler (refName, tableName) {
-      if (!this.tableData.length) {
-        this.$message.info('无数据')
-        return
-      }
-      const table = this.$refs[refName].$el.cloneNode(true)
-      const fileName = `${tableName}.xlsx`
-      throttledExportToExcel(table, tableName, fileName)
-    }
-  }
-}
-</script>
+      .el-input__inner {
+        height: 48px;
+        border: none;
 
-<style lang="scss" scoped>
-.advance {
-  &__head {
-    line-height: 32px;
-    margin-top: 8px;
-    margin-bottom: 16px;
-    .btnAn:not(:last-child) {
-      margin-right: 12px;
-    }
-    // .setting {
-    //   height: 32px;
-    //   width: 32px;
-    //   cursor: pointer;
-    //   background-size: 100% 100%;
-    //   background: url("@/assets/baggage/ic_setting.png") no-repeat;
-    //   margin-left: 12px;
-    //   position: relative;
-    //   top: 2px;
-    // }
-    ::v-deep .interfaceLog_head_time {
-      .el-input__prefix {
-        left: 10px;
+        background: transparent;
         color: #101116;
+        font-family: Helvetica, 'Microsoft YaHei';
       }
-      .el-input--prefix .el-input__inner {
-        padding-left: 50px;
+      &.is-error .el-input__inner::-webkit-input-placeholder {
+        visibility: hidden;
       }
-    }
-  }
-}
-.advance__table {
-  width: 100%;
-  ::v-deep .el-table {
-    .el-table__body-wrapper {
-      tr.bgl-deleted {
-        background: #d2d6df;
-        td {
-          background: #d2d6df;
-          font-style: italic;
+
+      .el-select {
+        .el-icon-arrow-up::before {
+          content: '\e78f';
+          color: #101116;
+        }
+        .el-icon-arrow-down::before {
+          content: '\e790';
+          color: #101116;
         }
       }
     }
-  }
-}
-.title {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0;
-  .el-icon-close {
-    margin-right: 16px;
-    cursor: pointer;
-  }
-}
-.content {
-  margin: 0 0 20px;
-  padding: 0 24px;
-  .btns {
-    display: flex;
-    justify-content: flex-end;
-    padding: 20px 0;
-    .el-button {
-      width: 72px;
-      &:not(:first-child) {
-        margin-left: 16px;
-      }
+    .clickable-delete {
+      width: 48px;
+      height: 48px;
+      text-align: center;
+      line-height: 48px;
+      font-size: 20px;
+      cursor: pointer;
     }
-  }
-  ::v-deep .query-params {
-    padding: 0;
-    .el-table {
-      width: 100%;
-      .el-table__header {
-        .el-table__cell {
-          padding: 0;
-          .cell {
-            height: 40px;
-            line-height: 40px;
-            font-family: Helvetica, "Microsoft YaHei";
-            font-weight: bold;
-            color: #303133;
-          }
-        }
-      }
-      .el-table__body {
-        .el-table__cell {
-          padding: 0;
-          .cell {
-            padding: 0;
-            .el-form-item {
-              margin: 0;
-              height: 40px;
-              .el-form-item__error {
-                top: 60%;
-                left: 14px;
-              }
-              .el-input__inner {
-                background: transparent;
-                color: #101116;
-                font-family: Helvetica, "Microsoft YaHei";
-                &:hover {
-                  background-color: #ffffff;
-                }
-              }
-              &.is-error .el-input__inner::-webkit-input-placeholder {
-                visibility: hidden;
-              }
-              &:not(.is-error) .el-input__inner {
-                border: none;
-              }
-              .el-select {
-                .el-icon-arrow-up::before {
-                  content: "\e78f";
-                  color: #101116;
-                }
-                .el-icon-arrow-down::before {
-                  content: "\e790";
-                  color: #101116;
-                }
-              }
-            }
-            .clickable-delete {
-              font-family: Microsoft YaHei;
-              color: #ed3c3c;
-              cursor: pointer;
-            }
-          }
-        }
-      }
+    .clickable-toggle {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      text-decoration: underline;
+      color: #409eff;
+      cursor: pointer;
     }
   }
 }

src/views/newQuery/index.vue

@@ -103,9 +103,9 @@ export default {
   computed: {
     tableHeight () {
       if (this.flag) {
-        return 'calc(100% - 269px)';
+        return 'calc(100% - 300px)';
       } else {
-        return 'calc(100% - 85px)';
+        return 'calc(100% - 80px)';
       }
     }
   },
@@ -120,11 +120,11 @@ export default {
           const comparator = key == 'startDate' ? '>=' : key == 'endDate' ? '<=' : '='
           const column = key == 'startDate' ? 'carrierFlightsDate' : key == 'endDate' ? 'carrierFlightsDate' : key
           const r = {
-            left: '(',
+            // left: '(',
             column: column,
             comparator,
             value: val,
-            right: ')',
+            // right: ')',
             connector: 'and'
           }
           datas.push(r)
@@ -276,7 +276,6 @@ export default {
   height: calc(100vh - 80px);
   &-contents {
     height: 100%;
-    background-color: #fff;
     border-radius: 4px;
     position: relative;
   }
@@ -295,15 +294,17 @@ export default {
     .msg {
       display: inline-block;
       width: 100px;
-      height: 15px;
+      height: 12px;
       background-color: #b2cbde;
-      border-radius: 5px;
+      border-radius: 0px 0px 4px 4px;
       cursor: pointer;
       color: #fff;
     }
   }
   &-head {
     padding: 24px;
+    background-color: #fff;
+    border-radius: 4px 4px 0px 0px;
     .title {
       font-size: 26px;
       font-weight: 500;
@@ -319,6 +320,8 @@ export default {
   }
   &-table {
     padding: 0 24px;
+    background-color: #fff;
+    border-radius: 0px 0px 4px 4px;
   }
 }
-</style>
+</style>