| | |
| | | import { useCallback, useEffect, useMemo, useState } from 'react'; |
| | | import { ProFormCascader, ProFormSelect } from '@ant-design/pro-components'; |
| | | import { |
| | | App as AntdApp, |
| | | Button, |
| | | Cascader, |
| | | Drawer, |
| | | Form, |
| | | Input, |
| | | InputNumber, |
| | | Select, |
| | | Space, |
| | | Spin, |
| | | } from 'antd'; |
| | |
| | | label: string; |
| | | children?: OrgCascaderOption[]; |
| | | } |
| | | |
| | | /** 去掉最外层公司节点,只保留公司下的组织用于选择。 */ |
| | | const getSelectableOrgNodes = (nodes: OrgTreeNode[]): OrgTreeNode[] => |
| | | nodes.flatMap((node) => (node.children?.length ? node.children : [node])); |
| | | |
| | | /** 组织树转为级联选择选项,按层级展示。 */ |
| | | const toCascaderOptions = (nodes: OrgTreeNode[]): OrgCascaderOption[] => |
| | |
| | | ): EmployeeFormValues => ({ |
| | | name: employee.name, |
| | | phone: employee.phone, |
| | | orgPath: findOrgPath(orgTree, employee.orgId) ?? [], |
| | | orgPath: findOrgPath(getSelectableOrgNodes(orgTree), employee.orgId) ?? [], |
| | | roleId: employee.roleId, |
| | | position: employee.position, |
| | | email: employee.email, |
| | |
| | | const [loading, setLoading] = useState(false); |
| | | const { message } = AntdApp.useApp(); |
| | | const isDetail = mode === 'detail'; |
| | | const orgCascaderOptions = useMemo(() => toCascaderOptions(orgTree), [orgTree]); |
| | | const orgCascaderOptions = useMemo( |
| | | () => toCascaderOptions(getSelectableOrgNodes(orgTree)), |
| | | [orgTree], |
| | | ); |
| | | |
| | | useEffect(() => { |
| | | if (!open) return; |
| | |
| | | > |
| | | <Input placeholder="请输入手机号" maxLength={11} disabled={isDetail} /> |
| | | </Form.Item> |
| | | <Form.Item |
| | | <ProFormCascader |
| | | name="orgPath" |
| | | label="所属组织" |
| | | rules={[{ required: true, message: '请选择所属组织' }]} |
| | | > |
| | | <Cascader |
| | | options={orgCascaderOptions} |
| | | changeOnSelect |
| | | showSearch |
| | | placeholder="请选择所属组织" |
| | | disabled={isDetail} |
| | | style={{ width: '100%' }} |
| | | /> |
| | | </Form.Item> |
| | | <Form.Item |
| | | placeholder="请选择所属组织" |
| | | disabled={isDetail} |
| | | fieldProps={{ |
| | | options: orgCascaderOptions, |
| | | changeOnSelect: true, |
| | | showSearch: true, |
| | | style: { width: '100%' }, |
| | | }} |
| | | /> |
| | | <ProFormSelect |
| | | name="roleId" |
| | | label="角色" |
| | | rules={[{ required: true, message: '请选择角色' }]} |
| | | placeholder="请选择角色" |
| | | disabled={isDetail} |
| | | showSearch |
| | | options={roleOptions} |
| | | fieldProps={{ optionFilterProp: 'label', style: { width: '100%' } }} |
| | | /> |
| | | <Form.Item |
| | | name="holdLimit" |
| | | label="客户持有上限" |
| | | rules={[{ required: true, message: '请输入客户持有上限' }]} |
| | | > |
| | | <Select |
| | | showSearch |
| | | optionFilterProp="label" |
| | | options={roleOptions} |
| | | placeholder="请选择角色" |
| | | <InputNumber |
| | | min={0} |
| | | precision={0} |
| | | placeholder="请输入客户持有上限" |
| | | style={{ width: '100%' }} |
| | | disabled={isDetail} |
| | | /> |
| | | </Form.Item> |
| | |
| | | </Form.Item> |
| | | <Form.Item name="region" label="负责区域"> |
| | | <Input placeholder="请输入负责区域" disabled={isDetail} /> |
| | | </Form.Item> |
| | | <Form.Item name="holdLimit" label="客户持有上限"> |
| | | <InputNumber |
| | | min={0} |
| | | precision={0} |
| | | style={{ width: '100%' }} |
| | | disabled={isDetail} |
| | | /> |
| | | </Form.Item> |
| | | <Form.Item |
| | | name="email" |