基本实现编辑抽屉

src/page/Dashboard/DataManager/DataManageTable.jsx

@@ -2,6 +2,7 @@ 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 => {
@@ -13,6 +14,9 @@ const DataManageTable = props => {
 
     const [selectIds, setSelectIds] = useState([]);
 
+    // 新增编辑抽屉相关状态
+    const [editDrawerOpen, setEditDrawerOpen] = useState(false);
+    const [currentEditData, setCurrentEditData] = useState({});
     const rowSelection = {
         type: 'checkbox',
         onChange: (selectedRowKeys, selectedRows) => {
@@ -34,7 +38,12 @@ const DataManageTable = props => {
             }
         })
     }
-
+    // 编辑按钮点击处理（关键：此函数将打开抽屉）
+    const handleEdit = (record) => {
+        console.log("编辑数据：", record); // 用于调试，确认是否触发
+        setCurrentEditData(record);
+        setEditDrawerOpen(true); // 打开抽屉
+    };
     const [importDataOpen, setImportDataOpen] = useState(false);
 
     const importDataDrawerOnClose = () => {
@@ -49,6 +58,16 @@ const DataManageTable = props => {
                 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"}>
@@ -56,12 +75,11 @@ const DataManageTable = props => {
                     <Button type={"primary"} onClick={() => setImportDataOpen(true)}>导入</Button>
                 </Flex>
             </Flex>
+            {/* 关键修复：传递 handleEdit 到表格列 */}
             <Table
-                rowSelection={
+                rowSelection={rowSelection}
-                    rowSelection
-                }
                 rowKey={(record) => record.id}
-                columns={ManageTableColumn(commonAxios, messageApi, fetWorkload)}
+                columns={ManageTableColumn(commonAxios, messageApi, fetWorkload, handleEdit)} // 新增 handleEdit 参数
                 dataSource={workloadData.list}
                 pagination={false}
             />

src/page/Dashboard/DataManager/EditDataManageDrawer.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Drawer, Flex, Form, Input, Select, Typography } from "antd";
+import CourseTypeTag from "../../../component/Workload/CourseTypeTag";
+
+const EditDataManageDrawer = props => {
+    const { open, setOpen, commonAxios, fetchWorkload, messageApi, initialValues } = props;
+
+    // 表单布局配置，与添加组件保持一致
+    const formLayout = {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 20 },
+    };
+
+    const [form] = Form.useForm();
+    const { Title } = Typography;
+
+    // 课程性质选项（根据实际业务调整）
+    const courseNatureOptions = [
+        { label: '必修课', value: '必修课' },
+        { label: '选修课', value: '选修课' },
+        { label: '通识课', value: '通识课' },
+        { label: '实践课', value: '实践课' }
+    ];
+
+    // 当抽屉打开且有初始值时，填充表单数据
+    React.useEffect(() => {
+        if (open && initialValues) {
+            form.setFieldsValue({
+                semesterInfo: initialValues.semesterInfo,
+                courseName: initialValues.courseName,
+                teacherName: initialValues.teacherName,
+                courseNature: initialValues.courseNature,
+                teachingMajor: initialValues.teachingMajor,
+                actualClassSize: initialValues.actualClassSize,
+                teachingGrade: initialValues.teachingGrade,
+                totalClassHours: initialValues.totalClassHours
+            });
+        } else {
+            form.resetFields();
+        }
+    }, [open, initialValues, form]);
+
+    // 提交编辑表单
+    const onSubmit = (values) => {
+        // 拼接ID用于后端识别更新对象
+        const updateData = { ...values, id: initialValues.id };
+        commonAxios.put('/api/v1/workload/update', updateData).then(response => {
+            const result = response.data.data || false;
+            if (result) {
+                messageApi.success('编辑工作量信息成功');
+                setOpen(false);
+                fetchWorkload(); // 刷新列表
+            } else {
+                messageApi.error('编辑工作量信息失败');
+            }
+        }).catch(error => {
+            messageApi.error('网络错误，编辑失败');
+        });
+    };
+
+    return (
+        <Drawer
+            open={open}
+            onClose={() => setOpen(false)}
+            title={'编辑工作量'}
+            destroyOnClose
+        >
+            <div>
+                <Title level={5}>编辑工作量信息</Title>
+                <Form
+                    form={form}
+                    {...formLayout}
+                    onFinish={onSubmit}
+                >
+                    <Form.Item
+                        label="学期"
+                        name="semesterInfo"
+                        rules={[{ required: true, message: '请输入学期' }]}
+                    >
+                        <Input placeholder="请输入学期"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="授课名称"
+                        name="courseName"
+                        rules={[{ required: true, message: '请输入授课名称' }]}
+                    >
+                        <Input placeholder="请输入授课名称"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="姓名"
+                        name="teacherName"
+                        rules={[{ required: true, message: '请输入姓名' }]}
+                    >
+                        <Input placeholder="请输入姓名"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="课程性质"
+                        name="courseNature"
+                        rules={[{ required: true, message: '请选择课程性质' }]}
+                    >
+                        <Select
+                            placeholder="请选择课程性质"
+                            options={courseNatureOptions}
+                            // 保持与表格中一致的标签显示
+                            formatLabel={(option) => <CourseTypeTag courseNature={option.value} />}
+                        />
+                    </Form.Item>
+                    <Form.Item
+                        label="授课专业"
+                        name="teachingMajor"
+                        rules={[{ required: true, message: '请输入授课专业' }]}
+                    >
+                        <Input placeholder="请输入授课专业"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="学生数"
+                        name="actualClassSize"
+                        rules={[
+                            { required: true, message: '请输入学生数' },
+                            { type: 'number', message: '请输入数字' }
+                        ]}
+                    >
+                        <Input type="number" placeholder="请输入学生数"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="授课对象"
+                        name="teachingGrade"
+                        rules={[{ required: true, message: '请输入授课对象' }]}
+                    >
+                        <Input placeholder="请输入授课对象"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="工作量"
+                        name="totalClassHours"
+                        rules={[
+                            { required: true, message: '请输入工作量' },
+                            { type: 'number', message: '请输入数字' }
+                        ]}
+                    >
+                        <Input type="number" placeholder="请输入工作量"/>
+                    </Form.Item>
+                    <Flex justify={"center"} align={"center"}>
+                        <Button onClick={() => setOpen(false)} style={{ marginRight: 8 }}>取消</Button>
+                        <Button htmlType={'submit'} type={'primary'}>保存</Button>
+                    </Flex>
+                </Form>
+            </div>
+        </Drawer>
+    );
+};
+
+// 属性校验，与添加组件保持一致
+EditDataManageDrawer.propTypes = {
+    open: PropTypes.bool.isRequired,
+    setOpen: PropTypes.func.isRequired,
+    commonAxios: PropTypes.func.isRequired,
+    fetchWorkload: PropTypes.func.isRequired,
+    messageApi: PropTypes.object.isRequired,
+    initialValues: PropTypes.object // 编辑的初始数据
+};
+
+export default EditDataManageDrawer;

src/page/Dashboard/DataManager/ManageTableColumn.js

@@ -1,7 +1,8 @@
 import {Button, Space} from "antd";
+import { EditOutlined } from "@ant-design/icons"; // 引入编辑图标（解决第一个错误）
 import CourseTypeTag from "../../../component/Workload/CourseTypeTag";
 
-const ManageTableColumn = (commonAxios, messageApi, fetchWorkload) => [
+const ManageTableColumn = (commonAxios, messageApi, fetchWorkload, handleEdit) => [
     //{
     //    title: 'ID',
     //    dataIndex: 'id',
@@ -67,24 +68,39 @@ const ManageTableColumn = (commonAxios, messageApi, fetchWorkload) => [
         title: '操作',
         dataIndex: 'operation',
         key: 'operation',
-        render: (_, record) => (
+        render: (_, record) => {
-            <Space size={"middle"}>
+            // 确保handleEdit存在再调用，避免参数未传递时出错
-                <Button danger onClick={() => {
+            const handleEditClick = () => {
-                    let id = record.id;
+                if (typeof handleEdit === 'function') {
-                    let param = [];
+                    handleEdit(record);
-                    param.push(id);
+                }
-                    let url = `/api/v1/workload/delete`
+            };
-                    commonAxios.delete(url, {data: param}).then(res => {
+
-                        if (res.data.data && res.data.data === true) {
+            return (
-                            messageApi.success("删除成功");
+                <Space size={"middle"}>
-                            fetchWorkload()
+                    <Button 
-                        } else {
+                        type="primary" 
-                            messageApi.warning('您要删除的数据不存在或已被删除！');
+                        icon={<EditOutlined />}
-                        }
+                        onClick={handleEditClick}
-                    })
+                    >
-                }}>删除</Button>
+                        编辑
-            </Space>
+                    </Button>
-        )
+                    <Button danger onClick={() => {
+                        let id = record.id;
+                        let param = [id];
+                        let url = `/api/v1/workload/delete`;
+                        commonAxios.delete(url, {data: param}).then(res => {
+                            if (res.data.data && res.data.data === true) {
+                                messageApi.success("删除成功");
+                                fetchWorkload();
+                            } else {
+                                messageApi.warning('您要删除的数据不存在或已被删除！');
+                            }
+                        });
+                    }}>删除</Button>
+                </Space>
+            );
+        }
     },
 ];