index.tsx
10.7 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
import React, { useState, useEffect, useMemo } from 'react';
import { Card, Form, Input, Button, Select, Row, message, InputNumber, Radio, Switch, Modal } from 'antd';
import * as api from './api';
import { useStore } from '../../index';
import SpecList from './SpecList';
import { history } from 'umi';
import SelectStandardName from './SelectStandardName';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import SelectPartsTable from './SelectPartsTable';
import { getNamePart } from '@/pages/capital/StandardMange/api';
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 16 },
};
const Option = Select.Option;
const RadioGroup = Radio.Group;
export default function AddItem() {
const { typeName, data = [], currentItem = {}, unitItem, setBreadcrumbs, setLoading, setCurrentBreadcrumb, setIsPart, editDisabled } = useStore();
const [saveConfig, setSaveConfig] = useState<boolean>(false);
const [nameId, setNameId] = useState<number>();
const [visible, setVisible] = useState(false);
const [partValue, setPartValue] = useState<{
partId?: number, partCode?: string,
}>({});
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue({
status: true,
...currentItem,
unit: currentItem.unit ? currentItem.unit : undefined,
specList: currentItem.specList || [],
premise: currentItem.premise || 0,
part: Number(currentItem.part) || 0,
purchaseChannelList: currentItem.purchaseChannelList && JSON.stringify(currentItem) != '{}' ? currentItem.purchaseChannelList.map(i => ({ value: i.subjectId, label: i.subjectName })) : undefined,
});
currentItem.partCode && setPartValue({ partCode: currentItem.partCode, partId: currentItem.partId });
}, []);
function save(feildValue: any) {
const params = {
...feildValue,
...partValue,
id: currentItem.id,
name: currentItem.name || feildValue.name.label || feildValue.name,
nameId: currentItem.nameId || feildValue.name.value || nameId,
unit: feildValue.unit.label || currentItem.unit,
maxPrice: feildValue.maxPrice || 0,
purchaseChannelList: feildValue.purchaseChannelList.map((i: any) => ({ subjectId: i.value, subjectName: i.label }))
};
setSaveConfig(true);
api.saveForm(params).then(res => {
setSaveConfig(false);
setNameId(undefined);
setPartValue({});
if (res.data && !currentItem.id) {
Modal.confirm({
title: '保存成功',
icon: <ExclamationCircleOutlined />,
content: '是否跳转授权物品领用？',
okText: '去授权',
cancelText: '返回',
onOk() {
history.push(`/ams/standardMange/receive/rules/goods/${res.data}/name`);
},
onCancel() {
setLoading(true);
setBreadcrumbs([{ name: '列表', key: 'list' }]);
setCurrentBreadcrumb({ name: '列表', key: 'list' });
},
});
return;
}
message.success('保存成功');
setLoading(true);
setBreadcrumbs([{ name: '列表', key: 'list' }]);
setCurrentBreadcrumb({ name: '列表', key: 'list' });
}).catch(e => {
message.error(e.message);
}).finally(() => {
setSaveConfig(false);
});
}
function changeSpc(value: number) {
setIsPart(!!value);
form.setFieldsValue({ name: undefined, specList: [] });
}
/**选择配件处理成规格型号数据 */
function onSelct(item: any) {
const spec = [
{ name: "配件编码", code: "partCode" },
{ name: "配件件号", code: "partNo" },
{ name: "类型", code: "typeName" },
{ name: "品牌", code: "brandNames" }
].map((i, key) => ({
sort: key,
specDetails: item[i.code],
standardSpecName: i.name,
}));
if (!item.brandNames) {
spec.splice(3, 1);
}
getNamePart(item.partCode).then(res => {
const { id } = res.data || {};
setNameId(id);
}).catch(e => {
message.error(e.message);
});
setPartValue({ partCode: item.partCode, partId: item.id });
form.setFieldsValue({ name: item.partName, partCode: item.partCode, partId: item.id, specList: spec, type: 2 });
}
return (
<Card>
<h1 style={{ marginBottom: 20 }}>1.基本信息</h1>
<Form {...layout} form={form} onFinish={save}>
<Form.Item label="是否配件" name="part" rules={[{ required: true, message: '请选择' }]}>
<RadioGroup disabled={!!editDisabled} onChange={(e) => { changeSpc(e.target.value); }}>
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
</RadioGroup>
</Form.Item>
<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.part != currentValues.part}>
{({ getFieldValue }): any => {
return getFieldValue("part") ? (
<Form.Item name="name" label="配件名称" rules={[{ required: true, message: '请选择物品名称' }]}>
<Input.Search placeholder="点击选择" disabled={!!currentItem.id} enterButton="选择" onSearch={() => setVisible(true)} />
</Form.Item>
) : (
<Form.Item name="name" label="物品名称" rules={[{ required: true, message: '请选择物品名称' }]}>
<SelectStandardName disabled={!!currentItem.id} onChange={(v) => { form.setFieldsValue({ type: v.type }); }} />
</Form.Item>
);
}}
</Form.Item>
<Form.Item label="物品类型" name="type" rules={[{ required: true, message: '请选择物品类型' }]}>
<Select
placeholder="请选择"
allowClear
disabled
>
{typeName.map(i => (
<Option value={i.type} key={i.type}>{i.name}</Option>
))}
</Select>
</Form.Item>
<Form.Item label="单位" name="unit" rules={[{ required: true, message: '请选择物品单位' }]}>
<Select
placeholder="请选择(可搜索)"
labelInValue
optionFilterProp="children"
showSearch
disabled={!!editDisabled}
>
{unitItem.map((i: StanderList.UnitItem) => (
<Option value={i.id} key={i.id}>{i.unitName}</Option>
))}
</Select>
</Form.Item>
<Form.Item label="状态" name="status" valuePropName="checked" rules={[{ required: true, message: '请选择' }]}>
<Switch disabled={!!editDisabled} checkedChildren="启用" unCheckedChildren="禁用" />
</Form.Item>
<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.type != currentValues.type}>
{({ getFieldValue }): any => {
return getFieldValue("type") === 1 ? (
<Form.Item label="摊销周期 (月)" name="amortizePeriod" rules={[{ required: true, message: '请输入摊销周期' }]}>
<InputNumber disabled={!!editDisabled} min={0} style={{ width: '100%' }} placeholder="请输入" />
</Form.Item>
) : null;
}}
</Form.Item>
<Form.Item label="备注" name="remark">
<Input.TextArea disabled={!!editDisabled} placeholder="请输入" allowClear />
</Form.Item>
<h1 style={{ marginBottom: 20 }}>2.规格型号</h1>
<Form.Item label="规格配置" name="specList" rules={[{ required: true, message: '请配置规格型号' }]}>
<SpecList />
</Form.Item>
<h1 style={{ marginBottom: 20 }}>3.采购规则</h1>
<Form.Item label="最大采购单价" required>
<Form.Item
name="maxPrice"
noStyle
rules={[{ required: true, message: '最大采购金额（单个物品）' }]}
>
<InputNumber disabled={!!editDisabled} style={{ width: 150 }} min={0} precision={4} placeholder="请输入金额" />
</Form.Item>
<span style={{ marginLeft: 10 }}>元</span>
</Form.Item>
<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.type != currentValues.type}>
{({ getFieldValue }): any => {
return getFieldValue("type") === 3 ? (
<Form.Item label="最小单位采购数量" name="minNum" {...layout} rules={[{ required: true, message: '请输入最小采购数量' }]}>
<InputNumber disabled={!!editDisabled} style={{ width: 150 }} min={0} placeholder="请输入单位数量" />
</Form.Item>
) : null;
}}
</Form.Item>
<Form.Item label="计划提前天数" name="planAheadDay" {...layout}>
<InputNumber disabled={!!editDisabled} style={{ width: 150 }} min={0} placeholder="请输入" />
</Form.Item>
<Form.Item label="采购渠道" name="purchaseChannelList" rules={[{ required: true, message: '请选择采购渠道' }]}>
<Select disabled={!!editDisabled} placeholder="请选择采购渠道" allowClear labelInValue mode="multiple" showSearch optionFilterProp="children">
{(data || []).map((i: any) => (
<Option value={i.id} key={i.id}>{i.name}</Option>
))}
</Select>
</Form.Item>
<h1 style={{ marginBottom: 20 }}>4.领用条件</h1>
<Form.Item label="领用前提条件" name="premise" rules={[{ required: true, message: '请选择' }]}>
<Select disabled={!!editDisabled} placeholder="请选择">
<Option value={0} key={0}>无限制</Option>
<Option value={1} key={1}>入职后</Option>
<Option value={2} key={2}>转正后</Option>
</Select>
</Form.Item>
<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.premise != currentValues.premise}>
{({ getFieldValue }): any => {
const premise = getFieldValue("premise");
return premise ? (
<Form.Item label={premise === 1 ? "入职后" : "转正后"} name="premiseValue" {...layout} rules={[{ required: true, message: '请输入' }]}>
<InputNumber disabled={!!editDisabled} style={{ width: '100%' }} addonAfter="月" min={0} placeholder="请输入领取前提条件值" />
</Form.Item>
) : null;
}}
</Form.Item>
<Row justify="center">
<Button type="primary" onClick={() => { setBreadcrumbs([{ name: '列表', key: 'list' }]); setCurrentBreadcrumb({ name: '列表', key: 'list' }); }}>返回</Button>
<Button style={{ marginLeft: 25 }} type="primary" disabled={!!editDisabled} loading={saveConfig} onClick={() => form.submit()}>保存</Button>
</Row>
</Form>
<SelectPartsTable
visible={visible}
value={[]}
onCancel={() => setVisible(false)}
onChange={onSelct}
/>
</Card>
);
}