chenrui  1 жил өмнө
parent
commit
6aa99eb782

+ 32 - 11
src/views/createtable/index.vue

@@ -7,9 +7,9 @@
       <template v-if="pageAuthBtnInstall">
         <el-button size="small" type="primary" @click="onInstall">初始化</el-button>
       </template>
-      <AuthButton :auth="pageAuthBtnAdd" />
-      <AuthButton :auth="pageAuthBtnQuery" />
-      <AuthButton :auth="pageAuthBtnExport" />
+      <!-- <AuthButton :auth="pageAuthBtnAdd" />
+      <AuthButton :auth="pageAuthBtnQuery" /> -->
+      <!-- <AuthButton :auth="pageAuthBtnExport" /> -->
     </PublicPageHeader>
     <div :style="pageTableContentHeight" class="TablePage_content flex-wrap">
       <template v-if="!dataFlag">
@@ -100,26 +100,27 @@
                     </template>
                   </el-form-item>
                 </el-col>
-                <el-col :span="4" style="height: 41px;display: flex;align-items: center;">
+                <!-- <el-col :span="4" style="height: 41px;display: flex;align-items: center;">
                   <el-checkbox v-model="checkedtre" label="显示树" @change="handleCheckedCitiesChange"></el-checkbox>
                 </el-col>
                 <el-col :span="4" style="height: 41px;display: flex;align-items: center;">
                   <el-checkbox v-model="checkedtable" label="显示表格" @change="handleCheckedCitiesChanges"></el-checkbox>
-                </el-col>
+                </el-col> -->
                 <el-col :span="4" style="height: 41px;display: flex;align-items: center;">
-                  <el-button :loading="dialogLoading" type="primary" size="small" @click="submitClickHandler">保存</el-button>
+                  <el-button :loading="dialogLoading" type="primary" size="small" @click="submitClickHandlers()">保存</el-button>
                 </el-col>
             </el-row>
           </el-form>
           </el-scrollbar>
         </div>
         <div class="TablePage_child flex-wrap">
-          <template v-if="leftFlag">
+          <Eltable style="width: 100%;height:100%;" :routerlist="rotlist"/>
+          <!-- <template v-if="leftFlag">
             <div v-if="treeData.length" class="TablePage_content_left">
-              <PublicPageTree ref="pageTree" :tree-data="treeData" :dep-math="depMath" :tree-map="treeNodeMap" @treeNodeClick="treeNodeClick" />
+              <PublicPageTree ref="pageTree" :tree-data="treeDatalook" :dep-math="depMath" :tree-map="treeNodeMap" @treeNodeClick="treeNodeClick" />
             </div>
           </template>
-          <PublicPageTable v-if="tableFlag" ref="table" :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" :selectedDatas="selectedDatas" :selectedCheck="selectedDataCheck" :show-summary="summaryFlag" @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" />
+          <PublicPageTable v-if="tableFlag" ref="table" :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" :selectedDatas="selectedDatas" :selectedCheck="selectedDataCheck" :show-summary="summaryFlag" @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" /> -->
         </div>
       </div>
     </div>
@@ -154,6 +155,7 @@ import AdvancedQuery from '@/components/AdvancedQuery'
 import AuthButton from '@/components/AuthButton'
 import AuthInstall from '@/components/AuthInstall'
 import SimpleQuery from '@/components/SimpleQuery'
+import Eltable from './tablelet.vue'
 import allIcons from '@/utils/icons'
 import { mapGetters } from 'vuex'
 import { Query, newData, modifyData, moveData, start, stop, startAll, stopAll } from "@/api/webApi"
