feat: 创建角色支持从别的菜单下复制

src/pages/Role/System/components/RoleMenu/index.tsx

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