feat: 新增权限分类

src/modules/settings/permissions/components/Editform.vue

 <template>
-  <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
+  <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="600px">
     <el-form ref="form" :model="form" :rules="rules" label-position="top">
       <el-form-item label="名称" prop="name">
         <el-input v-model="form.name" clearable></el-input>

src/modules/settings/permissions/views/List.vue

@@ -4,6 +4,14 @@
       <template #header-aside>
         <el-button type="primary" @click="handleCreate()">创建权限</el-button>
       </template>
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane
+          :label="item.label"
+          :name="item.value"
+          v-for="(item, index) in typeList"
+          :key="index"
+        ></el-tab-pane>
+      </el-tabs>
       <template v-slot:table-x="{ row }">
         <el-button type="text" @click="handleCreate(row)">创建子权限</el-button><br />
         <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
@@ -31,7 +39,15 @@ export default {
       visible: false,
       isEdit: false, // 是否是编辑状态
       editRaw: {}, // 编辑的数据
-      multipleSelection: [] // 已选择的数据
+      multipleSelection: [], // 已选择的数据
+      activeName: '',
+      typeList: [
+        { value: '', label: '全部' },
+        { value: '1', label: '功能' },
+        { value: '2', label: '菜单' },
+        { value: '3', label: '资源' },
+        { value: '4', label: '按钮' }
+      ]
     }
   },
   computed: {
@@ -43,8 +59,13 @@ export default {
       return {
         remote: {
           httpRequest: getPermissionList,
-          params: { app_id: this.$store.state.appid, name: '', tag: '' }
+          params: { app_id: this.$store.state.appid, name: '', tag: '', type: '' },
+          beforeRequest: this.beforeRequest
         },
+        filters: [
+          { type: 'input', prop: 'name', placeholder: '权限名称' },
+          { type: 'input', prop: 'tag', placeholder: '权限唯一标识' }
+        ],
         columns: [
           { label: '权限名称', prop: 'name' },
           { label: '标识', prop: 'tag' },
@@ -63,6 +84,14 @@ export default {
     }
   },
   methods: {
+    beforeRequest(params) {
+      params.type = this.activeName === '0' ? '' : this.activeName
+      return params
+    },
+    // tab
+    handleClick() {
+      this.$refs.list.refetch(true)
+    },
     // 选择
     handleSelectionChange(value) {
       this.multipleSelection = value

src/modules/settings/roles/components/Permissions.vue

 <template>
-  <el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
+  <el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="700px">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="菜单权限" name="2"></el-tab-pane>
+      <el-tab-pane label="功能权限" name="1"></el-tab-pane>
+      <el-tab-pane label="资源权限" name="3"></el-tab-pane>
+      <el-tab-pane label="按钮权限" name="4"></el-tab-pane>
+    </el-tabs>
     <el-tree
       :data="permissions"
       show-checkbox
       default-expand-all
       node-key="id"
       ref="tree"
-      highlight-current
       :props="defaultProps"
+      :filter-node-method="filterNode"
     >
     </el-tree>
     <template #footer>
@@ -25,6 +31,7 @@ export default {
   },
   data() {
     return {
+      activeName: '2',
       permissions: [], // 所有权限
       currentPermissions: [], // 当前角色权限
       defaultProps: { children: 'children', label: 'name' }
@@ -35,6 +42,11 @@ export default {
       return this.$store.state.appid
     }
   },
+  watch: {
+    activeName(val) {
+      this.$refs.tree && this.$refs.tree.filter(val)
+    }
+  },
   async beforeMount() {
     // 获取所有权限
     await this.getPermissions()
@@ -42,11 +54,21 @@ export default {
     this.getRolePermissions()
   },
   methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return parseInt(value) === data.type
+    },
+    getTypeName(value) {
+      const map = { 1: '功能', 2: '菜单', 3: '资源', 4: '按钮' }
+      return map[value] || value
+    },
     // 获取所有权限
     getPermissions() {
-      const params = { app_id: this.appid }
-      getPermissionList(params).then(res => {
+      getPermissionList({ app_id: this.appid, limit: 500 }).then(res => {
         this.permissions = res.data.data
+        this.$nextTick(() => {
+          this.$refs.tree.filter(this.activeName)
+        })
       })
     },
     // 获取当前角色的权限

src/modules/settings/users/components/Editform.vue

@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     getRoleList() {
-      getRoleList({ app_id: this.appid, limit: 100 }).then(res => {
+      getRoleList({ app_id: this.appid, limit: 500 }).then(res => {
         this.roles = res.data.data
       })
     },