117 lines
4.5 KiB
JavaScript
117 lines
4.5 KiB
JavaScript
import React, {useState} from 'react';
|
|
import {Button, Flex, message, Popconfirm, Table, Typography} from "antd";
|
|
import ManageTableColumn from "./ManageTableColumn";
|
|
import ImportDataDrawer from "./ImportDataDrawer";
|
|
import EditDataManageDrawer from './EditDataManageDrawer';
|
|
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 [editDrawerOpen, setEditDrawerOpen] = useState(false);
|
|
const [currentEditData, setCurrentEditData] = 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 handleEdit = (record) => {
|
|
console.log("编辑数据：", record); // 用于调试，确认是否触发
|
|
setCurrentEditData(record);
|
|
setEditDrawerOpen(true); // 打开抽屉
|
|
};
|
|
const [importDataOpen, setImportDataOpen] = useState(false);
|
|
|
|
const importDataDrawerOnClose = () => {
|
|
setImportDataOpen(false);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{contextHolder}
|
|
<ImportDataDrawer
|
|
open={importDataOpen}
|
|
onClose={importDataDrawerOnClose}
|
|
fetchWorkloadData={fetWorkload}
|
|
/>
|
|
{/* 编辑抽屉 */}
|
|
<EditDataManageDrawer
|
|
open={editDrawerOpen}
|
|
setOpen={setEditDrawerOpen}
|
|
commonAxios={commonAxios}
|
|
fetchWorkload={fetWorkload}
|
|
messageApi={messageApi}
|
|
initialValues={currentEditData}
|
|
/>
|
|
|
|
<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>
|
|
{/* 关键修复：传递 handleEdit 到表格列 */}
|
|
<Table
|
|
rowSelection={rowSelection}
|
|
rowKey={(record) => record.id}
|
|
columns={ManageTableColumn(commonAxios, messageApi, fetWorkload, handleEdit)} // 新增 handleEdit 参数
|
|
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; |