Modal.tsx
4.78 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
146
147
148
149
150
151
152
153
154
import React, { useEffect, useRef} from "react";
import { Modal, Form, message, Select } from "antd";
import * as API from '../api';
import useInitial from '@/hooks/useInitail';
import usePagination from '@/hooks/usePagination';
const FormItem = Form.Item;
interface Props {
visiable: boolean;
setVisiable: (value: boolean) => any;
setLoading: (value: boolean) => any;
current: any;
}
function CreateModal(props: Props) {
const { visiable, setVisiable, setLoading, current } = props;
const [form] = Form.useForm();
const { data: store } = useInitial(API.fetchShops, [], '');
const { list: job, setParams } = usePagination(API.fetchPostList, {pageSize: 1000});
const { data: list } = useInitial(API.fetchOutsideType, [], {additional: 1, setting: true});
const page = useRef(10);
useEffect(() => {
if (current && current !== undefined) {
form.setFieldsValue({
// shop: { value: current.shopId, label: current.shopName },
// job: { value: current.postId, label: current.postName },
shop: current.shops.map((e:any) => { return { value: e.shopId, label: e.shopName }; }),
job: current.posts.map((e:any) => { return { value: e.postId, label: e.postName }; }),
work: current.items.map((e:any) => { return { value: e.outsideTypeId, label: e.outsideTypeName}; })
});
} else {
form.resetFields();
}
}, [visiable]);
function submit(item: any) {
const params = {
id: current ? current.id : undefined,
shopIds: item.shop.map((e:any) => e.value),
//shopName: item.shop.label,
postIds: item.job.map((e:any) => e.value),
//postName: item.job.label,
outsideTypeIds: item.work.map((item:any) => item.value),
};
API.saveApi(params)
.then((res) => {
message.success("保存成功");
setVisiable(false);
setLoading(true);
})
.catch((err) => {
//console.log(err)
message.error(err.message);
});
}
// const onLoad = (e: any) => {
// const { target } = e;
// // target.scrollTop + target.offsetHeight === target.scrollHeight 判断是否滑动到底部
// if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
// // 在这里调用接口
// page.current += 10;
// setParams({ pageSize: page.current }, true);
// }
// };
const onShopSearch = (val: any) => {
console.log("shop", val);
};
const onJobSearch = (val: any) => {
console.log("job", val);
};
const onWorkSearch = (val: any) => {
console.log("work", val);
};
return (
<Modal
title="新增任务权限"
visible={visiable}
onOk={form.submit}
onCancel={() => setVisiable(false)}
maskClosable={false}
// getContainer={false}
>
<Form
form={form}
onFinish={submit}
labelCol={{ span: 6 }}
wrapperCol={{ span: 15 }}
>
<FormItem name="shop" label="门店" rules={[{ required: true }]}>
<Select
labelInValue
placeholder="请选择门店"
mode="multiple"
onSearch={onShopSearch}
showSearch
filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{store.map((item: any) => (
<Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
))}
</Select>
</FormItem>
<FormItem name="job" label="岗位" rules={[{ required: true }]}>
<Select
labelInValue
placeholder="请选择岗位"
// onPopupScroll={(e) => onLoad(e)}
mode="multiple"
onSearch={onJobSearch}
showSearch
filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{job.map((item: any) => (
<Select.Option value={item.id} key={item.id}>
{item.postName}
</Select.Option>
))}
</Select>
</FormItem>
<FormItem
name="work"
label="可申请任务类型"
rules={[{ required: true }]}
>
<Select
labelInValue
mode="multiple"
placeholder="请选择任务类型"
onSearch={onWorkSearch}
showSearch
filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{list.map((item: any) => (
<Select.Option value={item.type} key={item.type}>
{item.typeName}
</Select.Option>
))}
</Select>
</FormItem>
</Form>
</Modal>
);
}
export default CreateModal;