添加新页面

src/router/index.js

@@ -79,6 +79,19 @@ export const constantRoutes = [
       },
     ]
   },
+  {
+    path: '/dataAccess',
+    component: Layout,
+    meta: { title: '数据接入管理' },
+    children: [
+      {
+        path: '/dataAccess',
+        name: 'DataAccess',
+        meta: { title: '页面配置' },
+        component: () => import('@/views/dataAccessPage/index.vue'),
+      },
+    ]
+  },
   // { path: '/', redirect: '/nopower', component: () => import('@/views/noPower'), hidden: true }
   // 404 page must be placed at the end !!!
 ]

src/views/dataAccessPage/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="dataAccess">
+    <PublicPageHeader class="dataAccess_title" page-title="数据接入管理" />
+    <div class="dataAccess_content flex-wrap">
+      <div class="dataAccess_content_left">
+        <div class="flex dataAccess_content_left_title title">
+          <div class="dataAccess_content_left_title_text">接入服务列表</div>
+          <el-button size="small" type="primary">新增</el-button>
+        </div>
+        <div class="dataAccess_content_left_search">
+          <el-input size="small" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
+        </div>
+        <div class="dataAccess_content_left_status flex-wrap">
+          <div class="dataAccess_content_left_status_list">
+            <span class="icon status1"></span>
+            <span>正常</span>
+          </div>
+          <div class="dataAccess_content_left_status_list">
+            <span class="icon status2"></span>
+            <span>停止</span>
+          </div>
+          <div class="dataAccess_content_left_status_list">
+            <span class="icon status3"></span>
+            <span>异常</span>
+          </div>
+        </div>
+        <div class="dataAccess_content_left_tree">
+          <el-scrollbar style="height: 100%" :horizontal="false">
+            <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree">
+              <span style="width: 100%;line-height:28px;" class="custom-tree-node flex" slot-scope="{ node, data }">
+                <span class="custom-tree-node-label">{{ node.label }}</span>
+                <span class="custom-tree-node-btn">
+                  <el-button type="text" size="mini" @click="() => stop(data)">停止</el-button>
+                  <el-button style="color:#f00;" type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
+                </span>
+              </span>
+            </el-tree>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="dataAccess_content_right">
+        <div class="dataAccess_content_right_top flex-wrap">
+          <div class="dataAccess_content_right_top_left">
+            <div class="title">服务详情</div>
+          </div>
+          <div class="dataAccess_content_right_top_right">
+            <div class="title flex">
+              <div class="dataAccess_content_left_title_text">采集数据源</div>
+              <el-button size="small" @click="onSubmit" type="primary">保存</el-button>
+            </div>
+            <el-form style="margin-top:20px;" ref="form" :model="form" label-width="100px">
+              <el-form-item label="数据源类型">
+                <el-select size="small" v-model="form.region" placeholder="请选择数据源类型">
+                  <el-option label="区域一" value="shanghai"></el-option>
+                  <el-option label="区域二" value="beijing"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="详细配置">
+                <el-input size="small" :rows="5" type="textarea" v-model="form.desc"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div class="dataAccess_content_right_bottom">
+          <div class="title">采集日志</div>
+          <div class="dataAccess_content_right_bottom_table">
+            <el-table :data="tableData" stripe style="width: 100%;margin-top:20px;">
+              <el-table-column prop="date" label="日期" width="180">
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="180">
+              </el-table-column>
+              <el-table-column prop="address" label="地址">
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" width="100">
+                <template slot-scope="scope">
+                  <el-button type="text" size="small">查看详情</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageHeader from '@/components/PublicPageHeader'
+export default {
+  name: 'DataAccess',
+  components: { PublicPageHeader },
+  data () {
+    return {
+      filterText: '',
+      data: [{
+        id: 1,
+        label: '一级 1',
+        children: [
+          {
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          },
+        ]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      form: {
+        region: '',
+        desc: ''
+      },
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    };
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    stop (row) { },
+    remove (node, data) {
+      const parent = node.parent;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex(d => d.id === data.id);
+      children.splice(index, 1);
+    },
+    onSubmit () { }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dataAccess {
+  padding: 20px;
+  &_content {
+    height: calc(100vh - 180px);
+    margin-top: 20px;
+    position: relative;
+    &_left {
+      width: 360px;
+      height: 100%;
+      background: #fff;
+      padding: 20px;
+      margin-right: 20px;
+      &_search {
+        margin: 20px 0 40px 0;
+      }
+      &_status {
+        margin-bottom: 40px;
+        &_list {
+          margin-right: 30px;
+          &:last-child {
+            margin-right: 0;
+          }
+          .icon {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            vertical-align: middle;
+            margin-right: 6px;
+            position: relative;
+            top: -2px;
+          }
+          .status1 {
+            background-color: #72e6bf;
+          }
+          .status2 {
+            background-color: #bdbbbb;
+          }
+          .status3 {
+            background-color: #f00;
+          }
+        }
+      }
+      ::v-deep &_tree {
+        height: calc(100% - 180px);
+        .el-scrollbar__wrap {
+          overflow-x: hidden;
+        }
+        .is-horizontal {
+          display: none;
+        }
+      }
+    }
+    &_right {
+      width: calc(100% - 380px);
+      &_top {
+        height: 290px;
+        &_left {
+          width: calc(100% - 520px);
+          background-color: #fff;
+          padding: 20px;
+          margin-right: 20px;
+        }
+        &_right {
+          width: 500px;
+          background-color: #fff;
+          padding: 20px;
+        }
+      }
+      &_bottom {
+        margin-top: 20px;
+        height: calc(100% - 310px);
+        background-color: #fff;
+        width: 100%;
+        padding: 20px;
+      }
+    }
+    .title {
+      line-height: 32px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
+</style>

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

@@ -1,899 +0,0 @@
-<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>
-      </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 { exportToExcel } from '@/utils/table'
-import { mapGetters } from 'vuex'
-import { formatOrder } from '@/utils/validate'
-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 (isNaN(item.value) && !isNaN(Date.parse(item.value))) {
-              types.push('date')
-            } else {
-              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.queryHandler()
-          setTimeout(() => {
-            this.paramsTableCols[2].options = new Array(arr.length).fill(comparisonOperatorOptions.slice(0, 5).reverse())
-            this.paramsTableCols[3].inputType = types
-            this.paramsForm.params = datas
-          }, 200);
-        } else {
-          this.paramsForm.params = []
-        }
-      },
-      deep: true,
-      immediate: true
-    },
-  },
-  mounted () {
-    this.queryHandler()
-  },
-  deactivated () {
-    this.loading = false
-  },
-  beforeDestroy () {
-    this.loading = false
-  },
-  methods: {
-    queryHandler () {
-      const colDatas = this.authMsg
-      if (colDatas && colDatas.length) {
-        const columns = colDatas.filter(item => item.is_search == 1)
-        const datas = formatOrder(columns)
-        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
-    },
-    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`
-      exportToExcel(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>

src/views/newQuery/components/search.vue

@@ -1,530 +0,0 @@
-<template>
-  <div class="advance">
-    <!--高级查询-->
-    <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 === 'connector'">
-                <div v-if="row.connector" class="clickable-toggle" @click="toggle(rowIndex)">
-                  {{ row.connector === 'and' ? '并且' : '或者' }}
-                </div>
-                <div v-else class="clickable-add" @click="addParamsHandler">
-                  <div class="clickable-wrapper">
-                    <i class="el-icon-plus" />
-                  </div>
-                </div>
-              </template>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { parseTime } from '@/utils/index'
-import { mapGetters } from 'vuex'
-import { formatOrder } from '@/utils/validate'
-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',
-  props: {
-    tableColMunt: {
-      type: Array,
-      default: () => [],
-    },
-    dataQuery: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data () {
-    return {
-      queryContent: [],
-      flightDate: new Array(2).fill(parseTime(new Date(), '{y}-{m}-{d}')),
-      paramsForm: {
-        params: [],
-        validateRules: {
-          paramKey: [
-            {
-              required: true,
-              message: '请选择项',
-              trigger: ['change', 'blur'],
-            },
-          ],
-          paramValue: [
-            {
-              required: true,
-              message: '请选择或输入值',
-              trigger: ['change', 'blur'],
-            },
-          ],
-        },
-        disabled: [],
-      },
-      checkValue: '',
-      paramsTableCols: [
-        {
-          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: [],
-          options: [],
-        },
-        {
-          prop: 'delete',
-          inputType: 'delete',
-        },
-        {
-          prop: 'connector',
-          // label: '连接',
-          inputType: 'connector',
-        },
-      ],
-      columnSet: {},
-    }
-  },
-  computed: {
-    ...mapGetters(['authMsg']),
-  },
-  watch: {
-    dataQuery: {
-      handler (arr) {
-        if (arr && arr.length) {
-          const datas = []
-          const types = []
-          arr.forEach(item => {
-            if (isNaN(item.value) && !isNaN(Date.parse(item.value))) {
-              types.push('date')
-            } else {
-              types.push('text')
-            }
-            const paramValue = ['is Null', 'is not Null'].includes(
-              item.comparisonOperator
-            )
-              ? ' '
-              : item.value
-            const obj = {
-              // leftBrackets: item.left,
-              paramKey: item.column,
-              comparisonOperator: item.comparator,
-              // rightBrackets: item.right,
-              paramValue,
-              connector: item.connector,
-            }
-            datas.push(obj)
-          })
-          this.queryHandler()
-          setTimeout(() => {
-            this.paramsTableCols[1].options = new Array(arr.length).fill(
-              comparisonOperatorOptions.slice(0, 5).reverse()
-            )
-            this.paramsTableCols[2].inputType = types
-            this.paramsForm.params = datas
-          }, 200)
-        } else {
-          this.paramsForm.params = []
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-    'paramsForm.params': {
-      handler (params) {
-        const { length } = params
-        params[length - 1].connector = ''
-        if (params[length - 2] && !params[length - 2].connector) {
-          params[length - 2].connector = 'and'
-        }
-      },
-    },
-  },
-  mounted () {
-    this.queryHandler()
-  },
-  methods: {
-    queryHandler () {
-      const colDatas = this.authMsg
-      if (colDatas && colDatas.length) {
-        const columns = colDatas.filter(item => String(item.is_search) === '1')
-        const datas = formatOrder(columns)
-        this.getColumnSet(datas)
-      }
-      if (!this.paramsForm.params.length) {
-        this.addParamsHandler()
-      }
-    },
-    sendColData () {
-      this.$emit('getColData', this.queryContent)
-    },
-    addParamsHandler () {
-      this.paramsTableCols[2].inputType.push('text')
-      this.paramsForm.params.push({
-        paramKey: '',
-        comparisonOperator: '',
-        paramValue: '',
-        connector: '',
-      })
-    },
-    selectChangeHandler (value, rowIndex, colIndex) {
-      if (colIndex === 0) {
-        // const datas = this.tableColMunt.filter(item => item.columnName == value)
-        const { dataType, options } = this.columnSet[value]
-        // const { dataType, options } = datas[0]
-        // 下拉框发生改变清空之前的数据
-        this.paramsForm.params[rowIndex].paramValue = ''
-        if (dataType === 'date') {
-          this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
-            .slice(0, 5)
-            .reverse()
-          this.paramsTableCols[2].inputType[rowIndex] = 'date'
-        } else if (dataType === 'datetime') {
-          this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
-            .slice(0, 5)
-            .reverse()
-          this.paramsTableCols[2].inputType[rowIndex] = 'datetime'
-        } else if (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[1].options[rowIndex] = comparisonOperatorOptions
-            .slice(0, 5)
-            .reverse()
-          this.paramsTableCols[2].inputType[rowIndex] = 'number'
-          this.paramsForm.params[rowIndex].paramValue = ''
-        } else {
-          this.paramsTableCols[1].options[rowIndex] =
-            comparisonOperatorOptions.slice(4)
-          this.paramsTableCols[2].inputType[rowIndex] = 'text'
-        }
-        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.disabled[rowIndex] = true
-        } else {
-          this.paramsForm.disabled[rowIndex] = false
-        }
-      }
-    },
-    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 () {
-      try {
-        this.$refs['paramsForm'].validate(valid => {
-          if (!valid) {
-            throw new Error()
-          }
-        })
-        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 = {
-            column: current.paramKey,
-            comparator: current.comparisonOperator,
-            value,
-            connector: current.connector,
-          }
-          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()
-      } catch (error) {
-        error.message && this.$message.error(error.message)
-      }
-    },
-    deleteParam (rowIndex) {
-      this.paramsTableCols[2].inputType.splice(rowIndex, 1)
-      this.paramsForm.params.splice(rowIndex, 1)
-      this.paramsForm.disabled.splice(rowIndex, 1)
-    },
-    toggle (rowIndex) {
-      const { connector } = this.paramsForm.params[rowIndex]
-      this.paramsForm.params[rowIndex].connector =
-        connector === 'and' ? 'or' : 'and'
-    },
-    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[0].options.push({
-            label: column.columnLabel,
-            value: column.columnName,
-          })
-        }
-      })
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.advance-wrapper {
-  padding: 0 24px 20px;
-  background: #f0f3f7;
-  ::v-deep .query-params {
-    padding: 0;
-    &-wrapper {
-      padding-top: 15px;
-      height: 200px;
-      overflow-x: hidden;
-      overflow-y: auto;
-      > .el-col {
-        margin-top: 15px;
-        display: flex;
-        &:nth-child(1),
-        &:nth-child(2) {
-          margin-top: 0;
-        }
-      }
-    }
-    .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;
-      }
-      &:nth-last-child(2) {
-        border-radius: 0px 4px 4px 0px;
-        border-right: 1px solid#409EFF;
-      }
-      &:nth-child(3) {
-        flex: 1;
-        .el-input:not(.el-date-editor) .el-input__inner {
-          text-align: center;
-        }
-        .el-form-item__error {
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-      &:last-child {
-        width: 76px;
-        text-align: center;
-        background-color: transparent;
-        border: none;
-      }
-      &__content {
-        line-height: 48px;
-      }
-      .el-form-item__error {
-        top: 60%;
-        left: 14px;
-      }
-      .el-input__inner {
-        height: 48px;
-        border: none;
-
-        background: transparent;
-        color: #101116;
-        font-family: Helvetica, "Microsoft YaHei";
-      }
-      &.is-error .el-input__inner::-webkit-input-placeholder {
-        visibility: hidden;
-      }
-
-      .el-select {
-        .el-icon-arrow-up::before {
-          content: "\e78f";
-          color: #101116;
-        }
-        .el-icon-arrow-down::before {
-          content: "\e790";
-          color: #101116;
-        }
-      }
-    }
-    .clickable-delete {
-      width: 48px;
-      height: 48px;
-      text-align: center;
-      line-height: 48px;
-      font-size: 20px;
-      cursor: pointer;
-    }
-    .clickable-toggle {
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      text-decoration: underline;
-      color: #409eff;
-      cursor: pointer;
-    }
-    .clickable-add {
-      height: 48px;
-      text-align: center;
-      font-size: 20px;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .clickable-wrapper {
-        width: 30px;
-        height: 30px;
-        line-height: 28px;
-        border-radius: 50%;
-        border: 1px solid #409eff;
-        color: #409eff;
-      }
-      &:hover .clickable-wrapper {
-        background-color: #409eff;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>

src/views/newQuery/components/table.vue

@@ -1,799 +0,0 @@
-<template>
-  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newQueryTable">
-    <template v-if="istableChild">
-      <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" :show-summary="showSummary" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" height="100%" class="table infinite-list" stripe border @cell-click="cellClick">
-        <el-table-column v-for="col in tableColsCopy" :key="col.columnName" :prop="col.columnName" :label="col.groupName" align="center">
-          <el-table-column v-for="childCol in col.children" :key="childCol.columnName" :width="childCol.nameLength ? Number(childCol.nameLength) : ''" :prop="childCol.columnName" :label="childCol.columnLabel" :formatter="formatter">
-            <template #header>
-              <el-tooltip :content="childCol.columnDescribe || childCol.columnLabel" placement="top">
-                <TableHeaderCell :label="childCol.columnLabel" :filter-options="tableDataFilters[childCol.columnName]" :filter-values.sync="filterValues[childCol.columnName]" :sortable="childCol.needSort" :sort-rule.sync="tableDataSortRules[childCol.columnName]" />
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table-column>
-      </el-table>
-    </template>
-    <template v-else>
-      <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" :show-summary="showSummary" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" height="100%" class="table infinite-list" border stripe @cell-click="cellClick">
-        <el-table-column v-for="(item, index) in tableColsCopy" :key="index" :width="item.nameLength ? Number(item.nameLength) : ''" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip" :formatter="formatter">
-          <template #header>
-            <el-tooltip :content="item.columnDescribe || item.columnLabel" placement="top">
-              <TableHeaderCell :label="item.columnLabel" :filter-options="tableDataFilters[item.columnName]" :filter-values.sync="filterValues[item.columnName]" :sortable="item.needSort" :sort-rule.sync="tableDataSortRules[item.columnName]" />
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
-    <template v-if="istableDown">
-      <div :style="downStyle" class="down-btns">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="下载" @click="exportHandler" />
-      </div>
-    </template>
-    <template v-if="istableCol">
-      <div :style="btnStyle" class="btns">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
-      </div>
-      <Dialog :flag="dialogFlag" width="600px" class="dialog-check-group">
-        <div class="dialog-wrapper">
-          <div class="title">列设置</div>
-          <div style="height: 600px" class="content">
-            <el-scrollbar style="height: 100%">
-              <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
-                  label: 'columnLabel',
-                  children: 'children',
-                }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
-            </el-scrollbar>
-          </div>
-          <div class="foot right t30">
-            <el-button size="medium" class="r24" type="primary" @click="onCheck('baggageTableData')">确定</el-button>
-            <el-button size="medium" @click="hide">取消</el-button>
-          </div>
-        </div>
-      </Dialog>
-    </template>
-  </div>
-</template>
-
-<script>
-import pf from '@/layout/mixin/publicFunc'
-import { getToken } from '@/utils/auth'
-import { getAuthData, formatOrder } from '@/utils/validate'
-import { exportToExcel } from '@/utils/table'
-import tableColsMixin from '../mix/tableCols'
-import Dialog from '@/layout/components/Dialog/index.vue'
-import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
-export default {
-  name: 'NewQueryTable',
-  components: { Dialog, TableHeaderCell },
-  mixins: [pf, tableColsMixin],
-  props: {
-    // 不换行，溢出隐藏
-    showOverflowTooltip: {
-      type: Boolean,
-      default: true,
-    },
-    tableTag: {
-      type: Object,
-      default: () => ({}),
-    },
-    tableName: {
-      type: String,
-      default: '',
-    },
-    istableCol: {
-      type: Boolean,
-      default: false,
-    },
-    istableDown: {
-      type: Boolean,
-      default: false,
-    },
-    downName: {
-      type: String,
-      default: '',
-    },
-    istableChild: {
-      type: Boolean,
-      default: false,
-    },
-    btnStyle: {
-      type: Object,
-      default: () => { },
-    },
-    downStyle: {
-      type: Object,
-      default: () => { },
-    },
-    pageSize: {
-      type: Number,
-      default: 20,
-    },
-    shouldReset: {
-      type: Boolean,
-      default: true
-    },
-    fastFilter: {
-      type: Function,
-      default: () => () => true
-    },
-  },
-  data () {
-    return {
-      page: 0,
-      queryId: '',
-      noMore: false,
-      loading: false,
-      tableCols: [], // 表头数据
-      tableData: [], // 表格数据
-      tableColsCopy: [], // 表头数据缓存
-      tableDataFilters: {}, // 表头-下拉数据
-      filterValues: {}, // 表头-下拉-选中数据
-      tableDataCopy: [], // 缓存table数据
-      tableGroups: [], // 表格分组数据
-      colShowFilter: '', // 表头-下拉-箭头
-      spanArr: [], // 表格分组数据缓存
-      pos: 0, // 表格分组计数
-      dataContent: [],
-      authBtns: [],
-      authBtnCol: [],
-      authBtnColName: [],
-      tableArrs: [], // 重组table-表头下拉
-      tableOptions: {}, // 弹框-下来数据缓存
-      showSummary: false, // 是否显示统计
-      tableDataSortRules: {},
-      tableCath: [],
-      leaveCount: 0,
-      arriveCount: 0,
-      checkPath: ['/newDeparture', '/newTransfer/in', '/newTransfer/out', '/newArrival'],
-      hasSetTableScroll: false,
-    }
-  },
-  computed: {
-    // 设置表头-下拉-选中数据
-    fastFilteredTableData () {
-      return this.tableData.filter(this.fastFilter)
-    },
-    dealedTableData () {
-      const filtered = this.fastFilteredTableData.filter(item => {
-        let flag = true
-        Object.entries(this.filterValues).forEach(([key, arr]) => {
-          if (arr.length && !arr.includes(String(item[key]))) {
-            flag = false
-          }
-        })
-        return flag
-      })
-      const sortRules = Object.entries(this.tableDataSortRules).reduce(
-        (pre, [key, value]) => {
-          if (value) {
-            pre[0].push(key)
-            value = value === 'ascending' ? 'asc' : 'desc'
-            pre[1].push(value)
-          }
-          return pre
-        },
-        [[], []]
-      )
-      return this._.orderBy(filtered, sortRules[0], sortRules[1])
-    },
-    tableHeight () {
-      return 100
-    },
-    fromDataType () {
-      return function (type) {
-        if (type) {
-          return type.replace(/\([^\)]*\)/g, '')
-        }
-      }
-    },
-  },
-  watch: {
-    tableTag: {
-      async handler (val) {
-        this.dataContent = _.cloneDeep(val)
-        delete this.dataContent.shouldReset
-        this.restTable()
-        if (val.shouldReset) {
-          this.$emit('update:shouldReset', true)
-          await this.$nextTick()
-          this.hasSetTableScroll = false
-        }
-        this.load()
-      },
-      deep: true,
-    }
-  },
-  created () {
-    if (this.AauthTable && this.AauthTable.length) {
-      const t = this.AauthTable.filter(item => item.auth_name == this.tableName)
-      const obj = t[0]
-      this.AqueryParams = obj
-      this.AqueryId = obj.queryTemplateID
-      this.AauthId = obj.auth_id
-    }
-    this.getColumnData()
-  },
-  mounted () {
-    this.setCellClick()
-  },
-  updated () {
-    this.$refs['table']?.doLayout()
-  },
-  methods: {
-    // 获取表头数据
-    async getColumnData () {
-      try {
-        const { code, returnData } = await this.getQueryList(
-          SERVICE_ID.sysUserAuthId,
-          [
-            {
-              user_id: getToken('userid'),
-              auth_id: this.AauthId,
-            },
-          ]
-        )
-        if (code == 0) {
-          if (returnData && returnData.length) {
-            if (!this.istableCol) {
-              sessionStorage.setItem('tableColumns', JSON.stringify(returnData))
-              this.$store.dispatch('auth/changeAuthMsg', returnData)
-            }
-            const msgDatas = returnData.filter(item => item.needShow)
-            const msgCounts = msgDatas.filter(item => item.needCount)
-            if (msgCounts.length) {
-              this.showSummary = true
-            }
-            const msgDatasShows = formatOrder(msgDatas)
-            this.tableCath = msgDatasShows
-            if (this.istableChild) {
-              const datas = _.cloneDeep(msgDatasShows)
-              const cache = {}
-              const indices = []
-              const others = []
-              datas.forEach(item => {
-                if (!cache[item.groupName] && item.groupName) {
-                  cache[item.groupName] = item.groupName
-                  indices.push(item)
-                } else {
-                  const newItem = _.cloneDeep(item)
-                  others.push(newItem)
-                }
-              })
-              indices.map((item, index) => {
-                item.tabIndex = index
-              })
-              others.forEach(item => {
-                indices.forEach(p => {
-                  if (item.groupName == p.groupName && item.groupName) {
-                    item.tabIndex = p.tabIndex
-                  }
-                })
-              })
-              indices.forEach(item => {
-                item.children = [
-                  _.cloneDeep(item),
-                  ...this.formatCaps(item.tabIndex, others),
-                ]
-              })
-              this.tableCols = _.cloneDeep(indices)
-            } else {
-              this.tableCols = _.cloneDeep(msgDatasShows)
-            }
-            this.tableColsCopy = _.cloneDeep(this.tableCols)
-            this.initTableCols()
-            this.setTableCols()
-          }
-        } else {
-          this.$message.error('获取表头数据失败')
-        }
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    setTableCols () {
-      this.tableCath.forEach(({ columnName, needFilters, needSort }) => {
-        if (needFilters) {
-          this.$set(this.tableDataFilters, columnName, [])
-          this.$set(this.filterValues, columnName, [])
-        }
-        if (needSort) {
-          this.$set(this.tableDataSortRules, columnName, '')
-        }
-      })
-    },
-    formatCaps (order, arr) {
-      const datas = []
-      for (let i = 0; i < arr.length; i++) {
-        const element = arr[i]
-        if (element['tabIndex'] == order) {
-          datas.push(element)
-        }
-      }
-      return datas
-    },
-    // 获取表格数据
-    async getQuery (id, dataContent = this.dataContent, page, pageSize) {
-      try {
-        if (this.shouldReset) {
-          this.loading = true
-        }
-        this.$emit('update:shouldReset', false)
-        await this.$nextTick()
-        const { code, returnData } = await this.getQueryListAuth(
-          id,
-          dataContent,
-          page,
-          pageSize
-        )
-        if (code == 0) {
-          let tableData = []
-          if (returnData.length < pageSize) {
-            this.noMore = true
-            if (returnData.length === 0) {
-              this.page--
-              this.loading = false
-            }
-          }
-          if (this.shouldReset) {
-            tableData = [...this.tableData, ...returnData]
-            this.tableData.push(...returnData)
-          } else {
-            tableData = [...returnData]
-            this.noMore = true
-          }
-          this.$emit('tableLoad', [...tableData])
-          this.initTableData(tableData)
-          await this.$nextTick()
-          this.setTableScroll()
-          this.loading = false
-        } else {
-          throw new Error('获取表格数据失败')
-        }
-      } catch (error) {
-        this.page--
-        this.loading = false
-        this.$message.error(error.message)
-      }
-    },
-    restTable () {
-      this.loading = false
-      this.page = 0
-      this.noMore = false
-      if (this.shouldReset) {
-        this.tableData = []
-      }
-    },
-    load () {
-      if (this.tableTag && Object.keys(this.tableTag).length) {
-        if (this.noMore || this.loading) {
-          return
-        }
-        if (this.AqueryParams && this.AqueryParams.queryparams) {
-          const newData = _.cloneDeep(this.tableTag)
-          delete newData.shouldReset
-          const paramsType = typeof this.AqueryParams.queryparams
-          if (paramsType == 'string') {
-            const dataObj = {}
-            const paramsData = this.AqueryParams.queryparams.split(',')
-            if (paramsData && paramsData.length) {
-              for (const key in newData) {
-                paramsData.map(item => {
-                  if (key === item) {
-                    dataObj[item] = newData[key]
-                  } else {
-                    if (item.includes('=')) {
-                      const newItem = item.split('=')
-                      if (key === newItem[0]) {
-                        dataObj[newItem[1]] = newData[key]
-                      }
-                    }
-                  }
-                })
-              }
-              this.dataContent = dataObj
-            }
-          }
-        }
-        this.getQuery(
-          this.AqueryId,
-          this.dataContent,
-          ++this.page,
-          this.pageSize
-        )
-      }
-    },
-    setCellClick () {
-      let table = null
-      const { auth_id } = this.$route.meta
-      const { arrs } = getAuthData(auth_id)
-      if (this.tableName) {
-        table = this.AauthTable.filter(item => item.auth_name == this.tableName)
-      } else {
-        table = arrs.filter(item => item.auth_type == 4)
-      }
-      if (table && table.length) {
-        const obj = table[0]
-        const { arrs } = getAuthData(obj.auth_id)
-        this.authBtnCol = arrs.filter(item => Number(item.service_type) == 6)
-        if (this.authBtnCol.length) {
-          this.authBtnCol.forEach(item => {
-            this.authBtnColName.push(item.relation_data)
-          })
-        }
-      }
-    },
-    // 初始化表格
-    initTableData (tableData) {
-      tableData.forEach(async row => {
-        if (row.needGroup) {
-          this.tableGroups.push(row.columnName)
-        }
-      })
-      const now = new Date()
-      if (this.$route.path == '/newDeparture') {
-        this.leaveCount = 0
-        const nTableData = [...tableData]
-        const cData = nTableData.filter(row => Number(row['NO_BSM_number']) + Number(row['check_in_baggage_number']) > 0)
-        cData.forEach(row => {
-          if (row.abnormalState === 'CAN') {
-            row.canceled = 'Y'
-          } else if (row.normalState === 'DEP' || row.actualTakeOffTime) {
-            row.hasTakenOff = 'Y'
-            this.leaveCount++
-          }
-        })
-        this.tableData = _.orderBy(cData, ['canceled', 'hasTakenOff', 'scheduleTakeOffTime'], ['desc', 'asc', 'asc']);
-      }
-      if (this.$route.path == '/newArrival') {
-        this.arriveCount = 0
-        const nTableData = [...tableData]
-        const cData = nTableData.filter(row => Number(row['NO_BSM_number']) + Number(row['check_in_baggage_number']) > 0)
-        cData.forEach(row => {
-          if (row.abnormalState === 'CAN') {
-            row.canceled = 'Y'
-          } else if (row.normalState === 'ARR' || row.actualLandInTime) {
-            row.hasLanded = 'Y'
-            this.arriveCount++
-          }
-        })
-        this.tableData = _.orderBy(cData, ['canceled', 'hasLanded', 'actualLandInTime'], ['desc', 'asc', 'asc'])
-      }
-      if (this.$route.path.startsWith('/newTransfer')) {
-        this.leaveCount = 0
-        const nTableData = [...tableData]
-        nTableData.forEach(row => {
-          if (row.departure_flights_leave_date && new Date(row.departure_flights_leave_date) < now) {
-            row.hasTakenOff = 'Y'
-            this.leaveCount++
-          }
-        })
-        this.tableData = _.orderBy(nTableData, ['departure_flights_leave_date', 'normalState'], ['asc', 'desc'])
-      }
-      if (this.$route.path == '/newBagDetails') {
-        const nTableData = [...tableData]
-        this.tableData = _.orderBy(nTableData, ['readTime'], ['asc', 'desc'])
-      }
-      const filters = this.setTableFilters(this.tableData, this.tableDataFilters)
-      this.tableDataFilters = _.cloneDeep(filters)
-      this.tableGroup(this.tableData)
-    },
-    setTableFilters (tableData, filters) {
-      const tempSets = {}
-      Object.keys(filters).forEach(key => {
-        tempSets[key] = new Set()
-      })
-      tableData.forEach(item => {
-        Object.keys(tempSets).forEach(key => {
-          ; (item[key] ?? '') !== '' && tempSets[key].add(String(item[key]))
-        })
-      })
-      Object.keys(tempSets).forEach(key => {
-        filters[key] = _.orderBy(
-          [...tempSets[key]].map(value => ({
-            text: value,
-            value,
-          })),
-          o => o.value
-        )
-      })
-      return filters
-    },
-    // 分组
-    tableGroup (tableData) {
-      const spanArr = []
-      let pos = 0
-      let ifYj = this.tableGroups[0]
-      for (let i = 0; i < tableData.length; i++) {
-        if (i === 0) {
-          spanArr.push(1)
-        } else {
-          if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
-            spanArr[pos] += 1
-            spanArr.push(0)
-          } else {
-            spanArr.push(1)
-            pos = i
-          }
-        }
-      }
-      this.spanArr = spanArr
-      this.pos = pos
-    },
-    setTableScroll () {
-      const count = Math.max(this.leaveCount, this.arriveCount)
-      if (this.hasSetTableScroll || count === 0) {
-        return
-      }
-      const table = this.$refs['table'].$el
-      const scrollParent = table.querySelector('.el-table__body-wrapper')
-      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
-        return
-      }
-      const lastRow = table.querySelectorAll('.el-table__body tr')[count - 1]
-      setTimeout(() => {
-        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2
-        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight
-        if (scrollMid > 0) {
-          const scrollHeight = Math.min(scrollMid, scrollMax)
-          scrollParent.scrollTo(0, scrollHeight)
-        }
-      }, 0)
-      this.hasSetTableScroll = true
-    },
-    popoverShowHandler (prop) {
-      this.colShowFilter = prop
-    },
-    popoverHideHandler () {
-      this.colShowFilter = ''
-    },
-    // 获取弹框-下拉数据
-    async getSelectData (id) {
-      // name ? [name] : name === null ? [null]: [],
-      const { code, returnData } = await this.getQueryList(id, {})
-      if (code == 0) {
-        return returnData
-      } else {
-        return []
-      }
-    },
-    // 设置表头-下拉-箭头样式
-    arrowClass () {
-      return function (prop) {
-        const classes = []
-        if (this.colShowFilter === prop) {
-          classes.push('arrow-active')
-        }
-        if (
-          Object.entries(this.tableDataFilters).find(
-            ([key, arr]) => this.filterValues[prop]
-          )
-        ) {
-          classes.push('arrow-blue')
-        }
-        return classes.join(' ')
-      }
-    },
-    // 合计
-    getSummaries (param) {
-      const { columns, data } = param
-      const sums = []
-      columns.forEach((column, index) => {
-        if (index === 0) {
-          sums[index] = '合计：' + data.length
-          return
-        }
-        this.tableCath.forEach(p => {
-          if (column.property == p.columnName && p.needCount) {
-            const values = data.map(item => Number(item[column.property]))
-            if (!values.every(value => isNaN(value))) {
-              sums[index] = values.reduce((prev, curr) => {
-                const value = Number(curr)
-                if (!isNaN(value)) {
-                  return prev + curr
-                } else {
-                  return prev
-                }
-              }, 0)
-              sums[index] += ''
-            }
-          }
-        })
-      })
-      return sums
-    },
-    // 分组
-    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
-      if (this.tableGroups.includes(column['property'])) {
-        const _row = this.spanArr[rowIndex]
-        const _col = _row > 0 ? 1 : 0
-        return {
-          rowspan: _row,
-          colspan: _col,
-        }
-      }
-    },
-    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass ({ row, column, rowIndex, columnIndex }) {
-      const classes = []
-      const rule = this.tableDataSortRules[column.property]
-      if (rule) {
-        classes.push(rule)
-      }
-      return classes.join(' ')
-    },
-    // 表格-设置单元格样式
-    cellClass ({ row, column, rowIndex, columnIndex }) {
-      const classes = []
-      if (this.authBtnColName.includes(column.property) && Number(row[column.property]) !== 0) {
-        classes.push('is-click-btn')
-      }
-      if (this.$route.path == '/newDeparture') {
-        if (column.property === 'NO_check_number' && row['NO_check_number'] != 0) {
-          classes.push('cell-toUnload')
-        }
-      }
-      return classes.join(' ')
-    },
-    // 表格-设置行样式
-    rowClass ({ row, rowIndex }) {
-      const classes = []
-      if (this.checkPath.includes(this.$route.path)) {
-        const { abnormalState } = row
-        if (abnormalState) {
-          if (abnormalState == 'DLY') {
-            classes.push('bgl-delayed')
-          }
-          if (abnormalState == 'CAN') {
-            classes.push('bgl-canceled')
-          }
-        }
-        if (row.hasTakenOff === 'Y' || row.hasLanded === 'Y') {
-          classes.push('bgl-hui')
-        }
-        if (rowIndex === this.leaveCount - 1 || rowIndex === this.arriveCount - 1) {
-          classes.push("redBorder");
-        }
-      }
-      return classes
-    },
-    // 表格-单元格点击
-    cellClick (row, column) {
-      const dataBtns = this.authBtnCol
-      if (dataBtns && dataBtns.length) {
-        const clickBtn = dataBtns.filter(
-          item => item.relation_data == column.property
-        )[0]
-        if (clickBtn) {
-          const { open_method, route_info, pass_parameters, relation_data } = clickBtn
-          if (Number(open_method) === 2 && Number(row[relation_data]) !== 0) {
-            if (pass_parameters) {
-              const query = pass_parameters.split(',')
-              const obj = {}
-              query.forEach(key => {
-                obj[key] = row[key]
-              })
-              if (['Inbound_flight_number'].includes(relation_data)) {
-                obj.outAirport = obj.inbound_flights_departure_airport
-                obj.landAirport = obj.current_airport
-                delete obj.current_airport
-                delete obj.inbound_flights_departure_airport
-              }
-              if (['departure_flights_number', 'departure_flights_transferred_bags_number', 'Inbound_baggage_number'].includes(relation_data)) {
-                obj.outAirport = obj.current_airport
-                obj.landAirport = obj.departure_flights_destination_airport
-                delete obj.current_airport
-                delete obj.departure_flights_destination_airport
-              }
-              this.$router.push({
-                path: route_info,
-                query: obj,
-              })
-            }
-          }
-        }
-      }
-    },
-    // 导出
-    exportHandler () {
-      const table = this.$refs['table'].$el.cloneNode(true)
-      const fileName = `${this.downName || this.AqueryParams.auth_name}.xlsx`
-      exportToExcel(table, `${this.downName || this.AqueryParams.auth_name}`, fileName)
-    },
-    formatter (row, column, cellValue, index) {
-      let sameColumn = null
-      this.tableCols.some(col => {
-        if (col.columnName === column.property) {
-          sameColumn = col
-          return true
-        } else if (col.children) {
-          col.children.some(childCol => {
-            if (childCol.columnName === column.property) {
-              sameColumn = childCol
-              return true
-            }
-          })
-        }
-      })
-      if (sameColumn && this.fromDataType(sameColumn.dataType) === 'datetime') {
-        return (cellValue ?? '').replace('T', '\n')
-      }
-      return cellValue
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.newQueryTable {
-  height: 100%;
-  position: relative;
-  ::v-deep .table {
-    .is-click-btn {
-      .cell {
-        color: #409eff;
-        cursor: pointer;
-        position: relative;
-      }
-    }
-    .cell {
-      color: #000;
-      text-align: center;
-      white-space: pre-line;
-      padding: 0;
-      .el-tooltip {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        line-height: 34px;
-      }
-    }
-    tr.bgl-hui td {
-      background: #d2d6df;
-    }
-    tr.bgl-delayed td {
-      background: #fcf0b1;
-    }
-    tr.bgl-canceled td {
-      background: #f7babe;
-    }
-    .redBorder {
-      position: relative;
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: 2px;
-        background: #e83f82;
-      }
-    }
-    td.cell-toUnload {
-      background: lightcoral !important;
-      position: relative;
-      &::after {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 2px dashed red;
-      }
-    }
-  }
-  .btns {
-    position: absolute;
-    top: -50px;
-    right: 32px;
-    z-index: 10;
-  }
-  .down-btns {
-    position: absolute;
-    top: -50px;
-    right: 72px;
-    z-index: 10;
-  }
-}
-</style>

src/views/newQuery/index.vue

@@ -1,396 +0,0 @@
-<template>
-  <div class="newQuery">
-    <div class="newQuery-contents">
-      <div class="newQuery-head flex">
-        <div class="newQuery-head-left flex-wrap">
-          <div class="title">高级查询</div>
-          <div class="btns">
-            <el-scrollbar ref="scrollContainer" :vertical="false">
-              <el-button v-for="(item,index) in queryItems" :key="index" @click="handleClick(item,index)" :class="activeIndex == index ? 'active':''" size="mini" plain type="primary">
-                <span class="btnName">{{ item.name }}</span>
-                <span @click.stop="handleRemove(item)" class="btnIcon"><i class="el-icon-close"></i></span>
-              </el-button>
-            </el-scrollbar>
-          </div>
-        </div>
-        <div class="newQuery-head-right flex-wrap">
-          <template v-if="flag">
-            <!-- <el-button @click="handleAdd" size="mini" plain type="primary">新增</el-button> -->
-            <el-button @click="saveItem" size="mini" plain type="primary">保存条件</el-button>
-          </template>
-          <el-button @click="handleSearch" size="mini" class="r10" plain type="primary">查询</el-button>
-          <img @click="handleDown" class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出">
-        </div>
-      </div>
-      <div class="newQuery-tab">
-        <div @click="flag = !flag " class="msg">
-          <span v-if="flag" class="el-icon-caret-top"></span>
-          <span v-else class="el-icon-caret-bottom"></span>
-        </div>
-      </div>
-      <div v-if="flag" class="newQuery-search">
-        <Search :dataQuery="dataQuery" @getColData="getColData" ref="searchTable" />
-      </div>
-      <div :style="{height:tableHeight}" class="newQuery-table">
-        <Table :pageSize="999" style="height:100%" ref="queryTable" :tableTag="tableTag" />
-      </div>
-    </div>
-    <Dialog width="520px" :flag="diaFlag">
-      <div class="dialog-content">
-        <div class="title">查询条件保存</div>
-        <div class="contents">
-          <el-form ref="form" :model="formObj" :rules="rules" label-width="80px">
-            <el-form-item prop="name" label="条件名称">
-              <el-input clearable v-model="formObj.name" placeholder="请输入条件名称"></el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="foot right">
-          <el-button size="medium" @click="handleOk('form')" class="r24" type="primary">确定</el-button>
-          <el-button @click="diaFlag = false" size="medium">取消</el-button>
-        </div>
-      </div>
-    </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">{{ rmTitle }}</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 Search from './components/search.vue'
-import Table from './components/table.vue'
-import Dialog from '@/layout/components/Dialog/index.vue'
-import { getToken } from '@/utils/auth'
-import pf from '@/layout/mixin/publicFunc'
-export default {
-  name: 'NewQuery',
-  components: { Search, Table, Dialog },
-  mixins: [pf],
-  data () {
-    return {
-      queryBtns: [],
-      flag: false,
-      queryType: '',
-      diaFlag: false,
-      rmFlag: false,
-      formObj: {
-        name: ''
-      },
-      activeIndex: null,
-      activeNames: [],
-      queryArrs: [],
-      nameArrs: [],
-      rmObj: {},
-      rmTitle: '',
-      tbObj: {},
-      dataQuery: [],
-      tableTag: {},
-      clkItem: {},
-      clkArrs: [],
-      queryItems: JSON.parse(localStorage.getItem('localItems')) ?? [],
-      rules: {
-        name: [
-          { required: true, message: '请输入条件名称', trigger: 'blur' },
-        ],
-      },
-      nums: 1
-    }
-  },
-  computed: {
-    tableHeight () {
-      if (this.flag) {
-        return 'calc(100% - 300px)';
-      } else {
-        return 'calc(100% - 80px)';
-      }
-    }
-  },
-  mounted () {
-    const { query } = this.$route
-    if (query && Object.keys(query).length) {
-      const queryData = query
-      const datas = []
-      for (const key in queryData) {
-        if (Object.hasOwnProperty.call(queryData, key)) {
-          const val = queryData[key]
-          const comparator = key == 'startDate' ? '>=' : key == 'endDate' ? '<=' : '='
-          const column = key == 'startDate' ? 'carrierFlightsDate' : key == 'endDate' ? 'carrierFlightsDate' : key
-          const r = {
-            left: '(',
-            column: column,
-            comparator,
-            value: val,
-            right: ')',
-            connector: 'and'
-          }
-          datas.push(r)
-        }
-      }
-      this.flag = true
-      setTimeout(() => {
-        this.dataQuery = datas
-        this.tableTag = {
-          filter: datas
-        }
-      }, 50);
-    }
-  },
-  methods: {
-    //删除查询条件
-    handleRemove (item) {
-      this.rmFlag = true
-      this.rmObj = item
-      this.rmTitle = item.name
-    },
-    //新增查询
-    handleAdd () {
-      this.$refs.searchTable.addParamsHandler()
-    },
-    //历史查询条件点击
-    handleClick (item, index) {
-      const { name, value } = item
-      this.activeNames.push(name)
-      if (this.activeNames.length == 1) {
-        item.flag = true
-        this.activeIndex = index
-        this.flag = true
-        this.formObj.name = name
-        this.clkItem = item
-        setTimeout(() => {
-          this.dataQuery = value
-          this.tableTag = {
-            filter: value
-          }
-        }, 50);
-      } else {
-        const arrs = this.activeNames
-        const len = this.activeNames.length
-        const [a1, a2] = [arrs[len - 2], arrs[len - 1]]
-        if (a1 == a2) {
-          item.flag = !item.flag
-          if (item.flag) {
-            this.activeIndex = index
-            this.flag = true
-            this.formObj.name = name
-            this.clkItem = item
-            setTimeout(() => {
-              this.dataQuery = value
-              this.tableTag = {
-                filter: value
-              }
-            }, 50);
-          } else {
-            this.activeIndex = null
-            this.flag = false
-            this.formObj.name = ''
-            this.clkItem = {}
-            this.dataQuery = []
-          }
-        } else {
-          item.flag = true
-          this.activeIndex = index
-          this.flag = true
-          this.formObj.name = name
-          this.clkItem = item
-          setTimeout(() => {
-            this.dataQuery = value
-            this.tableTag = {
-              filter: value
-            }
-          }, 50);
-        }
-      }
-    },
-    //table导出
-    handleDown () {
-      this.$refs.queryTable.exportHandler()
-    },
-    // 保存条件
-    saveItem () {
-      this.diaFlag = true
-      this.queryType = 'save'
-      this.$refs.searchTable.advancedQueryHandler()
-    },
-    //获取缓存数据
-    getLocalData () {
-      const datas = localStorage.getItem('localItems')
-      if (datas) {
-        const newDatas = JSON.parse(datas)
-        return newDatas
-      } else {
-        return []
-      }
-    },
-    //查询数据
-    getColData (arrs) {
-      if (this.queryType == 'save') {
-        if (Object.keys(this.clkItem).length) {
-          this.clkArrs = arrs
-        } else {
-          this.queryArrs.push(arrs)
-        }
-      } else {
-        this.tableTag = {
-          filter: arrs
-        }
-      }
-    },
-    //查询
-    handleSearch () {
-      this.queryType = 'query'
-      this.$refs.searchTable?.advancedQueryHandler()
-    },
-    //确定-保存条件
-    handleOk (formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          const localDatas = this.getLocalData()
-          if (Object.keys(this.clkItem).length) {
-            this.$refs.searchTable.advancedQueryHandler()
-            const { name } = this.clkItem
-            const forName = this.formObj.name
-            const newDatas = {}
-            localDatas.filter((item, index) => {
-              if (item.name === name) {
-                newDatas.index = index
-                newDatas.values = this.clkArrs.length ? this.clkArrs : item
-              }
-            })
-            if (Array.isArray(newDatas.values)) {
-              localDatas[newDatas.index].name = forName
-              localDatas[newDatas.index].value = newDatas.values
-            } else {
-              newDatas['values'].name = forName
-              localDatas[newDatas.index] = newDatas.values
-            }
-            this.queryItems = localDatas
-          } else {
-            let datas = []
-            const name = this.formObj.name
-            this.nameArrs.push(name)
-            const nameIndex = this.nameArrs.slice(-5)
-            const arrs = _.cloneDeep(this.queryArrs).slice(-5)
-            arrs.forEach((item, index) => {
-              const obj = {
-                name: nameIndex[index],
-                value: item,
-                // userid: getToken('userid')
-              }
-              datas.push(obj)
-            })
-            if (localDatas && localDatas.length) {
-              datas = [...localDatas, ...datas]
-            }
-            const caps = _.uniqBy(datas, 'name')
-            this.queryItems = caps.slice(-5)
-            this.formObj.name = ''
-          }
-          localStorage.setItem('localItems', JSON.stringify(this.queryItems))
-          this.diaFlag = false
-        } else {
-          console.log('error submit!!');
-          return false;
-        }
-      });
-    },
-    //确定-删除
-    tableRemove () {
-      const item = this.rmObj
-      const datas = JSON.parse(localStorage.getItem('localItems'))
-      if (datas && datas.length) {
-        datas.forEach((nitem, index) => {
-          if (item.name == nitem.name) {
-            datas.splice(index, 1)
-          }
-        })
-      }
-      this.queryItems = datas
-      localStorage.setItem('localItems', JSON.stringify(datas))
-      this.clkItem = {}
-      this.dataQuery = []
-      this.formObj.name = ''
-      this.rmFlag = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.newQuery {
-  padding: 24px;
-  height: calc(100vh - 80px);
-  &-contents {
-    height: 100%;
-    border-radius: 4px;
-    position: relative;
-  }
-  .r10 {
-    margin-right: 10px;
-  }
-  &-tab {
-    position: absolute;
-    left: 0;
-    top: 78px;
-    width: 100%;
-    height: 5px;
-    background-color: #b2cbde;
-    z-index: 100;
-    text-align: center;
-    .msg {
-      display: inline-block;
-      width: 100px;
-      height: 12px;
-      background-color: #b2cbde;
-      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;
-      margin-right: 50px;
-    }
-    .btns {
-      max-width: 750px;
-      white-space: nowrap;
-      .active {
-        background: #409eff !important;
-        border-color: #409eff !important;
-        color: #fff !important;
-      }
-      .el-button {
-        &:focus {
-          color: #409eff;
-          background: #ecf5ff;
-          border-color: #b3d8ff;
-        }
-      }
-      .btnIcon {
-        margin-left: 15px;
-      }
-    }
-  }
-  &-table {
-    padding: 0 24px;
-    background-color: #fff;
-    border-radius: 0px 0px 4px 4px;
-  }
-}
-</style>

src/views/newQuery/mix/tableCols.js

@@ -1,100 +0,0 @@
-/*
- * @Author: Badguy
- * @Date: 2022-03-04 11:50:22
- * @LastEditTime: 2022-03-15 17:56:34
- * @LastEditors: your name
- * @Description: 航站视图表格通用部分
- * have a nice day!
- */
-
-export default {
-  data () {
-    return {
-      // 筛选后表头
-      tableColsCopy: [],
-      // 列设置弹框选中
-      checkedKeys: [],
-      checkedKeysTemp: [],
-      halfCheckedKeys: [],
-      // 列设置弹框开关
-      dialogFlag: false
-    }
-  },
-  // created () {
-  //   this.initTableCols()
-  // },
-  updated () {
-    // table数据更新
-    this.$nextTick(() => {
-      this.$refs.table?.doLayout()
-    })
-  },
-  computed: {
-    colsCheckClass () {
-      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
-    }
-  },
-  methods: {
-    // 列设置-初始化
-    initTableCols () {
-      const that = this
-      function setTableCols (cols) {
-        for (const col of cols) {
-          col.index = that.checkedKeys.length
-          that.checkedKeys.push(that.checkedKeys.length)
-          if (col.children?.length) {
-            setTableCols(col.children)
-          }
-        }
-      }
-      setTableCols(this.tableCols)
-      // this.tableColsCopy = this._.cloneDeep(this.tableCols)
-      this.checkedKeysTemp = [...this.checkedKeys]
-    },
-    // 列设置-确定
-    handleCheck (data, checked) {
-      this.checkedKeysTemp = [...checked.checkedKeys]
-      this.halfCheckedKeys = [...checked.halfCheckedKeys]
-    },
-    onCheck (tableDataName = 'tableData') {
-      if (this.dialogFlag === false) {
-        return
-      }
-      this.loading = true
-      const tableDataTemp = this._.cloneDeep(this[tableDataName])
-      this[tableDataName] = []
-      this.dialogFlag = false
-      this.checkedKeys = [...this.checkedKeysTemp]
-      const datas = this.colsFilter(this._.cloneDeep(this.tableCols))
-      const newTableColsCopy = datas.filter((item) => item.needShow)
-      this.tableColsCopy = _.cloneDeep(newTableColsCopy)
-      setTimeout(() => {
-        if (!this[tableDataName].length) {
-          this[tableDataName] = tableDataTemp
-        }
-        this.loading = false
-      }, 50)
-    },
-    colsFilter (cols) {
-      const temp = cols.filter(col => {
-        if (this.halfCheckedKeys.includes(col.index)) {
-          col.children = this.colsFilter(col.children)
-          return true
-        } else if (this.checkedKeys.includes(col.index)) {
-          return true
-        }
-        return false
-      })
-      return temp
-    },
-    // 弹框展开
-    show () {
-      this.dialogFlag = true
-    },
-    // 弹框关闭
-    hide () {
-      this.dialogFlag = false
-      this.checkedKeysTemp = [...this.checkedKeys]
-    }
-  }
-}