角色管理

2024-11-14 11:34:25 +08:00
parent 44e7598b68
commit 39cbe0ff35
19 changed files with 873 additions and 359 deletions
--- a/frontend/src/views/authority/role/components/permissionUnit.vue
+++ b/frontend/src/views/authority/role/components/permissionUnit.vue
@@ -1,84 +0,0 @@
-<template>
-  <!-- 权限信息弹出框 -->
-  <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
-    <div>
-      <el-transfer v-model="value" :data="data.permissionList" :titles="['未具备的权限', '已具备的权限']"/>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleCancel">
-          保存
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-
-<script lang="ts" setup>
-import {ref} from 'vue'
-import {dialogBig} from '@/utils/elementBind'
-import {Role} from '@/api/role/interface'
-
-const {dialogVisible, data} = defineProps<{
-  dialogVisible: boolean;
-  title: string;
-<<<<<<< HEAD
-  data: Role.Permission;
-}>()
-=======
-  data: Role.ResRoleList;
-}>
-()
->>>>>>> bf8c6a1d00bd2c22d1a10896c5e8fc94ab9ed017
-
-// const leftvalue = ref<Role.Permission[]>([])
-// const rightvalue = ref<Role.Permission[]>([])
-
-// const rightvalue = computed<Role.Permission[]>({
-//   get(){
-//     return data.permissionList?.filter(item => item.disabled) || []
-//     },
-//    set: (value: Role.Permission[]) => {
-//     if (data.permissionList) {
-//       for(let i = 0;i<value.length;i++){
-//         for(let j = 0;j<(data.permissionList?.length);j++){
-//           if(value[i].key === data.permissionList[j].key)
-//           {
-//             data.permissionList[j].disabled = value[i].disabled
-//           }
-//         }
-//       }
-//     }
-//    }
-// })
-
-// const leftvalue = computed<Role.Permission[]>({
-//   get(){
-//     return data.permissionList?.filter(item => item.disabled === false) || []
-//     },
-//    set: (value: Role.Permission[]) => {
-//     if (data.permissionList) {
-//       for(let i = 0;i<value.length;i++){
-//         for(let j = 0;j<(data.permissionList?.length);j++){
-//           if(value[i].key === data.permissionList[j].key)
-//           {
-//             data.permissionList[j].disabled = value[i].disabled
-//           }
-//         }
-//       }
-//     }
-//    }
-// })
-
-const value = ref()
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-}>();
-
-const handleCancel = () => {
-  emit('update:visible', false)
-}
-</script>
--- a/frontend/src/views/authority/role/components/rolePopup.vue
+++ b/frontend/src/views/authority/role/components/rolePopup.vue
@@ -4,7 +4,7 @@
    <div>

        <el-form :model="formContent" 
-                  ref='formRuleRef'
+                  ref='dialogFormRef'
                  :rules='rules'
                  >
        <el-form-item label="名称" prop='name' :label-width="100">
@@ -84,7 +84,8 @@ const resetFormContent = () => {
  const formRuleRef = ref<FormInstance>()
  //定义校验规则
  const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
-    name: [{ required: true, message: '名称必填！', trigger: 'blur' }],
+    name: [{ required: true, message: '名称必填！', trigger: 'blur' },
+    { pattern: /^[\u4e00-\u9fa5]{1,20}$/, message: '名称为长度1-20的中文', trigger: 'blur' }],
    code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
  })

