index.tsx
4.73 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
import React, { useState} from "react";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { Card, Table, Popconfirm, message, Button, Input, Popover, Select } from "antd";
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import usePagination from "@/hooks/usePagination";
import { ListVO, getTimeListApi, taskDeleteApi, ItemListVO } from "./api";
import {TimeUnits } from "./entity";
import { debounce } from "lodash";
import CreateModal from "./components/CreateModal";
import { systemListApi } from "@/pages/admin/Privilege/api";
const Column = Table.Column;
const Search = Input.Search;
export default function TaskConfig() {
const { list, loading, paginationConfig, setParams, setLoading } = usePagination<ListVO>(getTimeListApi, {}, {});
const [item, setItem] =useState({});
const { list: syslist } = usePagination(systemListApi, { current: 1, pageSize: 100 });
const [modalData, setModalData] = useState<{ visible: boolean; row: ItemListVO }>({ visible: false, row: {} });
function triggerModal(row: ItemListVO = {}) {
setModalData({ visible: !modalData.visible, row });
}
const _onChange = debounce((val: string) => {
setParams({ keywords: val.trim(), current: 1 }, true);
}, 500);
//根据系统名称搜索
const _onChangeSys = debounce((e: any) => {
setParams({ sysId: e, current: 1 }, true);
}, 500);
// 删除待办
const handleDelete = (record: any) => {
taskDeleteApi(record.id)
.then((res) => {
message.success("删除成功！");
setLoading(true);
})
.catch((e) => {
message.error(e.message);
});
};
return (
<PageHeaderWrapper title="待办时效">
<Card>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 20,
}}
>
<div style={{ display: "flex" }}>
<Search allowClear placeholder="搜索待办名" onChange={(e) => _onChange(e.target.value)} style={{ maxWidth: 260, marginRight: 15 }} />
<Select allowClear placeholder="搜索系统名称" style={{ width: 260, marginRight: 5 }} onChange={(e: any) => _onChangeSys(e)}>
{syslist.map((item) => (
<Select.Option value={item.id!} key={item.id}>
{item.sysName}
</Select.Option>
))}
</Select>
</div>
<Button type="primary" icon={<PlusOutlined />} onClick={() => triggerModal()}>
新增
</Button>
</div>
<Table loading={loading} dataSource={list} pagination={paginationConfig} rowKey={(record: ListVO) => String(record.id || record.configId)}>
<Column title="待办名称" dataIndex="configName" align="center" />
<Column
title="待办时效"
dataIndex="periodValue"
align="center"
render={(text, record: ListVO) => {
const tempTimeData = record.periodUnit ? `${text}${TimeUnits[record.periodUnit]}` : "--";
return text ? tempTimeData : "--";
}}
/>
<Column
title={
<Popover
placement="topLeft"
content={
<>
<p> 待办截止时间=待办时效时间+待办延时时间</p>
<p>如未配置待办延时时间，则表示待办无结束时间</p>
</>
}
>
<span>
待办延时时间
<ExclamationCircleFilled style={{ color: "#40a9ff" }} />
</span>
</Popover>
}
dataIndex="extendValue"
align="center"
render={(text, record: ListVO) => {
const endTimeData = record.extendUnit ? `${text}${TimeUnits[record.extendUnit]}` : "--";
return text !== null ? endTimeData : "--";
}}
/>
<Column
title="操作"
align="center"
render={(val, row: ListVO) => (
<>
<Button type="link" onClick={() => { triggerModal(row); setItem(row); }}>
编辑
</Button>
<Popconfirm placement="top" title="确认删除？" onConfirm={() => handleDelete(row)}>
<Button type="link">删除</Button>
</Popconfirm>
</>
)}
/>
</Table>
<CreateModal visible={modalData.visible} onCancel={() => { triggerModal(); setItem({}); }} onRefreshing={() => setLoading(true)} item={item} />
</Card>
</PageHeaderWrapper>
);
}