角色管理

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>

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' }],
   })
 

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>

frontend/src/views/authority/role/index.vue

@@ -24,41 +24,27 @@
     </ProTable>
   </div>
   <RolePopup :refresh-table='proTable?.getTableList' ref='rolePopup' />
-
+  <RoleResourcePopup :refresh-table='proTable?.getTableList' ref='roleResourcePopup' />
 </template>
 
 <script setup lang='tsx' name='useRole'>
 import { type Role } from '@/api/role/interface'
+import { type Function } from '@/api/function/interface'
 import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
 import type{  ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-import { useDictStore } from '@/stores/modules/dict'
-import {getRoleList,deleteRole} from '@/api/role/role'
+import {getRoleList,deleteRole,getFunctionList} from '@/api/role/role'
 import RolePopup from './components/rolePopup.vue'
-import { reactive, ref } from 'vue'
-
-
-const { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData } = useCount()
-
-function useCount() {
-  const rolePopupVisible = ref(false)
-  const permissionUnitVisible = ref(false)
-  const rolePopupTitle = ref()
-  const permissionUnitTitle = ref()
-  const rolePopupData = ref<Role.RoleBO>({} as Role.RoleBO)
-  const permissionUnitData = ref<Role.RoleBO>({} as Role.RoleBO)
-  // const permissionUnitData = ref<Role.Permission[]>([])
-  return { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData }
-}
-
-const dictStore = useDictStore()
-let openType = ''
+import RoleResourcePopup from './components/roleResourcePopup.vue'
+import { onMounted, reactive, ref } from 'vue'
+import {useDictStore} from '@/stores/modules/dict'
 const rolePopup = ref()
-
+const roleResourcePopup = ref()
+const dictStore = useDictStore()
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+const functionList = ref<Function.ResFunction[]>([])
 // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
 // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
 const getTableList = (params: any) => {
@@ -69,6 +55,14 @@ const getTableList = (params: any) => {
   return getRoleList(newParams)
 }
 
+
+  // 初始化时获取角色列表
+  onMounted(async () => {
+    const response = await getFunctionList()
+    functionList.value = response.data as unknown as Function.ResFunction[]
+    //console.log(functionList.value)
+  })
+
 // 表格配置项
 const columns = reactive<ColumnProps<Role.RoleBO>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
@@ -94,14 +88,21 @@ const columns = reactive<ColumnProps<Role.RoleBO>[]>([
     prop: 'state',
     label: '状态',
     minWidth: 100,
+    enum: dictStore.getDictData('state'),
+      fieldNames: { label: 'label', value: 'code' },
+      render: scope => {
+        return (
+          <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '删除'} </el-tag>
+        )
+      },
   },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
 ])
 
 // 删除角色信息
 const deleteAccount = async (params: Role.RoleBO) => {
   if (params.id) {
-  await useHandleData(deleteRole, { id:[params.id] }, '删除所选角色信息')
+  await useHandleData(deleteRole, [params.id], '删除所选角色信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
   }
@@ -109,7 +110,7 @@ const deleteAccount = async (params: Role.RoleBO) => {
 
 // 批量删除角色信息
 const batchDelete = async (id: string[]) => {
-  await useHandleData(deleteRole, { id }, '删除所选角色信息')
+  await useHandleData(deleteRole, id , '删除所选角色信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -117,7 +118,11 @@ const batchDelete = async (id: string[]) => {
 
 // 打开 drawer(新增、查看、编辑)
 const openDrawer = (titleType: string, row: Partial<Role.RoleBO> = {}) => {
-  rolePopup.value?.open(titleType, row)
+    if(titleType==='设置权限'){
+      roleResourcePopup.value?.open(titleType, row,functionList.value)
+     }else{
+       rolePopup.value?.open(titleType, row)
+     }
 }
 </script>