LaiToolManagementSystem/src/pages/User/UserManage/ModifyUser/index.tsx

import { QueryRoleOption } from '@/services/services/role';
import { UserInfo } from '@/services/services/user';
import { FormatDate } from '@/util/time';
import { useModel } from '@umijs/max';
import { Button, Col, Form, FormInstance, Input, InputNumber, message, Row, Select, SelectProps, Spin, Tag } from 'antd';
import React, { useEffect, useState } from 'react';

interface ModifyUserProps {
  userId: number;
  setFormRef: (form: FormInstance) => void;
  open: boolean;
}

const ModifyUser: React.FC<ModifyUserProps> = ({ userId, setFormRef, open }) => {
  const [form] = Form.useForm();
  type TagRender = SelectProps['tagRender'];
  const [messageApi, messageHolder] = message.useMessage();
  const [loading, setLoading] = useState<boolean>(true);
  const [spinTip, setSpinTip] = useState<string>("加载中...");
  const [roleNames, setRoleNames] = useState<SelectProps['options']>([]);

  useEffect(() => {
    setFormRef(form);
  }, [form, setFormRef]);

  useEffect(() => {
    setLoading(true);

    QueryRoleOption().then((res: string[]) => {
      let temRoleNames = res.filter(item => item != "Super Admin").map((item) => {
        return {
          value: item
        }
      });
      setRoleNames(temRoleNames);
    }).catch((error: any) => {
      messageApi.error(error.message);
      setLoading(false);
    })

    UserInfo.GetUserInfo(userId).then((res) => {
      let tempRes = {
        ...res,
        createdDate: FormatDate(res.createdDate)
      }
      form.setFieldsValue(tempRes);
    }).catch((error) => {
      messageApi.error(error.message);
    }).finally(() => { setLoading(false); });
  }, [userId, open, form, setFormRef]);



  async function onFinish(values: any): Promise<void> {
    setLoading(true);
    setSpinTip("修改中...");
    try {
      await UserInfo.UpdatedUserInfo(values);
      messageApi.success("用户修改成功");
    } catch (error: any) {
      messageApi.error(error.message);
    } finally {
      setLoading(false);
    }
  }

  const tagRender: TagRender = (props) => {
    const { label, value, closable, onClose } = props;
    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
      event.preventDefault();
      event.stopPropagation();
    };
    return (
      <Tag
        color="cyan"
        onMouseDown={onPreventMouseDown}
        closable={closable}
        onClose={onClose}
        style={{ marginInlineEnd: 4 }}
      >
        {label}
      </Tag>
    );
  };

  return (
    <>
      <Spin spinning={loading} tip={spinTip}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ width: 800 }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
          initialValues={{
            allDeviceCount: 1,
            agentPercent: 0.5,
            freeCount: 5
          }}
        >
          <Row>
            <Col span={12}>
              <Form.Item
                label="用户ID"
                name="id"
              >
                <Input disabled={true} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="用户名称"
                name="userName"
                rules={[{ required: true, message: '请填写用户名称！' }]}
              >
                <Input />
              </Form.Item>
            </Col>

            <Col span={12}>
              <Form.Item
                label="用户昵称"
                name="nickName"
                rules={[{ required: true, message: '请填写用户昵称！' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="邮箱"
                name="email"
                rules={[{ required: true, message: '请填写邮箱！' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="电话号码"
                name="phoneNumber"
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="角色名称"
                name="roleNames"
                rules={[{ required: true, message: '请选择角色名称！' }]}
              >
                <Select
                  mode="multiple"
                  tagRender={tagRender}
                  style={{ width: '260px' }}
                  options={roleNames}
                  allowClear
                  placeholder="请选择角色分组"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="可激活设备"
                name="allDeviceCount"
                rules={[{ required: true, message: '请设置可激活设置！' }]}
              >
                <InputNumber min={0} step="1" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="代理分成"
                name="agentPercent"
                rules={[{ required: true, message: '请设置代理分成！' }]}
              >
                <InputNumber min={0.1} max={0.7} step="0.01" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="免费换绑次数"
                name="freeCount"
                rules={[{ required: true, message: '请设置免费换绑次数！' }]}
              >
                <InputNumber min={1} step="1" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="注册时间"
                name="createdDate"
                rules={[{ required: true, message: '请选择注册时间！' }]}
              >
                <Input disabled={true} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="备注"
                name="remark"
                rules={[{ required: true, message: '请输入备注！' }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item wrapperCol={{ offset: 4, span: 3 }}>
            <Button type="primary" htmlType="submit">
              提交修改
            </Button>
          </Form.Item>
        </Form>
      </Spin>
      {messageHolder}
    </>
  );
};

export default ModifyUser;