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

feat: 添加课程管理新版组件及路由，更新ManageListRemote.vue以优化查询按钮文本和二维码功能

Browse Source
This commit is contained in:
huweihang
2025-12-09 18:29:09 +08:00
parent 83665ae4ed
commit d125990697
3 changed files with 124 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/data/pages.js
View File

@@ -31,6 +31,7 @@ export const pages=[
{title:'课程管理',path:'manage',component:'course/ManageList',hidden:false},
{title:'课程管理',path:'coursemanage',component:'course/CourseManage',hidden:true},
{title:'课程管理新版',path:'manage-remote',component:'course/ManageListRemote',hidden:false},
{title:'课程管理新版',path:'coursemanage-remote',component:'course/CourseManageRemote',hidden:true},
{title:'课程统计',path:'stat',component:'course/StatIndex',hidden:false},
{title:'课件管理',path:'courseware',component:'course/Courseware',hidden:false},
{title:'报名管理',path:'msignup',component:'study/ManageSignup',hidden:true},
@@ -120,6 +121,7 @@ export const iframes=[
{title:'课件管理', path:'/iframe/course/coursewares',hidden:false,component:'course/Courseware'},
{title:'课程管理', path:'/iframe/course/manages',hidden:false,component:'course/ManageList'},
{title:'课程管理新版', path:'/iframe/course/manage-remote',hidden:false,component:'course/ManageListRemote'},
{title:'课程管理新版', path:'/iframe/course/coursemanage-remote',hidden:false,component:'course/CourseManageRemote'},
{title:'考试试题管理', path:'/iframe/exam/questions',hidden:false,component:'exam/Question'},
{title:'查看答卷', path:'/iframe/exam/viewanswer',hidden:false,component:'exam/viewAnswer'},
{title:'考试试卷管理', path:'/iframe/exam/papers',hidden:false,component:'exam/TestPaper'},

32
src/views/course/CourseManageRemote.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<section class="app-main xuc-content">
<div class="main-body">
<CourseManage />
</div>
</section>
</template>
<script>
import CourseManage from './CourseManage.vue';
export default {
name: 'RemoteCourseManage',
components: { CourseManage },
};
</script>
<style lang="scss" scoped>
.app-main {
// padding-top: 20px;
}
.xuc-content {
margin: 0 auto;
}
.main-body {
background-color: #fff;
padding: 30px 20px;
}
</style>

156
src/views/course/ManageListRemote.vue
View File

@@ -49,7 +49,6 @@
</el-form-item>
<el-form-item>
<el-select v-model="params.status" placeholder="全部审核状态" clearable>
<el-option label="全部" :value="''"></el-option>
<el-option label="审核中" value="2"></el-option>
<el-option label="审核驳回" value="3"></el-option>
<el-option label="审核通过" value="5"></el-option>
@@ -57,14 +56,13 @@
</el-form-item>
<el-form-item>
<el-select v-model="params.publish" placeholder="全部发布状态" clearable>
<el-option label="全部" :value="''"></el-option>
<el-option label="已发布" :value="true"></el-option>
<el-option label="未发布" :value="false"></el-option>
</el-select>
</el-form-item>
</div>
<div class="filter-actions" v-show="!showAdvancedFilter">
<el-button type="primary" @click="searchData(true)" icon="el-icon-search">搜索</el-button>
<el-button type="primary" @click="searchData(true)" icon="el-icon-search">查询</el-button>
<el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button>
<el-button type="text" class="toggle-link" @click="toggleAdvancedFilter">
{{ showAdvancedFilter ? '收起' : '展开' }}
@@ -81,14 +79,12 @@
<div class="filter-fields">
<el-form-item>
<el-select v-model="params.enabled" placeholder="全部启用停用状态" clearable>
<el-option label="全部" :value="''"></el-option>
<el-option label="启用" :value="true"></el-option>
<el-option label="停用" :value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="params.openCourse" placeholder="是否公开课" clearable>
<el-option label="全部" :value="''"></el-option>
<el-option label="公开课" :value="1"></el-option>
<el-option label="非公开课" :value="0"></el-option>
</el-select>
@@ -130,14 +126,13 @@
</el-form-item>
<el-form-item>
<el-select v-model="params.createFrom" placeholder="全部创建来源" clearable>
<el-option label="全部" :value="''"></el-option>
<el-option label="教师端" value="teacher"></el-option>
<el-option label="管理员端" value="admin"></el-option>
</el-select>
</el-form-item>
</div>
<div class="filter-actions filter-actions--inline">
<el-button type="primary" @click="searchData(true)" icon="el-icon-search">搜索</el-button>
<el-button type="primary" @click="searchData(true)" icon="el-icon-search">查询</el-button>
<el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button>
<el-button type="text" class="toggle-link" @click="toggleAdvancedFilter">
{{ showAdvancedFilter ? '收起' : '展开' }}
@@ -211,11 +206,6 @@
{{ scope.row.enabled == true ? '启用' : '停用' }}
</template>
</el-table-column>
<el-table-column label="排序" min-width="110" align="center" :sort-method="sortByOrderValue" sortable>
<template slot-scope="scope">
{{ formatOrderValue(scope.row) }}
</template>
</el-table-column>
<el-table-column label="公开课" min-width="110" align="center" sortable>
<template slot-scope="scope">
{{ scope.row.openCourse == 1 ? '公开课' : '非公开课' }}
@@ -223,13 +213,13 @@
</el-table-column>
<el-table-column label="资源归属" min-width="220" align="center" sortable>
<template slot-scope="scope">
<span>{{ resOwnerName(scope.row.resOwner1) }}</span>
<span v-if="scope.row.resOwner2 != ''">/{{ resOwnerName(scope.row.resOwner2) }}</span>
<span v-if="scope.row.resOwner3 != ''">/{{ resOwnerName(scope.row.resOwner3) }}</span>
<el-tooltip :content="scope.row.orgFullName || scope.row.orgName" placement="top" effect="dark">
<span class="org-name-cell">{{ scope.row.orgName }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="创建人" prop="sysCreateBy" min-width="130" align="center" sortable></el-table-column>
<el-table-column label="创建来源" min-width="140" align="center" sortable>
<el-table-column label="创建来源" min-width="140" align="center">
<template slot-scope="scope">
<span v-if="scope.row.createFrom === 'teacher'">教师端</span>
<span v-else-if="scope.row.createFrom === 'admin'">管理员端</span>
@@ -316,17 +306,32 @@
<el-button @click="manageStudy.dlgShow = false">关闭</el-button>
</template>
</el-dialog>
<el-dialog title="二维码" center :visible.sync="qrcodeShow" @close="closeCode" width="500px">
<div style="height:250px;display: flex;flex-direction:column;justify-content: space-evenly;align-items: center;">
<div id="qrcode" ref="qrcode"></div>
<el-input v-model="pcDetailUrl" id="text"></el-input>
<el-button type="primary" size="mini" @click="myCopy()">复制链接</el-button>
<el-dialog title="二维码" :visible.sync="qrCodedialogVisible" width="900px" @close="closeCode" custom-class="g-dialog">
<div>
<el-form size="medium" label-width="100px">
<el-form-item label="二维码">
<div
id="qrcode"
ref="qrcode"
class="qrcode-img"
@mouseenter="showDownloadButton = true"
@mouseleave="showDownloadButton = false"
>
<div v-show="showDownloadButton" @click="downloadQrcode" class="downloadn-container">
<i class="el-icon-download" style="color: #409EFF;font-size:18px;margin-bottom:5px"></i>
<span>下载</span>
</div>
</div>
</el-form-item>
<el-form-item label="链接">
<el-input v-model="copyUrl" readonly class="input-with-select" id="text">
<el-button slot="append" @click="handleCopyUrl">复制</el-button>
</el-input>
</el-form-item>
<el-form-item label="">上述内容兼容PC端与移动端，您可按需分享。</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="qrcodeShow = false">取 消</el-button>
<el-button type="primary" @click="qrcodeShow = false">确 定</el-button>
</span>
<span slot="footer" class="dialog-footer"><el-button @click="closeCode">关 闭</el-button></span>
</el-dialog>
<!-- 审核 -->
<el-dialog title="审核" :visible.sync="dialogVisible" width="900px" custom-class="g-dialog">
@@ -470,15 +475,16 @@ export default {
pickerOptions: { shortcuts: [] },
manageStudyData: {},
expandDetails: true,
qrcode: '',
pcDetailUrl: '',
qrCodedialogVisible: false,
copyUrl: '',
qrcodeImgUrl: '',
showDownloadButton: false,
isExamine: 1,
auditInfo: {
pass: true,
remark: ''
},
dialogVisible: false,
qrcodeShow: false,
currentPage4: 4,
inviteTeacher: {
//邀请
@@ -586,7 +592,7 @@ export default {
return;
}
if (query.length > 50) {
this.$message.warning('授课教师搜索最多50个字符');
this.$message.warning('超过50个字的内容不让输入');
return;
}
this.teacherLoading = true;
@@ -923,11 +929,6 @@ export default {
handleChoose(row) { //选择课程
window.parent.selectCourse(row);
},
myCopy() {
var ele = document.getElementById("text");
ele.select();
document.execCommand("Copy");
},
// 置顶
setTop(row) {
let params = {
@@ -1204,44 +1205,61 @@ export default {
];
},
showQrimage(row) {
this.qrcodeShow = true;
let urlPre = window.location.protocol + '//' + window.location.host;
//动态的地址
//urlPre=urlPre+'/m?returnUrl='+urlPre+'/mobile/pages/login/loading?returnUrl=';
//固定的地址
let returnUrl = urlPre + '/mobile/pages/login/loading?returnUrl=/pages/study/courseStudy?id=' + row.id;
let mobilePre = urlPre + '/m?returnUrl=';
this.qrcode = mobilePre + encodeURIComponent(returnUrl);
this.pcDetailUrl = urlPre + this.webBaseUrl + '/course/studyindex?id=' + row.id;
if (row.type == 20) {
this.pcDetailUrl = urlPre + this.webBaseUrl + '/course/detail?id=' + row.id;
}
// 使用$nextTick确保数据渲染
// 使用本页二维码弹窗逻辑
this.qrCodedialogVisible = true;
// 与 TeacherList 保持一致的二维码生成逻辑
this.copyUrl = this.qrcodeImgUrl = `${process.env.VUE_APP_BOE_WEB_URL}/systemapi/xboe/m/course/manage/redirectDetail?courseId=${row.id}`;
this.$nextTick(() => {
this.crateQrcode();
});
},
// 生成二维码
handleCopyUrl() {
const ele = document.getElementById('text');
if (!ele) return;
ele.select();
document.execCommand('Copy');
this.$message.success('复制成功');
},
downloadQrcode() {
const container = document.getElementById('qrcode');
if (!container) return;
const img = container.getElementsByTagName('img')[0];
if (!img) return;
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const tempUrl = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.style.display = 'none';
link.href = tempUrl;
link.setAttribute('download', '二维码.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
crateQrcode() {
this.qr = new QRCode('qrcode', {
// eslint-disable-next-line no-new
new QRCode('qrcode', {
width: 150,
height: 150, // 高度
text: this.qrcode // 二维码内容
// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f'
// foreground: '#ff0'
height: 150,
text: this.qrcodeImgUrl
});
},
// 关闭弹框,清除已经生成的二维码
closeCode() {
this.$refs.qrcode.innerHTML = '';
this.qrCodedialogVisible = false;
// 逐个节点移除，避免事件丢失
const images = document.querySelectorAll('.qrcode-img img');
images.forEach(img => img.remove());
const canvas = document.querySelectorAll('.qrcode-img canvas');
canvas.forEach(c => c.remove());
},
showManageStudy(row) {
this.manageStudyData = row;
this.manageStudy.dlgShow = true;
// 带课程详情跳转到课程管理页
sessionStorage.setItem('courseDetail', JSON.stringify(row));
this.$router.push({ path: '/iframe/course/coursemanage-remote' });
},
showChooseCourse() {
this.courseChooseShow = true;
@@ -1348,6 +1366,13 @@ export default {
padding-right: 0px;
}
.org-name-cell {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-button--text {
font-size: 14px;
}
@@ -1366,6 +1391,10 @@ export default {
.filter-form .el-form-item {
margin-right: 10px;
margin-bottom: 0;
width: 200px;
}
::v-deep .learning-time-range.el-form-item {
width: 300px;
}
.teacher-filter {
@@ -1426,11 +1455,6 @@ export default {
.learning-time-range .el-date-editor {
width: 300px;
}
::v-deep .el-pagination {
// margin-top: 16px;
// padding: 0;
// width: 50%;
}
.pagination {
text-align: center;
padding: 40px 0 80px 0;