EditModal.tsx
3.66 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
import React, { useState, useEffect } from 'react';
import { Button, Form, message, InputNumber, Select, Modal} from 'antd';
import ShopSelectNew from '@/components/ShopSelectNew';
import { useStore } from '../index';
import { saveConfigApi, getHaveShopListApi } from '../api';
import { debounce } from 'lodash';
const Option = Select.Option;
export default function Index() {
const [form] = Form.useForm();
const { current, setCurrent, setLoading } = useStore();
const [confirm, setConfirm] = useState<boolean>(false);
const [disabledShopIds, setDisabledShopIds] = useState<number[]>([]);
useEffect(() => {
if (current.visible && current.data.id) {
handleSetValue();
const shopList = current.data.shopList || [];
getHaveShopListApi()
.then(res => {
const shopIdList = res.data || [];
const _shopIds = shopList.map(v => v.shopId) || [];
const disabledShop = shopIdList.filter(v => !(_shopIds.includes(v))) || [];
setDisabledShopIds(disabledShop);
})
.catch(e => {
message.error(e.message);
});
} else {
getHaveShopListApi()
.then(res => {
const shopIdList = res.data || [];
setDisabledShopIds(shopIdList);
})
.catch(e => {
message.error(e.message);
});
}
}, [current.visible]);
function handleCancle() {
setCurrent({visible: false, data: {}});
}
async function handleSubmit() {
const params = await form.validateFields();
setConfirm(true);
const _params = {
id: current.data?.id,
dialAims: params.dialAims,
shopList: params.shopList?.map((v: any) => ({shopId: v.value, shopName: v.label}))
};
saveConfigApi(_params)
.then(res => {
message.success(res.result);
setConfirm(false);
setCurrent({visible: false, data: {}});
setLoading(true);
})
.catch(e => {
message.error(e.message);
setConfirm(false);
});
}
function handleSetValue() {
form.setFieldsValue({
dialAims: current.data.dialAims,
shopList: current.data.shopList?.map((v: any) => ({label: v.shopName, value: v.shopId}))
});
}
function handleResetValue() {
form.setFieldsValue({shopList: [], dialAims: undefined});
}
return (
<Modal
title={current.data.id ? "编辑" : "新增"}
destroyOnClose
visible={current.visible}
maskClosable={false}
onCancel={handleCancle}
afterClose={() => handleResetValue()}
width="60%"
footer={[
<Button key="cancel" disabled={confirm} onClick={handleCancle} style={{marginLeft: 10}}>取消</Button>,
<Button key="submit" disabled={confirm} onClick={debounce(handleSubmit, 380)} type="primary" htmlType="submit" loading={confirm}>确认</Button>
]}
>
<Form
form={form}
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
<Form.Item
label="线索有效接通目标"
name="dialAims"
rules={[{ required: true, message: "请输入" }]}
>
<InputNumber
style={{width: '100%'}}
controls={false}
min={0}
formatter={value => `${value}条/天`}
precision={0}
parser={value => value?.replace('条/天', '')}
/>
</Form.Item>
<Form.Item
label="适用门店"
name="shopList"
rules={[{ required: true, message: "请选择门店" }]}
labelAlign="right"
>
<ShopSelectNew disabledShopIds={disabledShopIds} defaultOptions={{bizTypes: "1"}} placeholder="请选择门店" multiple />
</Form.Item>
</Form>
</Modal>
);
}