SettingList.tsx
3.93 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
import React, { useState } from "react";
import { Modal, Form, Input, Table, Select, Button, InputNumber } from "antd";
import { Item } from "../api";
import { PlusOutlined } from "@ant-design/icons";
import useInitial from "@/hooks/useInitail";
import * as roleApi from "@/pages/admin/Privilege/api";
import orderBy from "lodash/orderBy";
interface Props {
onChange?: (value?: Item[]) => any;
value?: Item[];
saveLoading?: boolean;
disabled?: boolean;
}
export default ({ value = [], onChange, saveLoading, disabled }: Props) => {
const { data: roleList } = useInitial<roleApi.Item[], any>(roleApi.getAllRoleListApi, [], { roleTypes: 2 }, disabled);
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
const onRemove = (index: number) => {
value.splice(index, 1);
onChange?.([...value]);
};
const closeModal = () => {
setVisible(false);
form.resetFields();
};
const openModal = (row: Item, index: number) => {
form.setFieldsValue({
index,
threshold: row.threshold,
role: { value: row.roleCode, label: row.roleName },
});
setVisible(true);
};
const handleSave = (feildValue: any) => {
const index = feildValue.index;
const params = {
threshold: feildValue.threshold,
roleCode: feildValue?.role?.value || null,
roleName: feildValue?.role?.label || null,
};
if (typeof index == "number" && index >= 0) {
value[index] = params;
} else {
value.push(params);
}
const newValue = orderBy(value, ["threshold"], ["asc"]);
onChange?.(newValue);
closeModal();
};
return (
<>
{!disabled ? (
<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 15 }}>
<Button type="primary" icon={<PlusOutlined />} disabled={saveLoading} onClick={() => setVisible(true)}>
新增
</Button>
</div>
) : null}
<Table dataSource={value} rowKey={(record: Item) => `${record.roleCode} ${record.threshold}`}>
<Table.Column title="干预条件" dataIndex="threshold" align="center" render={(text) => `待办超时≥${text}天`} />
<Table.Column title="干预角色" dataIndex="roleName" align="center" />
{!disabled ? (
<Table.Column
title="操作"
align="center"
render={(val, row: Item, index: number) => (
<>
<Button type="link" disabled={saveLoading} onClick={() => openModal(row, index)}>
编辑
</Button>
<Button type="link" disabled={saveLoading} onClick={() => onRemove(index)}>
删除
</Button>
</>
)}
/>
) : null}
</Table>
<Modal open={visible} onCancel={closeModal} onOk={form.submit} title="干预设置">
<Form form={form} onFinish={handleSave} wrapperCol={{ span: 18 }} labelCol={{ span: 6 }}>
<Form.Item hidden name="index" label="index" rules={[{ required: false }]}>
<Input />
</Form.Item>
<Form.Item name="threshold" label="干预条件" rules={[{ required: true, message: "干预条件不能为空" }]}>
<InputNumber min={0} addonBefore="待办超时≥" addonAfter="天" precision={0} />
</Form.Item>
<Form.Item name="role" label="干预角色" rules={[{ required: true, message: "干预角色不能为空" }]}>
<Select
placeholder="请选择"
showSearch
optionFilterProp="children"
labelInValue
filterOption={(input, option: any) => option?.children.indexOf(input) >= 0}
>
{roleList.map((item) => (
<Select.Option value={item.roleCode} key={item.id}>
{item.roleName}
</Select.Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</>
);
};