基本实现编辑抽屉
This commit is contained in:
Vectorune
@ -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}
|
||||
/>
|
||||
|
||||
163
src/page/Dashboard/DataManager/EditDataManageDrawer.jsx
Normal file
163
src/page/Dashboard/DataManager/EditDataManageDrawer.jsx
Normal file
@ -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;
|
||||
@ -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) => (
|
||||
<Space size={"middle"}>
|
||||
<Button danger onClick={() => {
|
||||
let id = record.id;
|
||||
let param = [];
|
||||
param.push(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>
|
||||
)
|
||||
render: (_, record) => {
|
||||
// 确保handleEdit存在再调用，避免参数未传递时出错
|
||||
const handleEditClick = () => {
|
||||
if (typeof handleEdit === 'function') {
|
||||
handleEdit(record);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Space size={"middle"}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<EditOutlined />}
|
||||
onClick={handleEditClick}
|
||||
>
|
||||
编辑
|
||||
</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>
|
||||
);
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user