修改

src/views/newScene/components/advanceQuery.vue

@@ -0,0 +1,872 @@
+<template>
+  <div class="advance">
+    <!--高级查询-->
+    <div id="dialogSearch" ref="dialog" :tabindex="0" @keyup.self.esc="dialogHide">
+      <div class="title">
+        <span>场景规则</span>
+        <i class="el-icon-close" @click="dialogHide" />
+      </div>
+      <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="370" 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 clearable 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 clearable 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 clearable 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 clearable 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>
+  </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'
+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: () => []
+    },
+    tableMix: {
+      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: {},
+    }
+  },
+  watch: {
+    tableColMunt: {
+      handler (arr) {
+        this.getColumnSet(arr)
+      },
+      deep: true,
+      immediate: true
+    },
+    tableMix: {
+      handler (arr) {
+        this.paramsForm.params = []
+        this.paramsTableCols[3].inputType = []
+        arr.forEach(item => {
+          this.paramsTableCols[3].inputType.push('text')
+          this.paramsForm.params.push({
+            leftBrackets: item['left'],
+            paramKey: item['column'],
+            comparisonOperator: item['comparator'],
+            paramValue: item['value'],
+            rightBrackets: item['right'],
+            connector: item['connector']
+          })
+        })
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  deactivated () {
+    this.loading = false
+  },
+  beforeDestroy () {
+    this.loading = false
+  },
+  methods: {
+    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
+          })
+        }
+      })
+    },
+    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;
+        }
+      }
+    }
+  }
+}
+#dialogSearch {
+  .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>

