132 lines
4.6 KiB
TypeScript
132 lines
4.6 KiB
TypeScript
import DepartmentSelect from "@web/src/components/models/department/department-select";
|
||
import { Form, Input, Button, Select } from "antd";
|
||
import { motion } from "framer-motion";
|
||
|
||
export interface RegisterFormData {
|
||
deptId: string;
|
||
username: string;
|
||
showname: string;
|
||
officerId: string;
|
||
password: string;
|
||
repeatPass: string;
|
||
}
|
||
|
||
interface RegisterFormProps {
|
||
onSubmit: (data: RegisterFormData) => void;
|
||
isLoading: boolean;
|
||
}
|
||
|
||
export const RegisterForm = ({ onSubmit, isLoading }: RegisterFormProps) => {
|
||
const [form] = Form.useForm<RegisterFormData>();
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={onSubmit}
|
||
scrollToFirstError
|
||
>
|
||
<Form.Item
|
||
name="deptId"
|
||
label="部门"
|
||
rules={[
|
||
{ required: true, message: "请选择部门" }
|
||
]}
|
||
>
|
||
<DepartmentSelect></DepartmentSelect>
|
||
|
||
</Form.Item>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<Form.Item
|
||
name="username"
|
||
label="用户名"
|
||
rules={[
|
||
{ required: true, message: "请输入用户名" },
|
||
{ min: 2, message: "用户名至少需要2个字符" }
|
||
]}
|
||
>
|
||
<Input placeholder="用户名" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="showname"
|
||
label="姓名"
|
||
rules={[
|
||
{ required: true, message: "请输入姓名" },
|
||
{ min: 2, message: "姓名至少需要2个字符" }
|
||
]}
|
||
>
|
||
<Input placeholder="姓名" />
|
||
</Form.Item>
|
||
</div>
|
||
|
||
<Form.Item
|
||
name="officerId"
|
||
label="证件号"
|
||
rules={[
|
||
{ required: true, message: "请输入证件号" },
|
||
{
|
||
pattern: /^\d{5,12}$/,
|
||
message: "请输入有效的证件号（5-12位数字）"
|
||
}
|
||
]}
|
||
>
|
||
<Input placeholder="证件号" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="password"
|
||
label="密码"
|
||
rules={[
|
||
{ required: true, message: "请输入密码" },
|
||
{ min: 8, message: "密码至少需要8个字符" },
|
||
{
|
||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
|
||
message: "密码必须包含大小写字母、数字和特殊字符"
|
||
}
|
||
]}
|
||
>
|
||
<Input.Password placeholder="密码" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="repeatPass"
|
||
label="确认密码"
|
||
dependencies={['password']}
|
||
rules={[
|
||
{ required: true, message: "请确认密码" },
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
if (!value || getFieldValue('password') === value) {
|
||
return Promise.resolve();
|
||
}
|
||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||
},
|
||
}),
|
||
]}
|
||
>
|
||
<Input.Password placeholder="确认密码" />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Button
|
||
type="primary"
|
||
htmlType="submit"
|
||
loading={isLoading}
|
||
className="w-full h-10 rounded-lg"
|
||
>
|
||
{isLoading ? "正在注册..." : "注册"}
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</motion.div>
|
||
);
|
||
};
|