PartShopModal.tsx
4.58 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
import React, { useEffect, useState } from 'react';
import { Modal, Button, Form, Select, InputNumber, message, Input, MessageArgsProps } from 'antd';
import { useStore } from '../index';
import ChoosePart from './ChoosePart';
import { savePartStockApi, savePartPriceApi } from '../api';
const { Item } = Form;
const { Option } = Select;
const apiObj: { [key: number]: any } = {
1: savePartPriceApi,
0: savePartStockApi
};
export default function PartShopModal() {
const { visible, setVisible, shops, setLoading, item = {}, setItem, isprice, setIsprice, isadd, setIsadd, fw } = useStore();
const [form] = Form.useForm();
const [confirmLoading, setConfirmLoading] = useState(false);
useEffect(() => {
if (visible) {
form.setFieldsValue({...item, part: {...item}});
} else {
setIsadd(false);
setIsprice(false);
setItem({});
form.resetFields();
}
}, [visible]);
const handleSubmit = () => {
form.validateFields().then(values => {
const params = {
...item,
partId: values.part.partId,
costPrice: values.costPrice,
stock: values.stock || 0,
lockStock: values.lockStock || 0,
shopId: values.shopId,
user: values.user,
fixRemark: values.fixRemark,
type: isadd ? 1 : isprice ? 3 : 2
};
setConfirmLoading(true);
apiObj[Number(isprice)](params).then((res: { success: any; result: {} | null | undefined; }) => {
if (res.success) {
message.success(res.result);
setVisible(false);
setLoading(true);
setConfirmLoading(false);
} else {
setConfirmLoading(false);
message.error(res.result);
}
}).catch((error: { message: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | MessageArgsProps | null | undefined; }) => {
setConfirmLoading(false);
message.error(error.message);
});
});
};
const validatorLockStock = (rule: any, value: number) => {
if (value > form.getFieldsValue(['stock']).stock) {
return Promise.reject(new Error('锁定库存不能超过总库存数量!'));
} else return Promise.resolve();
};
return (
<Modal
title={`${item.id ? "修改" : "新增"}服务站配件${isprice ? "价格" : ""}`}
destroyOnClose
visible={visible}
maskClosable={false}
onCancel={() => setVisible(false)}
footer={[
<Button key="1" type="default" loading={confirmLoading} onClick={() => setVisible(false)}>取消</Button>,
<Button key="2" type="primary" loading={confirmLoading} onClick={() => handleSubmit()}>确定</Button>
]}
>
<Form
form={form}
labelCol={{
xs: { span: 24 },
sm: { span: 6 }
}}
wrapperCol={{
xs: { span: 24 },
sm: { span: 18 }
}}
>
<Item label="服务站" name="shopId" rules={[{ required: true, message: "请选择服务站" }]}>
<Select placeholder="请选择服务站" disabled={!!item.id} allowClear showSearch optionFilterProp="children">
{shops.map((item: PmsStoragePartShop.Option) => <Option key={item.id} value={item.id || 0}>{item.name || ""}</Option>)}
</Select>
</Item>
<Item label="配件名称(编码)" name="part" rules={[{ required: true, message: "请选择配件" }]}>
<ChoosePart disabled={!!item.id} />
</Item>
<Item label="加权成本价(元)" name="costPrice" rules={[{ required: true, message: "请输入加权成本价" }]}>
<InputNumber style={{ width: "100%" }} min={0} step={0.1} placeholder="加权成本价(元)" disabled={!(isadd || isprice)} />
</Item>
<Item label="总库存数量" name="stock">
<InputNumber style={{ width: "100%" }} min={0} step={1} placeholder="总库存数量" disabled={isprice || isadd} defaultValue={0} />
</Item>
<Item label="锁定库存" name="lockStock" rules={[{ validator: validatorLockStock }]}>
<InputNumber style={{ width: "100%" }} min={0} step={1} placeholder="锁定库存" disabled defaultValue={0} />
</Item>
{!!fw && !isprice && !isadd && (
<Item label="修改人" name="user" rules={[{ required: true, message: "请输入修改人" }]}>
<Input style={{ width: "100%" }} />
</Item>
)}
{!!fw && !isprice && !isadd && (
<Item label="修改原因" name="fixRemark" rules={[{ required: true, message: "请输入修改原因" }]}>
<Input style={{ width: "100%" }} />
</Item>
)}
</Form>
</Modal>
);
}