供应商退出、准入、 工作台
This commit is contained in:
193
src/components/CompanyInfo/component/BankFormModal.tsx
Normal file
193
src/components/CompanyInfo/component/BankFormModal.tsx
Normal file
@ -0,0 +1,193 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Form, Input, Button, Upload, message, Row, Col, Descriptions } from 'antd';
|
||||
import type { UploadProps } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { uploadFile, bankView, bankAdd, bankEdit } from '../services';
|
||||
interface props {
|
||||
visible: boolean;
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
initialValues?: any;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
interface viewDataData {
|
||||
id?: string | null;
|
||||
account?: string;
|
||||
accountName?: string;
|
||||
bank?: string;
|
||||
city?: string;
|
||||
currency?: string;
|
||||
interbankNumber?: string;
|
||||
nation?: string;
|
||||
province?: string;
|
||||
supplierId?: string;
|
||||
swiftCode?: null;
|
||||
attachment?: {
|
||||
uid: string;
|
||||
name: string;
|
||||
url: string;
|
||||
status: string;
|
||||
}[];
|
||||
}
|
||||
const InvoiceFormModal: React.FC<props> = ({
|
||||
visible,
|
||||
onOk,
|
||||
onCancel,
|
||||
initialValues,
|
||||
readOnly = false,
|
||||
}) => {
|
||||
// 新增与修改
|
||||
const [form] = Form.useForm();
|
||||
//查看
|
||||
const [viewData, setViewData] = useState<viewDataData>({});
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
if (initialValues) {
|
||||
bankView(initialValues.id).then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code === 200) {
|
||||
const fields = {
|
||||
...data,
|
||||
id: data.id ? data.id : null,
|
||||
};
|
||||
form.setFieldsValue(fields);
|
||||
setViewData(fields);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
form.resetFields(); // ✅ 只有无 initialValues 才重置
|
||||
}
|
||||
}
|
||||
}, [visible, initialValues]);
|
||||
|
||||
// 提交
|
||||
const handleFinish = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const payload = {
|
||||
...values,
|
||||
"supplierId": "9c12e8ea-a681-4184-81ba-5fa276299a00",
|
||||
};
|
||||
|
||||
if (!values.id) {
|
||||
bankAdd(payload).then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success('新增成功');
|
||||
onOk();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
bankEdit(payload).then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success('修改成功');
|
||||
onOk();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('表单校验失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
//上传接口
|
||||
const uploadProps: UploadProps = {
|
||||
name: 'file',
|
||||
showUploadList: true,
|
||||
customRequest: async ({ file, onSuccess, onError }) => {
|
||||
try {
|
||||
const realFile = file as File;
|
||||
const res = await uploadFile(realFile);
|
||||
const uploadedFile = {
|
||||
uid: res.fileSize,
|
||||
name: res.fileName,
|
||||
status: 'done',
|
||||
url: res.url,
|
||||
response: res,
|
||||
};
|
||||
onSuccess?.(uploadedFile, new XMLHttpRequest())
|
||||
message.success('上传成功');
|
||||
} catch (err: any) {
|
||||
onError?.(err);
|
||||
message.error(err.message || '上传失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={readOnly ? '查看' : initialValues ? '修改' : '新增'}
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={readOnly ? onCancel : handleFinish}
|
||||
footer={readOnly ? null : undefined}
|
||||
destroyOnClose
|
||||
width={600}
|
||||
>
|
||||
{readOnly ? (
|
||||
<Descriptions
|
||||
column={1}
|
||||
bordered
|
||||
size="middle"
|
||||
labelStyle={{ width: 160 }}
|
||||
>
|
||||
<Descriptions.Item label="开户账号">{viewData.account}</Descriptions.Item>
|
||||
<Descriptions.Item label="账户名称">{viewData.accountName}</Descriptions.Item>
|
||||
<Descriptions.Item label="开户银行">{viewData.bank}</Descriptions.Item>
|
||||
<Descriptions.Item label="联行号">{viewData.interbankNumber}</Descriptions.Item>
|
||||
<Descriptions.Item label="省份">{viewData.province}</Descriptions.Item>
|
||||
<Descriptions.Item label="城市">{viewData.city}</Descriptions.Item>
|
||||
<Descriptions.Item label="国家/地区">{viewData.nation}</Descriptions.Item>
|
||||
<Descriptions.Item label="币种">{viewData.currency}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
) : (
|
||||
<Form form={form} labelCol={{ flex: '120px' }} wrapperCol={{ flex: 1 }}>
|
||||
<Row gutter={24}>
|
||||
<Col span={24}>
|
||||
<Form.Item name="account" label="开户账号" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="accountName" label="账户名称" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="bank" label="开户银行" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="interbankNumber" label="联行号" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="province" label="省份" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="city" label="城市" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="nation" label="国家/地区" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="currency" label="币种" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvoiceFormModal;
|
Reference in New Issue
Block a user