修改表格组件

src/components/AuthButton/index.vue

@@ -0,0 +1,62 @@
+ <script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    auth: {
+      type: Object,
+      require: true,
+      default: () => { }
+    },
+    row: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  render (h, context) {
+    const { auth, row } = context.props
+    const vnodes = []
+    if (auth && Object.keys(auth).length) {
+      //获取按钮配置项
+      const { servicetype, pagename, pageicon } = auth
+
+      //根据服务类型显示按钮类型 1=查询 2=新增 3=编辑 4=删除
+      const type = servicetype != '4' ? 'primary' : 'danger'
+
+      //根据服务类型显示按钮类型设置按钮方法 1=查询 2=新增 3=编辑 4=删除 ...其他
+      let func = null
+      if (servicetype == 1) {
+        func = () => context.parent.handleQuery()
+      } else if (servicetype == 2) {
+        func = () => context.parent.handleAdd()
+      } else if (servicetype == 3) {
+        func = (row) => context.parent.handleEdit(row)
+      } else if (servicetype == 4) {
+        func = (row) => context.parent.handleRemove(row)
+      } else if (servicetype == 5) {
+        func = (row, auth) => context.parent.handleOther(row, auth)
+      }
+
+      //根据显示方式显示按钮类型 1=名称 2=图标 3=名称+图标
+      let button = null
+      if (pageicon) {
+        button = <el-button size="small" icon={pageicon} onClick={() => func(row, auth)} type={type}></el-button>
+      } else {
+        button = <el-button size="small" onClick={() => func(row, auth)} type={type}>{pagename}</el-button>
+      }
+      vnodes.push(button)
+    } else {
+      vnodes.push(<span></span>)
+    }
+    return vnodes
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>

src/components/PublicPageHeader/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="PublicPageHeader">
-    <div class="PublicPageHeader-title">{{ pageTitle }}</div>
+    <div class="PublicPageHeader-title manageTitle">{{ pageTitle }}</div>
     <div class="PublicPageHeader-btns">
       <slot />
-      <el-button size="small" @click="handleAdd()" type="primary">新增</el-button>
     </div>
   </div>
 </template>
@@ -29,9 +28,7 @@ export default {
 .PublicPageHeader {
   height: 40px;
   line-height: 40px;
-  background-color: #fff;
   display: flex;
   justify-content: space-between;
-  padding: 0 20px;
 }
 </style>

src/components/SimpleTable/index.vue

@@ -1,64 +1,35 @@
 <template>
-  <div
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    class="table-wrapper"
-  >
-    <el-table
-      ref="table"
-      v-el-table-infinite-scroll="load"
-      :data="dealedTableData"
-      :header-cell-class-name="headerCellClass"
-      :row-class-name="rowClass"
-      :cell-class-name="cellClass"
-      :span-method="tableSpanMethod"
-      :show-summary="showSummary"
-      :summary-method="tableSummaryMethod"
-      :height="height"
-      stripe
-      fit
-      border
-      @cell-click="cellClickHandler"
-    >
-      <el-table-column
-        v-for="col in filteredTableCols"
-        :key="col.columnName"
-        :prop="col.columnName"
-        :label="col.columnLabel"
-        :width="col.width"
-        :show-overflow-tooltip="showOverflowTooltip"
-        :formatter="tableFormatter"
-      >
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="table-wrapper">
+    <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="tableSpanMethod" :show-summary="showSummary" :summary-method="tableSummaryMethod" :height="height" stripe fit border @cell-click="cellClickHandler">
+      <el-table-column v-for="col in filteredTableCols" :key="col.columncode" :prop="col.columncode" :label="col.columnname" :width="col.width" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
         <template #header>
-          <el-tooltip
-            :content="col.columnDescribe || col.columnLabel"
-            placement="top"
-          >
-            <TableHeaderCell
-              :label="col.columnLabel"
-              :filter-options="tableDataFilters[col.columnName]"
-              :filter-values.sync="filterValues[col.columnName]"
-              filter-style="arrow"
-              :sortable="!!col.needSort"
-              :sort-rule.sync="tableDataSortRules[col.columnName]"
-            />
+          <el-tooltip :content="col.columndescribe || col.columnname" placement="top">
+            <TableHeaderCell :label="col.columnname" :filter-options="tableDataFilters[col.columncode]" :filter-values.sync="filterValues[col.columncode]" filter-style="arrow" :sortable="!!col.enablesort" :sort-rule.sync="tableDataSortRules[col.columncode]" />
           </el-tooltip>
         </template>
       </el-table-column>
+      <el-table-column v-if="tableBtns.length" label="操作">
+        <template slot-scope="scope">
+          <div class="hd-td">
+            <el-scrollbar style="height: 100%">
+              <AuthButton v-for="(item,index) in tableBtns" :key="index" :auth="item" :row="scope.row" />
+            </el-scrollbar>
+          </div>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
 import TableHeaderCell from '../TableHeaderCell'
+import AuthButton from '@/components/AuthButton'
 import { setTableFilters } from '@/utils/table'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'SimpleTable',
-  components: { TableHeaderCell },
+  components: { TableHeaderCell, AuthButton },
   props: {
     loading: {
       type: Boolean,
@@ -72,6 +43,10 @@ export default {
       type: Array,
       default: () => []
     },
+    tableBtns: {
+      type: Array,
+      default: () => []
+    },
     data: {
       type: Array,
       default: () => []
@@ -105,7 +80,7 @@ export default {
       type: Function
     }
   },
-  data() {
+  data () {
     return {
       tableData: [],
       tableDataFilters: {}, // 表头-下拉数据
@@ -117,10 +92,10 @@ export default {
   },
   computed: {
     ...mapGetters(['clickedCells']),
-    filteredTableCols() {
-      return this.tableCols.filter(col => col.needShow)
+    filteredTableCols () {
+      return this.tableCols.filter(col => col.isdisplay != 0)
     },
-    dealedTableData() {
+    dealedTableData () {
       const filtered = this.tableData.filter(item => {
         let flag = true
         Object.entries(this.filterValues).forEach(([key, arr]) => {
@@ -146,25 +121,25 @@ export default {
   },
   watch: {
     data: {
-      handler(arr) {
+      handler (arr) {
         this.tableData = arr
       },
       deep: true
     },
     tableData: {
-      handler() {
+      handler () {
         this.setTableFilters()
       },
       deep: true
     },
     tableCols: {
-      handler() {
+      handler () {
         this.setTableFilters()
       },
       deep: true
     },
     dealedTableData: {
-      handler(arr) {
+      handler (arr) {
         const spanArr = []
         let pos = 0
         arr.forEach((item, index, arr) => {
@@ -185,7 +160,7 @@ export default {
       deep: true
     },
     headerCellClassName: {
-      handler(func) {
+      handler (func) {
         if (func) {
           this.headerCellClass = func().bind(this)
         }
@@ -194,7 +169,7 @@ export default {
       immediate: true
     },
     rowClassName: {
-      handler(func) {
+      handler (func) {
         if (func) {
           this.rowClass = func().bind(this)
         }
@@ -203,7 +178,7 @@ export default {
       immediate: true
     },
     cellClassName: {
-      handler(func) {
+      handler (func) {
         if (func) {
           this.cellClass = func().bind(this)
         }
@@ -212,7 +187,7 @@ export default {
       immediate: true
     },
     spanMethod: {
-      handler(func) {
+      handler (func) {
         if (func) {
           this.tableSpanMethod = func().bind(this)
         }
@@ -221,7 +196,7 @@ export default {
       immediate: true
     },
     summaryMethod: {
-      handler(func) {
+      handler (func) {
         if (func) {
           this.tableSummaryMethod = func().bind(this)
         }
@@ -230,7 +205,7 @@ export default {
       immediate: true
     },
     formatter: {
-      handler(func) {
+      handler (func) {
         if (func) {
           this.tableFormatter = func().bind(this)
         }
@@ -239,17 +214,17 @@ export default {
       immediate: true
     }
   },
-  mounted() {
+  mounted () {
     this.$emit('mounted', 'table', this.$refs['table'])
   },
-  updated() {
+  updated () {
     this.$refs['table']?.doLayout()
   },
   methods: {
-    load() {
+    load () {
       this.$emit('load')
     },
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       const rule = this.tableDataSortRules[column.property]
       if (rule) {
@@ -257,13 +232,13 @@ export default {
       }
       return classes.join(' ')
     },
-    rowClass() {
+    rowClass () {
       return ''
     },
-    cellClass() {
+    cellClass () {
       return ''
     },
-    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (this.tableGroups.includes(column.property)) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -273,12 +248,12 @@ export default {
         }
       }
     },
-    tableSummaryMethod(param) {
+    tableSummaryMethod (param) {
       const { columns, data } = param
       const sums = []
       columns.forEach((column, index) => {
         this.tableCols.forEach(p => {
-          if (column.property === p.columnName && p.needCount) {
+          if (column.property === p.columncode && p.needCount) {
             const values = data.map(item => Number(item[column.property]))
             if (!values.every(value => isNaN(value))) {
               sums[index] = values.reduce((prev, curr) => {
@@ -296,23 +271,35 @@ export default {
       })
       return sums
     },
-    cellClickHandler(...params) {
+    cellClickHandler (...params) {
       this.$emit('cell-click', ...params)
     },
-    tableFormatter(row, column, cellValue) {
+    tableFormatter (row, column, cellValue) {
       return cellValue
     },
-    setTableFilters() {
+    setTableFilters () {
       this.tableDataFilters = {}
       this.filteredTableCols.forEach(col => {
-        if (col.needFilters) {
-          this.tableDataFilters[col.columnName] = []
+        if (col.enablefilter) {
+          this.tableDataFilters[col.columncode] = []
         }
-        if (col.needGroup) {
-          this.tableGroups.push(col.columnName)
+        if (col.enablegroup) {
+          this.tableGroups.push(col.columncode)
         }
       })
       setTableFilters(this.tableData, this.tableDataFilters)
+    },
+    //表格-编辑
+    handleEdit (row) {
+      this.$emit('handleEdit', row)
+    },
+    //表格-其他类型按钮操作
+    handleOther (row, auth) {
+      this.$emit('handleOther', row, auth)
+    },
+    //表格-删除
+    handleRemove (row) {
+      this.$emit('handleRemove', row)
     }
   }
 }
@@ -328,7 +315,7 @@ export default {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, 'Microsoft YaHei';
+      font-family: Helvetica, "Microsoft YaHei";
       letter-spacing: 0;
     }
     .cell-click {
@@ -355,6 +342,6 @@ export default {
   color: #909399;
   text-align: center;
   font-size: 20px;
-  font-family: Helvetica, 'Microsoft YaHei';
+  font-family: Helvetica, "Microsoft YaHei";
 }
 </style>

src/getMenu.js

@@ -142,7 +142,7 @@ function parseMenuItem (data) {
           pagecode: item.pagecode,
           superiorcode: item.pagecode
         },
-        component: resolve => require(['@/views/table/index.vue'], resolve),
+        component: resolve => require(['@/views' + item.pageaddress], resolve),
         // component: () => import('./views/table/index.vue'),
         hidden: !item.isdisplay,
       })

src/styles/index.scss

@@ -350,7 +350,6 @@ li {
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #303133;
-  line-height: 30px;
   &::after {
     position: absolute;
     content: '';

src/utils/validate.js

@@ -1,5 +1,7 @@
 
 import store from '@/store'
+import { removeToken } from "@/utils/auth"
+import router, { resetRouter } from "@/router"
 /**
  * Created by PanJiaChen on 16/11/18.
  */
@@ -376,3 +378,18 @@ export const Format = (fmt, date) => {
   }
   return fmt;
 };
+
+
+//退出登录
+export async function pathLogin () {
+  sessionStorage.clear();
+  removeToken(); // must remove  token  first
+  removeToken("codeToken");
+  removeToken("systemSet");
+  removeToken("userid");
+  store.dispatch("app/toggleOutflag", false);
+  await store.dispatch("user/resetToken");
+  resetRouter();
+  router.push(`/login`);
+  location.reload();
+}

src/views/tablePage/index.vue

@@ -0,0 +1,497 @@
+<template>
+  <div class="TablePage">
+    <PublicPageHeader class="TablePage_header" :page-title="pageTitle">
+      <AuthButton :auth="pageAuthBtnAdd" />
+      <AuthButton :auth="pageAuthBtnQuery" />
+    </PublicPageHeader>
+    <div class="TablePage_content">
+      <PublicPageTable :loading="loading" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" show-summary @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" />
+    </div>
+    <div class="TablePage_dialog">
+      <!--新增/编辑-->
+      <PublicPageDialog :dialog-title="tableTitle" dialogSize="630px" :dialog-drawer="flag" @handleClose="flag = false" @handleSubmit="submitClickHandler">
+        <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
+          <el-row :gutter="20">
+            <el-col v-for="(item, index) in formItem" :key="index" :span="24">
+              <el-form-item :label="item.columnname">
+                <template v-if="
+                        item.dropdownlist ||
+                        item.dropdownlist == 0
+                      ">
+                  <el-select class="input-shadow" size="small" filterable default-first-option style="width: 100%" v-model="tableForm[item.columncode]" @change="changeSelect(item.columncode, item)" placeholder="请选择" clearable @clear="tableForm[item.columncode] = ''">
+                    <el-option v-for="item in tableOptions[item.columncode]" :key="item.v ? item.v : item.planDepartureApt" :label="item.k ? item.k : item.planDepartureApt" :value="
+                            item.setlabel === 'positionDescribe'
+                              ? item.v
+                              : item.v != undefined
+                              ? item.v
+                              : item.planDepartureApt
+                          ">
+                    </el-option>
+                  </el-select>
+                </template>
+                <template v-else-if="fromDataType(item.dataType) == 'text'||fromDataType(item.dataType) == 'VARCHAR'">
+                  <el-input size="small" :rows="1" type="textarea" @change="inputChangeHandler(item.columncode)" v-model="tableForm[item.columncode]"></el-input>
+                </template>
+                <template v-else-if="fromDataType(item.dataType) == 'date'">
+                  <el-date-picker class="datetimes" value-format="yyyy-MM-dd" v-model="tableForm[item.columncode]" type="date" placeholder="选择日期" @change="inputChangeHandler(item.columncode)">
+                  </el-date-picker>
+                </template>
+                <template v-else-if="fromDataType(item.dataType) == 'datetime'">
+                  <el-date-picker class="datetimes" value-format="yyyy-MM-dd HH:mm:ss" v-model="tableForm[item.columncode]" type="datetime" placeholder="选择日期时间" @change="inputChangeHandler(item.columncode)">
+                  </el-date-picker>
+                </template>
+                <template v-else-if="fromDataType(item.dataType) == 'INT' || fromDataType(item.dataType) == 'tinyint'">
+                  <el-input size="small" v-model.number="tableForm[item.columncode]" onkeyup="value=value.replace(/[^1-9]/g,'')" @change="inputChangeHandler(item.columncode)"></el-input>
+                </template>
+                <template v-else>
+                  <el-input size="small" v-model="tableForm[item.columncode]" @change="inputChangeHandler(item.columncode)"></el-input>
+                </template>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </PublicPageDialog>
+      <!--删除-->
+      <PublicPageDialog dialog-title="删除" :dialog-drawer="rmFlag" @handleClose="rmFlag = false" @handleSubmit="tableRemove">
+        <div class="content del-content">
+          <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
+          ？
+        </div>
+      </PublicPageDialog>
+      <!--高级查询-->
+      <PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
+        <AdvancedQuery ref="advancedDialogForm" @getAdvancedQueryData="getAdvancedQueryData" />
+        <template slot="d_foot">
+          <el-button size="small" @click="queryCollect('advancedDialogForm')" type="primary">收藏</el-button>
+        </template>
+      </PublicPageDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageHeader from '@/components/PublicPageHeader'
+import PublicPageTable from '@/components/SimpleTable'
+import PublicPageDialog from '@/components/PublicPageDialog'
+import AdvancedQuery from '@/components/AdvancedQuery'
+import AuthButton from '@/components/AuthButton'
+import { mapGetters } from 'vuex'
+import { Query, newData, modifyData, moveData, abnormalDataRecovery } from "@/api/webApi"
+
+export default {
+  name: 'TablePage',
+  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, AdvancedQuery, AuthButton },
+  data () {
+    return {
+      page: 0, //当前table页面
+      noMore: false, //当前table是否加载到最后开关
+      loading: false, //页面加载
+      advancedDrawer: false, //高级查询弹框开关
+      dialogFlag: false,
+      pageTitle: '', //页面名称
+      tableCols: [], //表头数据
+      tableData: [], //表格数据
+      tableBtns: [], //表格按钮权限
+      authBtns: [], //表格里面的操作按钮
+      dataContent: {}, //表格查询数据
+      pageServiceId: null, //表格serviceid
+      formItem: null, //弹框表单渲染数据
+      flag: false, //弹框表单开关
+      tableType: "add", //弹框表单弹框类型
+      tableTitle: "新增", //弹框表单标题
+      tableForm: {}, //弹框表单数据
+      rmFlag: false, //删除弹框开关
+      rmTitle: '', //删除弹框标题
+      tableObj: {}, //删除数据
+      tableOptions: [], //表单数据下拉
+      labelWidth: '120px', //表单文字距离
+    }
+  },
+  computed: {
+    ...mapGetters(['authArrs']),
+    pageAuthBtnQuery () {
+      return this.tableBtns.filter(item => item.servicetype == 1)[0]
+    },
+    pageAuthBtnAdd () {
+      return this.tableBtns.filter(item => item.servicetype == 2)[0]
+    },
+    pageAuthBtnEdit () {
+      return this.tableBtns.filter(item => item.servicetype == 3)[0]
+    },
+    pageAuthBtnDel () {
+      return this.tableBtns.filter(item => item.servicetype == 4)[0]
+    },
+    pageAuthBtnOther () {
+      return this.tableBtns.filter(item => item.servicetype == 5)[0]
+    },
+    //设置新增修改表单类型
+    fromDataType () {
+      return function (type) {
+        if (type) {
+          return type.replace(/\([^\)]*\)/g, "");
+        }
+      }
+    },
+  },
+  mounted () {
+    this.pageInit()
+  },
+  methods: {
+    //页面初始化
+    pageInit () {
+      //获取页面配置
+      const { pagecode, qid, auth_id } = this.$route.meta
+      //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗
+      const pageAuths = this.authArrs
+      if (!pageAuths.length) return
+      //获取当前页面权限类型
+      const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
+      if (!pageAuthArrs.length) return
+      //获取table权限
+      const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 3)
+      if (pageAuthtables?.length) this.getPageTableSetting(pageAuths, pageAuthtables)
+      //获取按钮权限
+      const pageAuthbtns = pageAuthArrs.filter(item => item.pagetype == 4)
+      if (pageAuthbtns?.length) this.getPageBtnSetting(pageAuthbtns)
+    },
+    //根据页面table设置数据
+    getPageTableSetting (pageAuths, pageAuthtables) {
+      const authTableObj = pageAuthtables[0]
+      //获取当前页面table的配置
+      const { pagename, pageconfigurationid, serviceid, pagecode } = authTableObj
+      //获取当前页面table的按钮权限
+      const currPageBtns = pageAuths.filter(item => item['superiorid'] == pageconfigurationid)
+      if (currPageBtns?.length) this.tableBtns.push(...currPageBtns)
+      this.authBtns = pageAuths.filter(item => item.superiorid == pageconfigurationid && item.pagetype == 4)
+      this.pageServiceId = serviceid;
+      this.pageTitle = pagename
+      this.getColumnData(pagecode)
+    },
+    //根据页面按钮设置数据
+    getPageBtnSetting (pageAuthbtns) {
+      this.tableBtns.push(...pageAuthbtns)
+    },
+    //获取表头数据
+    async getColumnData (pagecode) {
+      try {
+        const { code, returnData } = await Query({
+          serviceid: '3',
+          datacontent: { filter: { pagecode } },
+          event: "0"
+        });
+        if (code == 0) {
+          if (returnData?.length) {
+            this.$store.dispatch('auth/changeAuthMsg', returnData)
+            const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay == 2);
+            const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc']);
+            this.formItem = _.cloneDeep(returnData).filter((item) => item.isdisplay == 2 || item.isdisplay == 3);
+            this.formItem = _.orderBy(this.formItem, ['displaynumber'], ['asc']);
+            this.tableCols = tableColsCopyOrder;
+          }
+        } else {
+          this.$message.error("获取表头数据失败");
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    //获取表单下拉数据
+    changeSelect (code, item) { },
+    inputChangeHandler (data) {
+      if (!this.tableForm[data]) this.tableForm[data] = null
+    },
+    //表单-新增
+    handleAdd () {
+      const { openmode, pageroute } = this.pageAuthBtnAdd
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+      this.flag = true;
+      this.tableType = "add";
+      this.tableTitle = "新增";
+      this.tableForm = {};
+    },
+    //表格-编辑
+    handleEdit (row) {
+      const { openmode, pageroute } = this.pageAuthBtnEdit
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+      this.flag = true;
+      this.tableType = "edit";
+      this.tableTitle = "编辑";
+      this.tableForm = _.cloneDeep(row);
+    },
+    //表格-其他类型按钮操作
+    handleOther (row, auth) {
+      const { openmode, pageroute } = this.pageAuthBtnOther
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+    },
+    //表格-删除
+    handleRemove (row) {
+      const { openmode, pageroute } = this.pageAuthBtnDel
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+      this.rmFlag = true;
+      this.rmTitle = row[this.rowTitle];
+      this.tableObj = row;
+    },
+    //表格-删除-确认
+    tableRemove () {
+      this.generalDataReception(3, this.tableObj);
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.tableType == "add" ? this.generalDataReception(1, this.tableForm) : this.generalDataReception(2, this.tableForm)
+        } else {
+          return false;
+        }
+      });
+    },
+    formatChange (data, event, key) {
+      const datas = []
+      const flag = Array.isArray(data)
+      if (flag) {
+        for (let i = 0; i < data.length; i++) {
+          let obj = {}
+          if (event == 1) {
+            obj.value = data[i]
+          } else if (event == 2) {
+            obj.value = data[i]
+            obj.filter = {}
+            if (Array.isArray(key)) {
+              const keys = []
+              const vals = []
+              obj.filter = []
+              for (let j = 0; j < key.length; j++) {
+                const dep = key[i]
+                keys.push(Object.keys(dep))
+                vals.push(Object.values(dep))
+              }
+              obj.filter.push(nobj)
+              if (obj.value.hasOwnProperty(keys[i])) {
+                delete obj.value[keys[i]]
+              }
+            } else {
+              obj.filter[key] = data[i][key]
+              if (obj.value[key]) {
+                delete obj.value[key]
+              }
+            }
+          } else {
+            obj = data[i]
+          }
+          datas.push(obj)
+        }
+      } else {
+        let obj = {}
+        obj.filter = {}
+        if (event == 1) {
+          obj.value = data
+        } else if (event == 2) {
+          obj.value = data
+          obj.filter[key] = obj.value[key]
+          if (obj.value[key]) {
+            delete obj.value[key]
+          }
+        } else {
+          obj = data
+        }
+        datas.push(obj)
+      }
+      return datas
+    },
+    //表格-增/删/改
+    async generalDataReception (event, data, key) {
+      try {
+        const params = {
+          serviceid: this.pageServiceId,
+          datacontent: this.formatChange(data, event, key),
+          event: `${event}`,
+        };
+        const { code } =
+          event == 1
+            ? await newData(params)
+            : event == 2
+              ? await modifyData(params)
+              : await moveData(params);
+        if (code == 0) {
+          this.$message.success("操作成功");
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
+          this.resetTable();
+          this.load();
+          // this.$router.go(0);
+        } else {
+          this.$message.error("操作失败");
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
+        }
+      } catch (error) {
+        this.flag = false;
+        this.rmFlag = false;
+        this.tableObj = {};
+        this.tableForm = {};
+      }
+    },
+    autoBtnClick (id, url) {
+      switch (id) {
+        case '1':
+          this.$message.warning('平铺功能开发中')
+          break;
+        case '2':
+          this.$router.push(url)
+          break;
+        default:
+          break;
+      }
+    },
+    //高级查询-弹框打开
+    handleQuery () {
+      const { openmode, pageroute } = this.pageAuthBtnQuery
+      if (!openmode) return
+      if (openmode != 3) this.advancedDrawer = true // this.autoBtnClick(openmode, pageroute)
+      this.dialogFlag = true
+    },
+    //高级查询-确定
+    advancedTable (refName) {
+      this.$refs[refName].advancedQueryHandler()
+    },
+    //高级查询-确定-数据
+    getAdvancedQueryData (dataRules) {
+      console.log(dataRules)
+    },
+    //高级查询-收藏
+    queryCollect (refName) {
+      this.$refs[refName].advancedQueryCollect()
+    },
+    // 给表头单元格加上 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) { },
+    tableFormatter () {
+      return function (row, column, cellValue) {
+        switch (column.property) {
+          case 'departureTime':
+            return (cellValue ?? '').replace('T', ' ')
+          case 'deleted':
+            return cellValue === 'DEL' ? cellValue : ''
+          case 'activated':
+            return Number(cellValue) === 1 ? '激活' : '未激活'
+          default:
+            return cellValue ?? ''
+        }
+      }
+    },
+    tableMountedHandler (refName, ref) {
+      this.$refs[refName] = ref
+    },
+    resetTable () {
+      this.dataContent = {}
+      this.page = 0;
+      this.noMore = false;
+      this.tableData = [];
+    },
+    load () {
+      if (this.noMore || this.loading) {
+        return
+      }
+      this.queryTableData()
+    },
+    async queryTableData () {
+      this.loading = true;
+      const datacontent = { filter: { 1: 1 } }
+      try {
+        const { code, returnData } = await Query({
+          page: ++this.page,
+          serviceid: this.pageServiceId,
+          datacontent,
+          event: '0'
+        });
+        if (code == 0) {
+          if (returnData.length === 0) {
+            this.page--;
+            this.noMore = true;
+          }
+          this.tableData.push(...returnData);
+        } else {
+          this.page--;
+          this.$message.error("获取表格数据失败");
+        }
+      } catch (error) {
+        this.page--;
+      }
+      this.noMore = true;
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.TablePage {
+  height: calc(100vh - 80px);
+  padding: 20px;
+  &_content {
+    margin-top: 20px;
+    height: calc(100vh - 180px);
+  }
+}
+</style>