From 8228b33cb0b157a9a238ab722b882178e9c49212 Mon Sep 17 00:00:00 2001 From: 670788339 <670788339@qq.com> Date: Mon, 10 Nov 2025 18:49:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/course.js | 9 +- src/components/Course/courseForm.vue | 633 +++++++++++++++++++-------- src/components/Course/courseTag.vue | 40 +- 3 files changed, 470 insertions(+), 212 deletions(-) diff --git a/src/api/modules/course.js b/src/api/modules/course.js index 00db854c..197ee0e2 100644 --- a/src/api/modules/course.js +++ b/src/api/modules/course.js @@ -440,6 +440,12 @@ const queryCrowd=function(query){ const ids=function (data){ return ajax.postJson('/xboe/m/course/manage/ids',data); } + +const saveTip = function() { + return ajax.postJson('/xboe/m/course/manage/saveTip'); +} + + export default { saveBase, submitCourse, @@ -482,6 +488,7 @@ export default { exportCourseAudit, exportCourse, queryCrowd, - ids + ids, + saveTip } diff --git a/src/components/Course/courseForm.vue b/src/components/Course/courseForm.vue index 888f6573..fc28e01b 100644 --- a/src/components/Course/courseForm.vue +++ b/src/components/Course/courseForm.vue @@ -5,15 +5,15 @@ -
- 是 - 否 -
+
+ 是 + 否 +
- - + + @@ -41,6 +41,41 @@ 确定 --> + + +
+
+
操作引导
+
+
+
1
+
+
设置内容分类
+
当选择内容分类后，其关联标签将在下拉列表中优先显示。
+
+
+
+
2
+
+
添加课程标签
+
为课程添加相关标签,最多5个，便于搜索和分类,可回车创建新标签
+
+
+
+ +
+
+ + +
+ + @@ -64,22 +99,30 @@ - + + :options="sysTypeListMap" + @focus="onContentTypeFocus" + @change="onContentTypeChange"> + - - + + + + + - - 选择 - + + 选择 + @@ -112,11 +155,11 @@ - + - + @@ -153,11 +196,11 @@ + maxlength="255" + show-word-limit + :rows="3" + v-model="courseInfo.summary" + placeholder="请尽量填写课程简介，用于列表中显示，可以让用户更容易了解课程信息"> @@ -221,14 +264,16 @@ - + + :options="sysTypeListMap" + @focus="onContentTypeFocus" + @change="onContentTypeChange"> @@ -256,21 +301,25 @@ --> - - + + + + - - {{ tag }} - + + {{ tag }} + - - 选择 - + + 选择 + @@ -278,13 +327,13 @@ - + - + @@ -397,8 +446,8 @@ - - + + 确 定 @@ -536,7 +585,13 @@ export default { dlgShow: false }, rightTypeId: {}, - catalogSortDialogShow: false + catalogSortDialogShow: false, + // 蒙层引导相关数据 + showGuidance: false, + currentStep: 1, + highlightStyle: {}, + guidanceElements: [], + isFirstCreate: false, // 标记是否为首次创建 }; }, created() { @@ -620,14 +675,14 @@ export default { this.$emit('change', tags.slice(0, 5)); // 确保传出数据也不超过5个 }, showChooseOrg(){ - this.$refs.refChooseOrg.dlgShow = true; + this.$refs.refChooseOrg.dlgShow = true; }, removeCrowd(e){ //console.log(e); if(e.disabled){ - this.$message.error("您不能移除创建人加的受众"); - this.courseCrowds.push(e); - return false; + this.$message.error("您不能移除创建人加的受众"); + this.courseCrowds.push(e); + return false; } }, confirmChooseOrg(orgInfo,parentInfo){ @@ -696,17 +751,17 @@ export default { // } // }); apiUserBasic.getUserAudiences(params).then(rs=>{ - if(rs.status==200){ - let crowdList=[]; - rs.result.list.forEach(item=>{ - crowdList.push({ - id:item.id, - name:item.audienceName, - disabled:false - }) - }); - this.userGroupList=crowdList; - } + if(rs.status==200){ + let crowdList=[]; + rs.result.list.forEach(item=>{ + crowdList.push({ + id:item.id, + name:item.audienceName, + disabled:false + }) + }); + this.userGroupList=crowdList; + } }) }, resOwnerName(code) { @@ -799,9 +854,9 @@ export default { if (!editData) { this.tips=[]; this.courseTags=[], - //console.log("新建课程？"); - //以下为了保证初始化处理 - this.weikeReset = Math.round(Math.random()) + ''; + //console.log("新建课程？"); + //以下为了保证初始化处理 + this.weikeReset = Math.round(Math.random()) + ''; this.onlineReset = Math.round(Math.random()) + ''; this.courseChooseShow = true; this.biaoke.tabIndex = 'base'; @@ -822,11 +877,11 @@ export default { // }); apiUserBasic.getOrgInfo(this.courseInfo.orgId).then(rs=>{ if(rs.status==200){ - this.orgName=rs.result.name; - this.courseInfo.orgName=rs.result.name; - //this.orgKid=rs.result.kid; - this.orgNamePath=rs.result.namePath; - } + this.orgName=rs.result.name; + this.courseInfo.orgName=rs.result.name; + //this.orgKid=rs.result.kid; + this.orgNamePath=rs.result.namePath; + } }); } @@ -849,7 +904,7 @@ export default { }, resetCurCourseContent() { - this.curContent = { id: '', contentType: 0, contentName: '', content: '', csectionId: '', contentName: '', contentRefId: '', courseId: this.courseInfo.id }; + this.curContent = { id: '', contentType: 0, contentName: '', content: '', csectionId: '', contentRefId: '', courseId: this.courseInfo.id }; }, // chooseCourseType(item, idx, open) { // this.courseChooseId = item.id; @@ -897,6 +952,12 @@ export default { this.courseInfo = rs.result; this.curCourseId = this.courseInfo.id console.log('保存课程成功',this.curCourseId) + console.log('isTip ',this.courseInfo.isTip) + if(this.courseInfo.isTip){ + // 检查是否为首次创建，显示引导 + this.checkAndShowGuidance(); + } + if (this.courseChooseId == 1) { this.weike.dlgShow = true; } else { @@ -904,12 +965,102 @@ export default { } this.$nextTick(() => { this.initTagComponent(); + // 如果显示引导，初始化高亮元素 + if (this.showGuidance) { + this.$nextTick(() => { + this.initGuidanceElements(); + this.highlightCurrentStep(); + }); + } }); } else { this.$message.error(rs.message); } }); }, + // 检查并显示引导 + checkAndShowGuidance() { + // 检查本地存储，判断是否为首次创建 + const hasShownGuidance = localStorage.getItem('course_creation_guidance_shown'); + if (!hasShownGuidance) { + this.showGuidance = true; + this.currentStep = 1; + this.isFirstCreate = true; + // 标记引导已显示 + localStorage.setItem('course_creation_guidance_shown', 'true'); + apiCourse.saveTip(); + } + }, + // 初始化引导元素 + initGuidanceElements() { + this.guidanceElements = Array.from(document.querySelectorAll('.guidance-highlight')); + }, + + // 高亮当前步骤对应的元素 + highlightCurrentStep() { + if (this.guidanceElements.length === 0) return; + + const currentElement = this.guidanceElements[this.currentStep - 1]; + if (currentElement) { + const rect = currentElement.getBoundingClientRect(); + this.highlightStyle = { + top: `${rect.top}px`, + left: `${rect.left}px`, + width: `${rect.width}px`, + height: `${rect.height}px`, + }; + + // 滚动到可见区域 + currentElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }, +// 下一步 + nextStep() { + if (this.currentStep < 2) { + this.currentStep++; + this.highlightCurrentStep(); + } else { + this.closeGuidance(); + } + }, + + // 上一步 + previousStep1() { + if (this.currentStep > 1) { + this.currentStep--; + this.highlightCurrentStep(); + } + }, + + // 关闭引导 + closeGuidance() { + this.showGuidance = false; + this.currentStep = 1; + this.highlightStyle = {}; + }, + // 内容分类获得焦点时的处理 + onContentTypeFocus() { + if (this.showGuidance && this.currentStep === 1) { + this.currentStep = 2; + this.highlightCurrentStep(); + } + }, + + // 内容分类改变时的处理 + onContentTypeChange() { + if (this.showGuidance && this.currentStep === 1) { + this.currentStep = 2; + this.highlightCurrentStep(); + } + }, + + // 标签获得焦点时的处理 + onTagFocus() { + if (this.showGuidance && this.currentStep === 2) { + this.closeGuidance(); + } + }, + // 新增初始化标签方法 initTagComponent() { if (this.$refs.courseTag) { @@ -956,29 +1107,29 @@ export default { if(!this.courseInfo.orgId){ //根据课程创建者获取机构id apiUser.getOrgSimpleByUserId(result.course.sysCreateAid).then(ors=>{ - if(ors.status==200){ - $this.courseInfo.orgId=ors.result.id; - // apiOrg.getSimple(ors.result.id).then(rrs=>{ - // if(rrs.status==200){ - // $this.orgName=rrs.result.name; - // $this.orgKid=rrs.result.kid; - // $this.orgNamePath=rrs.result.namePath; - // } - // }) - apiUserBasic.getOrgInfo(ors.result.id).then(rrs=>{ - if(rrs.status==200){ - $this.orgName=rrs.result.name; - this.courseInfo.orgName=rrs.result.name; - //$this.orgKid=rrs.result.kid; - $this.orgNamePath=rrs.result.namePath; - }else{ - this.courseInfo.orgId=''; - //this.$message.error('资源归属已变更，请重新选择'); - } - }) - }else{ - //this.$message.error('无机构关联，不需要提示'); - } + if(ors.status==200){ + $this.courseInfo.orgId=ors.result.id; + // apiOrg.getSimple(ors.result.id).then(rrs=>{ + // if(rrs.status==200){ + // $this.orgName=rrs.result.name; + // $this.orgKid=rrs.result.kid; + // $this.orgNamePath=rrs.result.namePath; + // } + // }) + apiUserBasic.getOrgInfo(ors.result.id).then(rrs=>{ + if(rrs.status==200){ + $this.orgName=rrs.result.name; + this.courseInfo.orgName=rrs.result.name; + //$this.orgKid=rrs.result.kid; + $this.orgNamePath=rrs.result.namePath; + }else{ + this.courseInfo.orgId=''; + //this.$message.error('资源归属已变更，请重新选择'); + } + }) + }else{ + //this.$message.error('无机构关联，不需要提示'); + } }) }else{ @@ -994,14 +1145,14 @@ export default { // }); apiUserBasic.getOrgInfo(this.courseInfo.orgId).then(rs=>{ if(rs.status==200){ - $this.orgName=rs.result.name; - $this.courseInfo.orgName=rs.result.name; - //$this.orgKid=rs.result.kid; - $this.orgNamePath=rs.result.namePath; - }else{ - $this.courseInfo.orgId=''; - $this.$message.error('资源归属已变更，请重新选择'); - } + $this.orgName=rs.result.name; + $this.courseInfo.orgName=rs.result.name; + //$this.orgKid=rs.result.kid; + $this.orgNamePath=rs.result.namePath; + }else{ + $this.courseInfo.orgId=''; + $this.$message.error('资源归属已变更，请重新选择'); + } }); } this.resOwnerArray=[]; @@ -1016,33 +1167,33 @@ export default { } this.sysTypeList=[]; if(result.course.sysType1!='' && result.course.sysType1!='0'){ - this.sysTypeList.push(result.course.sysType1); + this.sysTypeList.push(result.course.sysType1); } if(result.course.sysType2!='' && result.course.sysType2!='0'){ - this.sysTypeList.push(result.course.sysType2); + this.sysTypeList.push(result.course.sysType2); } if(result.course.sysType3!='' && result.course.sysType3!='0'){ - this.sysTypeList.push(result.course.sysType3); + this.sysTypeList.push(result.course.sysType3); } //console.log(this.sysTypeList,'this.sysTypeList'); //受众处理，crowds let crowdList=[]; if(result.crowds && result.crowds.length>0){ - result.crowds.forEach(crowd=>{ - let newCrowd={ - id:crowd.groupId, - name:crowd.groupName, - disabled:false - } - crowdList.push(newCrowd); - let hasUG=$this.userGroupList.some(ug=>{ - return ug.id==crowd.groupId; - }); - if(!hasUG){ - newCrowd.disabled=true; - $this.userGroupList.push(newCrowd); - } + result.crowds.forEach(crowd=>{ + let newCrowd={ + id:crowd.groupId, + name:crowd.groupName, + disabled:false + } + crowdList.push(newCrowd); + let hasUG=$this.userGroupList.some(ug=>{ + return ug.id==crowd.groupId; }); + if(!hasUG){ + newCrowd.disabled=true; + $this.userGroupList.push(newCrowd); + } + }); } this.courseCrowds=crowdList; //反向看userGroupList是否有 @@ -1110,7 +1261,7 @@ export default { inputValue: sec.name, confirmButtonText: '确定', cancelButtonText: '取消', - inputPattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,20}$/, + inputPattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,20}$/, inputErrorMessage:'不要超过20个字' }) .then(({ value }) => { @@ -1171,7 +1322,7 @@ export default { let order = []; if(cha.contents.length > 0) { cha.contents.forEach(con=>{ - order.push(con.sortIndex); + order.push(con.sortIndex); }) let addOrder = order.sort(function(a,b) {return b-a;}) this.addOrder = addOrder[0] + 1; @@ -1339,9 +1490,9 @@ export default { if(this.curContent.id == '') {// 新增 if(this.curContent.contentType == 60) { // 判断作业是否保存 - if(courseware.homework.content || courseware.homework.name || courseware.homework.deadTime){ - pass = false; - } + if(courseware.homework.content || courseware.homework.name || courseware.homework.deadTime){ + pass = false; + } } else if(this.curContent.contentType == 61) { //考试 // if(courseware.exam.paperContent != '') { @@ -1352,11 +1503,11 @@ export default { // } }else if(this.curContent.contentType == 41) { //图文 if(courseware.htmlContent.length > 7){ - pass = false; + pass = false; } }else if(this.curContent.contentType == 52) { //外部链接 if(courseware.linkInfo.url != '') { - pass = false; + pass = false; } } } else {// 编辑 @@ -1371,15 +1522,15 @@ export default { // } } else if(this.curContent.contentType == 41) { //图文 if(this.curContent.content !== courseware.htmlContent) { - pass = false; + pass = false; } } else if(this.curContent.contentType == 52) { //外部链接 if(this.curContent.content !== JSON.stringify(courseware.linkInfo)) { - pass = false; + pass = false; } } else if(this.curContent.contentType == 10 || this.curContent.contentType == 20) {// 视频 if(this.curContent.content !== JSON.stringify(courseware.curriculumData)) { - pass = false; + pass = false; } } } @@ -1541,61 +1692,61 @@ export default { //2023-1-5 对于默认管理员，不需要提交hrbp。直接提交并发布 let adminType=this.userInfo.adminType; if(adminType==1){ //默认管理员,直接审核通过 - apiCourseAudit.submitAndPublish(postData).then(res=>{ - setTimeout(function() { - $this.btnLoading = false; - }, 1000); - if (res.status === 200) { - //提交成功，直接关闭当前窗口 - this.$message.success('提交成功！！！'); - } else { - this.$message.error(res.message); - } - this.biaoke.dlgShow = false; - this.weike.dlgShow = false; - this.$emit('submitSuccess'); - }); + apiCourseAudit.submitAndPublish(postData).then(res=>{ + setTimeout(function() { + $this.btnLoading = false; + }, 1000); + if (res.status === 200) { + //提交成功，直接关闭当前窗口 + this.$message.success('提交成功！！！'); + } else { + this.$message.error(res.message); + } + this.biaoke.dlgShow = false; + this.weike.dlgShow = false; + this.$emit('submitSuccess'); + }); }else{ - //先获取HRBP审核 人员信息，姓名，机构路径，工号，用于邮件中的信息 - apiUserBasic.getOrgHrbpInfo(this.courseInfo.orgId).then(rs=>{ - if(rs.status==200 && rs.result){ - postData.auditUser={ - email:rs.result.email, - code:rs.result.userNo, - name:rs.result.name, - aid:rs.result.id, - orgId:rs.result.orgId - } - //下面的机构名称，路径不对，应该取课程的资源归属（机构）的路径 - postData.course.orgName=rs.result.orgNamePath+'/'+rs.result.orgName; - apiCourse.submitCourse(postData).then(res => { - //this.btnLoading=false; - setTimeout(function() { - $this.btnLoading = false; - }, 1000); - if (res.status === 200) { - //提交成功，直接关闭当前窗口 - this.$message.success('提交成功！！！'); - this.biaoke.dlgShow = false; - this.weike.dlgShow = false; - //提交成功回调处理 - this.$emit('submitSuccess'); - } else { - this.$message.error(res.message); - this.biaoke.dlgShow = false; - this.weike.dlgShow = false; - this.$emit('submitSuccess'); - } - }); - }else{ - $this.btnLoading = false; - this.$message.error('获取审核HRBP失败:'+rs.message); + //先获取HRBP审核 人员信息，姓名，机构路径，工号，用于邮件中的信息 + apiUserBasic.getOrgHrbpInfo(this.courseInfo.orgId).then(rs=>{ + if(rs.status==200 && rs.result){ + postData.auditUser={ + email:rs.result.email, + code:rs.result.userNo, + name:rs.result.name, + aid:rs.result.id, + orgId:rs.result.orgId } - }).catch(err=>{ - //this.$message.error('获取审核HRBP失败:'+err); - this.$message.error('获取审核HRBP失败，请检查资源归属下是否有HRBP审核人员'); - $this.btnLoading = false; - }) + //下面的机构名称，路径不对，应该取课程的资源归属（机构）的路径 + postData.course.orgName=rs.result.orgNamePath+'/'+rs.result.orgName; + apiCourse.submitCourse(postData).then(res => { + //this.btnLoading=false; + setTimeout(function() { + $this.btnLoading = false; + }, 1000); + if (res.status === 200) { + //提交成功，直接关闭当前窗口 + this.$message.success('提交成功！！！'); + this.biaoke.dlgShow = false; + this.weike.dlgShow = false; + //提交成功回调处理 + this.$emit('submitSuccess'); + } else { + this.$message.error(res.message); + this.biaoke.dlgShow = false; + this.weike.dlgShow = false; + this.$emit('submitSuccess'); + } + }); + }else{ + $this.btnLoading = false; + this.$message.error('获取审核HRBP失败:'+rs.message); + } + }).catch(err=>{ + //this.$message.error('获取审核HRBP失败:'+err); + this.$message.error('获取审核HRBP失败，请检查资源归属下是否有HRBP审核人员'); + $this.btnLoading = false; + }) } }, // 教师列标，远程查询 @@ -1704,19 +1855,19 @@ export default { diff --git a/src/components/Course/courseTag.vue b/src/components/Course/courseTag.vue index cac8686e..5c6257c1 100644 --- a/src/components/Course/courseTag.vue +++ b/src/components/Course/courseTag.vue @@ -1,23 +1,22 @@ -