--- a/frontend/src/views/authority/role/components/roleResourcePopup.vue
+++ b/frontend/src/views/authority/role/components/roleResourcePopup.vue
@@ -0,0 +1,187 @@
+<template>
+    <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="dialogTitle"  v-bind="dialogMiddle" @close="close" >
+    <div>
+        <el-form :model="formContent" ref='dialogFormRef'>
+      <el-tree
+        :data="functionList"
+        :props="defaultProps"
+        node-key="id"
+        :expand-on-click-node="false"
+        show-checkbox
+        :default-checked-keys="checkedKeysRef"
+        ref="treeRef"
+      >
+      </el-tree>
+
+      </el-form>
+      </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="save()">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import{  ElMessage, ElTree, type FormInstance,type FormItemRule } from 'element-plus'
+  import type { ProTableInstance } from '@/components/ProTable/interface'
+  import { ref,computed, type Ref, nextTick  } from 'vue'
+  import { Role } from '@/api/role/interface'
+  import {dialogMiddle,dialogSmall} from '@/utils/elementBind'
+  import { useDictStore } from '@/stores/modules/dict'
+  import { type Function } from '@/api/function/interface'
+  import {getRoleFunction,assignFunction} from '@/api/role/role'
+
+  // 保存数据
+  const treeRef = ref<InstanceType<typeof ElTree>>()
+  const functionList = ref<Function.ResFunction[]>([])
+  // 定义一个 ref 来存储已选中的 keys
+  const checkedKeysRef = ref<string[]>([]);
+  // 树形节点配置
+  const defaultProps = {
+    children: 'children',
+    label: 'name',
+  };
+
+ // 定义弹出组件元信息
+ const dialogFormRef = ref()
+ const dialogTitle = ref('授权资源')
+ const { dialogVisible,  formContent } = useMetaInfo()
+
+ function useMetaInfo() {
+    const dialogVisible = ref(false)
+    
+    const formContent = ref<Role.RoleBO>({
+      id: '',    //角色类型ID
+      name: '',   //角色类型名称
+      code: '',  //角色代码
+      type: 2, //角色类型
+      remark:'',  //角色描述
+      state:1,
+    })
+    return { dialogVisible, formContent }
+  }
+  
+  
+
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+      id: '',    //角色类型ID
+      name: '',   //角色类型名称
+      code: '',  //角色代码
+      type: 2, //角色类型
+      remark:'',  //角色描述
+      state:1,
+    }
+  }
+  
+
+// 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+  }
+  
+  // 保存数据
+  const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+          if (formContent.value.id) {
+                // 获取勾选的节点 ID
+                const checkedKeys = treeRef.value?.getCheckedKeys() || [];
+                console.log('获取勾选的节点 ID',checkedKeys);
+                // 将 checkedKeys 转换为字符串数组
+                const checkedKeysAsString: string[] = checkedKeys.map(key => String(key));
+                // 假设 RoleFunctionId 是一个对象，且需要 id 属性
+                const roleFunctionIdObject: Role.RoleFunctionId = {
+                  id: checkedKeysAsString
+                };
+                console.log('roleFunctionIdObject',roleFunctionIdObject);
+                const result = await assignFunction(formContent.value,roleFunctionIdObject);
+                if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+            } 
+          close()
+          // 刷新表格
+          await props.refreshTable!()
+        }
+      })
+    } catch (err) {
+      console.error('验证过程中出现错误', err)
+    }
+  }
+  
+
+ 
+// 打开弹窗，可能是新增，也可能是编辑
+const open = async (sign: string, data: Role.RoleBO, AllFunction: Function.ResFunction[]) => {
+  // 重置树状结构
+  functionList.value = []
+  checkedKeysRef.value = []
+  const result = await getRoleFunction(data);
+  if (result.code === 'A0000') {
+    // 将 result.data 转换为 Function.ResFunction[] 类型
+    const roleFunctions = result.data as Function.ResFunction[];
+    console.log('roleFunctions',roleFunctions)
+    // 获取 AllFunction 中所有层级的 id
+    const allIds = getAllIds(AllFunction);
+    // 匹配 roleFunctions 中的 id 并设置 checkedKeys
+    const checkedKeys = allIds.filter(id => roleFunctions.some(roleFunc => roleFunc.id === id));
+    console.log('checkedKeys',checkedKeys)
+    // 设置 functionList 和 checkedKeys
+    functionList.value = AllFunction;
+    checkedKeysRef.value = checkedKeys;
+
+    // nextTick(() => {
+    //   // 触发一次更新，确保表单中的数据被更新
+    //   dialogFormRef.value?.validate();
+    // });
+  } else {
+    ElMessage.error({ message: result.message });
+  }
+
+  dialogVisible.value = true;
+  if (data.id) {
+    formContent.value = { ...data };
+  } else {
+    resetFormContent();
+  }
+}
+  
+
+const getAllIds = (functions: Function.ResFunction[]): string[] => {
+  const ids: string[] = [];
+
+  const traverse = (func: Function.ResFunction) => {
+    ids.push(func.id);
+    if (func.children && func.children.length > 0) {
+      func.children.forEach(child => traverse(child));
+    }
+  };
+
+  functions.forEach(func => traverse(func));
+
+  return ids;
+};
+
+  // 对外映射
+  defineExpose({ open })
+  const props = defineProps<{
+    refreshTable: (() => Promise<void>) | undefined;
+  }>()
+  
+  </script>