99 lines
3.6 KiB
React
99 lines
3.6 KiB
React
|
import React, {useState} from 'react';
|
||
|
|
import {Button, Flex, message, Popconfirm, Table, Typography} from "antd";
|
||
|
|
import ManageTableColumn from "./ManageTableColumn";
|
||
|
|
import ImportDataDrawer from "./ImportDataDrawer";
|
||
|
|
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";
|
||
|
|
|
||
|
|
const DataManageTable = props => {
|
||
|
|
|
||
|
|
const {workloadData, fetWorkload} = props;
|
||
|
|
|
||
|
|
const [messageApi, contextHolder] = message.useMessage();
|
||
|
|
const commonAxios = creatMessageCommonAxios(messageApi);
|
||
|
|
|
||
|
|
const [selectIds, setSelectIds] = useState([]);
|
||
|
|
|
||
|
|
const rowSelection = {
|
||
|
|
type: 'checkbox',
|
||
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
||
|
|
setSelectIds(selectedRowKeys);
|
||
|
|
console.log(selectIds)
|
||
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const onBatchDelete = () => {
|
||
|
|
let url = `/api/v1/workload/delete`
|
||
|
|
commonAxios.delete(url, {data: selectIds}).then(res => {
|
||
|
|
if (res.data.data && res.data.data === true) {
|
||
|
|
messageApi.success("删除成功");
|
||
|
|
fetWorkload()
|
||
|
|
setSelectIds([]);
|
||
|
|
} else {
|
||
|
|
messageApi.warning('您要删除的数据不存在或已被删除！');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const [importDataOpen, setImportDataOpen] = useState(false);
|
||
|
|
|
||
|
|
const importDataDrawerOnClose = () => {
|
||
|
|
setImportDataOpen(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{contextHolder}
|
||
|
|
<ImportDataDrawer
|
||
|
|
open={importDataOpen}
|
||
|
|
onClose={importDataDrawerOnClose}
|
||
|
|
fetchWorkloadData={fetWorkload}
|
||
|
|
/>
|
||
|
|
<Flex justify={"space-between"} align={"center"} gap={"middle"}>
|
||
|
|
<h3>数据管理</h3>
|
||
|
|
<Flex justify={"flex-end"} align={"center"} gap={"middle"}>
|
||
|
|
<Typography.Text>共{workloadData.total}条数据</Typography.Text>
|
||
|
|
<Button type={"primary"} onClick={() => setImportDataOpen(true)}>导入</Button>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
<Table
|
||
|
|
rowSelection={
|
||
|
|
rowSelection
|
||
|
|
}
|
||
|
|
rowKey={(record) => record.id}
|
||
|
|
columns={ManageTableColumn(commonAxios, messageApi, fetWorkload)}
|
||
|
|
dataSource={workloadData.list}
|
||
|
|
pagination={false}
|
||
|
|
/>
|
||
|
|
<div id={'batch-operation'} style={{
|
||
|
|
position: 'fixed',
|
||
|
|
bottom: 0,
|
||
|
|
left: '0',
|
||
|
|
width: '100%',
|
||
|
|
height: '60px',
|
||
|
|
background: 'rgb(245,245,245,0.8)',
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
display: selectIds.length !== 0 ? 'block' : 'none'
|
||
|
|
}}>
|
||
|
|
<Flex justify={"space-between"} align={"center"} style={{width: '100%', height: '100%'}}>
|
||
|
|
<Typography.Text>已选择<Typography.Text
|
||
|
|
type={'danger'}>{selectIds.length}</Typography.Text>项</Typography.Text>
|
||
|
|
<Popconfirm
|
||
|
|
title="批量删除工作量"
|
||
|
|
description={`确定批量删除这${selectIds.length}条记录吗？`}
|
||
|
|
onConfirm={() => onBatchDelete()}
|
||
|
|
okText="确定"
|
||
|
|
cancelText="算了"
|
||
|
|
>
|
||
|
|
<Button type={"primary"} danger>批量删除</Button>
|
||
|
|
</Popconfirm>
|
||
|
|
</Flex>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
DataManageTable.propTypes = {};
|
||
|
|
|
||
|
|
export default DataManageTable;
|