Optimize role

src/assets/svg/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M885.333333 266.666667H768v-64C768 149.738667 725.290667 106.666667 672.746667 106.666667H352A96.106667 96.106667 0 0 0 256 202.666667v64H138.666667c-17.706667 0-32 14.293333-32 32s14.293333 32 32 32h746.666666c17.706667 0 32-14.293333 32-32s-14.293333-32-32-32zM320 202.666667c0-17.621333 14.378667-32 32-32h320.746667C690.24 170.666667 704 184.725333 704 202.666667v64H320v-64zM736.128 917.333333H288.064a96.128 96.128 0 0 1-96-96l1.194667-384a32 32 0 0 1 64 0l-1.194667 384c0 17.664 14.378667 32 32 32h448.064a32 32 0 0 0 32-32l-0.234667-384a32 32 0 1 1 64 0l0.234667 384c0 52.928-43.072 96-96 96z" /><path d="M384 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /><path d="M576 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /></svg>

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[]

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<React.Key[]>([])
 
     const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
         {
             title: '名称',
             dataIndex: 'name',
-            width: '20%'
+            width: '15%'
         },
         {
             title: '权限',
             dataIndex: 'tree',
-            render: (value: _DataNode[]) => <AntdTree treeData={value} />
+            render: (value: _DataNode[]) =>
+                value.length ? <AntdTree treeData={value} /> : <AntdTag>无</AntdTag>
+        },
+        {
+            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)
+                            setIsLoading(true)
-                            r_role_delete(value.id)
+
+                            void r_role_delete(value.id)
                                 .then((res) => {
                                     const data = res.data
                                     if (data.code === DATABASE_DELETE_SUCCESS) {
                                         void message.success('删除成功')
+                                        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) {
+                        void message.success('更新成功')
+                        setTimeout(() => {
                             getRole()
+                        })
                     } else {
                         void message.error('更新失败，请稍后重试')
                     }
@@ -445,7 +493,21 @@ const Role: React.FC = () => {
                                 >
                                     <Icon
                                         component={IconFatwebPlus}
-                                        style={{ fontSize: '1.5em' }}
+                                        style={{ fontSize: '1.2em' }}
+                                    />
+                                </AntdButton>
+                            </Card>
+                            <Card
+                                hidden={tableSelectedItem.length === 0}
+                                style={{ overflow: 'inherit', flex: '0 0 auto' }}
+                            >
+                                <AntdButton
+                                    style={{ padding: '4px 8px' }}
+                                    onClick={handleOnListDeleteBtnClick}
+                                >
+                                    <Icon
+                                        component={IconFatwebDelete}
+                                        style={{ fontSize: '1.2em' }}
                                     />
                                 </AntdButton>
                             </Card>
@@ -497,6 +559,10 @@ const Role: React.FC = () => {
                                 pagination={tableParams.pagination}
                                 loading={isLoading}
                                 onChange={handleOnTableChange}
+                                rowSelection={{
+                                    type: 'checkbox',
+                                    onChange: handleOnTableSelectChange
+                                }}
                             />
                         </Card>
                     </FlexBox>

src/services/index.tsx

@@ -122,7 +122,7 @@ const request = {
         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 })
+        return await request.request('DELETE', url, { data })
     },
     async request<T>(
         method = 'GET',

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 })

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(<LoadingMask />)
+}
+
+export const removeLoadingMask = (id: string) => {
+    document.querySelectorAll(`#${id}`).forEach((value) => {
+        value.parentNode?.removeChild(value)
+    })
+}