dev-tmp1
tangjie 2026-08-21 15:45:34 +08:00
parent ca38ee44ae
commit 6acae8d648
8 changed files with 947 additions and 301 deletions

View File

@ -13,8 +13,8 @@ module.exports = {
//API_HOST: "http://localhost:80",
// API_HOST: "http://192.168.0.134",
// API_HOST: "http://192.168.0.150", //太浅
API_HOST: "https://gbs-gateway.qhdsafety.com",
API_HOST: "http://192.168.0.150", //太浅
// API_HOST: "https://gbs-gateway.qhdsafety.com",
// API_HOST: "http://192.168.0.103", //huwei
},
production: {

View File

@ -1,6 +1,6 @@
import { declareRequest } from "@cqsjjb/jjb-dva-runtime";
/** 教育培训 — 培训课件管理 / 培训课程管理 */
/** 教育培训 — 培训课件管理 / 培训课程管理 / 班级管理 */
/** 分页查询课件 */
export const coursewarePage = declareRequest(
@ -39,3 +39,28 @@ export const coursePage = declareRequest(
"Get > /safetyEval/courseManagement/page",
"courseList: [] | res.data || [] & courseTotal: 0 | res.total || 0",
);
/** 新增课程 */
export const courseAdd = declareRequest(
"courseConfirmLoading",
"Post > @/safetyEval/courseManagement/save",
);
/** 课程详情 */
export const courseDetail = declareRequest(
"courseDetailLoading",
"Get > /safetyEval/courseManagement/get",
);
/** 修改课程 */
export const courseModify = declareRequest(
"courseConfirmLoading",
"Post > @/safetyEval/courseManagement/modify",
);
/** 分页查询班级 */
export const classPage = declareRequest(
"classLoading",
"Get > /safetyEval/classManagement/page",
"classList: [] | res.data || [] & classTotal: 0 | res.total || 0",
);

View File

@ -662,6 +662,21 @@ export const COURSEWARE_TYPE_MAP = COURSEWARE_TYPE_OPTIONS.reduce(
{},
);
/** 班级状态0未申请/1待开班/2培训中/3培训结束 */
export const CLASS_STATUS_OPTIONS = [
{ label: "未申请", value: 0 },
{ label: "待开班", value: 1 },
{ label: "培训中", value: 2 },
{ label: "培训结束", value: 3 },
];
export const CLASS_STATUS_MAP = {
0: { label: "未申请", status: "default" },
1: { label: "待开班", status: "warning" },
2: { label: "培训中", status: "processing" },
3: { label: "培训结束", status: "success" },
};
/** 试卷类型fixed平台试卷/config_rule规则试卷 */
export const PAPER_TYPE_OPTIONS = [
{ label: "平台试卷", value: "fixed" },

View File

@ -0,0 +1,278 @@
import { useEffect } from "react";
import { Badge, Button, Form, Input, Modal, Table, message } from "antd";
import dayjs from "dayjs";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import SearchForm from "~/components/SearchForm";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { tools } from "@cqsjjb/jjb-common-lib";
import { NS_COURSEWARE } from "~/enumerate/namespace";
import {
CLASS_STATUS_MAP,
CLASS_STATUS_OPTIONS,
COURSEWARE_TRAINING_TYPE_MAP,
COURSEWARE_TRAINING_TYPE_OPTIONS,
} from "~/enumerate/constant";
const { router } = tools;
/** 涉及学员人员数 / 完成人员数:学员统计接口未接入,暂用假数据 */
const MOCK_STUDENT_COUNT = 10;
const MOCK_COMPLETED_COUNT = 5;
/** 班级总人次:同上,暂用假数据 */
const MOCK_TOTAL_PERSON_TIMES = 93;
/** 搜索表单值 → 查询参数培训时间范围拆为后端字段yyyy-MM-dd */
const buildQuery = (value) => {
const { trainingDateRange, ...rest } = value || {};
return {
...rest,
...(trainingDateRange?.[0]
? { startDateBegin: trainingDateRange[0].format("YYYY-MM-DD") }
: {}),
...(trainingDateRange?.[1]
? { endDateEnd: trainingDateRange[1].format("YYYY-MM-DD") }
: {}),
current: 1,
size: 10,
};
};
/** 教育培训 — 班级管理 */
function ClassManagePage(props) {
const [searchForm] = Form.useForm();
const { courseware } = props;
const { classList, classTotal: total, classLoading: loading } =
courseware || {};
const handleSearch = () => {
props.classPage(router.query);
};
useEffect(() => {
const { startDateBegin, endDateEnd, ...rest } = router.query;
searchForm.setFieldsValue({
...rest,
...(startDateBegin && endDateEnd
? { trainingDateRange: [dayjs(startDateBegin), dayjs(endDateEnd)] }
: {}),
});
handleSearch();
}, []);
const onDelete = (record) => {
Modal.confirm({
title: "提示",
content: "数据将会删除,您是否确认删除?",
okText: "是",
cancelText: "否",
onOk: () => {
message.info(`班级「${record.className}」删除接口待接入`);
},
});
};
const columns = [
{
title: "序号",
width: 70,
fixed: "left",
render: (_, __, index) => {
const current = Number(router.query.current) || 1;
const size = Number(router.query.size) || 10;
return (current - 1) * size + index + 1;
},
},
{
title: "参训单位",
dataIndex: "unitName",
width: 180,
ellipsis: true,
render: (v) => v || "-",
},
{
title: "班级名称",
dataIndex: "className",
width: 180,
ellipsis: true,
},
{
title: "班级编码",
dataIndex: "classCode",
width: 180,
},
{
title: "培训类型",
dataIndex: "trainingType",
width: 160,
ellipsis: true,
render: (v) => COURSEWARE_TRAINING_TYPE_MAP[v] ?? (v || "-"),
},
{
title: "培训开始时间",
dataIndex: "startDate",
width: 120,
render: (v) => v || "-",
},
{
title: "结束时间",
dataIndex: "endDate",
width: 120,
render: (v) => v || "-",
},
{
title: "涉及学员人员数",
dataIndex: "studentCount",
width: 120,
render: () => MOCK_STUDENT_COUNT,
},
{
title: "完成人员数",
dataIndex: "completedCount",
width: 100,
render: () => MOCK_COMPLETED_COUNT,
},
{
title: "班级状态",
dataIndex: "status",
width: 100,
render: (v) => {
const item = CLASS_STATUS_MAP[v];
return item ? <Badge status={item.status} text={item.label} /> : "-";
},
},
{
title: "操作",
width: 240,
fixed: "right",
render: (_, record) => (
<TableAction>
<Button
type="link"
size="small"
onClick={() => message.info("班级编辑接口待接入")}
>
编辑
</Button>
<Button
type="link"
size="small"
onClick={() => message.info("学员列表功能待接入")}
>
学员列表
</Button>
<Button
type="link"
size="small"
onClick={() => message.info("课程列表功能待接入")}
>
课程列表
</Button>
{record.status === 2 && (
<Button
type="link"
size="small"
onClick={() => message.info("班级延期接口待接入")}
>
延期
</Button>
)}
<Button
danger
type="link"
size="small"
onClick={() => onDelete(record)}
>
删除
</Button>
</TableAction>
),
},
];
return (
<PageLayout title="班级管理">
<SearchForm
style={{ marginBottom: 24 }}
form={searchForm}
loading={loading}
formLine={[
<Form.Item key="classCode" name="classCode">
<ControlWrapper.Input
label="班级编码"
placeholder="请输入"
allowClear
maxLength={50}
/>
</Form.Item>,
<Form.Item key="className" name="className">
<ControlWrapper.Input
label="班级名称"
placeholder="请输入"
allowClear
maxLength={50}
/>
</Form.Item>,
<Form.Item key="trainingType" name="trainingType">
<ControlWrapper.Select
label="培训类型"
placeholder="请选择"
allowClear
style={{ width: "100%" }}
options={COURSEWARE_TRAINING_TYPE_OPTIONS}
/>
</Form.Item>,
<Form.Item key="status" name="status">
<ControlWrapper.Select
label="班级状态"
placeholder="请选择"
allowClear
style={{ width: "100%" }}
options={CLASS_STATUS_OPTIONS}
/>
</Form.Item>,
<Form.Item key="trainingDateRange" name="trainingDateRange">
<ControlWrapper.DatePicker.RangePicker label="培训时间" />
</Form.Item>,
]}
onReset={(value) => {
router.query = buildQuery(value);
handleSearch();
}}
onFinish={(value) => {
router.query = buildQuery(value);
handleSearch();
}}
/>
<Table
rowKey="id"
columns={columns}
dataSource={Array.isArray(classList) ? classList : []}
scroll={{ x: 1800, y: props.scrollY }}
loading={loading}
pagination={{
total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (t) => `${t}`,
current: Number(router.query.current) || 1,
pageSize: Number(router.query.size) || 10,
onChange: (page, pageSize) => {
router.query = { ...router.query, current: page, size: pageSize };
handleSearch();
},
}}
/>
</PageLayout>
);
}
export default Connect(
[NS_COURSEWARE],
true,
)(AntdTableFuncControl(ClassManagePage));

View File

@ -0,0 +1,414 @@
import { useEffect, useState } from "react";
import {
Button,
Form,
Input,
Modal,
Select,
Space,
Spin,
Table,
message,
} from "antd";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import PreviewUrlButton from "~/components/PreviewUrlButton";
import { tools } from "@cqsjjb/jjb-common-lib";
import AttachmentUpload from "~/components/AttachmentUpload";
import { NS_COURSEWARE } from "~/enumerate/namespace";
import {
COURSEWARE_TRAINING_TYPE_MAP,
COURSEWARE_TRAINING_TYPE_OPTIONS,
} from "~/enumerate/constant";
const { TextArea } = Input;
const { router } = tools;
/** 教育培训 — 新增/编辑课程 */
function CourseAddPage(props) {
const [form] = Form.useForm();
const [selectOpen, setSelectOpen] = useState(false);
const courseId = router.query.courseId;
const isEdit = !!courseId;
// 查看模式:仅展示不可编辑
const isView = router.query.mode === "view";
// 编辑模式:详情就绪后再挂载表单,通过 initialValues 回显;新增模式直接挂载
const confirmLoading = props.courseware?.courseConfirmLoading;
const { courseDetailLoading } = props.courseware;
useEffect(() => {
if (!isEdit) return;
(async () => {
const res = await props.courseDetail({ id: courseId });
if (res?.success !== false && res?.data) {
form.setFieldsValue({
courseName: res.data.courseName,
trainingType: res.data.trainingType,
courseDescription: res.data.courseDescription,
courseCover: JSON.parse(res.data.courseCover || "[]"),
courseRelCoursewareDTOList: (res.data.courseRelCoursewareVOList || []).map(
({
coursewareId,
coursewareName,
coursewareDocument,
classHourDuration,
creditHours,
sort,
}) => ({
coursewareId,
coursewareName,
coursewareDocument,
classHourDuration,
creditHours,
sort,
}),
),
})
} else {
props.history.goBack();
}
})();
}, []);
const handleSubmit = async () => {
try {
const values = await form.validateFields();
// 封面组件值为 fileList 数组,提交时序列化为 JSON 数组字符串
values.courseCover = values.courseCover?.length
? JSON.stringify(values.courseCover)
: undefined;
// 归属课件Form.List 未注册字段coursewareId 等)不在 validateFields 结果中,从表单 store 取完整数据并附带排序
const relList = form.getFieldValue("courseRelCoursewareDTOList") || [];
values.courseRelCoursewareDTOList = relList.length
? relList.map((item, index) => ({ ...item, sort: index + 1 }))
: undefined;
const res = await (isEdit
? props.courseModify({ id: courseId, ...values })
: props.courseAdd(values));
if (res?.success !== false) {
message.success("保存成功");
props.history.goBack();
}
} catch {
// 表单校验失败或请求异常,由 antd / http 层提示
}
};
return (
<PageLayout
title={isView ? "查看课程" : isEdit ? "编辑课程" : "新增课程"}
history={props.history}
previous
footer={
isView ?
null
: (
<Space>
<Button onClick={() => props.history.goBack()}>取消</Button>
<Button
type="primary"
loading={confirmLoading}
onClick={handleSubmit}
>
提交
</Button>
</Space>
)
}
>
<Spin spinning={isEdit && courseDetailLoading}>
{(
<>
<h3>课程基本信息</h3>
<Form
form={form}
layout="vertical"
disabled={isView}
>
<Form.Item
label="课程名称"
name="courseName"
rules={[{ required: true, message: "请输入课程名称" }]}
>
<Input
placeholder="这里输入课程名称…"
allowClear
maxLength={50}
/>
</Form.Item>
<Form.Item
label="培训类型"
name="trainingType"
rules={[{ required: true, message: "请选择培训类型" }]}
>
<Select
placeholder="请选择培训类型"
allowClear
style={{ width: "100%" }}
options={COURSEWARE_TRAINING_TYPE_OPTIONS}
/>
</Form.Item>
<Form.Item
label="课程描述"
name="courseDescription"
rules={[{ required: true, message: "请输入课程描述" }]}
>
<TextArea
placeholder="这里输入课程描述…"
allowClear
rows={4}
maxLength={500}
showCount
/>
</Form.Item>
<AttachmentUpload
label="课程封面"
name="courseCover"
disabled={isView}
maxCount={1}
accept=".png,.jpg,.jpeg"
rules={[{ required: true, message: "请上传课程封面" }]}
/>
<h3>课程目录</h3>
<Form.List name="courseRelCoursewareDTOList">
{(_, { add, remove }) => {
// Form.List 重渲染时从 store 读取最新完整数据(含未注册字段)
const list = form.getFieldValue("courseRelCoursewareDTOList") || [];
return (
<>
{!isView && (
<Button
type="dashed"
icon={<PlusOutlined />}
style={{ marginBottom: 12 }}
onClick={() => setSelectOpen(true)}
>
添加课件
</Button>
)}
<Table
rowKey="coursewareId"
size="small"
columns={[
{ title: "序号", width: 60, render: (_, __, i) => i + 1 },
{
title: "课件名称",
render: (_, record) => (
<Form.Item
name={[record.fieldKey, "coursewareName"]}
noStyle
>
<Input
placeholder="请输入课件名称"
allowClear
maxLength={50}
/>
</Form.Item>
),
},
{
title: "课时时长(小时)",
dataIndex: "classHourDuration",
width: 130,
render: (v) => (v == null ? "-" : v),
},
{
title: "学时",
dataIndex: "creditHours",
width: 90,
render: (v) => (v == null ? "-" : v),
},
{
title: "操作",
width: 80,
render: (_, record) => {
const data = JSON.parse(record.coursewareDocument || "[]")?.[0] || {};
return (
<TableAction>
<PreviewUrlButton url={data.url} >预览</PreviewUrlButton>
{!isView && (
<Button
danger
type="link"
size="small"
icon={<DeleteOutlined />}
onClick={() => remove(record.fieldKey)}
>
删除
</Button>
)}
</TableAction>
);
}
,
},
]}
dataSource={list.map((item, fieldKey) => ({
...item,
fieldKey,
}))}
pagination={false}
locale={{
emptyText: list.length
? undefined
: "暂无课件,请点击添加课件",
}}
/>
<CoursewareSelectModal
open={selectOpen}
loading={props.courseware?.coursewareLoading}
dataSource={props.courseware?.coursewareList}
total={props.courseware?.coursewareTotal}
requestPage={props.coursewarePage}
selectedIds={list.map((item) => item.coursewareId)}
onOk={(rows) => {
// 课件列表记录映射为课程关联课件 DTO 字段,通过 Form.List 原生 add 逐条追加
rows.forEach(
({
id,
coursewareName,
coursewareDocument,
classHourDuration,
creditHours,
}) =>
add({
coursewareId: id,
coursewareName,
coursewareDocument,
classHourDuration,
creditHours,
}),
);
setSelectOpen(false);
}}
onCancel={() => setSelectOpen(false)}
/>
</>
);
}}
</Form.List>
</Form>
</>
)}
</Spin>
</PageLayout>
);
}
/** 选择课件弹窗:数据源同培训课件管理列表 */
function CoursewareSelectModal({
open,
loading,
dataSource,
total,
requestPage,
selectedIds,
onOk,
onCancel,
}) {
const [query, setQuery] = useState({ current: 1, size: 10 });
const [keyword, setKeyword] = useState("");
const [selectedRows, setSelectedRows] = useState([]);
const handleSearch = (params) => {
setQuery(params);
requestPage(params);
};
return (
<Modal
open={open}
title="添加课件"
width={760}
destroyOnHidden
okText={`确定${selectedRows.length ? `(已选 ${selectedRows.length}` : ""}`}
okButtonProps={{ disabled: !selectedRows.length }}
onOk={() => onOk(selectedRows)}
onCancel={onCancel}
afterOpenChange={(visible) => {
if (visible) {
setKeyword("");
setSelectedRows([]);
handleSearch({ current: 1, size: 10 });
}
}}
>
<Input.Search
placeholder="请输入课件名称"
allowClear
style={{ width: 280, marginBottom: 12 }}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
onSearch={(value) =>
handleSearch({ current: 1, size: query.size, coursewareName: value })
}
/>
<Table
rowKey="id"
size="small"
loading={loading}
columns={[
{ title: "课件名称", dataIndex: "coursewareName", ellipsis: true },
{
title: "培训类型",
dataIndex: "trainingType",
width: 180,
render: (v) => COURSEWARE_TRAINING_TYPE_MAP[v] ?? (v || "-"),
},
{
title: "课时时长(小时)",
dataIndex: "classHourDuration",
width: 130,
render: (v) => (v == null ? "-" : v),
},
{
title: "学时",
dataIndex: "creditHours",
width: 80,
render: (v) => (v == null ? "-" : v),
},
{
title: "操作",
width: 80,
render: (_, record) => {
const data = JSON.parse(record.coursewareDocument || "[]")?.[0] || {};
return <TableAction>
<PreviewUrlButton url={data.url} >预览</PreviewUrlButton>
</TableAction>
}
},
]}
dataSource={Array.isArray(dataSource) ? dataSource : []}
rowSelection={{
preserveSelectedRowKeys: true,
selectedRowKeys: selectedRows.map((r) => r.id),
getCheckboxProps: (record) => ({
disabled: selectedIds.includes(record.id),
}),
onChange: (_, rows) => setSelectedRows(rows),
}}
pagination={{
total,
size: "small",
showTotal: (t) => `${t}`,
current: Number(query.current) || 1,
pageSize: Number(query.size) || 10,
onChange: (page, pageSize) =>
handleSearch({
current: page,
size: pageSize,
coursewareName: query.coursewareName,
}),
}}
/>
</Modal>
);
}
export default Connect([NS_COURSEWARE], true)(CourseAddPage);

View File

@ -0,0 +1,202 @@
import { useEffect } from "react";
import { Badge, Button, Form, Table, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import SearchForm from "~/components/SearchForm";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { tools } from "@cqsjjb/jjb-common-lib";
import { NS_COURSEWARE } from "~/enumerate/namespace";
import {
COURSEWARE_STATUS_MAP,
COURSEWARE_STATUS_OPTIONS,
COURSEWARE_TRAINING_TYPE_OPTIONS,
} from "~/enumerate/constant";
const { router } = tools;
/** 培训课程管理 */
function CourseManagePage(props) {
const [searchForm] = Form.useForm();
const { courseware } = props;
const { courseList: dataSource, courseTotal: total, courseLoading: loading } =
courseware || {};
const handleSearch = () => {
props.coursePage(router.query);
};
useEffect(() => {
searchForm.setFieldsValue(router.query);
handleSearch();
}, []);
const columns = [
{
title: "序号",
width: 70,
fixed: "left",
render: (_, __, index) => {
const current = Number(router.query.current) || 1;
const size = Number(router.query.size) || 10;
return (current - 1) * size + index + 1;
},
},
{
title: "课程名称",
dataIndex: "courseName",
width: 260,
ellipsis: true,
},
{
title: "课程描述",
dataIndex: "courseDescription",
width: 320,
ellipsis: true,
},
{
title: "课程状态",
dataIndex: "status",
width: 90,
render: (v) => {
const item = COURSEWARE_STATUS_MAP[v];
return item ? <Badge status={item.status} text={item.label} /> : "-";
},
},
{
title: "总课时",
dataIndex: "classHourDuration",
width: 90,
render: (v) => (v == null ? "-" : v),
},
{
title: "上传单位",
dataIndex: "uploadUnit",
width: 200,
ellipsis: true,
},
{
title: "是否已使用",
dataIndex: "used",
width: 100,
render: (v) => (v === 1 ? "已使用" : "未使用"),
},
{
title: "操作",
width: 180,
fixed: "right",
render: (_, record) => (
<TableAction>
<Button
type="link"
size="small"
onClick={() =>
props.history.push(`Add?courseId=${record.id}&mode=view`)
}
>
查看
</Button>
<Button
type="link"
size="small"
onClick={() => props.history.push(`Add?courseId=${record.id}`)}
>
编辑
</Button>
<Button
danger
type="link"
size="small"
onClick={() => message.info("课程删除接口待接入")}
>
删除
</Button>
</TableAction>
),
},
];
return (
<PageLayout
title="培训课程管理"
extra={
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => props.history.push("Add")}
>
新增
</Button>
}
>
<SearchForm
style={{ marginBottom: 24 }}
form={searchForm}
loading={loading}
formLine={[
<Form.Item key="courseName" name="courseName">
<ControlWrapper.Input
label="课程名称"
placeholder="请输入名称"
allowClear
maxLength={50}
/>
</Form.Item>,
<Form.Item key="trainingType" name="trainingType">
<ControlWrapper.Select
label="培训类型"
placeholder="请选择"
allowClear
style={{ width: "100%" }}
options={COURSEWARE_TRAINING_TYPE_OPTIONS}
/>
</Form.Item>,
<Form.Item key="status" name="status">
<ControlWrapper.Select
label="课程状态"
placeholder="请选择课程状态"
allowClear
style={{ width: "100%" }}
options={COURSEWARE_STATUS_OPTIONS}
/>
</Form.Item>,
]}
onReset={(value) => {
router.query = { ...value, current: 1, size: 10 };
handleSearch();
}}
onFinish={(value) => {
router.query = { ...value, current: 1, size: 10 };
handleSearch();
}}
/>
<Table
rowKey="id"
columns={columns}
dataSource={Array.isArray(dataSource) ? dataSource : []}
scroll={{ x: 1500, y: props.scrollY }}
loading={loading}
pagination={{
total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (t) => `${t}`,
current: Number(router.query.current) || 1,
pageSize: Number(router.query.size) || 10,
onChange: (page, pageSize) => {
router.query = { ...router.query, current: page, size: pageSize };
handleSearch();
},
}}
/>
</PageLayout>
);
}
export default Connect(
[NS_COURSEWARE],
true,
)(AntdTableFuncControl(CourseManagePage));

View File

@ -1,299 +1,6 @@
import { useEffect, useState } from "react";
import {
Badge,
Button,
Descriptions,
Form,
Modal,
Table,
message,
} from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import SearchForm from "~/components/SearchForm";
import PreviewUrlButton from "~/components/PreviewUrlButton";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { tools } from "@cqsjjb/jjb-common-lib";
import { NS_COURSEWARE } from "~/enumerate/namespace";
import {
COURSEWARE_STATUS_MAP,
COURSEWARE_STATUS_OPTIONS,
COURSEWARE_TRAINING_TYPE_MAP,
COURSEWARE_TRAINING_TYPE_OPTIONS,
} from "~/enumerate/constant";
import React from "react";
const { router } = tools;
/** 解析课件文档字段JSON 数组字符串,容错非法格式 */
const parseCoursewareDocument = (raw) => {
if (!raw) return [];
try {
const parsed = JSON.parse(raw);
return Array.isArray(parsed) ? parsed : [];
} catch {
return [];
}
};
/** 培训课程管理 */
function CourseManagePage(props) {
const [searchForm] = Form.useForm();
const [viewRecord, setViewRecord] = useState(null);
const { courseware } = props;
const { courseList: dataSource, courseTotal: total, courseLoading: loading } =
courseware || {};
const handleSearch = () => {
props.coursePage(router.query);
};
useEffect(() => {
searchForm.setFieldsValue(router.query);
handleSearch();
}, []);
const columns = [
{
title: "序号",
width: 70,
fixed: "left",
render: (_, __, index) => {
const current = Number(router.query.current) || 1;
const size = Number(router.query.size) || 10;
return (current - 1) * size + index + 1;
},
},
{
title: "课程名称",
dataIndex: "courseName",
width: 260,
ellipsis: true,
},
{
title: "课程描述",
dataIndex: "courseDescription",
width: 320,
ellipsis: true,
},
{
title: "课程状态",
dataIndex: "status",
width: 90,
render: (v) => {
const item = COURSEWARE_STATUS_MAP[v];
return item ? <Badge status={item.status} text={item.label} /> : "-";
},
},
{
title: "总课时",
dataIndex: "classHourDuration",
width: 90,
render: (v) => (v == null ? "-" : v),
},
{
title: "上传单位",
dataIndex: "uploadUnit",
width: 200,
ellipsis: true,
},
{
title: "是否已使用",
dataIndex: "used",
width: 100,
render: (v) => (v === 1 ? "已使用" : "未使用"),
},
{
title: "操作",
width: 200,
fixed: "right",
render: (_, record) => (
<TableAction>
<Button
type="link"
size="small"
onClick={() => setViewRecord(record)}
>
查看
</Button>
<Button
type="link"
size="small"
onClick={() => message.info("课程启用/禁用接口待接入")}
>
{record.status === 1 ? "禁用" : "启用"}
</Button>
<Button
type="link"
size="small"
onClick={() => message.info("课程编辑接口待接入")}
>
编辑
</Button>
<Button
danger
type="link"
size="small"
onClick={() => message.info("课程删除接口待接入")}
>
删除
</Button>
</TableAction>
),
},
];
const relatedCourseware = viewRecord?.courseRelCoursewareVOList || [];
return (
<PageLayout title="培训课程管理">
<SearchForm
style={{ marginBottom: 24 }}
form={searchForm}
loading={loading}
formLine={[
<Form.Item key="courseName" name="courseName">
<ControlWrapper.Input
label="课程名称"
placeholder="请输入名称"
allowClear
maxLength={50}
/>
</Form.Item>,
<Form.Item key="trainingType" name="trainingType">
<ControlWrapper.Select
label="培训类型"
placeholder="请选择"
allowClear
style={{ width: "100%" }}
options={COURSEWARE_TRAINING_TYPE_OPTIONS}
/>
</Form.Item>,
<Form.Item key="status" name="status">
<ControlWrapper.Select
label="课程状态"
placeholder="请选择课程状态"
allowClear
style={{ width: "100%" }}
options={COURSEWARE_STATUS_OPTIONS}
/>
</Form.Item>,
]}
onReset={(value) => {
router.query = { ...value, current: 1, size: 10 };
handleSearch();
}}
onFinish={(value) => {
router.query = { ...value, current: 1, size: 10 };
handleSearch();
}}
/>
<Table
rowKey="id"
columns={columns}
dataSource={Array.isArray(dataSource) ? dataSource : []}
scroll={{ x: 1500, y: props.scrollY }}
loading={loading}
pagination={{
total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (t) => `${t}`,
current: Number(router.query.current) || 1,
pageSize: Number(router.query.size) || 10,
onChange: (page, pageSize) => {
router.query = { ...router.query, current: page, size: pageSize };
handleSearch();
},
}}
/>
<Modal
title="课程详情"
open={!!viewRecord}
width={760}
footer={null}
onCancel={() => setViewRecord(null)}
>
<Descriptions column={2} bordered size="small">
<Descriptions.Item label="课程名称" span={2}>
{viewRecord?.courseName || "-"}
</Descriptions.Item>
<Descriptions.Item label="培训类型">
{COURSEWARE_TRAINING_TYPE_MAP[viewRecord?.trainingType]
?? (viewRecord?.trainingType || "-")}
</Descriptions.Item>
<Descriptions.Item label="课程状态">
{COURSEWARE_STATUS_MAP[viewRecord?.status]?.label || "-"}
</Descriptions.Item>
<Descriptions.Item label="总课时">
{viewRecord?.classHourDuration ?? "-"}
</Descriptions.Item>
<Descriptions.Item label="是否已使用">
{viewRecord?.used === 1 ? "已使用" : "未使用"}
</Descriptions.Item>
<Descriptions.Item label="上传单位" span={2}>
{viewRecord?.uploadUnit || "-"}
</Descriptions.Item>
<Descriptions.Item label="课程描述" span={2}>
{viewRecord?.courseDescription || "-"}
</Descriptions.Item>
</Descriptions>
<div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>
关联课件
</div>
<Table
rowKey={(row) => row.coursewareId}
size="small"
columns={[
{ title: "序号", width: 60, render: (_, __, i) => i + 1 },
{
title: "课件名称",
dataIndex: "coursewareName",
ellipsis: true,
},
{
title: "课时时长(小时)",
dataIndex: "classHourDuration",
width: 130,
render: (v) => (v == null ? "-" : v),
},
{
title: "学时",
dataIndex: "creditHours",
width: 90,
render: (v) => (v == null ? "-" : v),
},
{
title: "课件文档",
dataIndex: "coursewareDocument",
width: 160,
render: (raw) => {
const files = parseCoursewareDocument(raw);
return files.length ? (
files.map((f, i) => (
<PreviewUrlButton key={f.uid || i} url={f.url}>
{f.name || f.url}
</PreviewUrlButton>
))
) : (
"-"
);
},
},
]}
dataSource={relatedCourseware}
pagination={false}
/>
</Modal>
</PageLayout>
);
/** 课程管理路由出口List 课程列表 / Add 新增课程) */
export default function CourseManage(props) {
return props.children;
}
export default Connect(
[NS_COURSEWARE],
true,
)(AntdTableFuncControl(CourseManagePage));

View File

@ -295,10 +295,15 @@ const menuItems = [
icon: <FileTextOutlined />,
},
{
key: "/safetyEval/container/EduTraining/CourseManage",
key: "/safetyEval/container/EduTraining/CourseManage/List",
label: "培训课程管理",
icon: <FileTextOutlined />,
},
{
key: "/safetyEval/container/EduTraining/ClassManage",
label: "班级管理",
icon: <FileTextOutlined />,
},
{
key: "/safetyEval/container/EduTraining/PaperManage/List",
label: "试卷管理",