hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-06 17:36:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'aliyun/20250708_add_wzy' into 20250708_add_wzy

Browse Source
This commit is contained in:
joshen
2025-08-29 11:42:05 +08:00
parent 4eebcf6c22 b4a0261f8a
commit 2738ea9b8f
11 changed files with 783 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/api/modules/courseTag.js Normal file
View File

@@ -0,0 +1,64 @@
/**课程标签模块的相关处理*/
import ajax from '@/utils/xajax.js'
/**
* 分页查询：标签列表
* @param {Object} query
*/
const portalPageList = function(query) {
return ajax.post('/xboe/m/coursetag/page', query);
}
//改变标签的公共属性
const changeTagPublic = function (row){
// 返回 Promise 的 API 调用
return ajax.post('/xboe/m/coursetag/changePublicStatus', {
id: row.id,
isPublic: row.isPublic
});
}
//改变标签的热点属性
const changeTagHot = function (row){
// 返回 Promise 的 API 调用
return ajax.post('/xboe/m/coursetag/changeHotStatus', {
id: row.id,
isHot: row.isHot
});
}
//查询指定id的标签关联的所有课程
const showCourseByTag = function (query){
return ajax.post('/xboe/m/coursetag/showCourseByTag', query);
}
//解除指定id的课程和某个标签之间的关联关系
const unbindCourseTagRelation = function (params){
return ajax.post('/xboe/m/coursetag/unbind', params);
}
//编辑课程：标签模糊查询
const searchTags = function (params){
return ajax.post('/xboe/m/coursetag/searchTags', params);
}
//编辑课程：创建标签(与当前课程关联)
const createTag = function (params){
return ajax.post('/xboe/m/coursetag/createTag', params);
}
//获取最新前10个热点标签
const getHotTagList = function (params){
return ajax.post('/xboe/m/coursetag/getHotTagList', params);
}
export default {
portalPageList,
changeTagPublic,
changeTagHot,
showCourseByTag,
unbindCourseTagRelation,
searchTags,
createTag,
getHotTagList
}

27
src/components/Course/courseForm.vue
View File

