CA3.0/src/views/newQuery/components/table.vue

<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>
            <template slot-scope="scope">
              <template v-if="childCol.columnName == 'check_in_LT'">
                <div v-if="scope.row.check_in_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'check_in_L')">
                  <span class="cell">{{ scope.row.check_in_L }}L</span>
                </div>
                <div v-else>0L</div>
                <div v-if="scope.row.check_in_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'check_in_T')">
                  <span class="cell">{{ scope.row.check_in_T }}T</span>
                </div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'security_LT'">
                <div v-if="scope.row.security_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'security_L')">
                  <span class="cell">{{ scope.row.security_L }}L</span>
                </div>
                <div v-else>0L</div>
                <div v-if="scope.row.security_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'security_T')">
                  <span class="cell">{{ scope.row.security_T }}T</span>
                </div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'sort_LT'">
                <div v-if="scope.row.sort_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'sort_L')"><span
                    class="cell">{{ scope.row.sort_L }}L</span></div>
                <div v-else>0L</div>
                <div v-if="scope.row.sort_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'sort_T')"><span
                    class="cell">{{ scope.row.sort_T }}T</span></div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'load_LT'">
                <div v-if="scope.row.load_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'load_L')"><span
                    class="cell">{{ scope.row.load_L }}L</span></div>
                <div v-else>0L</div>
                <div v-if="scope.row.load_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'load_T')"><span
                    class="cell">{{ scope.row.load_T }}T</span></div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'onaiecraft_LT'">
                <div v-if="scope.row.onaiecraft_L > 0" class="is-click-btn"
                  @click="cellClick2(scope.row, 'onaiecraft_L')">
                  <span class="cell">{{ scope.row.onaiecraft_L }}L</span>
                </div>
                <div v-else>0L</div>
                <div v-if="scope.row.onaiecraft_T > 0" class="is-click-btn"
                  @click="cellClick2(scope.row, 'onaiecraft_T')">
                  <span class="cell">{{ scope.row.onaiecraft_T }}T</span>
                </div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'unload_XT'">
                <div v-if="scope.row.unload_X > 0" class="is-click-btn" @click="cellClick2(scope.row, 'unload_X')"><span
                    class="cell">{{ scope.row.unload_X }}X</span></div>
                <div v-else>0L</div>
                <div v-if="scope.row.unload_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'unload_T')"><span
                    class="cell">{{ scope.row.unload_T }}T</span></div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'arrive_XT'">
                <div v-if="scope.row.arrive_X > 0" class="is-click-btn" @click="cellClick2(scope.row, 'arrive_X')"><span
                    class="cell">{{ scope.row.arrive_X }}X</span></div>
                <div v-else>0L</div>
                <div v-if="scope.row.arrive_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'arrive_T')"><span
                    class="cell">{{ scope.row.arrive_T }}T</span></div>
                <div v-else>0T</div>
              </template>
              <template v-else-if="childCol.columnName == 'B_security_check_number_LT'">
                <div v-if="scope.row.B_security_check_number_L > 0" class="is-click-btn"
                  @click="cellClick2(scope.row, 'B_security_check_number_L')"><span class="cell">{{
                    scope.row.B_security_check_number_L }}L</span></div>
                <div v-else>0L</div>
                <div v-if="scope.row.B_security_check_number_T > 0" class="is-click-btn"
                  @click="cellClick2(scope.row, 'B_security_check_number_T')"><span class="cell">{{
                    scope.row.B_security_check_number_T }}T</span></div>
                <div v-else>0T</div>
              </template>
              <template v-else>
                {{ scope.row[childCol.columnName] }}
              </template>
            </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="item.columnName"
          :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>
          <!-- <template slot-scope="scope" v-if="item.columnName == 'check_in_LT'">
              <p>{{ scope.row.check_in_L}}L</p>
              <p>{{ scope.row.check_in_T}}T</p>
          </template> -->
          <template slot-scope="scope">
            <template v-if="item.columnName == 'check_in_LT'">
              <div v-if="scope.row.check_in_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'check_in_L')">
                <span class="cell">{{ scope.row.check_in_L }}L</span>
              </div>
              <div v-else>0L</div>
              <div v-if="scope.row.check_in_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'check_in_T')">
                <span class="cell">{{ scope.row.check_in_T }}T</span>
              </div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'security_LT'">
              <div v-if="scope.row.security_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'security_L')">
                <span class="cell">{{ scope.row.security_L }}L</span>
              </div>
              <div v-else>0L</div>
              <div v-if="scope.row.security_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'security_T')">
                <span class="cell">{{ scope.row.security_T }}T</span>
              </div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'sort_LT'">
              <div v-if="scope.row.sort_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'sort_L')"><span
                  class="cell">{{ scope.row.sort_L }}L</span></div>
              <div v-else>0L</div>
              <div v-if="scope.row.sort_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'sort_T')"><span
                  class="cell">{{ scope.row.sort_T }}T</span></div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'load_LT'">
              <div v-if="scope.row.load_L > 0" class="is-click-btn" @click="cellClick2(scope.row, 'load_L')"><span
                  class="cell">{{ scope.row.load_L }}L</span></div>
              <div v-else>0L</div>
              <div v-if="scope.row.load_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'load_T')"><span
                  class="cell">{{ scope.row.load_T }}T</span></div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'onaiecraft_LT'">
              <div v-if="scope.row.onaiecraft_L > 0" class="is-click-btn"
                @click="cellClick2(scope.row, 'onaiecraft_L')">
                <span class="cell">{{ scope.row.onaiecraft_L }}L</span>
              </div>
              <div v-else>0L</div>
              <div v-if="scope.row.onaiecraft_T > 0" class="is-click-btn"
                @click="cellClick2(scope.row, 'onaiecraft_T')">
                <span class="cell">{{ scope.row.onaiecraft_T }}T</span>
              </div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'unload_XT'">
              <div v-if="scope.row.unload_X > 0" class="is-click-btn" @click="cellClick2(scope.row, 'unload_X')"><span
                  class="cell">{{ scope.row.unload_X }}X</span></div>
              <div v-else>0L</div>
              <div v-if="scope.row.unload_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'unload_T')"><span
                  class="cell">{{ scope.row.unload_T }}T</span></div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'arrive_XT'">
              <div v-if="scope.row.arrive_X > 0" class="is-click-btn" @click="cellClick2(scope.row, 'arrive_X')"><span
                  class="cell">{{ scope.row.arrive_X }}X</span></div>
              <div v-else>0L</div>
              <div v-if="scope.row.arrive_T > 0" class="is-click-btn" @click="cellClick2(scope.row, 'arrive_T')"><span
                  class="cell">{{ scope.row.arrive_T }}T</span></div>
              <div v-else>0T</div>
            </template>
            <template v-else-if="item.columnName == 'B_security_check_number_LT'">
              <div v-if="scope.row.B_security_check_number_L > 0" class="is-click-btn"
                @click="cellClick2(scope.row, 'B_security_check_number_L')"><span class="cell">{{
                  scope.row.B_security_check_number_L }}L</span></div>
              <div v-else>0L</div>
              <div v-if="scope.row.B_security_check_number_T > 0" class="is-click-btn"
                @click="cellClick2(scope.row, 'B_security_check_number_T')"><span class="cell">{{
                  scope.row.B_security_check_number_T }}T</span></div>
              <div v-else>0T</div>
            </template>
            <template v-else>
              {{ scope.row[item.columnName] }}
            </template>
          </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>
    <Dialog :flag="reamkeFlag" width="600px" class="dialog-check-group">
      <div class="dialog-wrapper">
        <div class="title">备注</div>
        <div style="height: 250px" class="content">
          <el-form ref="form" :model="form" label-width="70px">
            <el-form-item label="输入备注">
              <el-input v-model="form.desc" type="textarea" clearable rows="10" />
            </el-form-item>
          </el-form>
        </div>
        <div class="foot right t30">
          <el-button size="medium" class="r24" type="primary" @click="onReamkeCheck">确定</el-button>
          <el-button size="medium" @click="reamkeFlag = false">取消</el-button>
        </div>
      </div>
    </Dialog>
    <Dialog :flag="storyFlag" width="600px" class="dialog-check-group">
      <div class="dialog-wrapper">
        <div class="title">备注</div>
        <div style="padding:0 20px 20px 20px;" class="table">
          <el-table height="250" :data="storyTable" border style="width: 100%">
            <el-table-column prop="luggageDescribe" label="行李服务记录" />
            <el-table-column prop="createtime" label="行李服务时间" />
          </el-table>
        </div>
        <div class="content">
          <el-form ref="form" :model="form" label-width="70px">
            <el-form-item label="输入备注">
              <el-input v-model="form.desc" type="textarea" clearable />
            </el-form-item>
          </el-form>
        </div>
        <div class="foot right t30">
          <el-button size="medium" class="r24" type="primary" @click="onStoryCheck">确定</el-button>
          <el-button size="medium" @click="storyFlag = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import pf from '@/layout/mixin/publicFunc'
