|
@@ -1,17 +1,19 @@
|
|
|
import React, { useState, useEffect, useRef } from 'react'
|
|
|
import { PlusOutlined, InfoCircleOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons'
|
|
|
import { Button, message, Popconfirm, Switch, Tooltip } from 'antd'
|
|
|
-import { useRequest } from 'umi'
|
|
|
+import { useModel, useRequest } from 'umi'
|
|
|
import {
|
|
|
createRoleWithMenuId,
|
|
|
fetchRoleListByMenuId,
|
|
|
deleteRole,
|
|
|
updateStaff
|
|
|
} from '@/services/user/api'
|
|
|
-import type { ProFormInstance } from '@ant-design/pro-form'
|
|
|
+import { ProFormDependency, ProFormSelect } from '@ant-design/pro-form'
|
|
|
import { ModalForm, ProFormText } from '@ant-design/pro-form'
|
|
|
import classNames from 'classnames'
|
|
|
+import type { ProFormInstance } from '@ant-design/pro-form'
|
|
|
import styles from './index.less'
|
|
|
+import consts from '@/utils/consts'
|
|
|
type RoleMenuProps = {
|
|
|
menuId: string
|
|
|
onSelect?: (id: string) => void
|
|
@@ -27,14 +29,17 @@ type RoleMenuState = {
|
|
|
visible: boolean
|
|
|
modalType: ModalType
|
|
|
defaultMenuData: Nullable<{ id: string; name: string }>
|
|
|
+ showExtraFormItem: boolean
|
|
|
}
|
|
|
const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
|
|
|
const formRef = useRef<ProFormInstance>(null)
|
|
|
+ const { initialState } = useModel('@@initialState')
|
|
|
const [state, setState] = useState<RoleMenuState>({
|
|
|
menuRoles: [],
|
|
|
activeId: null,
|
|
|
visible: false,
|
|
|
modalType: ModalType.ADD,
|
|
|
+ showExtraFormItem: false, // 展示额外的表单项
|
|
|
defaultMenuData: null
|
|
|
})
|
|
|
|
|
@@ -104,49 +109,16 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
|
|
|
<div className="h-full w-max-234px rounded-4px">
|
|
|
<div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex items-center justify-around">
|
|
|
<span className="text-[0.9375rem]">角色列表</span>
|
|
|
-
|
|
|
- <ModalForm<{ name: string; backstageMenuId: string }>
|
|
|
- visible={state.visible}
|
|
|
- formRef={formRef}
|
|
|
- onVisibleChange={visible => setState({ ...state, visible })}
|
|
|
- title={state.modalType === ModalType.ADD ? '添加新的角色' : '更新角色'}
|
|
|
- width="500px"
|
|
|
- layout="horizontal"
|
|
|
- trigger={
|
|
|
- <Button size="small" type="primary" ghost>
|
|
|
- <PlusOutlined />
|
|
|
- 创建角色
|
|
|
- </Button>
|
|
|
- }
|
|
|
- onFinish={async values => {
|
|
|
- if (state.modalType === ModalType.ADD) {
|
|
|
- await tryAddRole(values)
|
|
|
- } else {
|
|
|
- console.log(values)
|
|
|
-
|
|
|
- await tryUpdateStaff(values)
|
|
|
- }
|
|
|
- return true
|
|
|
- }}
|
|
|
- initialValues={{ backstageMenuId: menuId }}>
|
|
|
- <ProFormText name="backstageMenuId" hidden />
|
|
|
- <ProFormText name="id" hidden />
|
|
|
- <ProFormText
|
|
|
- name="name"
|
|
|
- label="名称"
|
|
|
- placeholder="请输入角色名称"
|
|
|
- rules={[{ required: true, message: '请输入角色名' }]}
|
|
|
- />
|
|
|
- {state.modalType === ModalType.ADD ? (
|
|
|
- <>
|
|
|
- <Switch onChange={checked => {}} />
|
|
|
- <span className="mx-2">复制角色</span>
|
|
|
- <Tooltip title="该操作允许复制其他栏目的角色并且将所绑定的用户一并复制">
|
|
|
- <InfoCircleOutlined />
|
|
|
- </Tooltip>
|
|
|
- </>
|
|
|
- ) : null}
|
|
|
- </ModalForm>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ ghost
|
|
|
+ onClick={() =>
|
|
|
+ setState({ ...state, visible: true, modalType: ModalType.ADD, defaultMenuData: null })
|
|
|
+ }>
|
|
|
+ <PlusOutlined />
|
|
|
+ 创建角色
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
<div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
|
|
|
<ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
|
|
@@ -185,6 +157,71 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
|
|
|
))}
|
|
|
</ul>
|
|
|
</div>
|
|
|
+ <ModalForm<{ name: string; backstageMenuId: string }>
|
|
|
+ visible={state.visible}
|
|
|
+ formRef={formRef}
|
|
|
+ isKeyPressSubmit
|
|
|
+ onVisibleChange={visible => setState({ ...state, visible })}
|
|
|
+ title={state.modalType === ModalType.ADD ? '添加新的角色' : '更新角色'}
|
|
|
+ width="500px"
|
|
|
+ layout="horizontal"
|
|
|
+ onFinish={async values => {
|
|
|
+ if (state.modalType === ModalType.ADD) {
|
|
|
+ await tryAddRole(values)
|
|
|
+ } else {
|
|
|
+ await tryUpdateStaff(values)
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }}
|
|
|
+ initialValues={{ backstageMenuId: menuId }}>
|
|
|
+ <ProFormText name="backstageMenuId" hidden />
|
|
|
+ <ProFormText name="id" hidden />
|
|
|
+ <ProFormText
|
|
|
+ name="name"
|
|
|
+ label="名称"
|
|
|
+ placeholder="请输入角色名称"
|
|
|
+ rules={[{ required: true, message: '请输入角色名' }]}
|
|
|
+ />
|
|
|
+ {state.modalType === ModalType.ADD ? (
|
|
|
+ <div className="mb-6">
|
|
|
+ <Switch onChange={checked => setState({ ...state, showExtraFormItem: checked })} />
|
|
|
+ <span className="mx-2">复制角色</span>
|
|
|
+ <Tooltip title="该操作允许复制其他栏目的角色并且将所绑定的用户一并复制">
|
|
|
+ <InfoCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+ {state.showExtraFormItem ? (
|
|
|
+ <>
|
|
|
+ <ProFormSelect
|
|
|
+ label="菜单"
|
|
|
+ name="copyMenuId"
|
|
|
+ required
|
|
|
+ options={initialState?.menuList
|
|
|
+ ?.filter(item => item.id !== menuId)
|
|
|
+ .map(item => ({ label: item.name, value: item.id }))}
|
|
|
+ />
|
|
|
+ <ProFormDependency name={['copyMenuId']}>
|
|
|
+ {({ copyMenuId }) => (
|
|
|
+ <ProFormSelect
|
|
|
+ name="roleId"
|
|
|
+ label="角色"
|
|
|
+ required
|
|
|
+ params={copyMenuId}
|
|
|
+ request={async () => {
|
|
|
+ if (!copyMenuId) return []
|
|
|
+ const { code = -1, data = [] } = await fetchRoleListByMenuId(copyMenuId)
|
|
|
+ if (code === consts.RET_CODE.SUCCESS) {
|
|
|
+ return data.map(item => ({ label: item.name, value: item.id }))
|
|
|
+ }
|
|
|
+ return []
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </ProFormDependency>
|
|
|
+ </>
|
|
|
+ ) : null}
|
|
|
+ </ModalForm>
|
|
|
</div>
|
|
|
)
|
|
|
}
|