table页面新增tree和逻辑

src/components/SimpleTable/index.vue

@@ -253,7 +253,7 @@ export default {
       const sums = []
       columns.forEach((column, index) => {
         this.tableCols.forEach(p => {
-          if (column.property === p.columncode && p.needCount) {
+          if (column.property === p.columncode) {
             const values = data.map(item => Number(item[column.property]))
             if (!values.every(value => isNaN(value))) {
               sums[index] = values.reduce((prev, curr) => {

src/components/publicPageTree/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="publicPageTree">
+    <div class="publicPageTree_search">
+      <el-input size="small" placeholder="输入关键字进行过滤" clearable v-model="filterText"></el-input>
+    </div>
+    <div class="publicPageTree_tree">
+      <el-scrollbar style="height: 100%" :horizontal="false">
+        <el-tree class="filter-tree" :data="data" :props="defaultProps" node-key="pageconfigurationid" :default-expanded-keys="defaultKeys" :filter-node-method="filterNode" ref="tree" @node-click="treeNodeClick" />
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Query } from "@/api/webApi"
+import { listToTree } from '@/utils/validate'
+
+export default {
+  name: 'PublicPageTree',
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      filterText: '',
+      data: [],
+      defaultProps: {
+        children: 'children',
+        label: 'pagename'
+      },
+      defaultKeys: []
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val);
+    },
+    treeData: {
+      handler (arr) {
+        if (arr?.length) {
+          const { defaultfilter, serviceid, pagename } = arr[0]
+          const defaultfilterTag = defaultfilter ? defaultfilter : { 1: 1 }
+          this.queryTreeData(defaultfilterTag, serviceid, pagename)
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true;
+      return data.pagename.indexOf(value) !== -1;
+    },
+    treeNodeClick (data) {
+      this.$emit('treeNodeClick', data)
+    },
+    async queryTreeData (defaultfilter, serviceid, pagename) {
+      this.loading = true;
+      const datacontent = { filter: defaultfilter, serviceid }
+      try {
+        const { code, returnData } = await Query({
+          page: ++this.page,
+          serviceid,
+          datacontent,
+          event: '0'
+        });
+        if (code == 0 && returnData?.length) {
+          const name = '全部'
+          const treeMenu = listToTree(returnData, 'superiorid', 'pageconfigurationid')
+          const treeMenuAll = [{ pagename: name, serviceid: name, superiorid: name, pageconfigurationid: -1, children: treeMenu }]
+          this.defaultKeys = [-1]
+          this.data = treeMenuAll
+        } else {
+          this.$message.error(`获取${pagename}数据失败`);
+        }
+      } catch (error) {
+        this.$message.error(`获取${pagename}数据失败`);
+      }
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.publicPageTree {
+  background-color: #fff;
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+  ::v-deep &_tree {
+    margin-top: 20px;
+    height: calc(100% - 52px);
+    .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+    .is-horizontal {
+      display: none;
+    }
+  }
+}
+</style>

src/getMenu.js

@@ -61,27 +61,10 @@ router.beforeEach(async (to, from, next) => {
             router.addRoutes(menus)
             next({ ...to, replace: true })
           } else {
-            // remove token and go to login page to re-login
-            if (store.getters.UserId) {
-              const res = await store.dispatch('user/logout')
-              if (res) {
-                store.dispatch('app/toggleOutflag', false)
-                setTimeout(() => {
-                  sessionStorage.removeItem('userName')
-                  router.push(`/login`)
-                }, 1000);
-              } else {
-                await store.dispatch('user/resetToken')
-                Message.error(error || 'Has Error')
-                next(`/login?redirect=${to.path}`)
-                NProgress.done()
-              }
-            } else {
-              await store.dispatch('user/resetToken')
-              Message.error(error || 'Has Error')
-              next(`/login?redirect=${to.path}`)
-              NProgress.done()
-            }
+            await store.dispatch('user/resetToken')
+            Message.error(error || 'Has Error')
+            next(`/login?redirect=${to.path}`)
+            NProgress.done()
           }
         } catch (error) {
           // remove token and go to login page to re-login

src/views/dataAccessPage/index.vue

@@ -73,7 +73,7 @@
               </el-table-column>
               <el-table-column fixed="right" label="操作" width="100">
                 <template slot-scope="scope">
-                  <el-button type="text" size="small">查看详情</el-button>
+                  <el-button @click="handleDetails(scope.row)" type="text" size="small">查看详情</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -153,7 +153,10 @@ export default {
       const index = children.findIndex(d => d.id === data.id);
       children.splice(index, 1);
     },
-    onSubmit () { }
+    onSubmit () { },
+    handleDetails (row) {
+      console.log(row)
+    }
   },
 }
 </script>

src/views/tablePage/index.vue

@@ -4,8 +4,13 @@
       <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 class="TablePage_content flex-wrap">
+      <div v-if="treeData.length" class="TablePage_content_left">
+        <PublicPageTree :tree-data="treeData" @treeNodeClick="treeNodeClick" />
+      </div>
+      <div class="TablePage_content_right">
+        <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>
     <div class="TablePage_dialog">
       <!--新增/编辑-->
@@ -72,23 +77,27 @@
 <script>
 import PublicPageHeader from '@/components/PublicPageHeader'
 import PublicPageTable from '@/components/SimpleTable'
+import PublicPageTree from '@/components/publicPageTree'
 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"
+import { Query, newData, modifyData, moveData } from "@/api/webApi"
 
 export default {
   name: 'TablePage',
-  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, AdvancedQuery, AuthButton },
+  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, AdvancedQuery, AuthButton },
   data () {
     return {
       page: 0, //当前table页面
       noMore: false, //当前table是否加载到最后开关
       loading: false, //页面加载
       advancedDrawer: false, //高级查询弹框开关
+      defaultfilter: { 1: 1 }, //默认查询参数
       dialogFlag: false,
       pageTitle: '', //页面名称
+      treeData: [], //tree数据
+      treeParameters: {}, //tree传递参数
       tableCols: [], //表头数据
       tableData: [], //表格数据
       tableBtns: [], //表格按钮权限
@@ -143,9 +152,8 @@ export default {
         if (dropdownlist || dropdownlist == 0) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'change' }]
         else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, type: 'date', message: `${columnname}不能为空`, trigger: 'change' }]
         else
-          if (itemReq && !itemRule) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }]
-        return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${columnname}规则`, trigger: 'blur' }]
-
+          if (itemReq && itemRule) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${columnname}规则`, trigger: 'blur' }]
+        return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }]
       }
     },
   },
