SMAirports/src/views/newQuery/components/search.vue

<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="248" 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" :disabled="col.prop === 'paramKey' && option.value === 'flightDate'" />
                  </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>
      </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'
const comparisonOperatorOptions = [
  {
    label: '小于等于',
    value: '<='
  },
  {
    label: '大于等于',
    value: '>='
  },
  {
    label: '小于',
    value: '<'
  },
  {
    label: '大于',
    value: '>'
  },
  {
    label: '等于',
    value: '='
  },
  {
    label: '不等于',
    value: '!='
  },
  {
    label: '为空',
    value: 'is Null'
  },
  {
    label: '不为空',
    value: 'is not Null'
  },
  {
    label: '包含',
    value: 'like'
  }
]

export default {
  name: 'AdvancedNew',
  components: { Search, SimpleTable, Dialog },
  props: {
    tableColMunt: {
      type: Array,
      default: () => []
    },
    dataQuery: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      queryString: '',
      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: [
            {
              label: '(',
              value: '('
            },
            {
              label: '((',
              value: '(('
            },
            {
              label: '(((',
              value: '((('
            }
          ]
        },
        {
          prop: 'paramKey',
          label: '项',
          inputType: 'select',
          options: []
        },
        {
          prop: 'comparisonOperator',
          label: '比较符',
          inputType: 'select',
          options: new Array(2).fill(comparisonOperatorOptions.slice(0, 5).reverse())
        },
        {
          prop: 'paramValue',
          label: '值',
          inputType: ['date', 'date'],
          options: []
        },
        {
          prop: 'rightBrackets',
          label: '右括号',
          inputType: 'select',
          options: [
            {
              label: ')',
              value: ')'
            },
            {
              label: '))',
              value: '))'
            },
            {
              label: ')))',
              value: ')))'
            }
          ]
        },
        {
          prop: 'connector',
          label: '连接',
          inputType: 'select',
          options: [
            {
              label: '并且',
              value: 'and'
            },
            {
              label: '或者',
              value: 'or'
            }
          ]
        }
      ],
      columnSet: {}
    }
  },
  computed: {
    ...mapGetters(['authMsg']),
  },
  watch: {
    dataQuery: {
      handler (arr) {
        if (arr && arr.length) {
          const datas = []
          const types = []
          arr.forEach(item => {
            if (item.value.includes('-')) {
              types.push('date')
            }
            types.push('text')
            const obj = {
              leftBrackets: item.left,
              paramKey: item.column,
              comparisonOperator: item.comparator,
              rightBrackets: item.right,
              paramValue: item.value,
              connector: item['connector']
            }
            datas.push(obj)
          })
          this.paramsTableCols[3].inputType = types
          setTimeout(() => {
            this.paramsForm.params = datas
          }, 20);
        } else {
          this.paramsForm.params = []
        }
      },
      deep: true
    },
  },
  mounted () {
    const colDatas = this.authMsg
    if (colDatas && colDatas.length) {
      const columns = colDatas.filter(item => item.is_search == 1)
      this.getColumnSet(columns)
    }
  },
  deactivated () {
    this.loading = false
  },
  beforeDestroy () {
    this.loading = false
  },
  methods: {
    queryHandler (query) {
      // let queryFlag = false
      // const { singleJump } = query
      // const queryEntries = Object.entries(query)
      // if (queryEntries.length) {
      //   this.clearForm()
      //   queryEntries.forEach(([key, value]) => {
      //     if ((value ?? '') !== '') {
      //       queryFlag = true
      //       switch (key) {
      //         case 'singleJump':
      //           break
      //         case 'startDate':
      //           this.$set(this.flightDate, 0, value)
      //           break
      //         case 'endDate':
      //           this.$set(this.flightDate, 1, value)
      //           break
      //         case 'unLoad':
      //         case 'checkIn':
      //         case 'active':
      //         case 'transferIn':
      //         case 'canceled':
      //           this.paramsForm.params.push({
      //             leftBrackets: '',
      //             paramKey: key,
      //             comparisonOperator: '=',
      //             paramValue: value,
      //             rightBrackets: '',
      //             connector: 'and'
      //           })
      //           break
      //         default:
      //           break
      //       }
      //     }
      //   })
      // }
      // if (queryFlag) {
      //   this.advancedQueryHandler(singleJump)
      // }
    },
    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
    },
    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')
      this.paramsForm.params.push({
        leftBrackets: '',
        paramKey: '',
        comparisonOperator: '',
        paramValue: '',
        rightBrackets: '',
        connector: 'and'
      })
    },
    selectChangeHandler (value, rowIndex, colIndex) {
      if (colIndex === 1) {
        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'
        } else if (dataType === 'datetime') {
          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
          this.paramsTableCols[3].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.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.paramsForm.params[rowIndex].paramValue = ''
        } else {
          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4)
          this.paramsTableCols[3].inputType[rowIndex] = 'text'
        }
        this.paramsForm.params[rowIndex].comparisonOperator = this.paramsTableCols[2].options[rowIndex][0].value
      } else if (colIndex === 2) {
        if (['is Null', 'is not Null'].includes(value)) {
          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) {
      this.checkValue = value
    },
    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) {
      if (value?.at(-1) === '.') {
        this.paramsForm.params[rowIndex].paramValue = value.slice(0, -1)
      }
    },
    advancedQueryHandler (singleJump) {
      try {
        this.$refs['paramsForm'].validate(valid => {
          if (!valid) {
            throw new Error()
          }
        })
        const queryString = []
        this.paramsForm.params.forEach(item => {
          const obj = {
            left: item['leftBrackets'],
            column: item['paramKey'],
            comparator: item['comparisonOperator'],
            value: item['paramValue'],
            right: item['rightBrackets'],
            connector: item['connector']
          }
          queryString.push(obj)
        })
        this.queryString = queryString
        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)
    },
    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 = []
    },
    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 (reflect[column.listqueryTemplateID]) {
              reflect[column.listqueryTemplateID].push(column.columnName)
            } else {
              reflect[column.listqueryTemplateID] = [column.columnName]
            }
          }
          this.paramsTableCols[1].options.push({
            label: column.columnLabel,
            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(' ')
      }
    },
    rowClass () {
      return function ({ row, rowIndex }) {
        const classes = []
        if (row.deleted === 'DEL') {
          classes.push('bgl-deleted')
        }
        return classes.join(' ')
      }
    },
    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(' ')
      }
    },
    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
        }
      }
    },
    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 ?? ''
        }
      }
    },
    // 清除查询
    clearSearchData () {
      // this.clearForm()
      // this.resetTable()
    },
    // 统计行数
    summaryRow (num) {
      return function () {
        return ['合计', `共${num}件`]
      }
    },
    getSearchData (val) {
      this.clearForm()
      if (!val) {
        this.$message.error('请先输入完整查询信息')
        return
      }
      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
      }
      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 = []
      }
      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>

<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;
        color: #101116;
      }
      .el-input--prefix .el-input__inner {
        padding-left: 50px;
      }
    }
  }
}
.advance__table {
  width: 100%;
  ::v-deep .el-table {
    .el-table__body-wrapper {
      tr.bgl-deleted {
        background: #d2d6df;
        td {
          background: #d2d6df;
          font-style: italic;
        }
      }
    }
  }
}
.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;
      }
    }
  }
  ::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;
            }
          }
        }
      }
    }
  }
}
</style>