添加单条工作量数据抽屉实现
This commit is contained in:
Vectorune
158
src/page/Dashboard/DataManager/AddDataManageDrawer.jsx
Normal file
158
src/page/Dashboard/DataManager/AddDataManageDrawer.jsx
Normal file
@ -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;
|
||||
@ -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>
|
||||
|
||||
@ -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];
|
||||
|
||||
Reference in New Issue
Block a user