CreateModal.tsx
7.17 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
import React, { useState, useEffect } from "react";
import { Modal, Form, Input, Select, message, Radio } from "antd";
import { useStore } from "../index";
import { CompanyBusinessTypeEnum, CompanyCategoryTypeEnum, SubjectTypeEnum } from "@/pages/finance/entitys";
import PositionSelector from "@/components/PositionSelector";
import Contact from "./ContactsInput";
import Account from "./AccountsInput";
import { createCompanyApi, updateCompanyApi, getDetailComAccountApi } from "../api";
import AdressSelect from "@/pages/finance/TradeCompany/components/AdressSelect";
const FormItem = Form.Item;
const { Option } = Select;
export default function CreateModal() {
const { visible, setVisible, current, setCurrent, setLoading, comBussinessList, comBussinessLoading, brandList } =
useStore();
const [form] = Form.useForm();
const [savelLoading, setSavelLoading] = useState(false);
const [creditCodeDesc, setCreditCodeDesc] = useState<string>("社会信用代码");
useEffect(() => {
if (visible) {
initData(current.id);
}
}, [visible, current.id]);
async function initData(rowId?: number) {
try {
let item: TradeCompany.CompDetailVO = {};
if (rowId) {
const { data = {} } = await getDetailComAccountApi(rowId);
item = data;
}
form.setFieldsValue({
...item,
compName: item.compName,
compShortName: item.compShortName,
subjectType: item.subjectType,
compType: item.compType || [],
compCategory: item.compCategory || CompanyCategoryTypeEnum["供应商"],
compAddress: item.compAddress,
creditCode: item.creditCode,
brandId: item.brandId,
location: item.compAddress
? {
// address: "",
//@ts-ignored;
address: item.lonLatAddress||"",
point: {
lng: item.longitude,
lat: item.latitude,
},
}
: undefined,
contacts: (item.contacts || []).map((it, i) => ({ ...it, key: i + 1 })),
accounts: (item.accounts || []).map((it, i) => ({ ...it, key: i + 1 })),
});
} catch (e: any) {
message.error(e.message);
setVisible(false);
}
}
function submit(item: any) {
const param = {
id: current.id,
...item,
longitude: Number(item.longitude),
latitude: Number(item.latitude),
lonLatAddress: item.location? item.location.address : "",
};
setSavelLoading(true);
const saveApi = current.id ? updateCompanyApi : createCompanyApi;
saveApi(param)
.then((res) => {
message.success("保存成功");
setLoading(true);
setVisible(false);
setSavelLoading(false);
})
.catch((err) => {
message.error(err.message);
setSavelLoading(false);
});
}
function onCancel() {
setVisible(false);
}
function changeSubjectType(value: number) {
if (value === 1) {
setCreditCodeDesc("身份证号码");
} else {
setCreditCodeDesc("社会信用代码");
}
}
return (
<Modal
title={`${current.id ? "编辑" : "新增"}往来单位`}
visible={visible}
onOk={form.submit}
onCancel={onCancel}
maskClosable={false}
confirmLoading={savelLoading}
afterClose={() => {
setCurrent({});
}}
width="60%"
>
<Form form={form} onFinish={submit} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
<FormItem name="compName" label="往来单位名称" rules={[{ required: true, message: "请填入往来单位名称" }]}>
<Input placeholder="请填入往来单位名称" maxLength={64} />
</FormItem>
<FormItem name="compShortName" label="往来单位简称" rules={[{ required: true, message: "请填入往来单位简称" }]}>
<Input placeholder="请填入往来单位简称" maxLength={64} />
</FormItem>
<FormItem name="subjectType" label="单位主体类型" rules={[{ required: true, message: "请选择主体类型" }]}>
<Select placeholder="请选择主体类型" showSearch onChange={changeSubjectType}>
{[
SubjectTypeEnum["个人"],
SubjectTypeEnum["公司"],
SubjectTypeEnum["个体工商户"],
SubjectTypeEnum["公共组织"],
].map((i) => (
<Option key={i} value={i}>
{SubjectTypeEnum[i]}
</Option>
))}
</Select>
</FormItem>
<FormItem name="compCategory" label="单位类别" rules={[{ required: true, message: "请选择类别" }]}>
<Radio.Group>
<Radio value={CompanyCategoryTypeEnum["供应商"]}>供应商</Radio>
<Radio value={CompanyCategoryTypeEnum["服务商"]}>服务商</Radio>
</Radio.Group>
</FormItem>
<FormItem name="compType" label="业务类型" rules={[{ required: true, message: "请选项类型" }]}>
<Select
placeholder="请选择类型"
mode="multiple"
showSearch
optionFilterProp="children"
loading={comBussinessLoading}
>
{comBussinessList.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</FormItem>
<FormItem noStyle shouldUpdate={(prevValues, currentValues) => prevValues.compType != currentValues.compType}>
{({ getFieldValue }): any => {
const _compType = getFieldValue("compType");
return _compType?.includes(CompanyBusinessTypeEnum["新车采购（主机厂）"]) ||
_compType?.includes(CompanyBusinessTypeEnum["配件采购"]) ? (
<FormItem name="brandId" label="品牌" rules={[{ required: true, message: "请选择品牌" }]}>
<Select placeholder="请选择品牌" showSearch optionFilterProp="children">
{brandList?.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</FormItem>
) : null;
}}
</FormItem>
<FormItem
name="creditCode"
label={creditCodeDesc}
rules={[{ required: true, message: "请输入" + creditCodeDesc }]}
>
<Input placeholder={`请输入${creditCodeDesc}`} maxLength={30} />
</FormItem>
<FormItem name="compAddress" label="通信地址" rules={[{ required: true, message: "请输入地址" }]}>
<Input placeholder="请输入通信地址" />
</FormItem>
{/* <FormItem name="location" label="地理位置" rules={[{ required: true, message: "请配置地址" }]}> */}
{/* <PositionSelector style={{ width: "100%" }} /> */}
<AdressSelect form={form} />
{/* </FormItem> */}
<FormItem name="contacts" label="联系方式" rules={[{ required: true }]}>
<Contact />
</FormItem>
<FormItem name="accounts" label="账户信息" c rules={[{ required: true }]}>
<Account />
</FormItem>
</Form>
</Modal>
);
}