PartShopModal.tsx
4.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
import React, { useEffect, useState } from 'react';
import { Modal, Button, Form, Select, InputNumber, message, Input } from 'antd';
import { useStore } from '../index';
import ChoosePart from './ChoosePart';
import { savePartShopApi } from '../api';
const { Item } = Form;
const { Option } = Select;
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);
form.setFieldsValue({
costPrice: "",
stock: 0,
lockStock: 0,
shopId: "",
part: "",
user: "",
fixRemark: ""
});
}
}, [visible]);
useEffect(() => {
if (isadd) {
setItem({});
console.log(isadd, item);
form.setFieldsValue({
costPrice: "",
stock: 0,
lockStock: 0,
shopId: "",
part: ""
});
}
}, [isadd]);
const handleSubmit = () => {
form.validateFields().then(values => {
const params = {
...item,
partId: values.part.partId,
costPrice: values.costPrice,
stock: values.stock,
lockStock: values.lockStock,
shopId: values.shopId,
user: values.user,
fixRemark: values.fixRemark
};
setConfirmLoading(true);
savePartShopApi(params).then(res => {
if (res.success) {
message.success(res.result);
setVisible(false);
setLoading(true);
setConfirmLoading(false);
} else {
setConfirmLoading(false);
message.error(res.result);
}
}).catch(error => {
setConfirmLoading(false);
message.error(error.message);
});
});
};
const validatorLockStock = (rule: any, value: number) => {
if (value > form.getFieldsValue(['stock']).stock) {
// eslint-disable-next-line prefer-promise-reject-errors
return Promise.reject('锁定库存不能超过总库存数量!');
} 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="加权成本价(元)" />
</Item>
<Item label="总库存数量" name="stock" rules={[{ required: true, message: "请输入总库存数量" }]}>
<InputNumber style={{ width: "100%" }} min={0} step={1} placeholder="总库存数量" disabled={isprice || isadd} />
</Item>
<Item label="锁定库存" name="lockStock" rules={[{ required: true, message: "请输入锁定库存" }, { validator: validatorLockStock }]}>
<InputNumber style={{ width: "100%" }} min={0} step={1} placeholder="锁定库存" disabled />
</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>
);
}