AddModal.tsx
5.33 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
import React, { useEffect, useState } from 'react';
import {Form, Button, InputNumber, Modal, message, Input } from 'antd';
import PmsSelect from '@/pages/pms/comonents/PmsSelect';
import { ListVO, saveApi, roleListApi } from '../api';
import {getContactUnit, ContactItem} from '@/pages/pms/transfer/transferManage/api';
import {getShopApi} from '@/pages/pms/storage/partShop/api';
import usePagination from '@/hooks/usePagination';
import useInitail from '@/hooks/useInitail';
import AccountModal from './AccountModal';
const Item = Form.Item;
interface Props{
visible?:boolean,
onCancel: Function,
item?:ListVO,
onRefreshing: Function
}
export default function Index(props:Props) {
const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(getShopApi, [], {});
const { data: suppliers } = useInitail<ContactItem[], { compTypes: number }>(getContactUnit, [], { compTypes: 130});
const { list } = usePagination<Role.Info>(roleListApi, { pageSize: 500 });
const [loading, setLoading] = useState(false);
const { visible, onCancel, item, onRefreshing } = props;
const [form] = Form.useForm();
const [accountVisible, setAccountVisible] = useState(false);
const [accounts, setAccounts] = useState<string[]>([]);
useEffect(() => {
if (visible && item?.id) {
setAccounts(item.account?.split(',') || []);
form.setFieldsValue({
supplierId: item.supplierId,
shopId: item.shopId,
minAmount: item.minAmount,
roleCode: item.roleCode,
});
}
if (!visible) {
form.resetFields();
setAccounts([]);
}
}, [visible]);
const onSave = () => {
if (!accounts.length) {
message.error('填写发单账号');
return;
}
form.validateFields().then(files => {
const params = {
id: item?.id,
supplierId: files.supplierId,
supplierName: suppliers.find(i => i.id == files.supplierId)?.compName,
shopId: files.shopId,
minAmount: files.minAmount,
roleCode: files.roleCode,
roleName: list.find(i => i.roleCode == files.roleCode)?.roleName,
account: accounts.join()
};
setLoading(true);
saveApi(params).then(res => {
message.success("保存成功");
setLoading(false);
onRefreshing();
onCancel();
}).catch(e => {
message.error(e.message);
setLoading(false);
});
});
};
const onOk = (v: any) => {
setAccounts([...accounts, v]);
};
return (
<Modal
title={item?.id ? "编辑货拉拉账户配置" : "新增货拉拉账户配置"}
open={visible}
width={500}
maskClosable={false}
onCancel={() => onCancel()}
footer={[
<Button loading={loading} onClick={() => onCancel()}>取消</Button>,
<Button loading={loading} type="primary" htmlType="submit" onClick={() => onSave()}>保存</Button>
]}
>
<Form
form={form}
labelCol={{span: 5}}
wrapperCol={{span: 12}}
>
<Item label="往来单位" name="supplierId" rules={[{required: true, message: "请选择往来单位"}]}>
<PmsSelect
placeholder="选择往来单位"
options={suppliers.map((item) => ({ value: item.id, label: item.compName }))}
/>
</Item>
<Item label="签约门店" name="shopId" rules={[{ required: true, message: "请选择签约门店" }]}>
<PmsSelect
placeholder="选择签约门店"
options={shops.map((item: PmsStoragePartShop.Option) => ({ value: item.id, label: item.name }))}
/>
</Item>
<Item label="推待办余额" name="minAmount" rules={[{ required: true, message: "请填写金额" }]}>
<InputNumber style={{width: '100%'}} addonAfter="元" />
</Item>
<Item label="推待办角色" name="roleCode" rules={[{ required: true, message: "请选择推办角色" }]}>
<PmsSelect
placeholder="选择待办角色"
options={list.filter(i => i.roleType != 1).map(item => ({value: item.roleCode, label: item.roleName}))}
/>
</Item>
<Item
label="发单账号"
name="account"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
>
{accounts.length ? (
<div>
{accounts.map((i, index) => (
<div style={{display: 'flex', alignItems: 'center', marginBottom: 5}} key={i}>
<Input value={i} disabled style={{width: 226}} />
<span style={{ color: '#FF4D4F', marginLeft: 10, cursor: 'pointer' }} onClick={() => setAccounts(accounts.filter(it => it != i))}>删除</span>
{index == accounts.length - 1 && <span style={{ color: '#FAAD14', marginLeft: 10, cursor: 'pointer' }} onClick={() => setAccountVisible(true)}>添加</span>}
</div>
))}
</div>
)
: (
<div style={{display: 'flex', alignItems: 'center'}}>
<Input disabled style={{width: 226}} />
<span style={{ color: '#FAAD14', marginLeft: 10, cursor: 'pointer'}} onClick={() => setAccountVisible(true)}>添加</span>
</div>
)}
</Item>
</Form>
<AccountModal visible={accountVisible} onCancel={() => setAccountVisible(false)} onOk={onOk} accounts={accounts} />
</Modal>
);
}