Finish role add and edit
This commit is contained in:
@@ -1,20 +1,33 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
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_changeRoleStatus, r_getRole } from '@/services/system.tsx'
|
||||
import {
|
||||
r_addRole,
|
||||
r_changeRoleStatus,
|
||||
r_getPower,
|
||||
r_getRole,
|
||||
r_updateRole
|
||||
} from '@/services/system.tsx'
|
||||
import {
|
||||
COLOR_ERROR_SECONDARY,
|
||||
COLOR_FONT_SECONDARY,
|
||||
COLOR_PRODUCTION,
|
||||
DATABASE_SELECT_SUCCESS
|
||||
DATABASE_DUPLICATE_KEY,
|
||||
DATABASE_INSERT_SUCCESS,
|
||||
DATABASE_SELECT_SUCCESS,
|
||||
DATABASE_UPDATE_SUCCESS
|
||||
} from '@/constants/common.constants.ts'
|
||||
import Icon from '@ant-design/icons'
|
||||
import { powerListToPowerTree } from '@/utils/common.ts'
|
||||
|
||||
const Role: React.FC = () => {
|
||||
const [form] = AntdForm.useForm<RoleAddEditParam>()
|
||||
const formValues = AntdForm.useWatch([], form)
|
||||
const [newFormValues, setNewFormValues] = useState<RoleAddEditParam>()
|
||||
const [roleData, setRoleData] = useState<RoleWithPowerGetVo[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [tableParams, setTableParams] = useState<TableParam>({
|
||||
pagination: {
|
||||
current: 1,
|
||||
@@ -23,8 +36,14 @@ const Role: React.FC = () => {
|
||||
}
|
||||
})
|
||||
const [searchName, setSearchName] = useState('')
|
||||
const [useRegex, setUseRegex] = useState(false)
|
||||
const [isUseRegex, setIsUseRegex] = useState(false)
|
||||
const [isRegexLegal, setIsRegexLegal] = useState(true)
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
|
||||
const [isDrawerEdit, setIsDrawerEdit] = useState(false)
|
||||
const [submittable, setSubmittable] = useState(false)
|
||||
const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
|
||||
const [isLoadingPower, setIsLoadingPower] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
|
||||
{
|
||||
@@ -68,7 +87,12 @@ const Role: React.FC = () => {
|
||||
启用
|
||||
</a>
|
||||
)}
|
||||
<a style={{ color: COLOR_PRODUCTION }}>编辑</a>
|
||||
<a
|
||||
style={{ color: COLOR_PRODUCTION }}
|
||||
onClick={handleOnEditBtnClick(record)}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<a style={{ color: COLOR_PRODUCTION }}>删除</a>
|
||||
</AntdSpace>
|
||||
</>
|
||||
@@ -101,10 +125,101 @@ const Role: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnAddBtnClick = () => {
|
||||
setIsDrawerEdit(false)
|
||||
setIsDrawerOpen(true)
|
||||
form.setFieldValue('id', undefined)
|
||||
form.setFieldValue('name', newFormValues?.name)
|
||||
form.setFieldValue('powerIds', newFormValues?.powerIds)
|
||||
form.setFieldValue('enable', newFormValues?.enable ?? true)
|
||||
}
|
||||
|
||||
const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
|
||||
return () => {
|
||||
setIsDrawerEdit(true)
|
||||
setIsDrawerOpen(true)
|
||||
form.setFieldValue('id', value.id)
|
||||
form.setFieldValue('name', value.name)
|
||||
form.setFieldValue(
|
||||
'powerIds',
|
||||
value.operations.map((operation) => operation.powerId)
|
||||
)
|
||||
form.setFieldValue('enable', value.enable)
|
||||
void form.validateFields()
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnDrawerClose = () => {
|
||||
setIsDrawerOpen(false)
|
||||
}
|
||||
|
||||
const handleOnSubmit = () => {
|
||||
if (isSubmitting) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
if (isDrawerEdit) {
|
||||
void r_updateRole(formValues)
|
||||
.then((res) => {
|
||||
const data = res.data
|
||||
switch (data.code) {
|
||||
case DATABASE_UPDATE_SUCCESS:
|
||||
void message.success({
|
||||
content: '更新成功'
|
||||
})
|
||||
setIsDrawerOpen(false)
|
||||
getRole()
|
||||
break
|
||||
case DATABASE_DUPLICATE_KEY:
|
||||
void message.error({
|
||||
content: '已存在相同名称的角色'
|
||||
})
|
||||
break
|
||||
default:
|
||||
void message.error({
|
||||
content: '更新失败，请稍后重试'
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false)
|
||||
})
|
||||
} else {
|
||||
void r_addRole(formValues)
|
||||
.then((res) => {
|
||||
const data = res.data
|
||||
switch (data.code) {
|
||||
case DATABASE_INSERT_SUCCESS:
|
||||
void message.success({
|
||||
content: '添加成功'
|
||||
})
|
||||
setNewFormValues(undefined)
|
||||
setIsDrawerOpen(false)
|
||||
getRole()
|
||||
break
|
||||
case DATABASE_DUPLICATE_KEY:
|
||||
void message.error({
|
||||
content: '已存在相同名称的角色'
|
||||
})
|
||||
break
|
||||
default:
|
||||
void message.error({
|
||||
content: '添加失败，请稍后重试'
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchName(e.target.value)
|
||||
|
||||
if (useRegex) {
|
||||
if (isUseRegex) {
|
||||
try {
|
||||
RegExp(e.target.value)
|
||||
setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
|
||||
@@ -123,7 +238,7 @@ const Role: React.FC = () => {
|
||||
}
|
||||
|
||||
const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
|
||||
setUseRegex(e.target.checked)
|
||||
setIsUseRegex(e.target.checked)
|
||||
if (e.target.checked) {
|
||||
try {
|
||||
RegExp(searchName)
|
||||
@@ -142,12 +257,30 @@ const Role: React.FC = () => {
|
||||
|
||||
const handleOnChangStatusBtnClick = (id: string, newStatus: boolean) => {
|
||||
return () => {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
void r_changeRoleStatus({ id, enable: newStatus })
|
||||
.then((res) => {
|
||||
const data = res.data
|
||||
if (data.code === DATABASE_UPDATE_SUCCESS) {
|
||||
getRole()
|
||||
} else {
|
||||
void message.error({
|
||||
content: '更新失败，请稍后重试'
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getRole = () => {
|
||||
if (loading) {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -158,7 +291,7 @@ const Role: React.FC = () => {
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setIsLoading(true)
|
||||
|
||||
void r_getRole({
|
||||
currentPage: tableParams.pagination?.current,
|
||||
@@ -170,7 +303,7 @@ const Role: React.FC = () => {
|
||||
sortOrder:
|
||||
tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
|
||||
searchName: searchName.trim().length ? searchName : undefined,
|
||||
searchRegex: useRegex ? useRegex : undefined,
|
||||
searchRegex: isUseRegex ? isUseRegex : undefined,
|
||||
...tableParams.filters
|
||||
})
|
||||
.then((res) => {
|
||||
@@ -179,69 +312,12 @@ const Role: React.FC = () => {
|
||||
const records = data.data?.records
|
||||
|
||||
records?.map((value) => {
|
||||
const menuMap = new Map<number, _DataNode[]>()
|
||||
const elementMap = new Map<number, _DataNode[]>()
|
||||
const operationMap = new Map<number, _DataNode[]>()
|
||||
|
||||
value.operations.forEach((operation) => {
|
||||
if (
|
||||
operationMap.has(operation.elementId) &&
|
||||
operationMap.get(operation.elementId) !== null
|
||||
) {
|
||||
operationMap
|
||||
.get(operation.elementId)
|
||||
?.push({ title: operation.name, key: operation.powerId })
|
||||
} else {
|
||||
operationMap.set(operation.elementId, [
|
||||
{ title: operation.name, key: operation.powerId }
|
||||
])
|
||||
}
|
||||
})
|
||||
|
||||
value.elements.forEach((element) => {
|
||||
if (
|
||||
elementMap.has(element.menuId) &&
|
||||
elementMap.get(element.menuId) !== null
|
||||
) {
|
||||
elementMap.get(element.menuId)?.push({
|
||||
title: element.name,
|
||||
key: element.powerId,
|
||||
children: operationMap.get(element.id)
|
||||
})
|
||||
} else {
|
||||
elementMap.set(element.menuId, [
|
||||
{
|
||||
title: element.name,
|
||||
key: element.powerId,
|
||||
children: operationMap.get(element.id)
|
||||
}
|
||||
])
|
||||
}
|
||||
})
|
||||
|
||||
value.menus.forEach((menu) => {
|
||||
if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
|
||||
menuMap.get(menu.moduleId)?.push({
|
||||
title: menu.name,
|
||||
key: menu.powerId,
|
||||
children: elementMap.get(menu.id)
|
||||
})
|
||||
} else {
|
||||
menuMap.set(menu.moduleId, [
|
||||
{
|
||||
title: menu.name,
|
||||
key: menu.powerId,
|
||||
children: elementMap.get(menu.id)
|
||||
}
|
||||
])
|
||||
}
|
||||
})
|
||||
|
||||
value.tree = value.modules.map((module) => ({
|
||||
title: module.name,
|
||||
key: module.powerId,
|
||||
children: menuMap.get(module.id)
|
||||
}))
|
||||
value.tree = powerListToPowerTree(
|
||||
value.modules,
|
||||
value.menus,
|
||||
value.elements,
|
||||
value.operations
|
||||
)
|
||||
|
||||
return value
|
||||
})
|
||||
@@ -262,10 +338,66 @@ const Role: React.FC = () => {
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const getPowerTreeData = () => {
|
||||
if (isLoadingPower) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoadingPower(true)
|
||||
|
||||
void r_getPower()
|
||||
.then((res) => {
|
||||
const data = res.data
|
||||
|
||||
if (data.code === DATABASE_SELECT_SUCCESS) {
|
||||
const powerSet = data.data
|
||||
powerSet &&
|
||||
setPowerTreeData(
|
||||
powerListToPowerTree(
|
||||
powerSet.moduleList,
|
||||
powerSet.menuList,
|
||||
powerSet.elementList,
|
||||
powerSet.operationList
|
||||
)
|
||||
)
|
||||
} else {
|
||||
void message.error({
|
||||
content: '获取权限列表失败，请稍后重试'
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoadingPower(false)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
form.validateFields({ validateOnly: true }).then(
|
||||
() => {
|
||||
setSubmittable(true)
|
||||
},
|
||||
() => {
|
||||
setSubmittable(false)
|
||||
}
|
||||
)
|
||||
|
||||
if (!isDrawerEdit && formValues) {
|
||||
setNewFormValues({
|
||||
name: formValues.name,
|
||||
powerIds: formValues.powerIds,
|
||||
enable: formValues.enable
|
||||
})
|
||||
}
|
||||
}, [formValues])
|
||||
|
||||
useEffect(() => {
|
||||
getPowerTreeData()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getRole()
|
||||
}, [
|
||||
@@ -287,7 +419,11 @@ const Role: React.FC = () => {
|
||||
<FlexBox gap={20}>
|
||||
<FlexBox direction={'horizontal'} gap={10}>
|
||||
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
|
||||
<AntdButton type={'primary'} style={{ padding: '4px 8px' }}>
|
||||
<AntdButton
|
||||
type={'primary'}
|
||||
style={{ padding: '4px 8px' }}
|
||||
onClick={handleOnAddBtnClick}
|
||||
>
|
||||
<Icon
|
||||
component={IconFatwebPlus}
|
||||
style={{ fontSize: '1.5em' }}
|
||||
@@ -314,7 +450,7 @@ const Role: React.FC = () => {
|
||||
</span>
|
||||
) : undefined}
|
||||
<AntdCheckbox
|
||||
checked={useRegex}
|
||||
checked={isUseRegex}
|
||||
onChange={handleOnUseRegexChange}
|
||||
>
|
||||
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
|
||||
@@ -340,13 +476,70 @@ const Role: React.FC = () => {
|
||||
columns={dataColumns}
|
||||
rowKey={(record) => record.id}
|
||||
pagination={tableParams.pagination}
|
||||
loading={loading}
|
||||
loading={isLoading}
|
||||
onChange={handleOnTableChange}
|
||||
/>
|
||||
</Card>
|
||||
</FlexBox>
|
||||
</HideScrollbar>
|
||||
</FitFullScreen>
|
||||
<AntdDrawer
|
||||
title={isDrawerEdit ? '编辑角色' : '添加角色'}
|
||||
onClose={handleOnDrawerClose}
|
||||
open={isDrawerOpen}
|
||||
closable={!isSubmitting}
|
||||
maskClosable={!isSubmitting}
|
||||
extra={
|
||||
<AntdSpace>
|
||||
<AntdTooltip title={'刷新权限列表'}>
|
||||
<AntdButton onClick={getPowerTreeData} disabled={isSubmitting}>
|
||||
<Icon component={IconFatwebRefresh} />
|
||||
</AntdButton>
|
||||
</AntdTooltip>
|
||||
<AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
|
||||
取消
|
||||
</AntdButton>
|
||||
<AntdButton
|
||||
type={'primary'}
|
||||
disabled={!submittable}
|
||||
loading={isSubmitting}
|
||||
onClick={handleOnSubmit}
|
||||
>
|
||||
提交
|
||||
</AntdButton>
|
||||
</AntdSpace>
|
||||
}
|
||||
>
|
||||
<AntdForm form={form} disabled={isSubmitting}>
|
||||
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
|
||||
<AntdInput disabled />
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item
|
||||
name={'name'}
|
||||
label={'名称'}
|
||||
rules={[{ required: true, whitespace: false }]}
|
||||
>
|
||||
<AntdInput allowClear />
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item name={'powerIds'} label={'权限'}>
|
||||
<AntdTreeSelect
|
||||
treeData={powerTreeData}
|
||||
treeCheckable
|
||||
treeNodeLabelProp={'fullTitle'}
|
||||
allowClear
|
||||
loading={isLoadingPower}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item
|
||||
valuePropName={'checked'}
|
||||
name={'enable'}
|
||||
label={'启用'}
|
||||
rules={[{ required: true, type: 'boolean' }]}
|
||||
>
|
||||
<AntdSwitch />
|
||||
</AntdForm.Item>
|
||||
</AntdForm>
|
||||
</AntdDrawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user