添加单条工作量数据抽屉实现

src/page/Dashboard/DataManager/AddDataManageDrawer.jsx

@@ -0,0 +1,158 @@
+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 AddDataManageDrawer = props => {
+    const { open, setOpen, commonAxios, fetchWorkload, messageApi } = props;
+
+    // 表单布局配置
+    const formLayout = {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 20 },
+    };
+
+    const [form] = Form.useForm();
+    const { Title } = Typography;
+
+    // 课程性质选项
+    const courseNatureOptions = [
+        { label: '公共课', value: '01' },
+        { label: '专业课', value: '02' },
+        { label: '校选课', value: '03' },
+    ];
+
+    // 当抽屉关闭时重置表单
+    React.useEffect(() => {
+        if (!open) {
+            form.resetFields();
+        }
+    }, [open, form]);
+
+    // 提交添加表单
+    const onSubmit = (values) => {
+        commonAxios.post('/api/v1/workload/addWorkload', values).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="请输入学期(示例：2023-2024-1)"/>
+                    </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="stuffNumber"
+                        rules={[{ required: true, message: '请输入工号' }]}
+                    >
+                        <Input placeholder="请输入工号"/>
+                    </Form.Item>
+                    <Form.Item
+                        label="职称"
+                        name="jobTitle"
+                        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: '请输入学生数' }
+                        ]}
+                    >
+                        <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: '请输入工作量' }
+                        ]}
+                    >
+                        <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>
+    );
+};
+
+AddDataManageDrawer.propTypes = {
+    open: PropTypes.bool.isRequired,
+    setOpen: PropTypes.func.isRequired,
+    commonAxios: PropTypes.func.isRequired,
+    fetchWorkload: PropTypes.func.isRequired,
+    messageApi: PropTypes.object.isRequired
+};
+
+export default AddDataManageDrawer;

src/page/Dashboard/DataManager/DataManageTable.jsx

@@ -4,6 +4,7 @@ import ManageTableColumn from "./ManageTableColumn";
 import ImportDataDrawer from "./ImportDataDrawer";
 import EditDataManageDrawer from './EditDataManageDrawer';
 import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";
+import AddDataManageDrawer from './AddDataManageDrawer'; // 导入新增的组件
 
 const DataManageTable = props => {
 
@@ -17,6 +18,9 @@ const DataManageTable = props => {
     // 新增编辑抽屉相关状态
     const [editDrawerOpen, setEditDrawerOpen] = useState(false);
     const [currentEditData, setCurrentEditData] = useState({});
+    // 添加添加数据抽屉的状态
+    const [addDrawerOpen, setAddDrawerOpen] = useState(false);
+
     const rowSelection = {
         type: 'checkbox',
         onChange: (selectedRowKeys, selectedRows) => {
@@ -59,19 +63,28 @@ const DataManageTable = props => {
                 fetchWorkloadData={fetWorkload}
             />
              {/* 编辑抽屉 */}
-             {/*<EditDataManageDrawer
+             <EditDataManageDrawer
                 open={editDrawerOpen}
                 setOpen={setEditDrawerOpen}
                 commonAxios={commonAxios}
                 fetchWorkload={fetWorkload}
                 messageApi={messageApi}
                 initialValues={currentEditData}
-            />*/}
+            />
-
+             {/* 添加数据抽屉 */}
+             <AddDataManageDrawer
+                open={addDrawerOpen}
+                setOpen={setAddDrawerOpen}
+                commonAxios={commonAxios}
+                fetchWorkload={fetWorkload}
+                messageApi={messageApi}
+            />
             <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={() => setAddDrawerOpen(true)}>添加数据</Button>
                     <Button type={"primary"} onClick={() => setImportDataOpen(true)}>导入</Button>
                 </Flex>
             </Flex>

src/page/Dashboard/DataManager/ManageTableColumn.js

@@ -78,13 +78,13 @@ const ManageTableColumn = (commonAxios, messageApi, fetchWorkload, handleEdit) =
 
             return (
                 <Space size={"middle"}>
-                    {/*<Button 
+                    <Button 
                         type="primary" 
                         icon={<EditOutlined />}
                         onClick={handleEditClick}
                     >
                         编辑
-                    </Button>*/}
+                    </Button>
                     <Button danger onClick={() => {
                         let id = record.id;
                         let param = [id];