feat: first commit

2024-10-26 12:10:13 +08:00
parent b244826aa1
commit b064c4cb87
158 changed files with 18888 additions and 1 deletions
--- a/admin/src/pages/user/form.tsx
+++ b/admin/src/pages/user/form.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, Select, Message } from '@arco-design/web-react';
+import UploadFile from '@/components/Upload';
+import { createUser, updateUser } from '@/api/user';
+
+interface Props {
+  record: { [key: string]: any } | null,
+  visible: boolean,
+  handleConfirm: () => void,
+  handleCancel: () => void
+}
+
+function FormComponent(props: Props) {
+  const { visible, record, handleConfirm, handleCancel } = props;
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  const onOk = async () => {
+    try {
+      setConfirmLoading(true);
+      const values = await form.validate();
+      const data = {
+        ...values,
+        avatarId: values.avatar?.[0]?.response ?? null
+      };
+      if (record?.id) {
+        await updateUser(data);
+      } else {
+        await createUser(data);
+      }
+      Message.success(`${record?.id ? '更新' : '新增'}成功！`);
+      handleConfirm();
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setConfirmLoading(false);
+    }
+  };
+
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    record && form.setFieldsValue({
+      ...record,
+      avatar: record.avatar ? [{
+        uid: record.avatar.id,
+        response: record.avatar.id,
+        url: record.avatar.path
+      }] : undefined
+    });
+  }, [record]);
+
+  useEffect(() => {
+    !visible && form.resetFields()
+  }, [visible]);
+
+  return (
+    <Modal
+      title={<span>{`${record?.id ? '更新' : '新增'}用户信息`}</span>}
+      visible={visible}
+      onOk={onOk}
+      onCancel={handleCancel}
+      confirmLoading={confirmLoading}
+    >
+      <Form form={form}>
+        <Form.Item hidden={true} field="id" rules={[{ required: false }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item triggerPropName="fileList" label="用户头像"
+                   field="avatar">
+          <UploadFile limit={1} dir="/user" />
+        </Form.Item>
+        <Form.Item label="用户昵称" field="name" rules={[{ required: true }]}>
+          <Input placeholder="请输入用户昵称" />
+        </Form.Item>
+        <Form.Item disabled={record?.id} label="用户账号" field="account" rules={[{ required: true }]}>
+          <Input placeholder="请输入用户账号" />
+        </Form.Item>
+        {!record?.id && <Form.Item label="用户密码" field="password" rules={[{ required: true }]}>
+          <Input type="password" placeholder="请输入用户密码" />
+        </Form.Item>}
+
+        <Form.Item label="用户状态" field="status" rules={[{ required: true }]}>
+          <Select placeholder="请选择" options={[{ label: '启用', value: 1 }, { label: '禁用', value: 0 }]} />
+        </Form.Item>
+        <Form.Item label="用户性别" field="gender" rules={[{ required: true }]}>
+          <Select placeholder="请选择"
+                  options={[{ label: '女', value: 0 }, { label: '男', value: 1 }, { label: '未知', value: 2 }]} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default FormComponent;