角色管理页面接口完成

src/router/elegant/routes.ts

@@ -44,10 +44,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/changeledger',
     component: 'layout.base',
     meta: {
-      title: 'changeledger',
-      i18nKey: 'route.changeledger',
+      title: '变更台账',
       icon: 'tabler:table',
-      order: 3
+      order: 3,
+      i18nKey: 'route.changeledger'
     },
     children: [
       {
@@ -55,9 +55,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/changeledger/mychanges',
         component: 'view.changeledger_mychanges',
         meta: {
-          title: 'changeledger_mychanges',
-          i18nKey: 'route.changeledger_mychanges',
-          icon: ''
+          title: '我发起的变更',
+          icon: '',
+          i18nKey: 'route.changeledger_mychanges'
         }
       },
       {
@@ -65,9 +65,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/changeledger/workshopchanges',
         component: 'view.changeledger_workshopchanges',
         meta: {
-          title: 'changeledger_workshopchanges',
-          i18nKey: 'route.changeledger_workshopchanges',
-          icon: ''
+          title: '本车间变更',
+          icon: '',
+          i18nKey: 'route.changeledger_workshopchanges'
         }
       }
     ]
@@ -77,10 +77,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/changestatistics',
     component: 'layout.base$view.changestatistics',
     meta: {
-      title: 'changestatistics',
-      i18nKey: 'route.changestatistics',
+      title: '本部门变更统计',
       icon: 'ix:barchart',
-      order: 3
+      order: 3,
+      i18nKey: 'route.changestatistics'
     }
   },
   {
@@ -88,10 +88,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/docs',
     component: 'layout.base',
     meta: {
-      title: 'docs',
-      i18nKey: 'route.docs',
+      title: '资料管理',
       icon: 'mage:book',
-      order: 4
+      order: 4,
+      i18nKey: 'route.docs'
     },
     children: [
       {
@@ -99,9 +99,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/docs/archives',
         component: 'view.docs_archives',
         meta: {
-          title: 'docs_archives',
-          i18nKey: 'route.docs_archives',
-          icon: ''
+          title: '资料档案库',
+          icon: '',
+          i18nKey: 'route.docs_archives'
         }
       },
       {
@@ -109,9 +109,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/docs/query',
         component: 'view.docs_query',
         meta: {
-          title: 'docs_query',
-          i18nKey: 'route.docs_query',
-          icon: ''
+          title: '变更归档查询',
+          icon: '',
+          i18nKey: 'route.docs_query'
         }
       }
     ]
@@ -121,10 +121,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/factoryoverview',
     component: 'layout.base$view.factoryoverview',
     meta: {
-      title: 'factoryoverview',
-      i18nKey: 'route.factoryoverview',
+      title: '全工厂统计概览',
       icon: 'ix:barchart',
-      order: 3
+      order: 3,
+      i18nKey: 'route.factoryoverview'
     }
   },
   {
@@ -132,10 +132,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/home',
     component: 'layout.base$view.home',
     meta: {
-      title: 'home',
-      i18nKey: 'route.home',
+      title: '首页',
       icon: 'ant-design:home-outlined',
-      order: 1
+      order: 1,
+      i18nKey: 'route.home'
     }
   },
   {
@@ -144,10 +144,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     component: 'layout.blank$view.login',
     props: true,
     meta: {
-      title: 'login',
-      i18nKey: 'route.login',
+      title: '登录',
       constant: true,
-      hideInMenu: true
+      hideInMenu: true,
+      i18nKey: 'route.login'
     }
   },
   {
@@ -155,7 +155,7 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/my',
     component: 'layout.base',
     meta: {
-      title: 'my',
+      title: '我的操作台',
       i18nKey: 'route.my',
       icon: 'heroicons:computer-desktop',
       order: 2
@@ -166,9 +166,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/closeconfirm',
         component: 'view.my_closeconfirm',
         meta: {
-          title: 'my_closeconfirm',
-          i18nKey: 'route.my_closeconfirm',
-          icon: ''
+          title: '关闭确认',
+          icon: '',
+          i18nKey: 'route.my_closeconfirm'
         }
       },
       {
@@ -176,9 +176,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/datachangecenter',
         component: 'view.my_datachangecenter',
         meta: {
-          title: 'my_datachangecenter',
-          i18nKey: 'route.my_datachangecenter',
-          icon: ''
+          title: '变更数据中心',
+          icon: '',
+          i18nKey: 'route.my_datachangecenter'
         }
       },
       {
@@ -186,9 +186,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/effect',
         component: 'view.my_effect',
         meta: {
-          title: 'my_effect',
-          i18nKey: 'route.my_effect',
-          icon: ''
+          title: '变更投入和效果',
+          icon: '',
+          i18nKey: 'route.my_effect'
         }
       },
       {
@@ -196,9 +196,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/highrisk',
         component: 'view.my_highrisk',
         meta: {
-          title: 'my_highrisk',
-          i18nKey: 'route.my_highrisk',
-          icon: ''
+          title: '本专业高风险',
+          icon: '',
+          i18nKey: 'route.my_highrisk'
         }
       },
       {
@@ -206,10 +206,10 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/highriskdetail',
         component: 'view.my_highriskdetail',
         meta: {
-          title: 'my_highriskdetail',
-          i18nKey: 'route.my_highriskdetail',
+          title: '高风险场景详情',
           icon: '',
-          hideInMenu: true
+          hideInMenu: true,
+          i18nKey: 'route.my_highriskdetail'
         }
       },
       {
@@ -217,9 +217,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/initiatechange',
         component: 'view.my_initiatechange',
         meta: {
-          title: 'my_initiatechange',
-          i18nKey: 'route.my_initiatechange',
-          icon: ''
+          title: '发起变更',
+          icon: '',
+          i18nKey: 'route.my_initiatechange'
         }
       },
       {
@@ -227,9 +227,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/mydraft',
         component: 'view.my_mydraft',
         meta: {
-          title: 'my_mydraft',
-          i18nKey: 'route.my_mydraft',
-          icon: ''
+          title: '我的草稿',
+          icon: '',
+          i18nKey: 'route.my_mydraft'
         }
       },
       {
@@ -237,9 +237,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/mytask',
         component: 'view.my_mytask',
         meta: {
-          title: 'my_mytask',
-          i18nKey: 'route.my_mytask',
-          icon: ''
+          title: '我的任务',
+          icon: '',
+          i18nKey: 'route.my_mytask'
         }
       },
       {
@@ -247,9 +247,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/pending',
         component: 'view.my_pending',
         meta: {
-          title: 'my_pending',
-          i18nKey: 'route.my_pending',
-          icon: ''
+          title: '待我处理',
+          icon: '',
+          i18nKey: 'route.my_pending'
         }
       },
       {
@@ -257,9 +257,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/pendingchange',
         component: 'view.my_pendingchange',
         meta: {
-          title: 'my_pendingchange',
-          i18nKey: 'route.my_pendingchange',
-          icon: ''
+          title: '待投用变更',
+          icon: '',
+          i18nKey: 'route.my_pendingchange'
         }
       },
       {
@@ -267,9 +267,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/process',
         component: 'view.my_process',
         meta: {
-          title: 'my_process',
-          i18nKey: 'route.my_process',
-          icon: ''
+          title: '流程演示',
+          icon: '',
+          i18nKey: 'route.my_process'
         }
       },
       {
@@ -277,10 +277,10 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/processdetail',
         component: 'view.my_processdetail',
         meta: {
-          title: 'my_processdetail',
-          i18nKey: 'route.my_processdetail',
+          title: '流程演示详情',
           icon: '',
-          hideInMenu: true
+          hideInMenu: true,
+          i18nKey: 'route.my_processdetail'
         }
       },
       {
@@ -288,9 +288,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/my/pssr',
         component: 'view.my_pssr',
         meta: {
-          title: 'my_pssr',
-          i18nKey: 'route.my_pssr',
-          icon: ''
+          title: 'PSSR监督',
+          icon: '',
+          i18nKey: 'route.my_pssr'
         }
       }
     ]
