src/assets/svg/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M853.333333 554.666667 554.666667 554.666667l0 298.666667c0 23.466667-19.2 42.666667-42.666667 42.666667s-42.666667-19.2-42.666667-42.666667L469.333333 554.666667 170.666667 554.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667 0-23.466667 19.2-42.666667 42.666667-42.666667l298.666667 0L469.333333 170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667l0 298.666667 298.666667 0c23.466667 0 42.666667 19.2 42.666667 42.666667C896 535.466667 876.8 554.666667 853.333333 554.666667z" /></svg>

src/global.d.ts

@@ -162,14 +162,14 @@ interface PageParam {
     sortOrder?: string
 }
 
-interface TableParams {
+interface TableParam {
     pagination?: _TablePaginationConfig
     sortField?: React.Key | readonly React.Key[]
     sortOrder?: _SortOrder
     filters?: Record<string, _FilterValue | null>
 }
 
-interface GetSysLogParams extends PageParam {
+interface GetSysLogParam extends PageParam {
     searchRequestUrl?: string
     searchRegex?: boolean
     searchStartTime?: string
@@ -195,7 +195,7 @@ interface SysLogGetVo {
     operateUsername: string
 }
 
-interface GetRoleParams extends PageParam {
+interface GetRoleParam extends PageParam {
     searchName?: string
     searchRegex?: boolean
 }
@@ -210,3 +210,8 @@ interface RoleWithPowerGetVo {
     operations: OperationVo[]
     tree: _DataNode[]
 }
+
+interface RoleChangeStatusParam {
+    id: string
+    enable: boolean
+}

src/pages/system/Log.tsx

@@ -14,7 +14,7 @@ import FlexBox from '@/components/common/FlexBox'
 const Log: React.FC = () => {
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
     const [loading, setLoading] = useState(false)
-    const [tableParams, setTableParams] = useState<TableParams>({
+    const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
             pageSize: 20,

src/pages/system/Role.tsx

@@ -3,13 +3,19 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
-import { r_getRole } from '@/services/system.tsx'
-import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { r_changeRoleStatus, r_getRole } from '@/services/system.tsx'
+import {
+    COLOR_ERROR_SECONDARY,
+    COLOR_FONT_SECONDARY,
+    COLOR_PRODUCTION,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants.ts'
+import Icon from '@ant-design/icons'
 
 const Role: React.FC = () => {
     const [roleData, setRoleData] = useState<RoleWithPowerGetVo[]>([])
     const [loading, setLoading] = useState(false)
-    const [tableParams, setTableParams] = useState<TableParams>({
+    const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
             pageSize: 20,
@@ -38,6 +44,35 @@ const Role: React.FC = () => {
             align: 'center',
             render: (value) =>
                 value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        },
+        {
+            title: '操作',
+            dataIndex: 'enable',
+            width: '15em',
+            align: 'center',
+            render: (value, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        {value ? (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnChangStatusBtnClick(record.id, false)}
+                            >
+                                禁用
+                            </a>
+                        ) : (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnChangStatusBtnClick(record.id, true)}
+                            >
+                                启用
+                            </a>
+                        )}
+                        <a style={{ color: COLOR_PRODUCTION }}>编辑</a>
+                        <a style={{ color: COLOR_PRODUCTION }}>删除</a>
+                    </AntdSpace>
+                </>
+            )
         }
     ]
 
@@ -105,6 +140,12 @@ const Role: React.FC = () => {
         getRole()
     }
 
+    const handleOnChangStatusBtnClick = (id: string, newStatus: boolean) => {
+        return () => {
+            void r_changeRoleStatus({ id, enable: newStatus })
+        }
+    }
+
     const getRole = () => {
         if (loading) {
             return
@@ -244,7 +285,55 @@ const Role: React.FC = () => {
                     autoHideWaitingTime={500}
                 >
                     <FlexBox gap={20}>
-                        <FlexBox direction={'horizontal'} gap={10}></FlexBox>
+                        <FlexBox direction={'horizontal'} gap={10}>
+                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                                <AntdButton type={'primary'} style={{ padding: '4px 8px' }}>
+                                    <Icon
+                                        component={IconFatwebPlus}
+                                        style={{ fontSize: '1.5em' }}
+                                    />
+                                </AntdButton>
+                            </Card>
+                            <Card style={{ overflow: 'inherit' }}>
+                                <AntdInput
+                                    addonBefore={
+                                        <span
+                                            style={{
+                                                fontSize: '0.9em',
+                                                color: COLOR_FONT_SECONDARY
+                                            }}
+                                        >
+                                            名称
+                                        </span>
+                                    }
+                                    suffix={
+                                        <>
+                                            {!isRegexLegal ? (
+                                                <span style={{ color: COLOR_ERROR_SECONDARY }}>
+                                                    非法表达式
+                                                </span>
+                                            ) : undefined}
+                                            <AntdCheckbox
+                                                checked={useRegex}
+                                                onChange={handleOnUseRegexChange}
+                                            >
+                                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                                            </AntdCheckbox>
+                                        </>
+                                    }
+                                    allowClear
+                                    value={searchName}
+                                    onChange={handleOnSearchNameChange}
+                                    onKeyDown={handleOnSearchNameKeyDown}
+                                    status={isRegexLegal ? undefined : 'error'}
+                                />
+                            </Card>
+                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                                    查询
+                                </AntdButton>
+                            </Card>
+                        </FlexBox>
                         <Card>
                             <AntdTable
                                 dataSource={roleData}

src/services/index.tsx

@@ -118,6 +118,9 @@ const request = {
     async put<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
         return await request.request('PUT', url, { data })
     },
+    async patch<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
+        return await request.request('PATCH', url, { data })
+    },
     async delete<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
         return await request.request('DELETE', url, { params: data })
     },

src/services/system.tsx

@@ -1,8 +1,11 @@
 import request from '@/services/index'
 import { URL_API_SYS_LOG, URL_API_SYS_ROLE } from '@/constants/urls.constants'
 
-export const r_getSysLog = (param: GetSysLogParams) =>
+export const r_getSysLog = (param: GetSysLogParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
 
-export const r_getRole = (parm: GetRoleParams) =>
-    request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...parm })
+export const r_getRole = (param: GetRoleParam) =>
+    request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...param })
+
+export const r_changeRoleStatus = (param: RoleChangeStatusParam) =>
+    request.patch<never>(URL_API_SYS_ROLE, { ...param })