src/views/newScene/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="newScene">
+    <div class="newScene-head flex">
+      <div class="manageTitle">预警报警场景</div>
+      <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
+    </div>
+    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newScene-content">
+      <el-table v-el-table-infinite-scroll="load" :data="tableData" border height="100%" style="width: 100%">
+        <!-- <el-table-column prop="alarmsceneID" label="场景ID">
+        </el-table-column> -->
+        <el-table-column prop="alarmsceneName" label="场景描述">
+        </el-table-column>
+        <el-table-column prop="alarmscenerule" label="场景规则">
+        </el-table-column>
+        <el-table-column label="操作" width="300px">
+          <template slot-scope="scope">
+            <el-button type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
+            <el-button type="danger" @click="handleRemove(scope.row)" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--高级查询-->
+    <Dialog :flag="dialogFlag" width="852px">
+      <AdvanceQuery :tableColMunt="tableCols" :tableMix="tableMix" @getColData="getColData" @dialogHide="dialogHide" />
+    </Dialog>
+    <!--删除-->
+    <Dialog :flag="rmFlag">
+      <div class="airportInfoDialog">
+        <div class="title del-title">删除</div>
+        <div class="content del-content">
+          <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ remObj.alarmsceneName }}</span>
+          ？
+        </div>
+        <div class="foot right Delfoot">
+          <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
+          <el-button size="medium" @click="rmFlag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog/index.vue";
+import AdvanceQuery from './components/advanceQuery.vue';
+import { getAuthData } from "@/utils/validate";
+import { Query, newData, modifyData, moveData } from "@/api/webApi";
+import pb from '@/layout/mixin/publicFunc'
+import { remove } from 'js-cookie';
+export default {
+  name: 'NewScene',
+  mixins: [pb],
+  components: { Dialog, AdvanceQuery },
+  data () {
+    return {
+      dialogFlag: false,
+      tableCols: [], //表头数据
+      tableMix: [],
+      tableData: [],
+      page: 0,
+      pageSize: 20,
+      dataContent: {},
+      authId: '',
+      noMore: false,
+      loading: false,
+      urlParams: '',
+      serviceId: '',
+      queryId: '',
+      dataType: 'add',
+      remObj: {},
+      rmFlag: false,
+    }
+  },
+  created () {
+    const { query } = this.$route
+    const { auth_id } = this.$route.meta
+    const { arrs } = getAuthData(auth_id)
+    const table = arrs.filter(item => item.auth_type == 4)
+    this.urlParams = query
+    if (table && table.length) {
+      const obj = table[0]
+      this.authId = obj.auth_id
+      this.queryId = obj.queryTemplateID
+    } else {
+      if (auth_id) {
+        this.queryId = auth_id
+        this.authId = auth_id
+      }
+    }
+    this.getRule()
+  },
+  methods: {
+    //获取高级查询条件
+    getColData (val) {
+      const chName = []
+      const arr = [...val]
+      const arrAll = _.cloneDeep(this.tableCols)
+      arrAll.forEach(item => {
+        arr.map(p => {
+          if (item.columnName == p.column) {
+            const column = item.columnLabel
+            const comparator = this.formatFh(p.comparator)
+            const value = p.value
+            const connector = p.connector == 'and' ? '并且' : '或者'
+            const alarmsceneName = column + comparator + value + connector
+            chName.push(alarmsceneName)
+          }
+        })
+      })
+      if (this.dataType == 'add') {
+        this.dataChange(arr, chName, 1)
+      } else {
+        this.dataChange(arr, chName, 2)
+      }
+    },
+    //新增
+    async dataChange (a1, a2, event) {
+      const newVal = []
+      const newObj = {}
+      const obj = {
+        alarmsceneName: a2.join(''),
+        alarmscenerule: JSON.stringify(a1)
+      }
+      newObj.Value = obj
+      if (event == 2) {
+        newObj.filter = {
+          alarmsceneID: this.remObj.alarmsceneID
+        }
+      }
+      newVal.push(newObj)
+      const result = event == 1 ? await newData({
+        serviceId: this.serviceId,
+        dataContent: newVal,
+        event: `${event}`
+      }) : await modifyData({
+        serviceId: this.serviceId,
+        dataContent: newVal,
+        event: `${event}`
+      })
+      if (result.code == 0) {
+        this.$message.success(result.message)
+        this.resetTable()
+        this.load()
+      } else {
+        this.$message.error(result.message)
+        this.dialogFlag = false
+      }
+    },
+    //新增
+    handleAdd () {
+      this.dataType = 'add'
+      this.dialogFlag = true
+    },
+    //编辑
+    handleEdit (row) {
+      this.dataType = 'edit'
+      this.dialogFlag = true
+      this.remObj = row
+      this.tableMix = JSON.parse(row.alarmscenerule)
+    },
+    //删除
+    handleRemove (row) {
+      this.rmFlag = true
+      this.remObj = row
+    },
+    //表格-删除-确认
+    async tableRemove () {
+      const { code } = await moveData({
+        serviceId: this.serviceId,
+        dataContent: [
+          {
+            alarmsceneID: this.remObj.alarmsceneID
+          }
+        ],
+        event: '3'
+      })
+      if (code == 0) {
+        this.$message.success('删除成功')
+        this.resetTable()
+        this.load()
+      } else {
+        this.$message.success('删除失败')
+      }
+      this.rmFlag = false
+    },
+    formatFh (fh) {
+      switch (fh) {
+        case '=':
+          return '等于'
+          break;
+        case '>':
+          return '大于'
+          break;
+        case '<':
+          return '小于'
+          break;
+        case '>=':
+          return '大于等于'
+          break;
+        case '<=':
+          return '小于等于'
+          break;
+        default:
+          break;
+      }
+    },
+    //高级查询关闭
+    dialogHide () {
+      this.dialogFlag = false
+    },
+    load () {
+      if (this.noMore || this.loading) {
+        return
+      }
+      this.getQuery(this.queryId)
+    },
+    resetTable () {
+      this.dataContent = {}
+      this.page = 0;
+      this.noMore = false;
+      this.tableData = [];
+    },
+    async getRule () {
+      const { code, returnData } = await this.getQueryList(200252)
+      if (code == 0 && returnData && returnData.length) {
+        const arrData = []
+        const arrObj = [...returnData][0]
+        for (const key in arrObj) {
+          const ele = arrObj[key]
+          const obj = {
+            "columnName": key,
+            "columnLabel": ele,
+            "needShow": 1,
+          }
+          arrData.push(obj)
+        }
+        this.tableCols = arrData
+      } else {
+
+      }
+    },
+    //获取表格数据
+    async getQuery (id, dataContent = this.dataContent) {
+      try {
+        this.loading = true;
+        const { code, returnData } = await Query({
+          serviceId: id,
+          page: ++this.page,
+          pageSize: this.pageSize,
+          dataContent,
+          authId: this.authId,
+          event: '0'
+        });
+        if (code == 0) {
+          if (returnData.length === 0) {
+            this.page--;
+            this.noMore = true;
+            this.loading = false;
+          }
+          this.tableData.push(...returnData);
+          // this.tableCols = columnset;
+          this.serviceId = id;
+          setTimeout(() => {
+            this.loading = false;
+          }, 100);
+        } else {
+          this.page--;
+          this.loading = false;
+          this.$message.error("获取表格数据失败");
+        }
+      } catch (error) {
+        this.page--;
+        this.loading = false;
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.newScene {
+  padding: 24px;
+  height: calc(100vh - 100px);
+  &-head {
+    margin-bottom: 22px;
+  }
+  &-content {
+    height: calc(100% - 40px);
+    ::v-deep .el-table {
+      thead {
+        .cell {
+          color: #000;
+        }
+      }
+      .cell {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>