@@ -300,10 +300,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/report',
     component: 'layout.base$view.report',
     meta: {
-      title: 'report',
-      i18nKey: 'route.report',
+      title: '统计报表',
       icon: 'ix:barchart',
-      order: 3
+      order: 3,
+      i18nKey: 'route.report'
     }
   },
   {
@@ -311,10 +311,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/riskstatistics',
     component: 'layout.base$view.riskstatistics',
     meta: {
-      title: 'riskstatistics',
-      i18nKey: 'route.riskstatistics',
+      title: '安全与风险统计',
       icon: 'ix:barchart',
-      order: 3
+      order: 3,
+      i18nKey: 'route.riskstatistics'
     }
   },
   {
@@ -322,10 +322,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/signstatistics',
     component: 'layout.base$view.signstatistics',
     meta: {
-      title: 'signstatistics',
-      i18nKey: 'route.signstatistics',
+      title: '质量会签统计',
       icon: 'ix:barchart',
-      order: 3
+      order: 3,
+      i18nKey: 'route.signstatistics'
     }
   },
   {
@@ -333,10 +333,10 @@ export const generatedRoutes: GeneratedRoute[] = [
     path: '/systemmanage',
     component: 'layout.base',
     meta: {
-      title: 'systemmanage',
-      i18nKey: 'route.systemmanage',
+      title: '系统设置',
       icon: 'uil:setting',
-      order: 5
+      order: 5,
+      i18nKey: 'route.systemmanage'
     },
     children: [
       {
@@ -344,10 +344,10 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/systemmanage/role',
         component: 'view.systemmanage_role',
         meta: {
-          title: 'systemmanage_role',
-          i18nKey: 'route.systemmanage_role',
+          title: '角色管理',
           icon: '',
-          order: 2
+          order: 2,
+          i18nKey: 'route.systemmanage_role'
         }
       },
       {
@@ -355,10 +355,10 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/systemmanage/setting',
         component: 'view.systemmanage_setting',
         meta: {
-          title: 'systemmanage_setting',
-          i18nKey: 'route.systemmanage_setting',
+          title: '系统配置',
           icon: '',
-          order: 4
+          order: 4,
+          i18nKey: 'route.systemmanage_setting'
         }
       },
       {
@@ -366,10 +366,10 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/systemmanage/template',
         component: 'view.systemmanage_template',
         meta: {
-          title: 'systemmanage_template',
-          i18nKey: 'route.systemmanage_template',
+          title: '审批模板管理',
           icon: '',
-          order: 3
+          order: 3,
+          i18nKey: 'route.systemmanage_template'
         }
       },
       {
@@ -377,10 +377,10 @@ export const generatedRoutes: GeneratedRoute[] = [
         path: '/systemmanage/user',
         component: 'view.systemmanage_user',
         meta: {
-          title: 'systemmanage_user',
-          i18nKey: 'route.systemmanage_user',
+          title: '架构及用户管理',
           icon: '',
-          order: 1
+          order: 1,
+          i18nKey: 'route.systemmanage_user'
         }
       }
     ]

src/views/systemManage/role/index.vue

@@ -4,7 +4,7 @@ import { useAppStore } from '@/store/modules/app';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouter } from 'vue-router';
-import { NButton } from 'naive-ui';
+import { NButton, NIcon } from 'naive-ui';
 import { roleListApi, editRoleApi } from '@/service/api/role';
 
 const router = useRouter();
@@ -12,6 +12,9 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 const gap = computed(() => (appStore.isMobile ? 0 : 16));
 
+const routeTree = ref<any[]>([]);
+const allPaths = ref<string[]>([]);
+const defaultCheckedKeys = ref<string[]>([]);
 const loading = ref<boolean>(false);
 const btnLoading = ref<boolean>(false);
 const formRef = ref<any>(null);
@@ -94,6 +97,12 @@ const getList = async () => {
 // 设置权限
 const handleSetPermission = (row: any) => {
   currentRole.value = JSON.parse(JSON.stringify(row));
+  // 所有权限
+  if(currentRole.value?.perms.length===1 && currentRole.value?.perms[0] === '*'){
+    defaultCheckedKeys.value = allPaths.value;
+  }else{
+    defaultCheckedKeys.value = currentRole.value?.perms || [];
+  }
   permissionModal.value = true;
 }
 // 编辑角色
@@ -125,15 +134,82 @@ const saveRole = (e: MouseEvent) => {
 // 保存权限
 const savePermission = async () => {
   btnLoading.value = true;
-  setTimeout(() => {
+  currentRole.value.perms = defaultCheckedKeys.value;
+  try {
+    await editRoleApi(currentRole.value);
     window.$message?.success('操作成功')
     btnLoading.value = false;
     permissionModal.value = false;
-  }, 1000)
+    getList();
+  } finally {
+    btnLoading.value = false;
+  }
+}
+// 更新选中权限
+const updateCheckedKeys = (keys: string[]) => {
+  defaultCheckedKeys.value = keys;
 }
 
+// 复制title到顶层
+const copyTitleToTop = (node:any) => {
+  // 创建新节点，复制原节点所有属性
+  const newNode = { ...node }
+
+  // 如果存在 meta.title，则复制到顶层
+  if (node.meta?.title) {
+    newNode.title = node.meta.title
+  } else {
+    // 可选：没有 title 时用 name 代替
+    newNode.title = node.name || ''
+  }
+  // 如果有 children，递归处理每个子节点
+  if (Array.isArray(newNode.children) && newNode.children.length > 0) {
+    newNode.children = newNode.children.map((child:any) => copyTitleToTop(child))
+  }
+  return newNode
+}
+// 获取所有路由路径
+const getAllPaths = (tree:any) => {
+  let paths:string[] = []
+  tree.forEach((node:any) => {
+    if (node.path) paths.push(node.path)
+    if (Array.isArray(node.children) && node.children.length) {
+      paths = paths.concat(getAllPaths(node.children))
+    }
+  })
+  return paths
+}
+// 获取所有路由
+const getAllRoutes = () => {
+  const filtered = router.getRoutes().filter((item:any) => {
+    // 条件1：有name且非常量
+    if (item.name === undefined || item.meta?.constant === true) return false;
+    // 条件2：path中斜杠数量 < 2（即只有一级）
+    const path = item.path || '';
+    const slashCount = (path.match(/\//g) || []).length;
+    if (slashCount >= 2) return false;
+    return true;
+  })
+  const tree = filtered.map((item:any) => copyTitleToTop(item));
+  routeTree.value = tree;
+  allPaths.value = getAllPaths(tree);
+}
+
+// tree自定义渲染图标
+const renderIcon = (node:any) => {
+  // 如果节点没有 children 或 children 为空数组，则不显示图标
+  if (!node.option.children || node.option.children.length === 0) {
+    return null;  // 返回 null 表示不渲染任何图标
+  }
+  // 有子节点：返回 undefined 表示使用默认展开图标，也可自定义
+  return h(Icon,{
+    icon: node.option.expanded ? 'bi:caret-down-fill' : 'bi:caret-right-fill',
+    class: 'size-12px',
+  });
+};
+
 onMounted(() => {
-  const allRoutes = router.getRoutes();
+  getAllRoutes();
   getList()
 })
 </script>
@@ -192,12 +268,24 @@ onMounted(() => {
           <!-- 设置权限抽屉 -->
           <NDrawer v-model:show="permissionModal" :width="502" placement="right">
             <NDrawerContent :title="`设置权限-${currentRole.name}`" closable>
-                <template #footer>
-                  <div class="flex justify-end gap-[10px]">
-                    <NButton @click="permissionModal = false">取消</NButton>
-                    <NButton type="primary" :loading="btnLoading" @click="savePermission">保存</NButton>
-                  </div>
-                </template>
+              <NTree
+                block-line
+                cascade
+                checkable
+                key-field="path"
+                label-field="title"
+                :selectable="false"
+                :data="routeTree"
+                :default-checked-keys="defaultCheckedKeys"
+                @update:checked-keys="updateCheckedKeys"
+                :render-switcher-icon="renderIcon"
+              />
+              <template #footer>
+                <div class="flex justify-end gap-[10px]">
+                  <NButton @click="permissionModal = false">取消</NButton>
+                  <NButton type="primary" :loading="btnLoading" @click="savePermission">保存</NButton>
+                </div>
+              </template>
             </NDrawerContent>
           </NDrawer>
     </NCard>