feat(directive): 添加自定义指令directive实现按钮权限控制

src/components/TreeSelect/index.vue

@@ -128,7 +128,6 @@ function clearSelected() {
 }
 
 onMounted(() => {
-  console.log('hah', modelValue)
   initHandle()
 })
 

src/directive/index.ts

@@ -0,0 +1 @@
+export {hasPerm,hasRole} from "./permission";

src/directive/permission/index.ts

@@ -0,0 +1,53 @@
+import {useUserStoreHook} from "@/store/modules/user";
+import {Directive, DirectiveBinding} from "vue";
+
+/**
+ * 按钮权限校验
+ */
+export const hasPerm: Directive = {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+        // 「超级管理员」拥有所有的按钮权限
+        const roles = useUserStoreHook().roles;
+        if (roles.includes('ROOT')) {
+            return true
+        }
+        // 其他角色按钮权限校验
+        const {value} = binding;
+        if (value) {
+            const requiredPerms = value; // DOM绑定需要的按钮权限标识
+
+            const hasPerm = useUserStoreHook().perms.some(perm => {
+                return requiredPerms.includes(perm)
+            })
+
+            if (!hasPerm) {
+                el.parentNode && el.parentNode.removeChild(el);
+            }
+        } else {
+            throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"");
+        }
+    }
+};
+
+/**
+ * 角色权限校验
+ */
+export const hasRole: Directive = {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+        const {value} = binding;
+        if (value) {
+            const requiredRoles = value; // DOM绑定需要的角色编码
+
+            const hasRole = useUserStoreHook().roles.some(perm => {
+                return requiredRoles.includes(perm)
+            })
+
+            if (!hasRole) {
+                el.parentNode && el.parentNode.removeChild(el);
+            }
+        } else {
+            throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
+        }
+    }
+};
+

src/main.ts

@@ -1,4 +1,4 @@
-import {createApp} from 'vue'
+import {createApp, Directive} from 'vue'
 import App from './App.vue'
 import router from "./router";
 import '@/styles/index.scss'
@@ -8,20 +8,22 @@ import 'element-plus/theme-chalk/index.css'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
 import 'virtual:svg-icons-register';
 
-
 // @see https://blog.csdn.net/qq_37213281/article/details/121422027
 import * as ElIconModules from '@element-plus/icons'
 import '@/permission'
 
-
 import Pagination from '@/components/Pagination/index.vue'
 import {listDictsByCode} from '@/api/system/dict'
 
-
 const app = createApp(App)
 
-// 统一注册el-icon图标
+// 自定义指令
-// @link https://blog.csdn.net/Alloom/article/details/119415984
+import * as directive from "@/directive";
+Object.keys(directive).forEach(key => {
+    app.directive(key, (directive as { [key: string]: Directive })[key]);
+});
+
+// 统一注册el-icon图标  https://blog.csdn.net/Alloom/article/details/119415984
 for (let iconName in ElIconModules) {
     app.component(iconName, (ElIconModules as any)[iconName])
 }

src/views/system/dept/index.vue

@@ -163,16 +163,21 @@
 </template>
 
 <script setup lang="ts">
+// Vue依赖
 import {onMounted, reactive, unref, ref, toRefs} from 'vue'
-import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
+
+// API依赖
 import {listDeptTable, getDeptDetail, deleteDept, updateDept, addDept, listDeptSelect} from '@/api/system/dept'
+
+// 组件依赖
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import TreeSelect from '@/components/TreeSelect/Index.vue'
 import {ElForm, ElMessage, ElMessageBox} from 'element-plus'
 
+// DOM元素的引用声明定义
 const queryFormRef = ref(ElForm)
 const dataFormRef = ref(ElForm)
 
