ApitalModal.tsx
4.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React, { useEffect, useState } from "react";
import { Modal, Form, Input, Select, message } from "antd";
import { useStore } from "../index";
import { saveApitalAccountApi } from "../api";
const FormItem = Form.Item;
const { Option } = Select;
export default function CreateModal() {
const { visiData, dealers, brands, setLoading, triggerModal, companys } = useStore();
const [form] = Form.useForm();
const [saveLoading, setSaveLoading] = useState(false);
useEffect(() => {
if (visiData.visible) {
form.setFieldsValue({
name: visiData.row.name,
includeDealers: visiData.row.includeDealers ? visiData.row.includeDealers.map((item) => item.id) : [],
brand: visiData.row.brandId ? { key: visiData.row.brandId, label: visiData.row.brandName } : undefined,
creditDealer: visiData.row.creditDealerId
? { key: visiData.row.creditDealerId, label: visiData.row.creditDealerName }
: undefined,
company: visiData.row.mefCompId ? { key: visiData.row.mefCompId, label: visiData.row.mefCompName } : undefined,
});
}
}, [visiData.visible]);
function submit(item: any) {
setSaveLoading(true);
const params = {
...visiData.row,
...item,
brandId: item.brand && item.brand.key,
brandName: item.brand && item.brand.label,
creditDealerId: item.creditDealer && item.creditDealer.key,
creditDealerName: item.creditDealer && item.creditDealer.label,
mefCompId: item.company && item.company.key,
mefCompName: item.company && item.company.label,
};
saveApitalAccountApi(params)
.then((res) => {
message.success(res.result || "保存成功");
triggerModal();
setSaveLoading(false);
setLoading(true);
})
.catch((err) => {
message.error(err.message);
setSaveLoading(false);
});
}
return (
<Modal
title={`${visiData.row.id ? "编辑" : "新增"}投资主体`}
open={visiData.visible}
onOk={form.submit}
onCancel={() => triggerModal()}
maskClosable={false}
confirmLoading={saveLoading}
>
<Form form={form} onFinish={submit} labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
<FormItem name="brand" label="品牌" rules={[{ required: true, message: "请选择品牌" }]}>
<Select placeholder="请选择品牌" labelInValue style={{ width: "100%" }} optionFilterProp="children">
{brands.map((brand) => (
<Option key={brand.id} value={brand.id}>
{brand.name}
</Option>
))}
</Select>
</FormItem>
<FormItem name="company" label="主机厂" rules={[{ required: true, message: "请选择主机厂" }]}>
<Select placeholder="请选择主机厂" labelInValue style={{ width: "100%" }} optionFilterProp="children">
{companys.map((comp) => (
<Option key={comp.id} value={comp.id}>
{comp.name}
</Option>
))}
</Select>
</FormItem>
<FormItem name="name" label="投资主体" rules={[{ required: true, message: "请填入投资主体" }]}>
<Input placeholder="请填入投资主体" />
</FormItem>
<FormItem name="includeDealers" label="商家" rules={[{ required: true, message: "请选择商家" }]}>
<Select
allowClear
placeholder="请选择商家"
style={{ width: "100%" }}
mode="multiple"
showSearch
optionFilterProp="children"
>
{dealers.map((dealer) => (
<Option key={dealer.id} value={dealer.id}>
{dealer.name}
</Option>
))}
</Select>
</FormItem>
<FormItem name="creditDealer" label="授信商家" rules={[{ required: true, message: "请选择授信商家" }]}>
<Select
placeholder="请选择授信商家"
labelInValue
style={{ width: "100%" }}
showSearch
optionFilterProp="children"
>
{dealers.map((dealer) => (
<Option key={dealer.id} value={dealer.id}>
{dealer.name}
</Option>
))}
</Select>
</FormItem>
</Form>
</Modal>
);
}