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
}}
/>
)
}
})