-
 const state = reactive({
   // 选中ID数组
   ids: [],

src/views/system/user/index.vue

@@ -46,25 +46,17 @@
                   :icon="Plus"
                   size="mini"
                   @click="handleAdd"
+                  v-hasPerm="['sys:user:add']"
               >
                 新增
               </el-button>
-              <el-button
-                  type="primary"
-                  :icon="Edit"
-                  size="mini"
-                  :disabled="single"
-                  @click="handleUpdate"
-              >
-                修改
-              </el-button>
               <el-button
                   type="danger"
-                  plain
                   :icon="Delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
+                  v-hasPerm="['sys:user:delete']"
               >
                 删除
               </el-button>
@@ -193,6 +185,7 @@
                     circle
                     plain
                     @click="handleUpdate(scope.row)"
+                    v-hasPerm="['sys:user:edit']"
                 >
                 </el-button>
                 <el-button
@@ -202,6 +195,7 @@
                     circle
                     plain
                     @click="handleDelete(scope.row)"
+                    v-hasPerm="['sys:user:delete']"
                 >
                 </el-button>
                 <el-button
@@ -248,7 +242,7 @@
             prop="username"
         >
           <el-input
-              :readonly="!formData.id"
+              :readonly="!!formData.id"
               v-model="formData.username"
               placeholder="请输入用户名"
           />
@@ -297,14 +291,14 @@
           />
         </el-form-item>
 
-        <el-form-item label="状态">
+        <el-form-item label="状态" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio :label="1">正常</el-radio>
             <el-radio :label="0">禁用</el-radio>
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item label="用户性别">
+        <el-form-item label="用户性别" prop="gender">
           <el-select
               v-model="formData.gender"
               placeholder="请选择"
@@ -315,7 +309,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="角色">
+        <el-form-item label="角色" prop="roleIds">
           <el-select
               v-model="formData.roleIds"
               multiple
@@ -329,19 +323,6 @@
             />
           </el-select>
         </el-form-item>
-
-        <el-form-item
-            v-if="formData.id === undefined"
-            label="用户密码"
-            prop="password"
-        >
-          <el-input
-              v-model="formData.password"
-              placeholder="请输入用户密码"
-              type="password"
-          />
-        </el-form-item>
-
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -374,9 +355,12 @@ import {ElMessage, ElMessageBox, ElTree, ElForm} from 'element-plus'
 import {Search, Plus, Edit, Refresh, Delete, Lock} from '@element-plus/icons'
 import TreeSelect from '@/components/TreeSelect/Index.vue'
 
-const deptTreeRef = ref(ElTree)
+// DOM元素的引用声明定义
+const deptTreeRef = ref(ElTree) // 变量名和DOM的ref属性值一致
+const queryFormRef = ref(ElForm)
 const dataFormRef = ref(ElForm)
-const queryFormRef = ref(ElForm) // 变量名和绑定名ref一致
+
+const {proxy}: any = getCurrentInstance();
 
 const state = reactive({
   // 遮罩层
@@ -431,15 +415,15 @@ const state = reactive({
     username: [
       {required: true, message: '用户名不能为空', trigger: 'blur'}
     ],
-    password: [
+    nickname: [
-      {required: true, message: '用户密码不能为空', trigger: 'blur'}
+      {required: true, message: '用户昵称不能为空', trigger: 'blur'}
-    ],
-    roleId: [
-      {required: true, message: '用户角色不能为空', trigger: 'blur'}
     ],
     deptId: [
       {required: true, message: '归属部门不能为空', trigger: 'blur'}
     ],
+    roleId: [
+      {required: true, message: '用户角色不能为空', trigger: 'blur'}
+    ],
     email: [
       {
         pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
@@ -472,14 +456,6 @@ const {
   roleOptions
 } = toRefs(state)
 
-/**
- * 加载部门数据
- **/
-async function loadDeptOptions() {
-  listDeptSelect().then(response => {
-    state.deptOptions = response.data
-  })
-}
 
 /**
  * 部门筛选
@@ -515,7 +491,6 @@ async function loadRoleOptions() {
   })
 }
 
-
 /**
  * 用户状态修改
  **/
@@ -534,28 +509,6 @@ function handleStatusChange(row: { [key: string]: any }) {
   })
 }
 
-/**
- * 密码重置
- **/
-function resetPassword(row: { [key: string]: any }) {
-  ElMessageBox.prompt('请输入"' + row.username + '"的新密码', '修改密码', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消'
-  }).then(({value}) => {
-    if (!value) {
-      ElMessage.warning("请输入新密码")
-      return false
-    }
-    updateUserPart(row.id, {
-      password: value
-    }).then(() => {
-      ElMessage.success('修改成功，新密码是：' + value)
-    })
-  }).catch(() => {
-
-  })
-}
-
 /**
  * 用户查询
  **/
@@ -587,11 +540,32 @@ function handleSelectionChange(selection: any) {
   state.multiple = !selection.length
 }
 
+/**
+ * 密码重置
+ **/
+function resetPassword(row: { [key: string]: any }) {
+  ElMessageBox.prompt('请输入用户「' + row.username + '」的新密码', '重置密码', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  }).then(({value}) => {
+    if (!value) {
+      ElMessage.warning("请输入新密码")
+      return false
+    }
+    updateUserPart(row.id, {
+      password: value
+    }).then(() => {
+      ElMessage.success('修改成功，新密码是：' + value)
+    })
+  }).catch(() => {
+
+  })
+}
+
 /**
  * 添加用户
  **/
 async function handleAdd() {
-  resetForm()
   await loadDeptOptions()
   await loadRoleOptions()
   state.dialog = {
@@ -627,14 +601,16 @@ function submitForm() {
       const userId = state.formData.id
       if (userId) {
         updateUser(userId, state.formData).then(() => {
-          ElMessage.success('修改成功')
+          ElMessage.success('修改用户成功')
           state.dialog.visible = false
+          resetForm()
           handleQuery()
         })
       } else {
         addUser(state.formData).then((response: any) => {
-          ElMessage.success('新增成功')
+          ElMessage.success('新增用户成功')
           state.dialog.visible = false
+          resetForm()
           handleQuery()
         })
       }
@@ -647,19 +623,8 @@ function submitForm() {
  * 表单重置
  **/
 function resetForm() {
-  state.formData = {
+  const dataForm = unref(dataFormRef)
-    id: undefined,
+  dataForm.resetFields()
-    deptId: undefined,
-    username: undefined,
-    nickname: undefined,
-    password: '',
-    mobile: undefined,
-    email: undefined,
-    gender: undefined,
-    status: 1,
-    remark: undefined,
-    roleIds: []
-  }
 }
 
 
@@ -668,7 +633,7 @@ function resetForm() {
  **/
 function handleDelete(row: { [key: string]: any }) {
   const userIds = row.id || state.ids.join(',')
-  ElMessageBox.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
+  ElMessageBox.confirm('是否确认删除用户编号为「' + userIds + '」的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
@@ -686,17 +651,40 @@ function handleDelete(row: { [key: string]: any }) {
  * 取消关闭
  */
 function cancel() {
-  resetForm()
   state.dialog.visible = false
+  resetForm()
 }
 
-onMounted(() => {
+
-  loadDeptOptions()
+/**
-  handleQuery()
+ * 加载部门数据
-  const {proxy}: any = getCurrentInstance();
+ **/
+async function loadDeptOptions() {
+  listDeptSelect().then(response => {
+    state.deptOptions = response.data
+  })
+}
+
+/**
+ * 加载性别字典数据
+ */
+function loadGenderOptions() {
   proxy.$listDictsByCode('gender').then((response: any) => {
     state.genderOptions = response?.data
   })
+}
+
+/**
+ * 初始化数据
+ */
+function loadData() {
+  loadGenderOptions()
+  loadDeptOptions()
+  handleQuery()
+}
+
+onMounted(() => {
+  loadData()
 })
 </script>
 <style lang="scss" scoped>