ShopModal.tsx
1.77 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
import React, {useEffect, useState} from 'react';
import {Modal, Button, List, message} from 'antd';
import { useStore } from '../index';
import { getConfigApi, SaveParams } from '../api';
import styles from '../index.less';
interface Data {
data: SaveParams
loading: boolean
}
export default function Index() {
const { statusData, setStatusData } = useStore();
const [data, setData] = useState<Data>({data: {}, loading: false});
function handleCancel() {
setStatusData({...statusData, shop: false, id: undefined});
}
useEffect(() => {
if (statusData.shop && statusData.id) {
setData({...data, loading: true});
getConfigApi(statusData.id)
.then(res => {
setData({data: res.data || {}, loading: false});
message.success(res.result);
})
.catch(e => {
setData({data: {}, loading: false});
message.error(e.message);
});
}
}, [statusData.shop]);
return (
<Modal
destroyOnClose
title={<div className={styles.lineWrap}><span className={styles.line} /><span className={styles.lineText}>适用门店</span></div>}
visible={statusData.shop}
maskClosable={false}
onCancel={handleCancel}
footer={[]}
className={styles.modal}
>
<List
size="large"
loading={data.loading}
style={{height: '300px', overflow: 'scroll'}}
dataSource={data.data?.shopList || []}
renderItem={(item: any) => <List.Item style={{justifyContent: 'center'}}>{item.shopName}</List.Item>}
/>
<div
style={{
textAlign: 'center',
marginTop: 12,
height: 32,
lineHeight: '32px',
}}
><Button type="primary" onClick={handleCancel}>返回</Button>
</div>
</Modal>
);
}