角色管理 分配权限 数据权限 封装pd-tree

magic-boot-ui/src/api/menu.js

@@ -7,16 +7,6 @@ export function getMenuTree() {
   })
 }
 
-export function getMenusByRoleId(roleId) {
-  return request({
-    url: 'menu/by/role',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
 export function getCurrentUserMenu() {
   return request({
     url: 'menu/current/menus',

magic-boot-ui/src/components/Psyduck/pd-tree.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <el-button v-if="expand" type="primary" size="mini" icon="el-icon-sort" plain @click="doExpand">展开/折叠</el-button>
+    <el-button v-if="checked" type="primary" size="mini" icon="el-icon-check" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(treeData, treeAllChecked) }">全选/全不选</el-button>
+    <el-tree
+      v-if="refreshTree"
+      ref="tree"
+      :data="treeData"
+      v-bind="el"
+      node-key="id"
+      :default-expand-all="defaultExpandAll"
+      @check-change="checkChange"
+      @node-click="nodeClick"
+      :props="defaultProps"
+      :style="{ 'max-height': maxHeight ? maxHeight : '100%' }"
+      style="overflow: auto"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PdTree',
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    params: {
+      type: Object,
+      default: () => {}
+    },
+    selectValues: {
+      type: String,
+      default: ''
+    },
+    maxHeight: {
+      type: String,
+      default: ''
+    },
+    el: {
+      type: Object,
+      default: () => {}
+    },
+    expand: {
+      type: Boolean,
+      default: true
+    },
+    checked: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    async selectValues() {
+      await this.loadTreeData()
+      this.checkedAll(this.treeData, false)
+      var values = this.selectValues.split(',');
+      for(var i in values){
+        this.$refs.tree.setChecked(values[i], true, false)
+      }
+    }
+  },
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      defaultExpandAll: true,
+      refreshTree: true,
+      treeAllChecked: false
+    }
+  },
+  async created() {
+    await this.loadTreeData()
+  },
+  methods: {
+    doExpand() {
+      this.refreshTree = false
+      this.defaultExpandAll = !this.defaultExpandAll
+      this.$nextTick(() => this.refreshTree = true)
+    },
+    async loadTreeData() {
+      if(this.treeData.length == 0){
+        await this.$get(this.url, this.params).then((res) => {
+          this.treeData = res.data.list
+        })
+      }
+    },
+    getTree() {
+      return this.$refs.tree
+    },
+    checkChange(node) {
+      var selectMenus = []
+      var checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
+      for (var i = 0; i < checkedNodes.length; i++) {
+        selectMenus.push(checkedNodes[i].id)
+      }
+      this.$emit('update:select-values', selectMenus.join(','))
+    },
+    nodeClick(param1, param2, param3){
+      this.$emit('node-click', param1, param2, param3)
+    },
+    checkedAll(children, checked) {
+      if (this.$refs.tree) {
+        for (var i in children) {
+          var id = children[i].id
+          if(children[i].children && children[i].children.length > 0){
+            this.checkedAll(children[i].children, checked)
+          }
+          this.$refs.tree.setChecked(id, checked, true)
+        }
+      }
+    }
+  }
+}
+</script>
+

magic-boot-ui/src/layout/components/Sidebar/index.vue

@@ -7,7 +7,7 @@
       </span>
     </div>
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-form>
+    <el-form v-if="!isCollapse">
       <el-form-item>
         <treeselect
           style="width: 90%;margin: 0px 5%"
@@ -99,20 +99,10 @@ export default {
   mounted() {
     this.$get('menu/search').then(res => {
       this.menuTree = res.data.list
-      this.deleteEmptyChildren(this.menuTree)
+      this.$treeTable.deleteEmptyChildren(this.menuTree)
     })
   },
   methods: {
-    deleteEmptyChildren(children) {
-      for(var i in children){
-        var chi = children[i]
-        if(chi.children && chi.children.length == 0){
-          delete chi.children
-        }else{
-          this.deleteEmptyChildren(chi.children)
-        }
-      }
-    },
     selectMenu(node) {
       if(node.url){
         this.$router.push({ path: node.url })

magic-boot-ui/src/styles/common.css

@@ -7,4 +7,7 @@ body {
   border: none;
   height: 1px;
   background: #F3F3F3;
-}
+}
+.toolbar-container{
+  margin-bottom: 10px
+}

magic-boot-ui/src/views/system/menu/menu-list.vue

@@ -209,9 +209,7 @@ export default {
     expand(){
       this.refreshTable = false
       this.tableOptions.el["default-expand-all"] = !this.tableOptions.el["default-expand-all"]
-      this.$nextTick(() => {
-        this.refreshTable = true
-      })
+      this.$nextTick(() => this.refreshTable = true)
     },
     searchMenu() {
       var _this = this

magic-boot-ui/src/views/system/role/role-assign-permissions.vue

@@ -0,0 +1,42 @@
+<template>
+  <pd-tree ref="tree" :el="{ 'show-checkbox': true }" url="menu/tree" :select-values.sync="menus" />
+</template>
+
+<script>
+
+export default {
+  name: 'RoleAssignPermissions',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      menus: ''
+    }
+  },
+  created() {
+    this.$get('menu/by/role',{ roleId: this.id }).then(res => {
+      this.menus = res.data.map((row) => row.id).join(',')
+    })
+  },
+  methods: {
+    save() {
+      this.$post('role/save', {
+        id: this.id,
+        menus: this.menus
+      }).then((response) => {
+        this.$notify({
+          title: '成功',
+          message: '分配成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.$emit('close')
+      })
+    }
+  }
+}
+</script>

magic-boot-ui/src/views/system/role/role-list.vue

@@ -8,55 +8,94 @@
         <el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
           搜索
         </el-button>
-        <el-button v-permission="'role:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-          添加
+        <el-button class="filter-item" icon="el-icon-delete" @click="tableOptions.where = {}">
+          清空
         </el-button>
       </el-form>
     </div>
 
+    <el-row class="toolbar-container">
+      <el-button v-permission="'role:save'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加
+      </el-button>
+    </el-row>
+
     <pd-table ref="table" v-bind="tableOptions" />
 
     <pd-dialog ref="roleFormDialog" @confirm-click="save()">
       <template #content>
-        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
-          <el-form-item label="角色名称" prop="name">
-            <el-input v-model="temp.name" />
-          </el-form-item>
-          <el-form-item label="选择菜单">
-            <el-tree
-              ref="tree"
-              :data="menuTree"
-              show-checkbox
-              node-key="id"
-              :default-expand-all="true"
-              :props="defaultProps"
-            />
-          </el-form-item>
+        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 900px;">
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="角色名称" prop="name">
+                <el-input v-model="temp.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="角色编码" prop="code">
+                <el-input v-model="temp.code" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="24">
+              <el-form-item label="角色描述" prop="descRibe">
+                <el-input
+                  type="textarea"
+                  :rows="4"
+                  placeholder="请输入描述"
+                  v-model="temp.descRibe">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="菜单权限" prop="menus">
+                <pd-tree ref="tree" :el="{ 'show-checkbox': true }" max-height="320px" url="menu/tree" :select-values.sync="temp.menus" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="数据权限" prop="permission">
+                <pd-select v-model="temp.permission" :data="permissionData" />
+                <pd-tree v-if="temp.permission == 1" max-height="320px" :el="{ 'check-strictly': true, 'show-checkbox': true }" ref="office" url="office/tree" :select-values.sync="temp.offices" />
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
       </template>
     </pd-dialog>
 
+    <pd-dialog ref="assignPermissionsDialog" @confirm-click="$refs.assignPermissions.save()">
+      <template #content>
+        <role-assign-permissions ref="assignPermissions" :key="Math.random()" :id="temp.id" @close="() => { $refs.assignPermissionsDialog.hide(); temp.id = '' }" />
+      </template>
+    </pd-dialog>
+
   </div>
 </template>
 
 <script>
-import { getMenusByRoleId } from '@/api/menu'
-import { getMenuTree } from '@/api/menu'
+import RoleAssignPermissions from './role-assign-permissions'
 
 export default {
   name: 'RoleList',
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
+  components: { RoleAssignPermissions },
   data() {
     return {
+      permissionData: [{
+        label: '全部',
+        value: 0
+      }, {
+        label: '自定义',
+        value: 1
+      }, {
+        label: '本级及子级',
+        value: 2
+      }, {
+        label: '本级',
+        value: 3
+      }],
       tableOptions: {
         url: 'role/list',
         where: {
@@ -67,6 +106,21 @@ export default {
             field: 'name',
             title: '角色名称'
           },
+          {
+            field: 'code',
+            title: '角色编码'
+          },
+          {
+            field: 'descRibe',
+            title: '角色描述'
+          },
+          {
+            field: 'permission',
+            title: '数据权限',
+            templet: (row) => {
+              return this.permissionData[row.permission].label
+            }
+          },
           {
             title: '操作',
             type: 'btns',
@@ -76,7 +130,8 @@ export default {
               {
                 permission: 'role:save',
                 title: '修改',
-                type: 'primary',
+                type: 'text',
+                icon: 'el-icon-edit',
                 click: (row) => {
                   this.handleUpdate(row)
                 }
@@ -84,7 +139,8 @@ export default {
               {
                 permission: 'role:delete',
                 title: '删除',
-                type: 'danger',
+                type: 'text',
+                icon: 'el-icon-delete',
                 click: (row) => {
                   this.$common.handleDelete({
                     url: 'role/delete',
@@ -92,52 +148,60 @@ export default {
                     done: () => this.reloadTable()
                   })
                 }
+              },
+              {
+                permission: 'role:permission',
+                title: '权限',
+                type: 'text',
+                icon: 'el-icon-plus',
+                click: (row) => {
+                  this.temp.id = row.id
+                  this.$refs.assignPermissionsDialog.show()
+                }
               }
             ]
           }
         ]
       },
-      menuTree: [],
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      },
-      selectMenus: [],
-      temp: {
-        id: '',
-        name: '',
-        menus: []
-      },
+      temp: this.getTemp(),
       dialogStatus: '',
       textMap: {
         update: '修改',
         create: '添加'
       },
       rules: {
-        name: [{ required: true, message: '请输入角色名称', trigger: 'change' }]
+        name: [{ required: true, message: '请输入角色名称', trigger: 'change' }],
+        code: [{ required: true, message: '请输入角色编码', trigger: 'change' }]
       },
       downloadLoading: false
     }
   },
-  created() {
-    getMenuTree().then(response => {
-      const { data } = response
-      this.menuTree = data.list
-    })
+  watch: {
+    'temp.permission'() {
+      if(this.temp.permission != 1){
+        this.temp.offices = ''
+      }
+    }
   },
   methods: {
     reloadTable() {
       this.$refs.table.reloadList()
     },
-    resetTemp() {
-      this.temp = {
+    getTemp(){
+      return {
         id: '',
         name: '',
-        menus: []
+        menus: '',
+        offices: '',
+        permission: 0,
+        code: '',
+        descRibe: ''
       }
     },
+    resetTemp() {
+      this.temp = this.getTemp()
+    },
     handleCreate() {
-      this.cancelSelectMenu()
       this.resetTemp()
       this.dialogStatus = 'create'
       this.$refs.roleFormDialog.show()
@@ -146,14 +210,8 @@ export default {
       })
     },
     save() {
-      this.selectMenus = []
-      var checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
-      for (var i = 0; i < checkedNodes.length; i++) {
-        this.selectMenus.push(checkedNodes[i].id)
-      }
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          this.temp.menus = this.selectMenus.join(',')
           this.$post('role/save', this.temp).then((response) => {
             this.reloadTable()
             this.$refs.roleFormDialog.hide()
@@ -167,24 +225,15 @@ export default {
         }
       })
     },
-    cancelSelectMenu() {
-      if (this.$refs.tree) {
-        for (var i in this.menuTree) {
-          var menu = this.menuTree[i]
-          this.$refs.tree.setChecked(menu, false, true)
-        }
-      }
-    },
     handleUpdate(row) {
-      this.cancelSelectMenu()
       for (var t in this.temp) {
         this.temp[t] = row[t]
       }
-      getMenusByRoleId(row.id).then(response => {
-        const { data } = response
-        for (var i = 0; i < data.length; i++) {
-          this.$refs.tree.setChecked(data[i], true, false)
-        }
+      this.$get('menu/by/role',{ roleId: row.id }).then(res => {
+        this.temp.menus = res.data.join(',')
+      })
+      this.$get('office/by/role',{ roleId: row.id }).then(res => {
+        this.temp.offices = res.data.join(',')
       })
       this.dialogStatus = 'update'
       this.$refs.roleFormDialog.show()