diff --git a/src/assets/svg/delete.svg b/src/assets/svg/delete.svg new file mode 100644 index 0000000..05a00ac --- /dev/null +++ b/src/assets/svg/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/global.d.ts b/src/global.d.ts index 99a99cb..af0ed9f 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -134,12 +134,16 @@ interface RoleVo { id: string name: string enable: boolean + createTime: string + updateTime: string } interface GroupVo { id: string name: string enable: boolean + createTime: string + updateTime: string } interface LoginForm { @@ -204,6 +208,8 @@ interface RoleWithPowerGetVo { id: string name: string enable: string + createTime: string + updateTime: string modules: ModuleVo[] menus: MenuVo[] elements: ElementVo[] diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx index 1753bde..822f895 100644 --- a/src/pages/system/Role.tsx +++ b/src/pages/system/Role.tsx @@ -9,7 +9,8 @@ import { r_power_get, r_role_get, r_role_update, - r_role_delete + r_role_delete, + r_role_delete_list } from '@/services/system.tsx' import { COLOR_ERROR_SECONDARY, @@ -20,9 +21,9 @@ import { DATABASE_INSERT_SUCCESS, DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS -} from '@/constants/common.constants.ts' +} from '@/constants/common.constants' import Icon from '@ant-design/icons' -import { powerListToPowerTree } from '@/utils/common.ts' +import { getLocalTime, powerListToPowerTree } from '@/utils/common' const Role: React.FC = () => { const [modal, contextHolder] = AntdModal.useModal() @@ -47,17 +48,33 @@ const Role: React.FC = () => { const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([]) const [isLoadingPower, setIsLoadingPower] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) + const [tableSelectedItem, setTableSelectedItem] = useState([]) const dataColumns: _ColumnsType = [ { title: '名称', dataIndex: 'name', - width: '20%' + width: '15%' }, { title: '权限', dataIndex: 'tree', - render: (value: _DataNode[]) => + render: (value: _DataNode[]) => + value.length ? : 无 + }, + { + title: '创建时间', + dataIndex: 'createTime', + width: '0', + align: 'center', + render: (value: string) => getLocalTime(value) + }, + { + title: '修改时间', + dataIndex: 'updateTime', + width: '0', + align: 'center', + render: (value: string) => getLocalTime(value) }, { title: '状态', @@ -133,6 +150,10 @@ const Role: React.FC = () => { } } + const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => { + setTableSelectedItem(selectedRowKeys) + } + const handleOnAddBtnClick = () => { setIsDrawerEdit(false) setIsDrawerOpen(true) @@ -142,6 +163,27 @@ const Role: React.FC = () => { form.setFieldValue('enable', newFormValues?.enable ?? true) } + const handleOnListDeleteBtnClick = () => { + setIsLoading(true) + + void r_role_delete_list(tableSelectedItem) + .then((res) => { + const data = res.data + + if (data.code === DATABASE_DELETE_SUCCESS) { + void message.success('删除成功') + setTimeout(() => { + getRole() + }) + } else { + void message.error('删除失败，请稍后重试') + } + }) + .finally(() => { + setIsLoading(false) + }) + } + const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => { return () => { setIsDrawerEdit(true) @@ -167,19 +209,22 @@ const Role: React.FC = () => { .then( (confirmed) => { if (confirmed) { - setIsSubmitting(true) - r_role_delete(value.id) + setIsLoading(true) + + void r_role_delete(value.id) .then((res) => { const data = res.data if (data.code === DATABASE_DELETE_SUCCESS) { void message.success('删除成功') - getRole() + setTimeout(() => { + getRole() + }) } else { void message.error('删除失败，请稍后重试') } }) .finally(() => { - setIsSubmitting(false) + setIsLoading(false) }) } }, @@ -293,7 +338,10 @@ const Role: React.FC = () => { .then((res) => { const data = res.data if (data.code === DATABASE_UPDATE_SUCCESS) { - getRole() + void message.success('更新成功') + setTimeout(() => { + getRole() + }) } else { void message.error('更新失败，请稍后重试') } @@ -445,7 +493,21 @@ const Role: React.FC = () => { > + + + @@ -497,6 +559,10 @@ const Role: React.FC = () => { pagination={tableParams.pagination} loading={isLoading} onChange={handleOnTableChange} + rowSelection={{ + type: 'checkbox', + onChange: handleOnTableSelectChange + }} /> diff --git a/src/services/index.tsx b/src/services/index.tsx index aa90477..fcbf261 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -122,7 +122,7 @@ const request = { return await request.request('PATCH', url, { data }) }, async delete(url: string, data?: object): Promise>> { - return await request.request('DELETE', url, { params: data }) + return await request.request('DELETE', url, { data }) }, async request( method = 'GET', diff --git a/src/services/system.tsx b/src/services/system.tsx index 3b19087..b385b3e 100644 --- a/src/services/system.tsx +++ b/src/services/system.tsx @@ -1,3 +1,4 @@ +import React from 'react' import request from '@/services/index' import { URL_API_SYS_LOG, URL_API_SYS_POWER, URL_API_SYS_ROLE } from '@/constants/urls.constants' @@ -19,4 +20,4 @@ export const r_role_update = (param: RoleAddEditParam) => export const r_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`) -export const r_role_delete_list = (ids: string[]) => request.delete(URL_API_SYS_ROLE, { ids }) +export const r_role_delete_list = (ids: React.Key[]) => request.delete(URL_API_SYS_ROLE, { ids }) diff --git a/src/utils/common.ts b/src/utils/common.tsx similarity index 92% rename from src/utils/common.ts rename to src/utils/common.tsx index 1edeeeb..7840bc3 100644 --- a/src/utils/common.ts +++ b/src/utils/common.tsx @@ -1,5 +1,7 @@ import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants' import moment from 'moment' +import ReactDOM from 'react-dom/client' +import LoadingMask from '@/components/common/LoadingMask.tsx' export const getQueryVariable = (variable: string) => { const query = window.location.search.substring(1) @@ -270,3 +272,25 @@ export const powerListToPowerTree = ( }) })) } + +export const showLoadingMask = (id: string) => { + if (document.querySelector(`#${id}`)) { + return + } + + const container = document.createElement('div') + document.body.appendChild(container) + container.id = id + container.setAttribute( + 'style', + 'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;' + ) + + return ReactDOM.createRoot(container).render() +} + +export const removeLoadingMask = (id: string) => { + document.querySelectorAll(`#${id}`).forEach((value) => { + value.parentNode?.removeChild(value) + }) +}