DealerModal.tsx
2.05 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
import React, {useEffect, useState} from 'react';
import {Modal, Button, Select, message} from 'antd';
import useInitail from "@/hooks/useInitail";
import {getDealerApi} from "@/common/api";
interface Props {
onCancel: () => any,
visible: boolean,
dealerList: any[],
onOk: (dealer: any) => any
}
const {Option} = Select;
export default function Index({ onCancel, visible, onOk, dealerList = [] }: Props) {
const [dealer, setDealer] = useState<any>({ settleDealerId: null, settleDealerName: null});
const { data: dealers } = useInitail<CommonApi.OptionVO[], CommonApi.DealerParam>(getDealerApi, [], {});
const suIds = dealerList.map(it => it.settleDealerId);
useEffect(() => {
if (!visible) {
setDealer({});
}
}, [visible]);
const handSave = () => {
if (!dealer.settleDealerId) {
message.error('请选择采购商家');
return;
}
onOk && onOk(dealer);
onCancel && onCancel();
};
return (
<Modal
width={400}
visible={visible}
title="采购商家"
onCancel={onCancel}
footer={[
<Button key="cancel" onClick={onCancel}>取消</Button>,
<Button
key="submit"
disabled={!dealer.settleDealerId}
onClick={handSave}
type="primary"
htmlType="submit"
>
确认
</Button>
]}
>
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 10}}>
<span>商家：</span>
<Select
value={dealer.settleDealerId}
style={{ width: 250 }}
placeholder="请选择商家"
showSearch
optionFilterProp="children"
onChange={(settleDealerId) => {
const d = dealers.find(it => it.id == settleDealerId) || {};
setDealer({ settleDealerId, settleDealerName: d.name});
}}
>
{dealers.filter(it => !suIds.includes(it.id)).map((b) => (
<Option value={b.id || -1} key={b.id}>{b.name || ''}</Option>
))}
</Select>
</div>
</Modal>
);
}