129 lines
4.5 KiB
TypeScript
129 lines
4.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Button, Form, Input, Select, DatePicker, Radio, message, Modal, Cascader, InputNumber } from "antd";
|
||
|
|
import { useState, useMemo } from "react";
|
||
|
|
import { useStaff } from "@nice/client";
|
||
|
|
import { areaOptions } from './area-options';
|
||
|
|
const { TextArea } = Input;
|
||
|
|
|
||
|
|
const StaffInfoWrite = () => {
|
||
|
|
const [form] = Form.useForm();
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const { create, useCustomFields } = useStaff();
|
||
|
|
const { data: fields, isLoading: fieldsLoading } = useCustomFields();
|
||
|
|
|
||
|
|
// 按分组组织字段
|
||
|
|
const fieldGroups = useMemo(() => {
|
||
|
|
if (!fields) return {};
|
||
|
|
return fields.reduce((groups: any, field: any) => {
|
||
|
|
const group = field.group || '其他信息';
|
||
|
|
if (!groups[group]) {
|
||
|
|
groups[group] = [];
|
||
|
|
}
|
||
|
|
groups[group].push(field);
|
||
|
|
return groups;
|
||
|
|
}, {});
|
||
|
|
}, [fields]);
|
||
|
|
|
||
|
|
const renderField = (field: any) => {
|
||
|
|
switch (field.type) {
|
||
|
|
case 'text':
|
||
|
|
return <Input />;
|
||
|
|
case 'number':
|
||
|
|
return <InputNumber />;
|
||
|
|
case 'date':
|
||
|
|
return <DatePicker />;
|
||
|
|
case 'select':
|
||
|
|
// 检查 field.options 是否存在且有数据
|
||
|
|
if (field.options && field.options.length > 0) {
|
||
|
|
return <Select options={field.options} />;
|
||
|
|
}
|
||
|
|
return <Input placeholder="选项数据缺失" />;
|
||
|
|
case 'radio':
|
||
|
|
// 检查 field.options 是否存在且有数据
|
||
|
|
if (field.options && field.options.length > 0) {
|
||
|
|
return <Radio.Group options={field.options} />;
|
||
|
|
}
|
||
|
|
return <Input placeholder="选项数据缺失" />;
|
||
|
|
case 'textarea':
|
||
|
|
return <Input.TextArea />;
|
||
|
|
default:
|
||
|
|
return <Input />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onFinish = async (values: any) => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
const formattedValues = {
|
||
|
|
...values,
|
||
|
|
birthplace: values.birthplace?.join('/'),
|
||
|
|
};
|
||
|
|
|
||
|
|
await create.mutateAsync({
|
||
|
|
data: formattedValues
|
||
|
|
});
|
||
|
|
|
||
|
|
message.success("信息提交成功");
|
||
|
|
} catch (error) {
|
||
|
|
console.error('提交出错:', error);
|
||
|
|
message.error("提交失败，请重试");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (fieldsLoading) {
|
||
|
|
return <div>加载中...</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-4xl mx-auto p-6">
|
||
|
|
<h1 className="text-2xl font-bold mb-6">人员信息管理</h1>
|
||
|
|
|
||
|
|
{/* 信息填报表单 */}
|
||
|
|
<Form
|
||
|
|
form={form}
|
||
|
|
layout="vertical"
|
||
|
|
onFinish={onFinish}
|
||
|
|
className="space-y-6 mt-6"
|
||
|
|
>
|
||
|
|
{Object.entries(fieldGroups).map(([groupName, groupFields]) => (
|
||
|
|
<div key={groupName} className="bg-white p-6 rounded-lg shadow">
|
||
|
|
<h2 className="text-lg font-semibold mb-4">{groupName}</h2>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
{groupFields.map((field: any) => (
|
||
|
|
<Form.Item
|
||
|
|
key={field.id}
|
||
|
|
label={field.label}
|
||
|
|
name={field.name}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: field.required,
|
||
|
|
message: `请输入${field.label}`,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
{renderField(field)}
|
||
|
|
</Form.Item>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<div className="flex justify-end space-x-4">
|
||
|
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
htmlType="submit"
|
||
|
|
loading={loading}
|
||
|
|
>
|
||
|
|
提交
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StaffInfoWrite;
|