wsj
3 days ago cd2b7d36f3610417c268d062454b7ec43e9ca937
src/pages/system/users/components/UserFormDrawer.tsx
@@ -1,13 +1,12 @@
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';
@@ -24,6 +23,10 @@
  label: string;
  children?: OrgCascaderOption[];
}
/** 去掉最外层公司节点,只保留公司下的组织用于选择。 */
const getSelectableOrgNodes = (nodes: OrgTreeNode[]): OrgTreeNode[] =>
  nodes.flatMap((node) => (node.children?.length ? node.children : [node]));
/** 组织树转为级联选择选项,按层级展示。 */
const toCascaderOptions = (nodes: OrgTreeNode[]): OrgCascaderOption[] =>
@@ -65,7 +68,7 @@
): 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,
@@ -87,7 +90,10 @@
  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;
@@ -196,30 +202,39 @@
          >
            <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>
@@ -228,14 +243,6 @@
          </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"