添加授权管理

src/components/AdvancedQuery/index.vue

@@ -64,7 +64,7 @@
         </el-form>
       </el-scrollbar>
     </div>
-    <div class="AdvancedQuery_list">
+    <div v-if="adList" class="AdvancedQuery_list">
       <el-scrollbar style="height: 100%" :horizontal="false">
         <div v-for="(item,index) in catchOptions" :key="index">
           <div style="cursor: pointer;" class="flex">
@@ -127,6 +127,10 @@ export default {
     selectOptions: {
       type: Array,
       default: () => []
+    },
+    adList: {
+      type: Boolean,
+      default: true
     }
   },
   data () {

src/views/permissionPage/components/permissionList.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="permissionList">
+    <div class="permissionList_tree">
+      <div class="permissionList_tree_head flex">
+        <div class="permissionList_tree_head_list">名称</div>
+        <div class="permissionList_tree_head_list">类型</div>
+        <div class="permissionList_tree_head_list">行权限</div>
+        <div class="permissionList_tree_head_list">操作</div>
+      </div>
+      <div class="permissionList_tree_body">
+        <el-scrollbar style="height: 100%" :horizontal="false">
+          <el-tree :data="data" show-checkbox :node-key="nodeKey" default-expand-all :expand-on-click-node="false">
+            <template slot-scope="{node,data}">
+              <div class="custom-tree-node flex">
+                <div class="custom-tree-node-list">{{data.pagename}}</div>
+                <div class="custom-tree-node-list">{{data.pagetype}}</div>
+                <div class="custom-tree-node-list">类型等于机场</div>
+                <div class="custom-tree-node-list">
+                  <template v-if="data.pagetype == 'table'">
+                    <el-button size="mini" type="text" @click="details(node, data)">行权限</el-button>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </div>
+    <div class="permissionList_dialog">
+      <!--高级查询-->
+      <PublicPageDialog dialog-title="行权限" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
+        <AdvancedQuery ref="advancedDialogForm" :ad-list="false" @getAdvancedQueryData="getAdvancedQueryData" />
+      </PublicPageDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageDialog from '@/components/PublicPageDialog'
+import AdvancedQuery from '@/components/AdvancedQuery'
+import { mapGetters } from 'vuex'
+import { listToTree } from '@/utils/validate'
+
+export default {
+  name: 'Permissionlist',
+  components: { PublicPageDialog, AdvancedQuery },
+  data () {
+    return {
+      advancedDrawer: false,
+      data: [],
+      defaultProps: {
+        children: 'children',
+        label: 'pagename'
+      },
+      defaultKeys: [],
+      nodeKey: 'pageconfigurationid',
+    }
+  },
+  computed: {
+    ...mapGetters(['authArrs'])
+  },
+  mounted () {
+    this.data = []
+    setTimeout(() => {
+      this.authsTree()
+    }, 100);
+  },
+  methods: {
+    //用户权限树
+    authsTree () {
+      const treeMenu = listToTree(this.authArrs, 'superiorid', 'pageconfigurationid')
+      this.data = treeMenu
+    },
+    //高级查询-提交
+    advancedTable (refName) {
+      this.$refs[refName].advancedQueryHandler()
+    },
+    getAdvancedQueryData (dataRules) {
+      console.log(dataRules)
+    },
+    details (node, data) {
+      const ndata = _.cloneDeep(data)
+      this.$store.dispatch('auth/changeAuthMsg', ndata.children)
+      this.advancedDrawer = true
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.permissionList {
+  height: 100%;
+  &_tree {
+    height: 100%;
+    &_head {
+      height: 42px;
+      line-height: 42px;
+      background-color: #f0f6ff;
+      font-size: 16px;
+      font-size: 600;
+      &_list {
+        padding: 0 20px;
+        width: 25%;
+      }
+    }
+    ::v-deep &_body {
+      height: calc(100% - 52px);
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+      .is-horizontal {
+        display: none;
+      }
+      .el-tree-node {
+        &__content {
+          height: 49px;
+          border-top: 1px solid #d6d4d4;
+        }
+      }
+      .custom-tree-node {
+        width: 100%;
+        line-height: 28px;
+        &-list {
+          padding-right: 20px;
+          width: 25%;
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/permissionPage/index.vue

@@ -6,148 +6,19 @@
         <PublicPageTree />
       </div>
       <div class="permissionPage_content_right">
-        <PublicPageTable :table-data="tableData" @handleDetails="handleDetails" @handleEdit="handleEdit" @handleRemove="handleRemove" />
+        <PublicPageTable />
       </div>
     </div>
-    <!--高级查询-->
-    <PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
-      <AdvancedQuery ref="advancedDialogForm" @getAdvancedQueryData="getAdvancedQueryData" />
-    </PublicPageDialog>
   </div>
 </template>
 
 <script>
 import PublicPageHeader from '@/components/PublicPageHeader'
-import PublicPageTable from '@/components/PublicPageTable'
-import PublicPageDialog from '@/components/PublicPageDialog'
+import PublicPageTable from './components/permissionList.vue'
 import PublicPageTree from '@/components/publicPageTree'
-import AdvancedQuery from '@/components/AdvancedQuery'
 export default {
   name: 'Permissionpage',
-  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, AdvancedQuery },
-  data () {
-    return {
-      tableData: [{
-        id: 1,
-        upid: null,
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        id: 2,
-        upid: null,
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        id: 3,
-        upid: null,
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄',
-        children: [{
-          id: 31,
-          upid: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          children: [{
-            id: 41,
-            upid: 31,
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            id: 42,
-            upid: 31,
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          }]
-        }, {
-          id: 32,
-          upid: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }]
-      }, {
-        id: 4,
-        upid: null,
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }],
-      advancedDrawer: false,
-      dialogDrawer: false,
-      dialogTitle: '新增界面配置',
-      dialogForm: {
-        pagename: '',
-        pagetype: ''
-      },
-      rules: {
-        pagename: [
-          { required: true, message: '请输入权限项名称', trigger: 'blur' },
-        ],
-        pagetype: [
-          { required: true, message: '请选择权限类型', trigger: 'change' },
-        ]
-      }
-    }
-  },
-  methods: {
-    //获取页面数据
-    async getPageData () {
-      const { code, message, returnData } = await getVCode();
-      if (code == 0 && isValue(returnData)) {
-        const { verifyCodeImage } = returnData;
-        this.baseImg = verifyCodeImage;
-      } else {
-        this.$message.error(message);
-      }
-    },
-    //新增
-    handleAdd () {
-      this.dialogDrawer = true
-      this.dialogTitle = '新增界面配置'
-    },
-    //详情
-    handleDetails (row) {
-      console.log(row)
-    },
-    //编辑
-    handleEdit (row) {
-      this.dialogDrawer = true
-      this.dialogTitle = '编辑界面配置'
-      console.log(row)
-    },
-    //删除
-    handleRemove (row) {
-      console.log(row)
-    },
-    //关闭
-    handleClose () {
-      this.$refs['dialogForm'].resetFields()
-      this.dialogDrawer = false
-    },
-    //高级查询-提交
-    advancedTable (refName) {
-      this.$refs[refName].advancedQueryHandler()
-    },
-    getAdvancedQueryData (dataRules) {
-      console.log(dataRules)
-    },
-    submitTable () {
-      this.$refs['dialogForm'].validate((valid) => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-  }
+  components: { PublicPageHeader, PublicPageTable, PublicPageTree, },
 }
 </script>
 

src/views/tablePage/index.vue

@@ -203,7 +203,7 @@ export default {
     getColumnData (columnArrs = []) {
       const returnData = [...columnArrs]
       this.$store.dispatch('auth/changeAuthMsg', returnData)
-      const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay !=0);
+      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']);
@@ -217,9 +217,10 @@ export default {
     },
     //获取tree点击
     treeNodeClick (data) {
+      const values = Object.values(data)
       const filterItem = this.formatDefault(this.treeParameters, data)
       if (!Object.keys(filterItem).length) return
-      this.defaultfilter = filterItem
+      this.defaultfilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
       this.queryTableData(true)
     },
     //格式化传递参数数据
@@ -252,8 +253,8 @@ export default {
       this.tableType = "add";
       this.tableTitle = "新增";
       this.tableForm = {};
-      for(let k in this.defaultfilter){
-        if(k!=1){
+      for (let k in this.defaultfilter) {
+        if (k != 1) {
           this.tableForm[k] = this.defaultfilter[k]
         }
       }