import { NAlert, NButton, NCard, NDialog, NDrawer, NDrawerContent, NDropdown, NEmpty, NForm, NFormItem, NGi, NGrid, NIcon, NInput, NModal, NSelect, NSpace, NSpin, NTooltip, NUpload, UploadCustomRequestOptions, useDialog, useMessage } from 'naive-ui' import { defineComponent, onMounted, reactive, ref } from 'vue' import { useRoute } from 'vue-router' import { lessonCoursewareDetailPage, lessonCoursewareDetailSave, lessonCoursewareDetailUpdate, lessonTrainingPage, lessonCoursewareDetailRemove, lessonCoursewareExaminationMapperQueryAll, lessonCoursewareDetailLock, api_openFileImportInfoSave, api_removeTraining, api_getUsedLevelDetail } from '../../api' import styles from '../index.module.less' import { EditFilled, DeleteFilled, LockFilled, UnlockFilled } from '@vicons/antd' import CourseKnowledgePoint from '../model/CourseKnowledgePoint' import SelectAfterClassTraining from '../model/selectAfterClassTraining' import AddUnitTest from '../model/AddUnitTest' import TheLink from '@/components/TheLink' import { api_uploadFile } from '@/plugins/uploadFile' const courseTypeIds: any = [] for(let i = 1; i <= 20; i++) { courseTypeIds.push({ label: i, value: i }) } export default defineComponent({ name: 'courseConfiguration', props: { course: { type: Object, default: () => {} } }, setup(props, ctx) { const message = useMessage() const dialog = useDialog() const route = useRoute() const addFormRef = ref() const addForm = reactive({ open: false, id: '', name: '', //课时名称 lessonTargetDesc: '', //课时名称 lessonTrainingId: '', //课后作业 lockEnable: 'true', level: null, accessScope: 0 }) // 课件添加课程 const addCourseware = () => { addFormRef.value.validate(async (err: any) => { if (!err) { const body = { lessonCoursewareId: route.query.id, name: addForm.name, level: addForm.level, lessonTargetDesc: addForm.lessonTargetDesc, lockEnable: addForm.lockEnable, accessScope: addForm.accessScope } let res: any if (addForm.id) { try { res = await lessonCoursewareDetailUpdate({ ...body, id: addForm.id }) } catch (error) {} } else { try { res = await lessonCoursewareDetailSave(body) } catch (error) {} } if (res?.code == 200) { message.success('保存成功') addForm.open = false getDetail() } } }) } const state = reactive({ dataList: [] as any, mapperList: [] as any }) const getDetail = async () => { try { const { data } = await lessonCoursewareDetailPage({ lessonCoursewareId: route.query.id, page: 1, rows: 1000 }) if (Array.isArray(data?.rows)) { state.dataList = data.rows } } catch (error) {} } /** 查询课件下的所有阶段自测 */ const getMapperAll = async () => { try { const { data } = await lessonCoursewareExaminationMapperQueryAll(route.query.id) if (Array.isArray(data)) { state.mapperList = data } } catch (error) {} } /** 获取级别 */ const getLevels = async (item?: any) => { const { data } = await api_getUsedLevelDetail({ id: item?.id, lessonCoursewareId: route.query.id }) if(Array.isArray(data)) { courseTypeIds.forEach((item: any) => { item.disabled = data.includes(item.value) ? true : false }) } } onMounted(() => { getDetail() getMapperAll() }) //删除课时 const hanldeDelete = (item: any) => { const d = dialog.warning({ title: '警告', content: '是否确认删除此课时?', positiveText: '确定', negativeText: '取消', onPositiveClick: async () => { d.loading = true try { const res: any = await lessonCoursewareDetailRemove(item.id) if (res?.code == 200) { message.success('删除成功') getDetail() } } catch (error) {} d.loading = false } }) } //绑定课后作业 const afterTrain = reactive({ open: false, id: '' }) const addAfterTrain = async (row: any) => { console.log('🚀 ~ row', row) const body = { id: addForm.id, lessonTrainingId: row.id, name: addForm.name, lessonTargetDesc: addForm.lessonTargetDesc } try { const res: any = await lessonCoursewareDetailUpdate(body) if (res?.code == 200) { message.success('保存成功') afterTrain.open = false getDetail() } } catch (error) {} } // 课程配置 const courseData = reactive({ open: false, title: '', item: null }) //阶段自测 const unitData = reactive({ open: false, model: {} }) /** 切换课件是否锁定 */ const toggleLock = (item: any) => { const d = dialog.warning({ title: '警告', content: `是否确认${item.lockFlag ? '解锁' : '锁定'}此课时?`, positiveText: '确定', negativeText: '取消', onPositiveClick: async () => { d.loading = true try { const res = await lessonCoursewareDetailLock({ id: item.id, lockFlag: !item.lockFlag }) message.success('操作成功') getDetail() } catch (error) {} d.loading = false } }) } /** 删除选择的作业 */ const hanldeRemoveTraning = (item: any) => { const d = dialog.warning({ title: '警告', content: `是否确认删除作业?`, positiveText: '确定', negativeText: '取消', onPositiveClick: async () => { d.loading = true try { const res = await api_removeTraining(item.id) message.success('删除成功') getDetail() } catch (error) {} d.loading = false } }) } const customRequest_importData = reactive({ loading: false, dataType: 'EXAMINATION', importRef: null as any }) const customRequest_importFile = async (data: UploadCustomRequestOptions) => { console.log(data.file) const msg = message.loading('正在上传文件', { duration: 0 }) customRequest_importData.loading = true try { const fileUrl = await api_uploadFile(data.file.file, () => {}) const res = await api_openFileImportInfoSave({ dataType: customRequest_importData.dataType, fileName: data.file.name, importUrl: fileUrl, lessonId: route.query.id }) console.log('🚀 ~ res:', res) customRequest_importData.loading = false if (res.data) { msg.destroy() // 空表格 if (res.data.insertRow === 0 && res.data.invalidRow === 0) { message.error('导入失败,表格为空') return } if (res.data.respUrl) { dialog.error({ title: '信息', content: () => (
导入失败,点击下载错误信息
下载
) }) return } getDetail() message.success('导入成功') } else { message.error('请下载模板后,填写数据再导入') } } catch {} customRequest_importData.loading = false msg.destroy() } return () => (
{ addForm.name = '' addForm.lessonTargetDesc = '' addForm.lessonTrainingId = '' addForm.id = '' addForm.lockEnable = '' addForm.accessScope = 0 getLevels() addForm.open = true }} > 添加课程 { unitData.open = true unitData.model = {} }} > 添加阶段自测 ( 单元测验模板 ) }, { key: '1', type: 'render', render: () => ( 课后训练模板 ) } ]} > 下载模板
(customRequest_importData.importRef = el)} showFileList={false} accept=".xlsx" customRequest={customRequest_importFile} > { customRequest_importData.dataType = key console.log(customRequest_importData.importRef) customRequest_importData.importRef?.clear() customRequest_importData.importRef?.openOpenFileDialog() }} > e.stopPropagation()}> 导入数据
{state.dataList.map((item: any) => { const mapper = state.mapperList.find( (n: any) => n.parentCoursewareDetailId == item.id ) return ( <> {{ header: () =>
{item.name}{item.level && ({item.level})}
, default: () => (
{item.lessonTargetDesc}
建议学习时长 {item.lessonDurationSecond || '0'}s
知识点 {item.knowledgePointIds?.split(',').filter(Boolean).length || 0}个
课后作业 {item.lessonTrainingId ? ( <> {item.lessonTrainingName} {{ default: () => '删除', trigger: () => ( hanldeRemoveTraning(item)} > } /> ) }} ) : ( '无' )}
), 'header-extra': () => ( <> {{ default: () => (item.lockFlag ? '解锁' : '锁定'), trigger: () => ( toggleLock(item)} > : } /> ) }} {{ default: () => '编辑', trigger: () => ( { addForm.name = item.name addForm.lessonTargetDesc = item.lessonTargetDesc addForm.id = item.id addForm.lockEnable = item.lockEnable + '' addForm.accessScope = item.accessScope ?? 0 addForm.level = item.level getLevels(item) addForm.open = true }} > } /> ) }} {{ default: () => '删除', trigger: () => ( hanldeDelete(item)} > } /> ) }} ), action: () => ( { courseData.title = item.name courseData.open = true courseData.item = item }} > 选择知识点 { addForm.id = item.id addForm.lessonTargetDesc = item.lessonTargetDesc addForm.name = item.name afterTrain.open = true }} > 选择课后作业 ) }}
{mapper && ( {{ default: () => (
{mapper.desc}
单团学生 {mapper?.details?.[0]?.unitExaminationName || '无'}
双团学生 {mapper?.details?.[1]?.unitExaminationName || '无'}
多团学生 {mapper?.details?.[2]?.unitExaminationName || '无'}
), action: () => ( { unitData.open = true unitData.model = mapper }} > 编辑阶段自测 ) }}
)} ) })}
{state.dataList.length ? null : } {/* 课程编辑 */} (addForm.open = false)}>取消 addCourseware()}> 确认 {/* 课后作业 */} {/* 课程详情编辑 */} {{ default: () => ( { getDetail() }} /> ), footer: () => ( (courseData.open = false)}>取消 (courseData.open = false)}> 确认 ) }} {/* 阶段自测 */} { if (result) { getDetail() getMapperAll() } unitData.open = false }} />
) } })