@@ -253,6 +253,9 @@
</el-select> -->
<choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice>
</el-form-item>
<el-form-item label="标签" required>
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
</el-form-item>
<el-form-item label="关键字">
<el-input v-model.trim="keywords" maxlength="100" @keyup.enter.native="changeKeywords" placeholder="请输入关键字"></el-input>
<el-tag v-for="(tag,index) in tips" size="small" :key="index" closable type="info" @close="closeKeywordsTag(tag,index)">
@@ -402,6 +405,7 @@
</div>
</template>
<script>
import courseTag from "@/components/Course/courseTag.vue";
import choice from '@/components/Course/choice.vue';
import agreement from '@/components/Portal/agreement.vue';
import weikeContent from '@/components/Course/weikeContent.vue';
@@ -418,6 +422,7 @@ import apiCourse from '../../api/modules/course.js';
import apiCourseAudit from '../../api/modules/courseAudit.js';
import apiOrg from '../../api/system/organiza.js';
import apiUser from '../../api/system/user.js';
import apiCourseTag from '../../api/modules/courseTag.js';
import WxEditor from '@/components/Editor/index.vue';
import catalogSort from '@/components/Course/catalogSort.vue';
import { courseType, getType } from '../../utils/tools.js';
@@ -426,7 +431,7 @@ import filecloud from '@/components/FileCloud/index.vue';
import chooseOrg from '@/components/System/chooseOrg.vue';
export default {
props: {},
components: { weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud,choice,chooseOrg},
components: { courseTag, weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud,choice,chooseOrg},
data() {
return {
keywords:'',//关键字的定义
@@ -466,6 +471,7 @@ export default {
orgName:'',
orgNamePath:'',
orgKid:'',
courseTags:[],
courseInfo: {
id: '',
name: '',
@@ -592,6 +598,15 @@ export default {
closeKeywordsTag(item,index){
this.tips.splice(index, 1);
},
// 处理标签变化事件
handleTagsChange(tags) {
console.log("父组件:",tags)
let ids = "";
tags.forEach(tag=>{
ids += tag.id + ',';
})
this.courseInfo.tags = ids;
},
showChooseOrg(){
this.$refs.refChooseOrg.dlgShow = true;
},
@@ -722,6 +737,7 @@ export default {
this.$emit('close');
},
initShow(editData) {
console.log('初始化显示内容============', editData)
//console.log(this.$refs.weikePanel,'this.$refs.weikePanel');
//this.$refs.weikePanel.init();
//this.$refs.onlineCourse.resetData();
@@ -769,6 +785,8 @@ export default {
this.tips=[];
if (!editData) {
this.tips=[];
this.courseTags=[],
//console.log("新建课程？");
//以下为了保证初始化处理
this.weikeReset = Math.round(Math.random()) + '';
@@ -865,6 +883,8 @@ export default {
if (rs.status == 200) {
this.courseChooseShow = false;
this.courseInfo = rs.result;
this.curCourseId = this.courseInfo.id
console.log('保存课程成功',this.curCourseId)
if (this.courseChooseId == 1) {
this.weike.dlgShow = true;
} else {
@@ -893,6 +913,8 @@ export default {
try {
const { result, status } = await apiCourse.detail(id);
if (status === 200) {
this.courseTags = result.tagList;
console.log('获取课程信息成功', this.courseTags);
//把数据附给三个对象
if(result.course.visible==''){
result.course.visible=false;
@@ -958,7 +980,6 @@ export default {
}
});
}
this.resOwnerArray=[];
if (result.course.resOwner1 == '') {
this.resOwnerArray.push(result.course.resOwner1);
@@ -1243,7 +1264,7 @@ export default {
teachers: saveTeachers,
crowds:crowds
};
//console.log(postData);
console.log(postData);
//this.btnLoading=false;
apiCourse
.saveBase(postData)

200
src/components/Course/courseTag.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<div class="tag-container">
<el-select style="width: 100%;"
v-model="selectedTags"
multiple
filterable
value-key="id"
remote
reserve-keyword
:remote-method="debouncedSearch"
:loading="loading"
:disabled="sysTypeList.length===0"
placeholder="按回车键Enter创建标签"
@remove-tag="handleTagRemove"
@change="handleSelectionChange"
@keyup.enter.native="handleEnterKey"
>
<el-option
v-for="item in searchResults"
:key="item.id"
:label="item.tagName"
:value="item"
/>
</el-select>
</div>
</template>
<script>
import { debounce } from 'lodash'
import apiCourseTag from '@/api/modules/courseTag.js'
import { mapGetters } from 'vuex';
export default {
props: {
courseId:{
type:String,
require:true,
},
sysTypeList:{
type:Array,
require:true,
default: []
},
maxTags: {
type: Number,
default: 10
},
// 添加：接收初始标签数据的props
initialTags: {
type: Array,
default: () => []
}
},
data() {
return {
selectedTags: [],
searchResults: [],
loading: false,
tagMap: new Map(),
inputBuffer: '',
params: {},
tag: {}
}
},
computed: {
...mapGetters(['userInfo']),
displayTags() {
return this.selectedTags.map(tag =>
typeof tag === 'object' ? tag : this.tagMap.get(tag)
).filter(Boolean)
}
},
created() {
this.debouncedSearch = debounce(this.doSearch, 500)
console.log("----------sysTypeList.length---------->"+this.sysTypeList.length)
console.log("----------sysTypeList.length---------->"+(this.sysTypeList.length===0))
},
// 添加：挂载时初始化标签数据
mounted() {
if (this.initialTags && this.initialTags.length > 0) {
this.selectedTags = this.initialTags;
this.searchResults = this.initialTags;
// 将初始标签添加到tagMap中，确保删除功能正常
this.initialTags.forEach(tag => {
if (tag.id) {
this.tagMap.set(tag.id, tag);
}
});
}
},
watch: {
// 监听课程ID变化，重置所有状态
courseId(newVal) {
this.resetTagState();
},
// 监听初始标签变化，重新加载
initialTags(newVal) {
this.selectedTags = newVal || [];
this.searchResults = newVal || [];
this.tagMap.clear(); // 清空旧缓存
newVal.forEach(tag => {
if (tag.id) this.tagMap.set(tag.id, tag);
});
}
},
methods: {
// 新增：重置标签状态的方法
resetTagState() {
this.selectedTags = [];
this.searchResults = [];
this.tagMap.clear();
this.loading = false;
this.params = {};
},
async doSearch(query) {
if (!query.trim()) {
this.searchResults = []
return
}
this.loading = true
try {
const {result:tags} = await apiCourseTag.searchTags({tagName:query})
tags.forEach(item => {
this.tagMap.set(item.id, item)
})
this.searchResults = tags
} finally {
this.loading = false
}
},
handleTagRemove(tagId) {
this.selectedTags = this.selectedTags.filter(id => id !== tagId)
this.$emit('change', this.displayTags)
},
removeTag(tagId) {
this.handleTagRemove(tagId)
},
//按回车键，创建新标签
handleEnterKey(event) {
const inputVal = event.target.value?.trim()
if (!this.searchResults.length && inputVal && this.selectedTags.length < this.maxTags) {
this.createNewTag(event.target.value.trim())
event.target.value = ''
}
},
// 新增：处理选择变化事件
handleSelectionChange() {
this.$emit('change', this.displayTags)
},
//创建新标签
async createNewTag(tagName) {
// 标签不能超过八个字
if (tagName.length > 8) {
this.$message.error('标签不能超过8个字')
return;
}
this.loading = true
try {
this.params.courseId = this.courseId;
this.params.tagName = tagName;
// 分类
if (this.sysTypeList.length > 0) {
this.params.sysType1 = this.sysTypeList[0]; //一级的id
}
if (this.sysTypeList.length > 1) {
this.params.sysType2 = this.sysTypeList[1]; //二级的id
}
if (this.sysTypeList.length > 2) {
this.params.sysType3 = this.sysTypeList[2]; //三级的id
}
const {result:newTag} = await apiCourseTag.createTag(this.params)
this.$message.success('标签创建成功');
this.searchResults.push(newTag)
console.log("----------newTag---------->",this.searchResults)
this.tagMap.set(newTag.id, newTag)
this.$emit('change', this.displayTags)
} finally {
this.loading = false
}
},
}
}
</script>
<style scoped>
.tag-container {
position: relative;
}
.tag-preview {
margin-top: 8px;
}
.el-tag {
margin-right: 6px;
margin-bottom: 6px;
}
</style>

3
src/data/pages.js
View File

@@ -128,7 +128,8 @@ export const iframes=[
{title:'查看受众', path:'/iframe/ugroup/view',hidden:false,component:'manage/AudienceView'},
{title:'问答管理', path:'/iframe/qa/manages',hidden:false,component:'qa/ManageList'},
{title:'待审核课程', path:'/iframe/course/noapproved',hidden:false,component:'examine/NotApproved'},
{title:'已审核课程', path:'/iframe/course/reviewed',hidden:false,component:'examine/Reviewed'}
{title:'已审核课程', path:'/iframe/course/reviewed',hidden:false,component:'examine/Reviewed'},
{title:'标签管理', path:'/iframe/tag/manages',hidden:false,component:'tag/TagManageList'},
]

4
src/views/article/ManageList.vue
View File

@@ -289,8 +289,8 @@ export default {
})
},
viewTopic(data) {
// window.open(this.webBaseUrl+'/article/detail?id='+data.id , '_blank')
this.$router.push({path:'/article/detail',query:{id:data.id}})
window.open(this.webBaseUrl+'/article/detail?id='+data.id , '_blank')
// this.$router.push({path:'/article/detail',query:{id:data.id}})
},
},
}

3
src/views/case/ManageList.vue
View File

@@ -697,7 +697,8 @@ export default {
},
viewTopic(data) {
if (data.confidentialityLevel == '内部') {
this.$router.push({ path: '/case/detail', query: { id: data.id } })
// this.$router.push({ path: '/case/detail', query: { id: data.id } })
window.open(this.webBaseUrl+'/case/detail?id='+data.id , '_blank')
} else {
this.$message.warning("非内部密级案例不能查看");
}

13
src/views/portal/case/Index.vue
View File

@@ -664,12 +664,6 @@ export default {
return !this.speciData.some(item => item.fielclass);
}
},
formatDateTime(dateArray) {
if (!dateArray || dateArray.length !== 6) return '';
const [year, month, day, hour, minute, second] = dateArray;
const pad = (num) => num.toString().padStart(2, '0');
return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
},
beforeRouteLeave (to, from, next) {
const isScroll = 'caseDetail,caseCharts,caseExcellent'
if(!isScroll.includes(to.name)){
@@ -868,6 +862,12 @@ export default {
this.popularityName = this.switch[e]
this.getPopularity()
},
formatDateTime(dateArray) {
if (!dateArray || dateArray.length !== 6) return '';
const [year, month, day, hour, minute, second] = dateArray;
const pad = (num) => num.toString().padStart(2, '0');
return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
},
handleType(msg){
// this.queryCondition.type = msg
},
@@ -2811,3 +2811,4 @@ export default {
}
}
</style>

2
src/views/portal/course/Detail.vue
View File

@@ -35,7 +35,7 @@
<!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
</div>
<div class="label-div">
<el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
<!-- <el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>-->
</div>
<!-- <div style="width:160px;height:50px"> -->
<!-- </div> -->

115
src/views/portal/course/Index.vue
View File

@@ -284,32 +284,40 @@
<!-- 内容导航 -->
<div class="topNav" v-if="!newData">
<div class="search-div nav" style="height: 100px;flex: 1;">
<div @click="handleTypeAllClick(1)" class="option-item" :class="{ 'option-active': ctypeTagAll }">
<div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[0].checked }">
<a>录播课</a>
<span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[1].checked }">
<a>线下课</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[2].checked }">
<a>学习项目</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
</div>
<a class="option-item">
<span @click="uClassClick" class="Uxtext" style=""> U选小课堂
<span @click="uClassClick" class="Uxtext" style="font-weight: bold"> U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</a>
<!-- 热点标签 add by zhengsongbo on 2025-08-01 -->
<div style="margin-top:10px;flex: 1;">
<div class="option-item" style="padding-top: 2px"
v-for="tag in hotTagsList" :key="tag.id"
@click="handleTagClick(tag, hotTagsList)">
<a class="custom" :class="tag.checked ? 'custom2' : ''">{{tag.tagName}}</a>
</div>
</div>
</div>
<div id="fixd-box" class="upload" style="margin-left: 26px;">
<div v-if="identity == 2 || identity == 3 || identity == 5">
@@ -327,7 +335,7 @@
<div style="line-height: 30px;">
<span class="item-title"> 搜索条件</span>
<el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)">{{
tag.name }}</el-tag>
tag.tagName }}</el-tag>
</div>
<div>
<el-button type="primary" size="mini" @click="handleClearTags">清除</el-button>
@@ -540,6 +548,7 @@ import { courseType, getType, toScore, formatDate, formatUserNumber, formatDateB
import { deepClone, param } from "../../../utils";
import apiSearchterm from "@/api/modules/searchterm.js";
import apiPlace from "@/api/phase2/place.js"
import apiCourseTag from '@/api/modules/courseTag.js'
export default {
name: "index",
components: {
@@ -574,6 +583,11 @@ export default {
list.push(item);
}
});
this.hotTagsList.forEach(item => {
if (item.checked) {
list.push(item);
}
});
this.oneList.forEach(one => {
var twoChildChecked = false;//是否有下级
one.children.forEach(two => {
@@ -640,6 +654,7 @@ export default {
},
data() {
return {
hotTagsList: [],
newData: false,//线上品牌系列隐藏
navTitle: [],
// 设置高亮
@@ -715,6 +730,14 @@ export default {
console.log(rs.message);
}
})
//初始化:获取最新前10个热点标签
apiCourseTag.getHotTagList(null).then(rs => {
if (rs.status == 200) {
this.hotTagsList = rs.result;
} else {
console.log(rs.message);
}
})
},
mounted() {
let screenWidth = window.screen.availWidth;
@@ -945,6 +968,9 @@ export default {
this.ctypeList.forEach(item => {
item.checked = false;
});
this.hotTagsList.forEach(item => {
item.checked = false;
});
this.oneList.forEach(one => {
one.checked = false;
one.children.forEach(two => {
@@ -972,6 +998,31 @@ export default {
this.searchData();
},
//点击标签
handleTagClick(item, list) {
item.checked = !item.checked;
// 收集所有选中的标签，只保留需要传递的字段（如id、tagName等）
const checkedTags = list.filter(item => item.checked).map(item => ({
id: item.id,
tagName: item.tagName,
// 其他需要传递的字段
}));
// 正确的实现方式：
let tagIds = '';
checkedTags.forEach(tag => {
tagIds += tag.id + ',';
});
// // 移除末尾可能的逗号
// if (tagIds.length > 0) {
// tagIds = tagIds.slice(0, -1);
// }
this.course.tags = tagIds
// 打印当前选中的标签ID数组，用于调试
console.log("当前选中的标签ID:", this.course.tags);
// 调用搜索方法
this.searchData();
},
//三级分类
handleOptionClick(item, level, list) {
// 线上品牌展示效果
@@ -1377,12 +1428,18 @@ export default {
},
getAllChecked() { //获取全部选中的标签
let list = [];
//获取选中的课程类型
this.ctypeList.forEach(item => {
if (item.checked) {
list.push(item);
}
});
//获取选中的热点标签
this.hotTagsList.forEach(item => {
if (item.checked) {
list.push(item);
}
});
this.oneList.forEach(one => {
one.children.forEach(two => {
two.children.forEach(three => {
@@ -1487,7 +1544,7 @@ export default {
item.name = item.name;
}
});
console.log(res.result.list,'data')
console.log(res.result.list,'data')
this.courseList = res?.result?.list ?? []
console.log(this.courseList);
if (this.newData) {
@@ -2518,4 +2575,46 @@ console.log(res.result.list,'data')
padding: 0 !important;
}
/* ---end--- */
/* ---标签管理 added by zhengsongbo on 2025-08-01--- */
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
.option-item {
margin: 0px 5px;
}
/* 热点标签：自定义按钮样式 */
a.custom {
/* 基础样式 */
display: inline-block; /* 使内边距生效 */
padding: 1px; /* 按钮内边距 */
margin: 1px 5px;
background-color: #F2F2F2; /* 淡灰色背景 */
color: #333; /* 文字颜色 */
text-decoration: none; /* 去除下划线 */
border-radius: 3px; /* 圆角设计 */
font-family: Arial, sans-serif; /* 字体 */
font-size: 14px; /* 文字大小 */
height: 24px;
line-height: 20px;
/* 过渡效果，使颜色变化更平滑 */
transition: background-color 0.2s ease;
}
/* 鼠标悬停效果 */
a.custom:hover {
background-color: #DDEDFF; /* 浅蓝色背景 */
}
/* 可选：点击时效果 */
a.custom:active {
background-color: #757575; /* 点击时更深的灰色 */
}
/* 鼠标悬停效果 */
a.custom2 {
background-color: #DDEDFF; /* 浅蓝色背景 */
}
/* ---end--- */
</style>

3
src/views/study/coursenew.vue
View File

@@ -805,7 +805,8 @@
}else if(h>500){
h=h+60;
}
$this.controlHeight=h-95;
// 移除高度控制 防止内容塌陷
// $this.controlHeight=h-95;
})

372
src/views/tag/TagManageList.vue Normal file
View File

@@ -0,0 +1,372 @@
<template>
<div class="u-page" style="padding-right:32px">
<div style="width: 100%; margin-left: 12px;padding: 2px 0px 10px 12px;background-color: white">
<el-form :inline="true" style="margin-left: 12px;" :model="pageData" class="demo-form-inline">
<el-form-item label="标签ID:" label-width="60px">
<el-input id="tag-id" placeholder="请输入标签ID" v-model="pageData.id" clearable />
</el-form-item>
<el-form-item label="标签名称:" label-width="80px">
<el-input id="tag-id" placeholder="请输入标签名称" v-model="pageData.tagName" clearable />
</el-form-item>
<el-form-item label="热点标签:" label-width="80px">
<el-select v-model="pageData.isHot" style="width: 120px;" clearable placeholder="请选择状态">
<el-option label="开启" value="true"></el-option>
<el-option label="关闭" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="getsearch" icon="el-icon-search" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
<div style="padding: 5px 0px 2px 12px;">
<el-checkbox label="前台公共显示"></el-checkbox>
<el-checkbox label="热点标签展示"></el-checkbox>
</div>
<div style="width: 100%; margin-left: 12px;padding: 2px 0px 10px 12px;background-color: white">
<el-table style="width: 96%; margin:2px 32px 10px 12px;" :data="pageData.list" border stripe
:header-cell-style="{ background: '#E9F0FF' }"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange">
<el-table-column type="selection" width="80px"></el-table-column>
<el-table-column label="标签ID" width="200px" prop="id"></el-table-column>
<el-table-column label="标签名称" width="235px" prop="tagName"></el-table-column>
<el-table-column label="已关联课程" width="220px"
prop="useCount"
sortable="custom"
:sort-orders="['descending', 'ascending']"
>
<template #default="scope">
<a v-if="scope.row.useCount > 0"
@click="showCourseByTag(`${scope.row.id}`)"
style="font-weight:bold; color: #409EFF; text-decoration: underline;">
{{ scope.row.useCount }}
</a>
<span style="font-weight:bold; color: #409EFF; text-decoration: underline;" v-else>0</span>
</template>
</el-table-column>
<el-table-column label="前台公共显示" width="220px" prop="isPublic">
<template #default="scope"><!-- 开关状态会直接修改 pageData.list 中的数据 -->
<el-switch
v-model="scope.row.isPublic"
:disabled="scope.row.isHot==1?true:false"
@change="handlePublicChange(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="热点标签展示" width="220px" prop="isHot">
<template #default="scope">
<el-switch
v-model="scope.row.isHot"
:disabled="scope.row.isPublic==0?true:false"
@change="handleHotChange(scope.row)"
>
</el-switch>
</template>
</el-table-column>
</el-table>
<div v-if="pageData.list.length > 0" style="text-align: center;margin-top: 50px;">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.pageIndex"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<!-- 标签关联课程弹窗 -->
<el-dialog custom-class="g-dialog" title="关联课程"
width="850px" top="20px"
:visible.sync="dialogVisible"
:modal-append-to-body="true"
:append-to-body="true">
<div class="dialog-content-container">
<el-table
:data="pageData.list2"
border stripe style="width: 100%"
:header-cell-style="{ background: '#E9F0FF' }"
@sort-change="handleSortChange2">
<el-table-column label="序号" width="60px" align="center">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="关联课程名称" width="200px" prop="courseName"></el-table-column>
<el-table-column label="关联课程ID" width="100px" prop="courseId"></el-table-column>
<el-table-column label="关联人" width="80px" prop="sysCreateBy"></el-table-column>
<el-table-column label="关联时间" width="110px" prop="sysCreateTime"
:formatter="dateFormat" sortable="custom"
:sort-orders="['descending', 'ascending']"></el-table-column>
<el-table-column label="本课程绑定的其他标签" width="200px" prop="otherTags"></el-table-column>
<el-table-column label="操作" width="60px">
<template #default="scope">
<a @click="unbindCurrentTag(scope.row)"
style="font-weight:bold; color: #409EFF;">
解绑
</a>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div v-if="pageData.list2.length > 0" class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"
:current-page="pageData.pageIndex2"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageData.pageSize2"
layout="total, sizes, prev, pager, next, jumper"
:total="total2">
</el-pagination>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import moment from 'moment';
import apiCourseTag from '@/api/modules/courseTag.js'
import { mapGetters } from 'vuex';
export default {
name: 'courseTagItems',
computed: {
...mapGetters(['userInfo'])
},
data() {
return {
pageData: {
pageIndex: 1,
pageIndex2: 1,
pageSize: 10,
pageSize2: 10,
list:[],
list2:[],
orderField: null,
orderAsc: null,
orderField2: null,
orderAsc2: null,
},
total: 0,
total2: 0,
dialogVisible: false,
tagId: null,
}
},
created() {
this.getCourseTagList()
},
methods: {
//初始化：课程标签列表
getsearch(){
this.pageData.pageIndex = 1;
this.getCourseTagList()
},
//课程标签列表：排序
handleSortChange({ prop, order }) {
this.pageData.orderField = prop; // 当前排序字段
this.pageData.orderAsc = order === 'ascending'; // 排序方向
this.getCourseTagList(); // 重新获取数据
},
//TODO:课程标签列表：监听选中项变化(批量的设置标签公共显示|热点标签)
handleSelectionChange(selection) {
this.selectedRows = selection; // 更新选中的行数据
},
//课程标签列表：获取课程标签列表数据
getCourseTagList() {
const { pageIndex, pageSize, orderField, orderAsc } = this.pageData
let query = { pageIndex, pageSize, orderField, orderAsc}
//拼接查询条件
if (this.pageData.id) {
const { id } = this.pageData
query.id = id
}
if (this.pageData.tagName) {
const { tagName } = this.pageData
query.tagName = tagName
}
if (this.pageData.isHot) {
const { isHot } = this.pageData
query.isHot = isHot
}
apiCourseTag.portalPageList(query).then((res) => {
if (res.status == 200) {
this.total = res.result.count
this.pageData.list = res.result.list
}
})
.catch((err) => {
this.$message.error('获取数据失败')
})
},
//课程标签列表：改变标签的公共属性
async handlePublicChange(row) {
// 保存原始状态用于回滚
const originalStatus = row.isPublic;
try {
// 调用 API 更新状态
await apiCourseTag.changeTagPublic(row);
this.$message.success('更新成功');
} catch (error) {
// 发生错误时回滚状态
row.isPublic = originalStatus;
this.$message.error('更新失败：' + error.message);
}
},
//课程标签列表：改变标签的热点属性
async handleHotChange(row) {
const isPublic=row.isPublic;
// 保存原始状态用于回滚
const originalStatus = row.isHot;
try {
// 调用 API 更新状态
await apiCourseTag.changeTagHot(row);
this.$message.success('更新成功');
} catch (error) {
// 发生错误时回滚状态
row.isHot = originalStatus;
this.$message.error('更新失败：' + error.message);
}
},
//课程标签列表：改变条数的回调
handleSizeChange(value) {
this.pageData.pageIndex = 1;
this.pageData.pageSize = value;
this.getCourseTagList();
},
//课程标签列表：改变页数的回调
handleCurrentChange(value) {
this.pageData.pageIndex = value;
this.getCourseTagList();
},
//标签关联的所有课程弹出框：显示指定标签id关联的课程列表
showCourseByTag(tagId) {
this.tagId=tagId;
this.getCourseOfTagList(tagId);
this.dialogVisible=true;
},
//分页查询指定标签关联的所有课程
getCourseOfTagList(){
const { pageIndex2:pageIndex, pageSize2:pageSize, orderField2:orderField, orderAsc2:orderAsc } = this.pageData
let query = { pageIndex, pageSize, orderField, orderAsc }
//拼接查询条件
if (this.tagId) {
query.id = this.tagId
apiCourseTag.showCourseByTag(query).then((res) => {
if (res.status == 200) {
this.total2 = res.result.count
this.pageData.list2 = res.result.list
if (this.total2==0){
this.dialogVisible=false
this.getCourseTagList(); // 重新获取课程标签列表数据
}
}
})
.catch((err) => {
this.$message.error('获取数据失败')
});
}
},
//标签关联课程列表：排序
handleSortChange2({ prop, order }) {
this.pageData.orderField2 = prop; // 当前排序字段
this.pageData.orderAsc2 = order === 'ascending'; // 排序方向
this.getCourseOfTagList(); // 重新获取数据
},
//标签关联的所有课程列表：改变条数的回调
handleSizeChange2(value) {
this.pageData.pageIndex2= 1;
this.pageData.pageSize2 = value;
this.getCourseOfTagList();
},
//标签关联的所有课程列表：改变页数的回调
handleCurrentChange2(value) {
this.pageData.pageIndex2 = value;
this.getCourseOfTagList();
},
//关联时间格式化
dateFormat(row, column) {
return row[column.property] ?
moment(row[column.property]).format('YYYY-MM-DD') : '';
},
//解除指定课程和当前标签的关联关系
unbindCurrentTag (row) {
let id = row.id;
let tagId = this.tagId;
let courseId = row.courseId;
//拼接查询条件
if (tagId && courseId) {
let params = { id, tagId, courseId }
apiCourseTag.unbindCourseTagRelation(params).then((res) => {
if (res.status == 200) {
//刷新列表
this.getCourseOfTagList(this.tagId);
}
})
.catch((err) => {
this.$message.error('解绑失败！')
});
}
}
}
}
</script>
<style>
.demo-form-inline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px; /* 间距 */
}
.demo-form-inline .el-form-item {
margin-bottom: 0; /* 消除默认底部间距 */
}
.dialog-content-container {
padding: 10px;
border: 1px solid #d9d9d9;
}
.pagination-container {
margin-top: 20px;
text-align: center;
}
.g-dialog .el-dialog__header {
background-color: #409EFF;
padding: 15px 20px;
}
.g-dialog .el-dialog__title {
color: white;
font-weight: bold;
}
.g-dialog .el-dialog__headerbtn .el-dialog__close {
color: white;
}
</style>