vdi/web-fe/src/pages/userList/mod/eidtUser/index.tsx

// index.tsx
import {
  Button,
  Form,
  Input,
  message,
  Modal,
  Radio,
  Select,
  TreeSelect,
} from 'antd';
import React, { useEffect } from 'react';
const { Option } = Select;

interface UserEditModalProps {
  //   visible: boolean;
  orgTreeData: User.OrganizationNode[];
  onCancel: () => void;
  onOk: (values: any) => void;
  confirmLoading?: boolean;
  currentUserInfo?: User.UserModalBaseNode;
  selectedOrg?: number;
}

const UserEditModal: React.FC<UserEditModalProps> = ({
  orgTreeData,
  onCancel,
  onOk,
  confirmLoading = false,
  currentUserInfo,
}) => {
  const { recordData, visible, selectedOrg } = currentUserInfo || {};
  const { user_id } = recordData || {};
  const [form] = Form.useForm();

  useEffect(() => {
    const initialValues = { user_group_id: [selectedOrg], status: 1 };
    form.setFieldsValue(initialValues);
  }, [visible, form,recordData, selectedOrg]);

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onOk(values);
    } catch (error) {
      message.error('请检查表单字段');
    }
  };

  const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
      cell_phone: '${label} is not a valid cell phone number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };

  return (
    <Modal
      title={user_id ? '编辑用户信息' : '新增用户'}
      open={visible}
      onCancel={onCancel}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      width={600}
      maskClosable={false}
      centered={true}
      destroyOnHidden={true}
      cancelText="取消"
      okText="确定"
      //   按钮居中对其
      footer={
        <div style={{ display: 'flex', justifyContent: 'right' }}>
          <Button
            type="primary"
            onClick={handleOk}
            style={{ marginRight: '20px' }}
          >
            确定
          </Button>
          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
            取消
          </Button>
        </div>
      }
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
        style={{ paddingTop: '20px', paddingBottom: '20px' }}
        validateMessages={validateMessages}
      >
        <Form.Item
          name="loginName"
          label="登录名"
          rules={[
            { required: true, message: '请输入登录名' },
            { min: 3, message: '登录名至少3个字符' },
          ]}
        >
          <Input placeholder="请输入登录名" />
        </Form.Item>

        <Form.Item
          name="userName"
          label="用户姓名"
          rules={[{ required: true, message: '请输入用户姓名' }]}
        >
          <Input placeholder="请输入用户姓名" />
        </Form.Item>

        <Form.Item
          name="user_group_id"
          label="用户分组"
          rules={[{ required: true, message: '请选择用户分组' }]}
        >
          <TreeSelect
            showSearch
            allowClear={false}
            treeDefaultExpandAll
            placeholder="请选择用户分组"
            treeData={orgTreeData}
            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
          />
        </Form.Item>

        <Form.Item
          name="status"
          label="状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Radio.Group>
            <Radio value={1}>启用</Radio>
            <Radio value={2}>禁用</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          name="userType"
          label="用户类别"
          rules={[{ required: true, message: '请选择用户类别' }]}
        >
          <Select placeholder="请选择用户类别">
            <Option value="internal">内部员工</Option>
            <Option value="external">外部用户</Option>
            <Option value="partner">合作伙伴</Option>
            <Option value="temporary">临时用户</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="idCard"
          label="身份证号"
          rules={[
            { required: true, message: '请输入身份证号' },
            {
              pattern:
                /^[1-9]\d{5}(18|19|20|21|22|23|24|25|26|27|28|29|30|31)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20)$/,
              message: '请输入有效的身份证号',
            },
          ]}
        >
          <Input placeholder="请输入身份证号" />
        </Form.Item>

        <Form.Item
          name="gender"
          label="性别"
          rules={[{ required: false, message: '请选择性别' }]}
        >
          <Select placeholder="请选择性别">
            <Option value="male">男</Option>
            <Option value="female">女</Option>
            <Option value="other">其他</Option>
            <Option value="prefer-not-to-say">不愿透露</Option>
          </Select>
        </Form.Item>
        {/* 电话号码 */}
        <Form.Item
          name="cell_phone"
          label="电话号码"
          rules={[{ required: false, message: '请输入电话号码' }]}
        >
          <Input placeholder="请输入电话号码" />
        </Form.Item>
        {/* 邮箱 */}
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            { required: false, message: '请输入邮箱' },
            { type: 'email', message: '请输入有效的邮箱地址' },
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default UserEditModal;