import { getToken } from '@/utils/auth'
import { getAuthData, formatOrder } from '@/utils/validate'
import { parseTime } from '@/utils'
import { exportToExcel } from '@/utils/table'
import { Query, newData, modifyData } from '@/api/webApi'
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 {
      allColReturnData: [],
      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,
      reamkeFlag: false,
      storyFlag: false,
      storyTable: [],
      reamkeMap: {},
      form: {
        desc: ''
      },
      rushCount: 0,
      initSetTableScroll: true // 是否 只滚动一次（红线）
    }
  },
  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)
            }
            this.allColReturnData = returnData
            this.setTableColsXT()
          }
        } else {
          this.$message.error('获取表头数据失败')
        }
      } catch (error) {
        console.log(error)
      }
    },
    setTableColsXT(val = sessionStorage.getItem('Totalvalue') == 'true') {
      const returnData = _.cloneDeep(this.allColReturnData)
      if (val == true) {
        returnData.map(item => {
          if (item.columnName == 'check_in_baggage_number' || item.columnName == 'screened_number' || item.columnName == 'sorted_number' || item.columnName == 'loaded_number' || item.columnName == 'onaiecraft_number' || item.columnName == 'unloading_number' || item.columnName == 'arrive_number' || item.columnName == 'B_security_check_number') {
            item.needShow = 1
          }
          if (item.columnName == 'check_in_LT' || item.columnName == 'security_LT' || item.columnName == 'sort_LT' || item.columnName == 'load_LT' || item.columnName == 'onaiecraft_LT' || item.columnName == 'unload_XT' || item.columnName == 'arrive_XT' || item.columnName == 'B_security_check_number_LT') {
            item.needShow = 0
          }
        })
      } else {
        returnData.map(item => {
          if (item.columnName == 'check_in_baggage_number' || item.columnName == 'screened_number' || item.columnName == 'sorted_number' || item.columnName == 'loaded_number' || item.columnName == 'onaiecraft_number' || item.columnName == 'unloading_number' || item.columnName == 'arrive_number' || item.columnName == 'B_security_check_number') {
            item.needShow = 0
          }
          if (item.columnName == 'check_in_LT' || item.columnName == 'security_LT' || item.columnName == 'sort_LT' || item.columnName == 'load_LT' || item.columnName == 'onaiecraft_LT' || item.columnName == 'unload_XT' || item.columnName == 'arrive_XT' || item.columnName == 'B_security_check_number_LT') {
            item.needShow = 1
          }
        })
      }
      this.setTableColsUTC(returnData)
    },
    setTableColsUTC(returnData) {
      const val = sessionStorage.getItem('UTCvalue') === 'true'
      if (val == true) {
        returnData.map(item => {
          if (item.columnName == 'checkInDateUTC' || item.columnName == 'security_check_timeUTC' || item.columnName == 'B_security_check_timeUTC' || item.columnName == 'sorting_timeUTC' || item.columnName == 'loading_timeUTC' || item.columnName == 'installation_timeUTC' || item.columnName == 'unloadtimeUTC' || item.columnName == 'arrivedtimeUTC') {
            item.needShow = 1
          }
          if (item.columnName == 'checkInDate' || item.columnName == 'security_check_time' || item.columnName == 'B_security_check_time' || item.columnName == 'sorting_time' || item.columnName == 'loading_time' || item.columnName == 'installation_time' || item.columnName == 'unloadtime' || item.columnName == 'arrivedtime') {
            item.needShow = 0
          }
        })
      } else {
        returnData.map(item => {
          if (item.columnName == 'checkInDateUTC' || item.columnName == 'security_check_timeUTC' || item.columnName == 'B_security_check_timeUTC' || item.columnName == 'sorting_timeUTC' || item.columnName == 'loading_timeUTC' || item.columnName == 'installation_timeUTC' || item.columnName == 'unloadtimeUTC' || item.columnName == 'arrivedtimeUTC') {
            item.needShow = 0
          }
          if (item.columnName == 'checkInDate' || item.columnName == 'security_check_time' || item.columnName == 'B_security_check_time' || item.columnName == 'sorting_time' || item.columnName == 'loading_time' || item.columnName == 'installation_time' || item.columnName == 'unloadtime' || item.columnName == 'arrivedtime') {
            item.needShow = 1
          }
        })
      }
      this.setTableCols(returnData)
    },
    setTableCols(returnData) {
      this.tableColsCopy = []
      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.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 getQueryRow(id, dataContent = this.dataContent, page, pageSize) {
      try {
        const params = {} || dataContent
        if (dataContent.filter && dataContent.filter?.length) {
          params['fd1'] = dataContent.filter[0].value
          params['fd2'] = dataContent.filter[1].value
          params['airport'] = dataContent.filter[2].value
        } else {
          params['fd1'] = dataContent.departure_flights_date1
          params['fd2'] = dataContent.departure_flights_date2
          params['airport'] = dataContent.current_airport
        }
        const { code, returnData } = await this.getQueryListAuth(
          id,
          params,
          page,
          pageSize
        )
        if (code == 0) {
          return returnData
        } else {
          return []
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取表格数据
    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 (pageSize && returnData.length < pageSize) {
            this.noMore = true
            if (returnData.length === 0) {
              this.page--
              this.loading = false
            }
          }
          if (id == SERVICE_ID.bagDetailId) {
            const rushDataCatch = sessionStorage.getItem('rushDataCatch') || {}
            if (rushDataCatch && rushDataCatch.length) {
              const rushData = JSON.parse(rushDataCatch)
              const { OriginalBagTag_TagSequence } = rushData
              returnData.forEach(item => {
                const luggageNum_Nine = item.luggageNum + ''
                if (luggageNum_Nine.substring(1) == OriginalBagTag_TagSequence) {
                  item.rushFlag = true
                }
              })
            }
          }
          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)
          })
        }
      }
    },
    // 初始化表格
    async initTableData(tableData) {
      tableData = tableData || this.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 tableMap = new Map()
        const nTableData = [...tableData]
        const nTableDataRow = await this.getQueryRow(SERVICE_ID.departureDanggerId, this.dataContent, 1, 999)
        if (nTableDataRow?.length) {
          nTableDataRow.map(({ carrierFlights, carrierFlightsDate, craftType_num, depstandCd_num, landAirport, outAirport }) => {
            tableMap.set(carrierFlights + carrierFlightsDate + landAirport + outAirport, `${craftType_num}` + '-' + `${depstandCd_num}`)
          })
        }
        const cData = nTableData.filter(row => Number(row['NO_BSM_number']) + Number(row['check_in_baggage_number']) > 0)
        if (tableMap.size) {
          cData.map(item => {
            const { carrierFlights, carrierFlightsDate, landAirport, outAirport } = item
            const itemKey = carrierFlights + carrierFlightsDate + landAirport + outAirport
            if (tableMap.has(itemKey)) {
              const [craftType_num, depstandCd_num] = tableMap.get(itemKey)?.split('-')
              item.craftType_num = Number(craftType_num)
              item.depstandCd_num = Number(depstandCd_num)
            }
          })
        }
        cData.forEach(row => {
          if (row.abnormalState === 'CAN') {
            row.canceled = 'Y'
          } else if (row.normalState === 'DEP' || row.actualTakeOffTime) {
            row.hasTakenOff = 'Y'
            this.leaveCount++
          }

          const isUTC = sessionStorage.getItem('UTCvalue') ? sessionStorage.getItem('UTCvalue') : false
          if (isUTC == 'false') {
            row.scheduleTakeOffTime = ''
            if (row.actualTakeOffTimeLocalOut != null && row.actualTakeOffTimeLocalOut != '') {
              row.scheduleTakeOffTime = row.actualTakeOffTimeLocalOut
            } else {
              if (row.estimateTakeOffTimeLocalOut != null && row.estimateTakeOffTimeLocalOut != '') {
                row.scheduleTakeOffTime = row.estimateTakeOffTimeLocalOut
              } else {
                row.scheduleTakeOffTime = row.scheduleTakeOffTimeLocalOut
              }
            }
          } else {
            row.scheduleTakeOffTime = ''
            if (row.actualTakeOffTimeUTC != null && row.actualTakeOffTimeUTC != '') {
              row.scheduleTakeOffTime = row.actualTakeOffTimeUTC
            } else {
              if (row.estimateTakeOffTimeUTC != null && row.estimateTakeOffTimeUTC != '') {
                row.scheduleTakeOffTime = row.estimateTakeOffTimeUTC
              } else {
                row.scheduleTakeOffTime = row.scheduleTakeOffTimeUTC
              }
            }
          }
        })
        this.tableData = []
        this.tableData = _.orderBy(cData, ['canceled', 'hasTakenOff', 'scheduleTakeOffTime'], ['desc', 'asc', 'asc'])
        // 添加宏任务，让页面首次进入的时候，滚动到红线速度加快
        setTimeout(() => {
            if(this.initSetTableScroll === true) {
              this.$nextTick()
              this.hasSetTableScroll = false
              this.setTableScroll()
              this.initSetTableScroll = false
            }
          },10)
      }
      if (this.$route.path == '/newArrival') {
        this.arriveCount = 0
        const nTableData = [...tableData]
        const tableMap = new Map()
        const nTableDataRow = await this.getQueryRow(SERVICE_ID.arrivalDanggerId, this.dataContent, 1, 999)
        if (nTableDataRow?.length) {
          nTableDataRow.map(({ carrierFlights, carrierFlightsDate, craftType_num, arrstandCd_num, landAirport, outAirport }) => {
            tableMap.set(carrierFlights + carrierFlightsDate + landAirport + outAirport, `${craftType_num}` + '-' + `${arrstandCd_num}`)
          })
        }
        const cData = nTableData.filter(row => Number(row['NO_BSM_number']) + Number(row['check_in_baggage_number']) > 0)
        if (tableMap.size) {
          cData.map(item => {
            const { carrierFlights, carrierFlightsDate, landAirport, outAirport } = item
            const itemKey = carrierFlights + carrierFlightsDate + landAirport + outAirport
            if (tableMap.has(itemKey)) {
              const [craftType_num, arrstandCd_num] = tableMap.get(itemKey)?.split('-')
              item.craftType_num = Number(craftType_num)
              item.arrstandCd_num = Number(arrstandCd_num)
            }
          })
        }
        cData.forEach(row => {
          if (row.abnormalState === 'CAN') {
            row.canceled = 'Y'
          } else if (row.normalState === 'ARR' || row.actualLandInTime) {
            row.hasLanded = 'Y'
            this.arriveCount++
          }
          const isUTC = sessionStorage.getItem('UTCvalue') ? sessionStorage.getItem('UTCvalue') : false
          if (isUTC == 'false') {
            row.actualLandInTime = ''
            if (row.actualLandinTimeLocalIn != null && row.actualLandinTimeLocalIn != '') {
              row.actualLandInTime = row.actualLandinTimeLocalIn
            } else {
              if (row.estimateLandinTimeLocalIn != null && row.estimateLandinTimeLocalIn != '') {
                row.actualLandInTime = row.estimateLandinTimeLocalIn
              } else {
                row.actualLandInTime = row.scheduleLandInTimeLocalIn
              }
            }
          } else {
            row.actualLandInTime = ''
            if (row.actualLandInTimeUTC != null && row.actualLandInTimeUTC != '') {
              row.actualLandInTime = row.actualLandInTimeUTC
            } else {
              if (row.estimatelandInTimeUTC != null && row.estimatelandInTimeUTC != '') {
                row.actualLandInTime = row.estimatelandInTimeUTC
              } else {
                row.actualLandInTime = row.scheduleLandinTimeUTC
              }
            }
          }
        })
        this.tableData = []
        this.tableData = _.orderBy(cData, ['canceled', 'hasLanded', 'actualLandInTime'], ['desc', 'asc', 'asc'])
      }
      if (this.$route.path.startsWith('/newTransfer')) {
        this.leaveCount = 0
        const nTableData = [...tableData]
        const [tableMap1, tableMap2] = [new Map(), new Map()]
        const nTableDataRow1 = await this.getQueryRow(SERVICE_ID.departureAviLtDanggerId, this.dataContent, 1, 999) // 离港数据
        const nTableDataRow2 = await this.getQueryRow(SERVICE_ID.departureAviDanggerId, this.dataContent, 1, 999) // 进港数据
        if (nTableDataRow1?.length) {
          nTableDataRow1.map(({ carrierFlights, carrierFlightsDate, craftType_num, depstandCd_num, outAirport }) => {
            tableMap1.set(carrierFlights + carrierFlightsDate + outAirport, `${craftType_num}` + '-' + `${depstandCd_num}`)
          })
        }
        if (nTableDataRow2?.length) {
          nTableDataRow2.map(({ carrierFlights, carrierFlightsDate, craftType_num, arrstandCd_num, landAirport }) => {
            tableMap2.set(carrierFlights + carrierFlightsDate + landAirport, `${craftType_num}` + '-' + `${arrstandCd_num}`)
          })
        }
        if (tableMap1.size) {
          nTableData.map(item => {
            const { departure_flights_number, departure_flights_date, current_airport } = item
            const itemKey = departure_flights_number + departure_flights_date + current_airport
            if (tableMap1.has(itemKey)) {
              const [craftType_num, depstandCd_num] = tableMap1.get(itemKey)?.split('-')
              item.craftType_num = Number(craftType_num)
              item.depstandCd_num = Number(depstandCd_num)
            }
          })
        }
        if (tableMap2.size) {
          nTableData.map(item => {
            const { Inbound_flight_number, Inbound_flight_date, current_airport } = item
            const itemKey = Inbound_flight_number + Inbound_flight_date + current_airport
            if (tableMap2.has(itemKey)) {
              const [craftType_num, arrstandCd_num] = tableMap2.get(itemKey)?.split('-')
              item.craftType_num = Number(craftType_num)
              item.arrstandCd_num = Number(arrstandCd_num)
            }
          })
        }
        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
      const 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)
        }
      }, 10)
      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')
        }
        if (column.property === 'scon_number' && row['scon_number'] && row['scon_number'] != 0) {
          classes.push('cell-toUnload')
        }
        if (column.property === 'depstandCd' && row['depstandCd_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'depstandCd' && row['depstandCd_num'] == 2) {
          classes.push('cell-toBule')
        }
        if (column.property === 'craftNo' && row['craftType_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'craftNo' && row['craftType_num'] == 2) {
          classes.push('cell-toBule')
        }
      }
      if (this.$route.path == '/newArrival') {
        if (column.property === 'arrstandCd' && row['arrstandCd_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'arrstandCd' && row['arrstandCd_num'] == 2) {
          classes.push('cell-toBule')
        }
        if (column.property === 'craftNo' && row['craftType_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'craftNo' && row['craftType_num'] == 2) {
          classes.push('cell-toBule')
        }
      }
      if (this.$route.path.startsWith('/newTransfer')) {
        if (column.property === 'Inbound_flight_stand' && row['arrstandCd_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'Inbound_flight_stand' && row['arrstandCd_num'] == 2) {
          classes.push('cell-toBule')
        }
        if (column.property === 'departure_flights_leave_stand' && row['depstandCd_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'departure_flights_leave_stand' && row['depstandCd_num'] == 2) {
          classes.push('cell-toBule')
        }
        if (column.property === 'craftNo' && row['craftType_num'] > 2) {
          classes.push('cell-toBule-red')
        }
        if (column.property === 'craftNo' && row['craftType_num'] == 2) {
          classes.push('cell-toBule')
        }
      }
      if (this.$route.path.startsWith('/newBagDetails')) {
        if (column.property === 'luggageNum' && row['rushFlag']) {
          classes.push('txtToRed')
        }
      }
      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,
              })
            }
          }
        } else {
          this.headerClick(row, column)
        }
      } else {
        this.headerClick(row, column)
      }
    },
    cellClick2(row, property) {
      const obj = {
        'carrierFlights': row.carrierFlights,
        'carrierFlightsDate': row.carrierFlightsDate,
        'outAirport': row.outAirport,
        'landAirport': row.landAirport,
      }
      obj[property] = row[property]
      this.$router.push({
        path: '/newFlightView',
        query: obj,
      })
    },
    // 表格-备注-单元格点击
    headerClick(row, column) {
      const { property } = column
      const path = this.$route.path
      const newPath = !!((path.endsWith('/in') || path.endsWith('/out') || path.endsWith('/newQueryAdvance') || path.endsWith('/newBagDetails')))
      if (newPath && property == 'luggage_describe') {
        this.storyFlag = true
        this.reamkeMap = row
        this.queryStoryCheck(row)
      }
      if (newPath && property == 'remarks') {
        if (property == 'remarks') {
          this.form.desc = row.remarks || ''
        } else if (property == 'luggage_describe') {
          this.form.desc = row.luggage_describe || ''
        }
        this.reamkeFlag = true
        this.reamkeMap = row
      }
    },
    async queryStoryCheck(row) {
      this.storyTable = []
      const { ID, luggage_describe } = row
      const params = {
        serviceId: SERVICE_ID.advancedStoryId,
        dataContent: {
          luggageID: ID,
        },
        event: '0'
      }
      const { code, returnData } = await Query(params)
      if (code == 0 && returnData?.length) {
        const ndatas = [...returnData]
        ndatas.forEach(item => item.createtime = parseTime(item.createtime.replace('T', ' '), '{y}-{m}-{d} {h}:{i}:{s}'))
        this.storyTable = ndatas
      }
    },
    async onStoryCheck() {
      const { ID, luggage_describe } = this.reamkeMap
      const params = {
        serviceId: SERVICE_ID.advancedStoryId,
        dataContent: {
          luggageID: ID,
          luggageDescribe: this.form.desc,
          user_id: getToken('userid')
        },
        event: '1'
      }
      const parmasts = {
        'serviceId': SERVICE_ID.advancedRemakesId,
        'page': 1,
        'pageSize': 10,
        'dataContent': {
          'ID': ID,
          'luggage_describe': '...'
        },
        'event': '2'
      }
      await modifyData(parmasts)
      const { code } = await newData(params)
      if (code == 0) {
        const item = {
          luggageDescribe: this.form.desc,
          createtime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
        }
        this.storyTable.push(item)
        this.$message.success('操作成功')
        this.form.desc = ''
        this.restTable()
        this.load()
      } else this.$message.success('操作失败')
    },
    // 表格-备注-单元格点击-弹框确定
    onReamkeCheck() {
      const path = this.$route.path
      const name = path.endsWith('/in') || path.endsWith('/out') ? 'remarks' : path.endsWith('/newQueryAdvance') ? 'luggage_describe' : 'bag'
      this.sendReamkesHttp(name)
    },
    // 发送备注请求
    async sendReamkesHttp(key) {
      const parmas = {
        'serviceId': key == 'remarks' ? SERVICE_ID.transferReamkesId : key == 'luggage_describe' ? SERVICE_ID.advancedRemakesId : SERVICE_ID.baggageRemakes,
        'page': 1,
        'pageSize': 10,
        'dataContent': {
          'ID': this.reamkeMap.ID,
        },
        'event': '2'
      }
      key == 'remarks' ? parmas.dataContent.remarks = this.form.desc : parmas.dataContent.luggage_describe = this.form.desc
      const { code } = await modifyData(parmas)
      if (code == 0) this.$message.success('操作成功')
      this.restTable()
      this.load()
      this.reamkeFlag = false
    },
    // 导出
    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 {
    p {
      padding: 0;
    }

    .is-click-btn {
      .cell {
        color: #409eff;
        cursor: pointer;
        position: relative;
      }
    }

    .txtToRed {
      .cell {
        color: #ff0000;
      }
    }

    .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;
      }
    }

    td.cell-toBule {
      background: rgba(45, 124, 255, 0.5) !important;
      position: relative;

      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 2px dashed #2d7cff;
      }
    }

    td.cell-toBule-red {
      background: rgba(45, 124, 255, 0.5) !important;
      position: relative;

      .cell {
        color: red;
      }

      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 2px dashed #2d7cff;
      }
    }
  }

  .btns {
    position: absolute;
    top: -50px;
    right: 32px;
    z-index: 10;
  }

  .down-btns {
    position: absolute;
    top: -50px;
    right: 72px;
    z-index: 10;
  }
}
</style>