import {
|
Button,
|
Col,
|
DatePicker,
|
Divider,
|
Form,
|
Input,
|
Modal,
|
Row,
|
Select,
|
} from "antd";
|
import React, { useEffect, useState } from "react";
|
import Staff from "./staff";
|
|
interface ApplyProps {
|
visible: boolean;
|
onCancel?: () => void;
|
setFormData: (data: any) => void;
|
applyType: string;
|
title: string;
|
formItems: any[];
|
}
|
|
const Apply: React.FC<ApplyProps> = (props) => {
|
const { visible, setFormDat, onCancel, applyType, title, formItems } = props;
|
|
const [staffVisible, setStaffVisible] = useState(false);
|
const [form] = Form.useForm();
|
|
const onFinish = (values: any) => {
|
console.log(values);
|
// setFormDat(values);
|
};
|
|
// 打开员工列表
|
const onStaffVisible = () => {
|
setStaffVisible(true);
|
};
|
|
// 设置选中员工
|
const onSetStaff = (val: any) => {
|
if (val) {
|
form.setFieldsValue(val);
|
}
|
console.log(val);
|
};
|
|
useEffect(() => {
|
if (visible) {
|
setStaffVisible(false);
|
}
|
}, [visible]);
|
|
// 关闭且重置表单
|
const closeForm = () => {
|
if (onCancel) {
|
onCancel();
|
}
|
form.resetFields();
|
};
|
|
return (
|
<Modal
|
width={910}
|
title={title + "申请"}
|
open={visible}
|
onCancel={closeForm}
|
footer={null}
|
className="ModelForm"
|
>
|
<Form
|
name="basic"
|
initialValues={{ remember: true }}
|
style={{ paddingTop: 20 }}
|
onFinish={onFinish}
|
autoComplete="off"
|
form={form}
|
>
|
<Row>
|
{formItems?.length &&
|
formItems.map((item, index) => {
|
if (item.type === "input") {
|
return (
|
<Col span={item.width > 300 ? 24 : 12} key={index}>
|
<Form.Item
|
labelCol={{ span: item.labelCol }}
|
label={item.label}
|
name={item.name}
|
rules={item.rules}
|
>
|
{item.name !== "name" && (
|
<Input
|
readOnly={item.readOnly}
|
style={{ width: item.width }}
|
/>
|
)}
|
{item.name === "name" && (
|
<Input
|
readOnly={item.readOnly}
|
style={{ width: item.width }}
|
onClick={onStaffVisible}
|
/>
|
)}
|
</Form.Item>
|
</Col>
|
);
|
} else if (item.type === "select") {
|
return (
|
<Col span={12} key={index}>
|
<Form.Item
|
labelCol={{ span: item.labelCol }}
|
label={item.label}
|
name={item.name}
|
rules={item.rules}
|
>
|
<Select
|
options={item?.options}
|
style={{ width: item.width }}
|
/>
|
</Form.Item>
|
</Col>
|
);
|
} else if (item.type === "textArea") {
|
return (
|
<Col span={24} key={index}>
|
<Form.Item
|
labelCol={{ span: item.labelCol }}
|
label={item.label}
|
name={item.name}
|
rules={item.rules}
|
>
|
<Input.TextArea
|
style={{ width: item.width }}
|
showCount
|
maxLength={item?.maxLength || 100}
|
/>
|
</Form.Item>
|
</Col>
|
);
|
} else if (item.type === "divider") {
|
return (
|
<Col span={24} key={index}>
|
<Divider orientation="left" style={{ marginBottom: 20 }}>
|
{item.label}
|
</Divider>
|
</Col>
|
);
|
} else if (item.type === "date") {
|
return (
|
<Col span={12} key={index}>
|
<Form.Item
|
labelCol={{ span: item.labelCol }}
|
label={item.label}
|
name={item.name}
|
rules={item.rules}
|
>
|
<DatePicker style={{ width: item.width }} />
|
</Form.Item>
|
</Col>
|
);
|
} else {
|
return null;
|
}
|
})}
|
</Row>
|
<Form.Item label={null}>
|
<div className="functionBtn">
|
<Button type="primary" htmlType="submit">
|
提交
|
</Button>
|
<Button onClick={closeForm}>关闭</Button>
|
<Staff
|
open={staffVisible}
|
onCancel={() => setStaffVisible(false)}
|
setData={onSetStaff}
|
/>
|
</div>
|
</Form.Item>
|
</Form>
|
</Modal>
|
);
|
};
|
|
export default Apply;
|