@@ -163,6 +171,9 @@ export default {
       //获取当前页面权限类型
       const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
       if (!pageAuthArrs.length) return
+      //获取tree权限
+      const pageAuthtrees = pageAuthArrs.filter(item => item.pagetype == 5)
+      if (pageAuthtrees?.length) this.getPageTreeSetting(pageAuths, pageAuthtrees)
       //获取table权限
       const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 3)
       if (pageAuthtables?.length) this.getPageTableSetting(pageAuths, pageAuthtables)
@@ -170,17 +181,26 @@ export default {
       const pageAuthbtns = pageAuthArrs.filter(item => item.pagetype == 4)
       if (pageAuthbtns?.length) this.getPageBtnSetting(pageAuthbtns)
     },
+    //根据页面tree设置数据
+    getPageTreeSetting (pageAuths, pageAuthtrees) {
+      const { passparameters } = pageAuthtrees[0]
+      this.treeParameters = passparameters
+      this.treeData = pageAuthtrees
+    },
     //根据页面table设置数据
     getPageTableSetting (pageAuths, pageAuthtables) {
       const authTableObj = pageAuthtables[0]
+      console.log(authTableObj)
       //获取当前页面table的配置
-      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid } = authTableObj
+      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, defaultfilter } = 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
+      console.log(defaultfilter)
+      this.defaultfilter = defaultfilter ? defaultfilter : { 1: 1 }
       this.getColumnData(pagecode, userpermissionsid)
     },
     //根据页面按钮设置数据
@@ -211,6 +231,25 @@ export default {
         console.log(error)
       }
     },
+    //获取tree点击
+    treeNodeClick (data) {
+      const filterItem = this.formatDefault(this.treeParameters, data)
+      if (!Object.keys(filterItem).length) return
+      this.defaultfilter = filterItem
+      this.queryTableData()
+    },
+    //格式化传递参数数据
+    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
+    },
     //获取表单下拉数据
     changeSelect (code, item) { },
     inputChangeHandler (data) {
@@ -477,8 +516,9 @@ export default {
       this.queryTableData()
     },
     async queryTableData () {
+      this.resetTable()
       this.loading = true;
-      const datacontent = { filter: { 1: 1 } }
+      const datacontent = { filter: this.defaultfilter }
       try {
         const { code, returnData } = await Query({
           page: ++this.page,
@@ -513,6 +553,13 @@ export default {
   &_content {
     margin-top: 20px;
     height: calc(100vh - 180px);
+    &_left {
+      width: 360px;
+      margin-right: 20px;
+    }
+    &_right {
+      flex: 1;
+    }
   }
 }
 </style>