@@ -162,7 +164,7 @@ import { exportToExcel } from '@/utils/table'
 
 export default {
   name: 'TablePage',
-  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, PublicPageForm, AdvancedQuery, AuthButton, SimpleQuery, AuthInstall },
+  components: {Eltable, PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, PublicPageForm, AdvancedQuery, AuthButton, SimpleQuery, AuthInstall },
   props: {
     dataTitle: {
       type: String,
@@ -199,6 +201,7 @@ export default {
       dialogName: '', //弹框名称
       pageTitle: '', //页面名称
       treeData: [], //tree数据
+      treeDatalook: [], //可视化tree数据
       treeParameters: {}, //tree传递参数
       treeNodeMap: {}, //tree传递map
       tableCols: [], //表头数据
@@ -240,7 +243,8 @@ export default {
       checkedtre: true,
       checkedtable: true,
       leftFlag: true,
-      tableFlag:true
+      tableFlag:true,
+      rotlist: {}
     }
   },
   computed: {
@@ -335,6 +339,7 @@ export default {
     pageInit (authId) {
       //获取页面查询参数
       const { query } = this.$route
+      // console.log(this.$route.meta)
       authId ? this.pageQuery = this.authQuery : this.pageQuery = query
       //获取页面配置
       const { pagecode, qid, auth_id } = this.$route.meta
@@ -422,6 +427,16 @@ export default {
     //获取tree点击
     treeNodeClick (data) {
       const nrow = _.cloneDeep(data)
+      this.rotlist = {}
+      this.rotlist = {
+        auth_id: data.pageconfigurationid,
+        pagecode:data.pagecode,
+        qid: null,
+        show_index: data.displaynumber,
+        superiorcode: data.pageroute,
+        title:  data.pagename,
+        up_auth_id: data.superiorid
+      }
       this.selectedDataCheck = nrow
       if (this.selected) {
         this.treeCheckQuery(nrow)
@@ -723,6 +738,9 @@ export default {
       const flag = this.$refs["ruleForm"].submitClickHandler()
       if (flag) this.tableType == "add" ? this.generalDataReception(1, this.tableForm) : this.generalDataReception(2, this.tableForm, this.tableKey)
     },
+    submitClickHandlers () {
+      this.generalDataReception(1, this.tableForm)
+    },
     //表格-增/删/改
     async generalDataReception (event, data, key) {
       this.dialogLoading = true
@@ -1225,6 +1243,9 @@ export default {
         this.tableForm[labelcode] = witem[dropdownlistlabel]
       }
     },
+    inputChangeHandler (data) {
+      if (!this.tableForm[data]) this.tableForm[data] = null
+    },
   },
 }
 </script>

+ 978 - 0
src/views/createtable/tablelet.vue

@@ -0,0 +1,978 @@
+<template>
+  <div :style="pageTableHeight" class="TablePage">
+    <PublicPageHeader class="TablePage_header" :page-title="dataTitle ? dataTitle : pageTitle">
+      <template slot="d_foot">
+        <SimpleQuery v-if="simpleQueryFlag" :selectOptions="advancedQueryValue" :simple-query-item="simpleQueryItem" @queryValue="queryValue" />
+      </template>
+      <template v-if="pageAuthBtnInstall">
+        <el-button size="small" type="primary" @click="onInstall">初始化</el-button>
+      </template>
+      <AuthButton :auth="pageAuthBtnAdd" />
+      <AuthButton :auth="pageAuthBtnQuery" />
+      <AuthButton :auth="pageAuthBtnExport" />
+    </PublicPageHeader>
+    <div :style="pageTableContentHeight" class="TablePage_content flex-wrap">
+      <template v-if="!dataFlag">
+        <div v-if="treeData.length" class="TablePage_content_left">
+          <PublicPageTree ref="pageTree" :tree-data="treeData" :dep-math="depMath" :tree-map="treeNodeMap" @treeNodeClick="treeNodeClick" />
+        </div>
+      </template>
+      <div :class="dataFlag ? 'tableAuto' : treeData.length ? 'tableSacle' : 'tableAuto'" class="TablePage_content_right">
+        <PublicPageTable ref="table" :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" :selectedDatas="selectedDatas" :selectedCheck="selectedDataCheck" :show-summary="summaryFlag" @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" />
+      </div>
+    </div>
+    <div class="TablePage_dialog">
+      <!--新增/编辑-->
+      <PublicPageDialog :dialog-body="authId ? true : false " :dialog-loading="dialogLoading" :dialog-title="tableTitle" dialogSize="630px" :form-auth="formAuth" :dialog-drawer="flag" @handleClose="submitClickClose('ruleForm')" @handleSubmit="submitClickHandler">
+        <PublicPageForm ref="ruleForm" :label-width="labelWidth" :form-pass="tableData" :form-type="tableType" :form-item="formItem" :form-data="tableForm" />
+      </PublicPageDialog>
+      <!--高级查询-->
+      <PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedClose" @handleSubmit="advancedTable('advancedDialogForm')">
+        <AdvancedQuery ref="advancedDialogForm" :selectOptions="simpleQueryValue" @getAdvancedQueryData="getAdvancedQueryData" />
+        <template slot="d_foot">
+          <el-button size="small" @click="restCollect('advancedDialogForm')" type="warning">重置</el-button>
+          <el-button size="small" @click="queryCollect('advancedDialogForm')" type="primary">收藏</el-button>
+        </template>
+      </PublicPageDialog>
+      <!--初始化-->
+      <PublicPageDialog dialog-title="初始化" dialogSize="600px" :dialog-drawer="installFlag" @handleClose="installClose" @handleSubmit="installTable('installForm')">
+        <AuthInstall ref="installForm" />
+      </PublicPageDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageHeader from '@/components/PublicPageHeader'
+import PublicPageTable from '@/components/SimpleTable'
+import PublicPageTree from '@/components/publicPageTree'
+import PublicPageDialog from '@/components/PublicPageDialog'
+import PublicPageForm from '@/components/publicPageForm'
+import AdvancedQuery from '@/components/AdvancedQuery'
+import AuthButton from '@/components/AuthButton'
+import AuthInstall from '@/components/AuthInstall'
+import SimpleQuery from '@/components/SimpleQuery'
+import { mapGetters } from 'vuex'
+import { Query, newData, modifyData, moveData, start, stop, startAll, stopAll } from "@/api/webApi"
+import { formatChange, listToTree } from '@/utils/validate'
+import { exportToExcel } from '@/utils/table'
+
+export default {
+  name: 'TablePage',
+  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, PublicPageForm, AdvancedQuery, AuthButton, SimpleQuery, AuthInstall },
+  props: {
+    dataTitle: {
+      type: String,
+      default: ''
+    },
+    dataFlag: {
+      type: Boolean,
+      default: false
+    },
+    msgContent: {
+      type: Object,
+      default: () => new Object()
+    },
+    authId: {
+      type: Number,
+      default: 0
+    },
+    authQuery: {
+      type: Object,
+      default: () => new Object()
+    },
+    routerlist:{
+      type: Object,
+      default: () => new Object()
+    },
+  },
+  data () {
+    return {
+      page: 0, //当前table页面
+      noMore: false, //当前table是否加载到最后开关
+      loading: false, //页面加载
+      dialogLoading: false, //新增/编辑确认按钮禁用
+      advancedDrawer: false, //高级查询弹框开关
+      defaultfilter: { 1: 1 }, //默认查询参数
+      pageQuery: {},
+      installFlag: false,
+      dialogFlag: false,
+      dialogName: '', //弹框名称
+      pageTitle: '', //页面名称
+      treeData: [], //tree数据
+      treeParameters: {}, //tree传递参数
+      treeNodeMap: {}, //tree传递map
+      tableCols: [], //表头数据
+      tableData: [], //表格数据
+      tableBtns: [], //表格按钮权限
+      authBtns: [], //表格里面的操作按钮
+      tableBtnForms: [], //表格按钮下的form表单权限
+      dataContent: {}, //表格查询数据
+      pageServiceId: null, //表格serviceid
+      formItem: [], //弹框表单渲染数据
+      flag: false, //弹框表单开关
+      formAuth: true, //弹框表单按钮开关
+      tableType: "add", //弹框表单弹框类型
+      tableTitle: "新增", //弹框表单标题
+      tableForm: {}, //弹框表单数据
+      rmFlag: false, //删除弹框开关
+      rmTitle: '', //删除弹框标题
+      tableObj: {}, //删除数据
+      tableOptions: {}, //表单数据下拉
+      labelWidth: '120px', //表单文字距离
+      fromDataReqCatch: [], //表单规则缓存
+      tableKey: null,//表格主键
+      depMath: 0,
+      selected: 0, //是否勾选
+      selectedDatas: [], //回显勾选的数据
+      selectedDatasCath: [],//回显数据缓存
+      selectedDataAlls: [], //勾选数据
+      selectedDataCheck: {}, //勾选树-选中
+      triggerserviceid: null, //勾选后查询的serviceid
+      summaryFlag: false, //是否显示合计行
+      simpleQueryFlag: false, //是否开启了简易查询
+      simpleQueryItem: [], //简易查询表单数据项
+      simpleQueryValue: [], //简易查询缓存值
+      advancedQueryValue: [], //高级查询缓存值
+      pageSizeDatas: ['outairportpage', 'landairportpage', 'transairportpage'],
+      pageInstall: 'permissionsManagementPage'
+    }
+  },
+  computed: {
+    ...mapGetters(['authArrs']),
+    pageTableHeight () {
+      if (this.dataFlag) return 'height:100%'
+      if (this.authId) return 'height:calc(100vh - 180px);padding:0'
+      return ''
+    },
+    pageTableContentHeight () {
+      if (this.dataFlag) return 'height:calc(100% - 60px)'
+      if (this.authId) return 'height:calc(100% - 130px)'
+      return ''
+    },
+    pageAuthBtnQuery () {
+      return this.tableBtns.filter(item => item.servicetype == 0)[0]
+    },
+    pageAuthBtnDetail () {
+      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]
+    },
+    pageAuthBtnExport () {
+      return this.tableBtns.filter(item => item.servicetype == 6)[0]
+    },
+    pageAuthBtnInstall () {
+      return this.pageInstall == this.$route.path.replace('/', '')
+    }
+  },
+  watch: {
+    routerlist: {
+      handler (row) {
+        if (row && Object.keys(row).length) {
+          this.authId ? this.pageInit(this.authId) : this.pageInit()
+          this.queryTableData(true)
+        }
+      }
+    },
+    msgContent: {
+      handler (row) {
+        if (row && Object.keys(row).length) {
+          const { passparameters } = row
+          const filterItem = this.formatDefault(passparameters, row)
+          if (!Object.keys(filterItem).length) return
+          this.defaultfilter = filterItem
+          this.queryTableData(true)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    authQuery: {
+      handler (row) {
+        if (row && Object.keys(row).length) {
+          this.defaultfilter = row
+          this.queryTableData(true)
+        }
+      },
+      deep: true,
+    }
+  },
+  mounted () {
+    this.authId ? this.pageInit(this.authId) : this.pageInit()
+  },
+  methods: {
+    //页面初始化
+    pageInit (authId) {
+      //获取页面查询参数
+      // const { query } = this.$route
+      // authId ? this.pageQuery = this.authQuery : this.pageQuery = query
+      //获取页面配置
+      const { pagecode, qid, auth_id } = this.routerlist && Object.keys(this.routerlist).length ? this.routerlist: this.$route.meta
+      //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗
+      const pageAuths = this.authArrs
+      if (!pageAuths.length) return
+      let pageAuthArrs = null
+      // console.log(pageAuths)
+      authId ? pageAuthArrs = pageAuths.filter(item => item['superiorid'] == authId) : pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
+      //获取当前页面权限类型
+      if (!pageAuthArrs.length) return
+      //获取tree权限
+      const pageAuthtrees = pageAuthArrs.filter(item => item.pagetype == 'tree')
+      if (pageAuthtrees?.length){ this.getPageTreeSetting(pageAuthtrees)}else{
+        this.treeData = []
+      }
+      //获取table权限
+      const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 'table')
+      if (pageAuthtables?.length) this.getPageTableSetting(pageAuths, pageAuthtables)
+      //获取按钮权限
+      const pageAuthbtns = pageAuthArrs.filter(item => item.pagetype == 'button')
+      if (pageAuthbtns?.length) this.getPageBtnSetting(pageAuthbtns)
+      const pageAuthFforms = pageAuthArrs.filter(item => item.pagetype == 'form')
+      //获取form表单弹框权限
+      if (pageAuthFforms?.length) this.getPageBtnFormSetting(pageAuths, pageAuthFforms)
+    },
+    //根据页面tree设置数据
+    getPageTreeSetting (pageAuthtrees) {
+      const { defaultfilter, dropdownlistid, dropdownlistlabel } = pageAuthtrees[0]
+      this.treeNodeMap = { nodeKey: dropdownlistid, nodeValue: dropdownlistlabel }
+      this.treeParameters = defaultfilter
+      this.treeData = pageAuthtrees
+    },
+    //根据页面table设置数据
+    getPageTableSetting (pageAuths, pageAuthtables) {
+      const authTableObj = pageAuthtables[0]
+      //获取当前页面table的配置
+      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, defaultfilter, selected, triggerserviceid } = authTableObj
+      //获取当前页面table的按钮权限
+      const currPageBtns = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item.pagetype == 'button')
+      if (currPageBtns?.length) this.tableBtns.push(...currPageBtns)
+      this.authBtns = pageAuths.filter(item => item.superiorid == pageconfigurationid && item.pagetype == 'button')
+      this.pageServiceId = Object.keys(this.msgContent).length ? this.msgContent.serviceid : serviceid;
+      this.pageTitle = pagename
+      this.selected = selected
+      this.triggerserviceid = triggerserviceid
+      this.defaultfilter = Object.keys(this.pageQuery).length ? this.pageQuery : defaultfilter ? this.formatDefault(defaultfilter, authTableObj) : { 1: 1 }
+      const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
+      this.getColumnData(tableColumnArrs)
+    },
+    //根据页面按钮设置数据
+    getPageBtnSetting (pageAuthbtns) {
+      this.tableBtns.push(...pageAuthbtns)
+    },
+    //根据页面按钮设置表单form数据
+    getPageBtnFormSetting (pageAuths, pageAuthForms) {
+      const { pageconfigurationid } = [...pageAuthForms][0]
+      const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
+      const formItemCopy = tableColumnArrs.filter((item) => item.isdisplay != 0)
+      this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc'])
+    },
+    //获取表头数据
+    getColumnData (columnArrs = []) {
+      const returnData = [...columnArrs]
+      this.$store.dispatch('auth/changeAuthMsg', returnData)
+      const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay != 0)
+      const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc'])
+      // const formItemCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay == 2 || item.isdisplay == 3);
+      // this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc']);
+      const msgCounts = tableColsCopyOrder.filter(item => item.enablecount)
+      const simpleQueryItem = _.cloneDeep(returnData).filter((item) => item.easysearch && item.isfiltercolumn)
+      if (msgCounts.length) {
+        this.summaryFlag = true
+      }
+      this.tableCols = listToTree(tableColsCopyOrder, 'groupid', 'pagecode')
+      const columncode = returnData.find(
+        (item) => item.isprimarykey == 1
+      )
+      if (columncode && Object.keys(columncode).length) {
+        this.tableKey = columncode['pagecode']
+      }
+      if (simpleQueryItem?.length) {
+        this.simpleQueryFlag = true
+        this.simpleQueryItem = simpleQueryItem
+      }
+    },
+    //获取tree点击
+    treeNodeClick (data) {
+      const nrow = _.cloneDeep(data)
+      this.selectedDataCheck = nrow
+      if (this.selected) {
+        this.treeCheckQuery(nrow)
+      } else {
+        const values = Object.values(data)
+        const filterItem = this.formatDefault(this.treeParameters, data)
+        if (!Object.keys(filterItem).length) return
+        this.defaultfilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
+        this.queryTableData(true)
+      }
+    },
+    //存在勾选-点击树-查询
+    async treeCheckQuery (data) {
+      const values = Object.values(data)
+      const filterItem = this.formatDefault(this.treeParameters, data)
+      if (!Object.keys(filterItem).length) return
+      const itemFilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
+      const datacontent = { filter: itemFilter }
+      this.loading = true
+      this.selectedDataAlls = []
+      try {
+        const { code, returnData } = await Query({
+          page: 1,
+          serviceid: this.triggerserviceid,
+          datacontent,
+          event: '0',
+          size: 9999
+        });
+        if (code == 0) {
+          const datas = []
+          this.tableData.filter(item => {
+            [...returnData].forEach(pt => {
+              if (item['serviceid'] == pt['serviceid']) {
+                datas.push(item)
+              }
+            })
+          })
+          this.selectedDatas = [...datas]
+          this.selectedDatasCath = [...returnData]
+          this.selectedDataAlls.push([...datas])
+        } else {
+          this.$message.error("获取表格数据失败")
+        }
+      } catch (error) {
+        this.$message.error("获取表格数据失败")
+      }
+      this.loading = false
+    },
+    //格式化传递参数数据
+    formatDefault (item, data = {}) {
+      if (typeof item != 'string') return {}
+      const filterItem = {}
+      const parameters = item.replace('{', '').replace('}', '')
+      const parametersSplit = parameters?.split(',')
+      parametersSplit.map(item => {
+        const [key, val] = item?.split(':')
+        filterItem[key] = data[val]
+      })
+      return filterItem
+    },
+    //根据按钮权限查询表单权限
+    findBtntoForm (pageroute) {
+      return this.tableBtnForms.filter(item => item.pagecode == pageroute)
+    },
+    //表单-查看
+    handleDetail (row) {
+      const { openmode, pageroute } = this.pageAuthBtnDetail
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+      this.flag = true
+      this.formAuth = false
+      this.tableType = "detail"
+      this.tableTitle = "查看"
+      this.tableForm = _.cloneDeep(row)
+    },
+    //表单-新增
+    async handleAdd () {
+      const { openmode, pageroute, pagecode } = this.pageAuthBtnAdd
+      if (!openmode) return
+      // if (!this.findBtntoForm(pageroute).length) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+      // const { pageconfigurationid } = this.findBtntoForm(pageroute)[0]
+      // const pageAuths = this.authArrs
+      // const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
+      // this.dialogName = pageroute
+      if (pagecode == 'startBtnAll') {
+        if (!Object.keys(this.selectedDataCheck).length) {
+          this.$message.error('请选中容器后再操作')
+          return
+        }
+        const { code, message } = await startAll(this.selectedDataCheck)
+        if (code == 0) {
+          this.$message.success(message || '操作成功')
+          this.queryTableData(true)
+        } else {
+          this.$message.error(message || '操作失败')
+        }
+      } else {
+        if (this.$refs['ruleForm']) {
+          this.$nextTick(() => {
+            this.$refs['ruleForm'].restForm()
+          })
+        }
+        this.flag = true;
+        this.tableType = "add"
+        this.tableTitle = "新增"
+        this.tableForm = {}
+        for (let k in this.defaultfilter) {
+          if (k != 1) {
+            this.tableForm[k] = this.defaultfilter[k]
+          }
+        }
+        for (let k in this.formItem) {
+          if (this.formItem[k].defaultvalue && this.formItem[k].defaultvalue != "") {
+            this.$set(this.tableForm, this.formItem[k].pagecode, this.formItem[k].defaultvalue)
+          }
+        }
+      }
+      // this.formItem = tableColumnArrs.filter(item => item.isdisplay == 1)
+    },
+    formatData (returnData) {
+      return typeof returnData == 'string' ? this.retParse(returnData) : returnData
+    },
+    retParse (returnData) {
+      try {
+        return JSON.parse(returnData) ? JSON.parse(returnData) : returnData
+      } catch (error) {
+        return returnData
+      }
+    },
+    //回显下拉数据
+    resPassters (obj) {
+      const narr = []
+      const nitem = _.cloneDeep(obj)
+      const { passparameters } = nitem
+      if (!passparameters) return ''
+      const ndata = this.formatData(passparameters)
+      if (!Array.isArray(ndata)) return ''
+      ndata.map(({ pageconfigurationid }) => { narr.push(pageconfigurationid) })
+      return narr
+    },
+    //表格-编辑
+    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 = "编辑"
+      const nrow = _.cloneDeep(row)
+      if (nrow.passparameters) {
+        nrow.passparameters = this.resPassters(row)
+      }
+      if (nrow.dropdownlist) {
+        nrow.dropdownlist = Number(nrow.dropdownlist)
+      }
+      this.tableForm = nrow
+    },
+    //表格-其他类型按钮操作
+    handleOther (row, auth) {
+      const { openmode, pageroute, passparameters } = this.pageAuthBtnOther
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute, passparameters, row)
+      const { pagecode } = auth
+      if (pagecode == 'stopBtn' || pagecode == 'startBtn') {
+        this.stateChange(row)
+      }
+    },
+    //启动 & 停止
+    async stateChange (row) {
+      const { runstate, serviceid, containercode } = row
+      const filter = { serviceid, containercode }
+      if (runstate == 1) {
+        const { code, returnData } = await stop(filter)
+        if (code == 0) {
+          this.$message.success(returnData || '操作成功')
+          this.queryTableData(true)
+        } else {
+          this.$message.error(returnData || '操作失败')
+        }
+      } else {
+        const { code, returnData } = await start(filter)
+        if (code == 0) {
+          this.$message.success(returnData || '操作成功')
+          this.queryTableData(true)
+        } else {
+          this.$message.error(returnData || '操作失败')
+        }
+      }
+    },
+    //表格-删除
+    handleRemove (row) {
+      const { openmode, pageroute } = this.pageAuthBtnDel
+      if (!openmode) return
+      if (openmode != 2) this.autoBtnClick(openmode, pageroute)
+      let name = ''
+      const nrow = _.cloneDeep(row)
+      for (const key in nrow) {
+        if (key.includes('name')) {
+          name = nrow[key] || ''
+        }
+      }
+      this.$confirm(`确认要删除 ${name} 这条信息吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.generalDataReception(3, row, this.tableKey)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    //表格-勾选
+    handleSelectionChange (val) {
+      this.selectedDataAlls.push([...val])
+      const ndatas = _.cloneDeep(this.selectedDataAlls)
+      if (ndatas.length == 1) {
+        this.sendCheckData('add', ndatas[0])
+      } else {
+        const [nitems1, nitems2] = [ndatas.at(-1), ndatas.at(-2)]
+        if (nitems1.length > nitems2.length) {
+          const res = this.findRepetData(nitems1, nitems2)
+          this.sendCheckData('add', res)
+        } else {
+          const res = this.findRepetData(nitems1, nitems2)
+          this.sendCheckData('del', res)
+        }
+      }
+    },
+    findRepetData (nitems1, nitems2) {
+      const key = 'serviceid'
+      const res = [...nitems1, ...nitems2].filter(
+        (item) =>
+          !(
+            nitems1.some((p) => item[key] == p[key]) &&
+            nitems2.some((c) => item[key] == c[key])
+          )
+      )
+      return res
+    },
+    //发送新增编辑删除数据
+    sendCheckData (types, data, key = 'serviceid') {
+      const event = types == 'add' ? 1 : types == 'edit' ? 2 : 3
+      const querys = []
+      const items = _.cloneDeep(data)
+      const { serviceid, servicename } = items[0]
+      const { containerid, containercode, containername } = this.selectedDataCheck
+      const pitem = {
+        serviceid,
+        servicename,
+        containerid,
+        containercode,
+        containername
+      }
+      const params = {
+        serviceid: this.triggerserviceid,
+        datacontent: formatChange(pitem, event, key),
+        event,
+      }
+      if (event == 3) {
+        params.datacontent[0].filter.containerid = containerid
+        delete params.datacontent[0].value.containerid
+      }
+      event == 1 ? querys.push(newData(params)) : querys.push(moveData(params))
+      this.getAnscyData(querys)
+    },
+    //获取异步数据
+    async getAnscyData (allResult) {
+      if (!allResult.length) return
+      this.loading = true
+      const results = await Promise.allSettled(allResult)
+      results.map((item) => {
+        const { status, value } = item
+        if (status == 'fulfilled') {
+          const { code } = value
+          if (code == 0) {
+            this.treeCheckQuery(this.selectedDataCheck)
+            this.$message.success('操作成功')
+          } else {
+            this.$message.error('操作失败')
+          }
+        } else {
+          this.$message.error('网络错误')
+        }
+      })
+      // this.loading = false
+    },
+    // 新增/编辑-取消
+    submitClickClose (formName) {
+      this.formAuth = true
+      this.flag = false
+      this.$refs[formName].restForm()
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      const flag = this.$refs["ruleForm"].submitClickHandler()
+      if (flag) this.tableType == "add" ? this.generalDataReception(1, this.tableForm) : this.generalDataReception(2, this.tableForm, this.tableKey)
+    },
+    //表格-增/删/改
+    async generalDataReception (event, data, key) {
+      this.dialogLoading = true
+      try {
+        const params = {
+          serviceid: this.pageServiceId,
+          datacontent: 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.dialogLoading = false
+          this.tableObj = {}
+          this.tableForm = {}
+          this.resetTable()
+          this.load();
+          this.depMath = Math.random()
+          // this.$router.go(0);
+        } else {
+          this.$message.error("操作失败");
+          this.flag = false
+          this.rmFlag = false
+          this.dialogLoading = false
+          this.tableObj = {};
+          this.tableForm = {};
+        }
+      } catch (error) {
+        this.flag = false
+        this.rmFlag = false
+        this.dialogLoading = false
+        this.tableObj = {}
+        this.tableForm = {}
+      }
+    },
+    autoBtnClick (id, url, passparameters, row = {}) {
+      switch (Number(id)) {
+        case 1:
+          if (passparameters && Object.keys(row).length) {
+            const filterItem = this.formatDefault(passparameters, row)
+            this.$router.push({
+              path: url,
+              query: filterItem
+            })
+          }
+          break;
+        case 2:
+          this.$router.push(url)
+          break;
+        default:
+          break;
+      }
+    },
+    //高级查询-弹框打开
+    async handleQuery () {
+      const { openmode, pageroute, pagecode } = this.pageAuthBtnQuery
+      if (!openmode) return
+      if (pagecode == 'stopBtnAll') {
+        if (!Object.keys(this.selectedDataCheck).length) {
+          this.$message.error('请选中容器后再操作')
+          return
+        }
+        const { code, message } = await stopAll(this.selectedDataCheck)
+        if (code == 0) {
+          this.$message.success(message || '操作成功')
+          this.queryTableData(true)
+        } else {
+          this.$message.error(message || '操作失败')
+        }
+      } else {
+        if (openmode != 3) this.advancedDrawer = true // this.autoBtnClick(openmode, pageroute)
+      }
+    },
+    //简易查询-确定
+    queryValue (dataRules) {
+      const arr = [...dataRules]
+      const arrmap = {}
+      if (arr?.length) {
+        arr.forEach(item => {
+          const { column, value } = item
+          item.value = typeof value == 'string' ? value.replace(/\s*/g, "") : value
+          arrmap[column] = value
+        })
+      }
+      this.defaultfilter = Object.keys(arrmap).length ? arrmap : arr.length ? arr : { 1: 1 }
+      this.simpleQueryValue = arr
+      this.queryTableData(true)
+    },
+    //高级查询-确定
+    advancedTable (refName) {
+      this.$refs[refName].advancedQueryHandler()
+    },
+    //高级查询-取消
+    advancedClose () {
+      this.advancedDrawer = false
+      // this.defaultfilter = { 1: 1 }
+      // this.queryTableData(true)
+    },
+    //初始化
+    onInstall () {
+      if (!Object.keys(this.selectedDataCheck).length) {
+        this.$message.error('请选中权限后再操作')
+        return
+      }
+      const { pagetype } = this.selectedDataCheck
+      if (pagetype != 'table') {
+        this.$message.error('请选择表格后再操作')
+        return
+      }
+      this.installFlag = true
+    },
+    //初始化-关闭
+    installClose () {
+      this.installFlag = false
+    },
+    //初始化-确定
+    installTable () {
+      this.installSubmit()
+      this.installFlag = false
+    },
+    async installSubmit () {
+      const { pageconfigurationid } = this.selectedDataCheck
+      const { code, returnData } = await Query({
+        serviceid: 134,
+        datacontent: {
+          tableName: this.$refs['installForm'].tableinfo,
+          datasourceid: this.$refs['installForm'].datasourceid,
+          pageconfigurationid
+        },
+        deletedatacontent: {
+          datacontent: [
+            {
+              filter: {
+                superiorid: pageconfigurationid
+              },
+              value: {}
+            }
+          ],
+          event: '3'
+        },
+        event: '0'
+      })
+      if (code == 0 && returnData?.length) {
+        this.$message.success('数据初始化成功')
+        this.$refs['pageTree'].pageInit()
+        this.queryTableData(true)
+        this.$refs['installForm'].tableinfo = ''
+        this.$refs['installForm'].datasourceid = ''
+      }
+    },
+    //高级查询-确定-数据
+    getAdvancedQueryData (dataRules) {
+      const arr = [...dataRules]
+      if (arr && arr.length) {
+        arr.forEach(item => {
+          item.value = typeof item.value == 'string' ? item.value.replace(/\s*/g, "") : item.value
+        })
+      }
+      this.defaultfilter = arr
+      this.advancedQueryValue = arr
+      this.queryTableData(true)
+    },
+    //高级查询-收藏
+    queryCollect (refName) {
+      this.$refs[refName].advancedQueryCollect()
+    },
+    //高级查询-重置
+    restCollect (refName) {
+      this.defaultfilter = { 1: 1 }
+      this.queryTableData(true)
+      this.$refs[refName].advancedRestCollect()
+    },
+    // 给表头单元格加上 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 = []
+        const { property } = column
+        const ndata = _.cloneDeep(this.tableCols).filter(item => item.pagecode == property)
+        if (ndata?.length) {
+          const { pageroute } = ndata[0]
+          if (pageroute) classes.push('cell-click')
+        }
+        return classes.join(' ')
+      }
+    },
+    formatPass (pass = []) {
+      if (typeof pass != 'string') return {}
+      const ndata = JSON.parse(pass)
+      if (!ndata) return {}
+      const nitem = {}
+      ndata.map(item => {
+        const ns = Object.values(item)
+        nitem[ns[0]] = ns[1]
+      })
+      return nitem
+    },
+    //添加-表格-单元格-点击事件
+    cellClickHandler (row, column, cell, event) {
+      const { property } = column
+      const ndata = _.cloneDeep(this.tableCols).filter(item => item.pagecode == property)
+      const params = {}
+      if (ndata?.length) {
+        const { defaultfilter, pageroute, passparameters } = ndata[0]
+        if (!pageroute) return
+        if (defaultfilter || passparameters) {
+          if (passparameters) {
+            // const nitem = this.formatPass(passparameters)
+            const passparametersArray = JSON.parse(passparameters)
+            passparametersArray.map(item => {
+              if (row[item.pagecode]) {
+                const alias = item.alias
+                const pagecode = item.pagecode
+                if (alias) {
+                  params[alias] = row[item['pagecode']]
+                }
+                else {
+                  params[pagecode] = row[item['pagecode']]
+                }
+              }
+            })
+            this.$router.push({
+              path: pageroute,
+              query: params
+            })
+            return
+          }
+          if (defaultfilter) {
+            const filterItem = this.formatDefault(defaultfilter, row)
+            this.$router.push({
+              path: pageroute,
+              query: filterItem
+            })
+            return
+          }
+        }
+        else {
+          this.$router.push(pageroute)
+        }
+      }
+    },
+    //导出
+    handleExport () {
+      if (!this.tableData.length) {
+        this.$message.info('无数据')
+        return
+      }
+      const table = this.$refs['table'].$el.cloneNode(true)
+      const fileName = this.pageTitle + '.xlsx'
+      exportToExcel(table, this.pageTitle, fileName)
+    },
+    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 (jumpSing = false) {
+      if (jumpSing) {
+        const initialize = _.once(this.resetTable)
+        initialize()
+      }
+      this.loading = true;
+      const datacontent = { filter: this.defaultfilter }
+      const parmas = {
+        page: ++this.page,
+        serviceid: this.pageServiceId,
+        datacontent,
+        event: '0'
+      }
+      if (this.selected || this.pageSizeDatas.includes(this.$route.path.replace('/', ''))) {
+        parmas.size = 9999
+      }
+      try {
+        const { code, returnData } = await Query(parmas);
+        if (code == 0) {
+          if (returnData.length === 0) {
+            this.page--
+            this.noMore = true
+          }
+          this.tableData.push(...returnData)
+        } else {
+          this.page--
+          this.noMore = true
+          this.$message.error("获取表格数据失败")
+        }
+      } catch (error) {
+        this.page--
+        this.noMore = true
+      }
+      if (this.selected || this.pageSizeDatas.includes(this.$route.path.replace('/', ''))) {
+        this.noMore = true
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.TablePage {
+  height: calc(100vh - 90px);
+  padding: 20px;
+  &_content {
+    margin-top: 20px;
+    height: calc(100vh - 190px);
+    &_left {
+      width: 360px;
+      margin-right: 20px;
+    }
+    &_right {
+    }
+    .tableAuto {
+      width: 100%;
+    }
+    .tableSacle {
+      width: calc(100% - 380px);
+    }
+  }
+}
+</style>