现场人员管理
This commit is contained in:
zhangyx
203
src/pages/SitePerson/components/SitePersonModal.tsx
Normal file
203
src/pages/SitePerson/components/SitePersonModal.tsx
Normal file
@ -0,0 +1,203 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Form, Input, Modal, Spin, Button, Tooltip, Radio, RadioChangeEvent } from 'antd';
|
||||
import { getSessionUserData } from '@/utils/session';
|
||||
|
||||
|
||||
interface SitePersonModalProps {
|
||||
title: any;
|
||||
modalVisible: boolean;
|
||||
values: any;
|
||||
onSubmit: any;
|
||||
type: string;
|
||||
onCancel: () => void;
|
||||
}
|
||||
const layout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 12 },
|
||||
};
|
||||
const SitePersonModal: React.FC<SitePersonModalProps> = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const { title, modalVisible, type, values, onSubmit: handleUpdate, onCancel } = props;
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const organizationId = getSessionUserData().organizationId;
|
||||
const organizationName = getSessionUserData().organizationName;
|
||||
const [value, setValue] = useState<string>("0");
|
||||
|
||||
const onChange = (e: RadioChangeEvent) => {
|
||||
console.log('radio checked', e.target.value);
|
||||
setValue(e.target.value);
|
||||
};
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (JSON.stringify(values) !== "{}") {
|
||||
setValue(values.bankFlag);
|
||||
form.setFieldsValue({
|
||||
"id": values.id,
|
||||
"accountName": values.accountName,
|
||||
"cardNumber": values.cardNumber,
|
||||
"bank": values.bank,
|
||||
"bankOutlets": values.bankOutlets,
|
||||
"bankUnionNumber": values.bankUnionNumber,
|
||||
"bankFlag": values.bankFlag,
|
||||
"companyId": values.companyId,
|
||||
"companyName": values.companyName,
|
||||
"type": values.type,
|
||||
"contactName": values.contactName,
|
||||
"contactPhone": values.contactPhone,
|
||||
"contactMail": values.contactMail,
|
||||
});
|
||||
} else {
|
||||
form.setFieldsValue({
|
||||
"accountName": organizationName,
|
||||
"companyId": organizationId,
|
||||
"companyName": organizationName,
|
||||
"type": "0",
|
||||
});
|
||||
}
|
||||
}, [values])
|
||||
|
||||
|
||||
|
||||
const onOk = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
setLoading(true)
|
||||
let tzsState = {
|
||||
state: "1"
|
||||
}
|
||||
if (form.getFieldValue('bankFlag') == "0") {
|
||||
fieldsValue["bank"] = "中信银行"
|
||||
}
|
||||
await handleUpdate({ ...fieldsValue, ...tzsState }).finally(() => {
|
||||
setLoading(false)
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const renderFooter = () => {
|
||||
if (type == "read") {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>关闭</Button>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Button type="primary" loading={loading} onClick={onOk}>确认</Button>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose={true}
|
||||
title={title}
|
||||
visible={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
width={"60%"}
|
||||
centered
|
||||
footer={renderFooter()}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="nest-messages"
|
||||
form={form}
|
||||
preserve={false}
|
||||
>
|
||||
<Form.Item name="id" label="id" hidden>
|
||||
<Input hidden />
|
||||
</Form.Item>
|
||||
<Form.Item name="companyId" label="公司id" hidden>
|
||||
<Input hidden />
|
||||
</Form.Item>
|
||||
<Form.Item name="companyName" label="公司名称" hidden>
|
||||
<Input hidden />
|
||||
</Form.Item>
|
||||
<Form.Item name="type" label="账户类型：0-基本账户" hidden>
|
||||
<Input hidden />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="账号名称"
|
||||
name="accountName"
|
||||
rules={[{ required: true, message: '当前项不可为空', },]}
|
||||
>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="银行账号"
|
||||
name="cardNumber"
|
||||
rules={[{ required: true, message: '当前项不可为空', }, { pattern: /^\d{12,20}$/, message: '请输入正确的银行账号' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="是否中信银行账号"
|
||||
name="bankFlag"
|
||||
rules={[{ required: true, message: '当前项不可为空', }]}
|
||||
>
|
||||
<Radio.Group onChange={onChange} value={value}>
|
||||
<Radio value="0">中信银行</Radio>
|
||||
<Radio value="1">其他银行</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
{value == "1" ?
|
||||
<Form.Item
|
||||
label="开户银行"
|
||||
name="bank"
|
||||
rules={[{ required: true, message: '当前项不可为空', },]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
: null}
|
||||
<Form.Item
|
||||
label="开户网点"
|
||||
name="bankOutlets"
|
||||
rules={[{ required: true, message: '当前项不可为空', },]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="开户行银联号"
|
||||
name="bankUnionNumber"
|
||||
rules={[{ required: true, message: '当前项不可为空', }]}// , { pattern: /^\d{12}$/, message: '请输入正确的开户行银联号' }
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="联系人名称"
|
||||
name="contactName"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="联系电话"
|
||||
name="contactPhone"
|
||||
rules={[{ required: true },
|
||||
{ pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的电话号码' }
|
||||
]}
|
||||
extra="仅支持联通号段，其他运营商号段暂不支持"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="邮箱"
|
||||
name="contactMail"
|
||||
rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default SitePersonModal;
|
||||
Reference in New Issue
Block a user