diff --git a/src/components/SystemSetting/BasicSettings.tsx b/src/components/SystemSetting/BasicSettings.tsx index fb99460..586e569 100644 --- a/src/components/SystemSetting/BasicSettings.tsx +++ b/src/components/SystemSetting/BasicSettings.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Form, Input, @@ -58,12 +58,14 @@ import { } from 'lucide-react'; import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; +import { getRoleList } from '@/api/role'; const { Text, Title } = Typography; const BasicSettings = () => { const { t } = useTranslation(); const [form] = Form.useForm(); + const [roles, setRoles] = useState([]); // 响应式字体大小 const fontNormal = 'clamp(12px, 0.75vw, 13px)'; @@ -119,6 +121,7 @@ const BasicSettings = () => { // 角色权限概览 const roleOverview = [ + //平台管理员 { title: t('roles.superAdmin'), users: 2, @@ -128,34 +131,48 @@ const BasicSettings = () => { bg: '#e6f4ff', icon: }, + //普通用户 { title: t('systemSetting.fixed2OM'), users: 5, perms: 18, - tags: [t('router.devices'), '工单管理'], + tags: ["处理工单","处理任务"], color: '#52c41a', bg: '#f6ffed', icon: }, + //机构管理员 { title: t('systemSetting.fixed2Inspection2'), users: 8, perms: 12, - tags: ['巡检管理', '告警处理'], + tags: ['管理机构下所有场站', '告警处理'], color: '#fa8c16', bg: '#fff7e6', icon: }, + //场站管理员 { title: t('systemSetting.s322'), users: 3, perms: 15, - tags: ['数据分析', '报表查看'], + tags: ['管理自己场站', '报表查看','告警处理'], color: '#722ed1', bg: '#f9f0ff', icon: }, ]; + const matchRoleStyle = (roleName: string) => { + const found = roleOverview.find(item => item.title === roleName); + if (found) return found; + // 兜底默认样式 + return { + color: '#8c8c8c', + bg: '#f5f5f5', + icon: null, + tags: [] + }; + }; // 设备状态 const deviceStatuses = [ @@ -168,6 +185,20 @@ const BasicSettings = () => { { name: t('systemSetting.api'), count: t('roles.normal'), status: t('roles.normal') }, { name: 'Modbus', count: t('roles.normal'), status: t('roles.normal') }, ]; + const getRoleData = () => { + const params = { pageNum: 1, pageSize: 9999 }; + getRoleList(params).then(res => { + if (res.code === 200) { + let sortedRoles = (res.data || []).sort((a, b) => (a.roleSort || 999) - (b.roleSort || 999)); + setRoles(sortedRoles); + } + }); + }; + + useEffect(() => { + getRoleData(); + }, []) + return (
@@ -182,9 +213,9 @@ const BasicSettings = () => {
-
+ {/*
{React.cloneElement(item.icon as React.ReactElement, { size: 20, style: item.icon.props.style ? { ...item.icon.props.style, fontSize: 20 } : { fontSize: 20 } })} -
+
*/}
{item.title}
@@ -300,7 +331,7 @@ const BasicSettings = () => {
- {React.cloneElement(item.icon as React.ReactElement, { style: { color: item.color } })} + {/*{React.cloneElement(item.icon as React.ReactElement, { style: { color: item.color } })}*/}
{item.label}
@@ -402,25 +433,41 @@ const BasicSettings = () => { bodyStyle={{ padding: '10px' }} > - {roleOverview.map((role, idx) => ( - -
-
- {React.cloneElement(role.icon as React.ReactElement, { size: 16 })} - + {roles.map((role, idx) => { + const styleConf = matchRoleStyle(role.roleName); + return ( + +
+
+ {styleConf.icon} +
+
+ {role.roleName} +
+
+ 用户 {role.users} | 菜单权限 {role.menuIds?.length ?? 0} +
+
+ {styleConf.tags.map((tag, tidx) => ( + + {tag} + + ))} +
-
{role.title}
-
- 用户 {role.users} | 权限 {role.perms} -
-
- {role.tags.map((tag, tidx) => ( - {tag} - ))} -
-
- - ))} + + ); + })} diff --git a/src/locales/zh/index.ts b/src/locales/zh/index.ts index 5a753ed..42c2596 100644 --- a/src/locales/zh/index.ts +++ b/src/locales/zh/index.ts @@ -2636,7 +2636,7 @@ const zh = { s28: '开启钉钉推送时必须填写加密密钥', - fixed2OM: '运维工程师', + fixed2OM: '普通用户', fixed2Inspection: '巡检区', @@ -3077,9 +3077,9 @@ const zh = { s282: '最近更新', - fixed2Inspection2: '巡检主管', + fixed2Inspection2: '机构管理员', - s322: '数据分析师', + s322: '场站管理员', fixed2Login2: '登录审计', @@ -3415,7 +3415,7 @@ const zh = { roleNamePlaceholder: '角色名称占位', rolePermission: '角色权限', roleSortLabel: '角色排序标签', - superAdmin: '超级管理员', + superAdmin: '平台管理员', }, constants: { // 工单类型