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

教师端1期需求ui优化

Browse Source
This commit is contained in:
赵依梦
2025-12-11 18:07:58 +08:00
parent bc8c0004f8
commit 8eb678e180
8 changed files with 536 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/modules/course.js
View File

@@ -477,7 +477,7 @@ const saveTip = function() {
* 获取我开发的课程列表 * 获取我开发的课程列表
*/ */
const courseList = function(data) { const courseList = function(data) {
return ajax.postJson('/xboe/m/course/manage/page', data); return ajax.postJson('/xboe/m/course/manage/develop_page', data);
} }

31
src/assets/styles/portal-index.scss
View File

@@ -432,6 +432,37 @@
color: #333333; color: #333333;
} }
} }
.el-message.new-message {
background-color: #edf2fc !important;
box-shadow: none !important;
border-color: #EBEEF5 !important;
min-width: 170px !important;
border-radius: 10px !important;
}
.el-message--success.new-message {
background-color: #f0f9eb !important;
box-shadow: none !important;
border-color: #e1f3d8 !important;
min-width: 170px !important;
border-radius: 10px !important
}
.el-message--error.new-message {
background-color: #fef0f0 !important;
box-shadow: none !important;
border-color: #fde2e2 !important;
min-width: 170px !important;
border-radius: 10px !important
}
.el-message--warning.new-message {
background-color: #fdf6ec !important;
box-shadow: none !important;
border-color: #faecd8 !important;
min-width: 170px !important;
border-radius: 10px !important
}
.el-badge__content{// badge去掉白色边框 .el-badge__content{// badge去掉白色边框
border:1px solid #f56c6c; border:1px solid #f56c6c;
} }

87
src/components/SimpleMessageBox/index.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div>
<el-dialog class="simple-message-box" :title="title" :visible.sync="visible" :show-close="false" append-to-body>
<div class="message-box-content"><svg-icon style="margin-right: 5px;font-size:16px"
icon-class="jingti"></svg-icon>{{message}}</div>
<span slot="footer" class="dialog-footer">
<el-button class="cancel" @click="cancel">{{cancelButtonText}}</el-button>
<el-button class="confirm" type="primary" @click="confirm">{{confirmButtonText}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "SimpleMessageBox",
data() {
return {
visible: false,
title: "",
message: "",
confirmButtonText: "确 认",
cancelButtonText: "取 消",
handleConfirm: null,
handleCancel: null,
};
},
methods: {
open() {
this.visible = true;
},
cancel() {
this.visible = false;
this.handleCancel();
},
confirm() {
this.visible = false;
this.handleConfirm();
},
},
};
</script>
<style lang="scss" scoped>
.simple-message-box {
::v-deep .el-dialog {
border-radius: 12px;
}
::v-deep .el-dialog__title {
font-size: 16px;
color: #000000;
}
.message-box-content {
display: flex;
justify-content: center;
font-size: 16px;
align-items: center;
color: #000000;
}
.cancel {
width: 120px;
height: 40px;
background: rgba(#4284f7,0.1);
border-radius: 8px;
margin-right: 8px;
border: none;
span {
font-weight: bold;
font-size: 14px;
color: #4284f7;
line-height: 40px;
text-align: center;
}
}
.confirm {
width: 120px;
height: 40px;
background: #4284f7;
border-radius: 8px;
span {
font-weight: bold;
font-size: 14px;
color: #ffffff;
line-height: 40px;
}
}
}
</style>

11
src/icons/svg/jingti.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>jingti-copy</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="删除_弹框" transform="translate(-806, -410)" fill="#FB2727" fill-rule="nonzero">
<g id="jingti-copy" transform="translate(806, 410)">
<path d="M8,1.125 C8.928125,1.125 9.828125,1.30625 10.675,1.6640625 C11.49375,2.0109375 12.228125,2.50625 12.8609375,3.1375 C13.4921875,3.76875 13.9890625,4.5046875 14.334375,5.3234375 C14.69375,6.171875 14.875,7.071875 14.875,8 C14.875,8.928125 14.69375,9.828125 14.3359375,10.675 C13.9890625,11.49375 13.49375,12.228125 12.8625,12.8609375 C12.23125,13.4921875 11.4953125,13.9890625 10.6765625,14.334375 C9.828125,14.69375 8.928125,14.875 8,14.875 C7.071875,14.875 6.171875,14.69375 5.325,14.3359375 C4.50625,13.9890625 3.771875,13.49375 3.1390625,12.8625 C2.5078125,12.23125 2.0109375,11.4953125 1.665625,10.6765625 C1.30625,9.828125 1.125,8.928125 1.125,8 C1.125,7.071875 1.30625,6.171875 1.6640625,5.325 C2.0109375,4.50625 2.50625,3.771875 3.1375,3.1390625 C3.76875,2.5078125 4.5046875,2.0109375 5.3234375,1.665625 C6.171875,1.30625 7.071875,1.125 8,1.125 Z M8,0 C3.58125,0 0,3.58125 0,8 C0,12.41875 3.58125,16 8,16 C12.41875,16 16,12.41875 16,8 C16,3.58125 12.41875,0 8,0 Z M8,10 C7.6546875,10 7.375,9.7203125 7.375,9.375 L7.375,3.609375 C7.375,3.2640625 7.6546875,2.984375 8,2.984375 C8.3453125,2.984375 8.625,3.2640625 8.625,3.609375 L8.625,9.375 C8.625,9.7203125 8.3453125,10 8,10 Z M7.296875,11.703125 C7.296875,12.0914531 7.61167187,12.40625 8,12.40625 C8.38832813,12.40625 8.703125,12.0914531 8.703125,11.703125 C8.703125,11.3147969 8.38832812,11 8,11 C7.61167188,11 7.296875,11.3147969 7.296875,11.703125 Z" id="形状"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

8
src/main.js
View File

@@ -41,6 +41,14 @@ import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper) Vue.use(VueAwesomeSwiper)
import watermark from './utils/warterMark.js' import watermark from './utils/warterMark.js'
import Bus from './utils/bus.js' import Bus from './utils/bus.js'
import {showMessage} from './utils/index.js'
import MessageBoxService from './utils/simpleMessageBox.js'
Vue.use(MessageBoxService)
Vue.prototype.$showMessage = showMessage
Vue.prototype.$bus = Bus Vue.prototype.$bus = Bus

9
src/utils/index.js
View File

@@ -455,4 +455,13 @@ export function resOwnerListMap(source) {
}) })
let name = resOwnerList.get('GC005001') let name = resOwnerList.get('GC005001')
return name; return name;
}
export function showMessage(message, status) {
this.$message({
message: message,
type: status,
duration: 5000,
customClass: 'new-message'
});
} }

50
src/utils/simpleMessageBox.js Normal file
View File

@@ -0,0 +1,50 @@
import Vue from 'vue'
import MessageBox from '@/components/SimpleMessageBox/index.vue'
// 创建 MessageBox 构造器
const MessageBoxConstructor = Vue.extend(MessageBox)
let messageBoxInstance = null
const MessageBoxService = {
open(options = {}) {
// 如果已有实例，先销毁
if (messageBoxInstance) {
messageBoxInstance.$destroy()
const el = messageBoxInstance.$el
if (el && el.parentNode) {
el.parentNode.removeChild(el)
}
}
// 创建新实例
messageBoxInstance = new MessageBoxConstructor({
el: document.createElement('div'),
data: options
})
// 挂载到 body
document.body.appendChild(messageBoxInstance.$el)
// 显示并返回 Promise
return messageBoxInstance.open(options)
},
cancel() {
messageBoxInstance.cancel()
},
confirm(options) {
return this.open({
...options
})
},
}
// 添加到 Vue 原型
MessageBoxService.install = function (Vue) {
Vue.prototype.$messageBox = MessageBoxService
}
// 导出
export default MessageBoxService

671
src/views/course/TeacherList.vue
View File

@@ -7,57 +7,58 @@
4.有哪种几状态和哪几种操作，需要讨论定一下 。在哪种状态下可以有哪些操作<br/> 4.有哪种几状态和哪几种操作，需要讨论定一下 。在哪种状态下可以有哪些操作<br/>
</Remark> --> </Remark> -->
<el-row style="margin: 0 20px 20px 15px;" :gutter="8"> <el-row style="margin: 0 20px 20px 15px;" :gutter="8">
<el-col :span="8"> <el-col :span="8">
<div class="grid-content bg-purple"><el-input :maxlength="50" v-model="params.name" clearable placeholder="课程名称" /></div> <div class="grid-content bg-purple"><el-input :maxlength="50" v-model="params.name" clearable
</el-col> placeholder="课程名称" /></div>
<el-col :span="3"> </el-col>
<div class="grid-content bg-purple"> <el-col :span="3">
<el-select v-model="params.publish" placeholder="发布状态" clearable> <div class="grid-content bg-purple">
<el-option label="未发布" :value="false"></el-option> <el-select v-model="params.publish" placeholder="发布状态" clearable>
<el-option label="未发布" :value="false"></el-option>
<el-option label="已发布" :value="true"></el-option> <el-option label="已发布" :value="true"></el-option>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<el-select v-model="params.enabled" placeholder="启停用状态" clearable> <el-select v-model="params.enabled" placeholder="启停用状态" clearable>
<el-option label="未发布" :value="false"></el-option> <el-option label="停用" :value="false"></el-option>
<el-option label="已发布" :value="true"></el-option> <el-option label="启用" :value="true"></el-option>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<el-select v-model="params.status" placeholder="审核状态" clearable> <el-select v-model="params.status" placeholder="审核状态" clearable>
<el-option label="审核中" :value="2"></el-option> <el-option label="审核中" :value="2"></el-option>
<el-option label="审核驳回" :value="3"></el-option> <el-option label="审核驳回" :value="3"></el-option>
<el-option label="审核通过" :value="5"></el-option> <el-option label="审核通过" :value="5"></el-option>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<el-button type="primary" @click="findList">查 询</el-button> <el-button type="primary" @click="findList">查 询</el-button>
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<el-button @click="reset">重 置</el-button> <el-button @click="reset">重 置</el-button>
</div> </div>
</el-col> </el-col>
<el-col :span="2" > <el-col :span="2">
<div class="grid-content bg-purple" style="text-align: right;"> <div class="grid-content bg-purple" style="text-align: right;">
<el-button type="primary" icon="el-icon-plus" @click="addNewCourse">新建课程</el-button> <el-button type="primary" icon="el-icon-plus" @click="addNewCourse">新建课程</el-button>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!--课程列表内容--> <!--课程列表内容-->
<div v-infinite-scroll="load" style="overflow:auto;height:1000px" infinite-scroll-distance="50" :infinite-scroll-immediate="false" :infinite-scroll-disabled="disabled"> <div v-infinite-scroll="load" style="overflow:auto;height:1000px" infinite-scroll-distance="50"
:infinite-scroll-immediate="false" :infinite-scroll-disabled="disabled">
<div class="uc-course" v-for="(item, idx) in couresList" :key="idx" @click="jumpRouter(item)"> <div class="uc-course" v-for="(item, idx) in couresList" :key="idx" @click="jumpRouter(item)">
<div class="uc-course-img" style="width: 212px;height:119px"> <div class="uc-course-img" style="width: 212px;height:119px">
<course-image :course="item"></course-image> <course-image :course="item"></course-image>
@@ -65,8 +66,8 @@
</div> </div>
<div class="uc-course-info"> <div class="uc-course-info">
<div class="uc-course-name"> <div class="uc-course-name">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start"> <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span style="font-size:18px;color:#333">{{ item.name }}</span> <span style="font-size:18px;color:#333">{{ item.name }}</span>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="uc-course-item"> <div class="uc-course-item">
@@ -75,19 +76,26 @@
<div class="uc-course-item"> <div class="uc-course-item">
<div class="status-item">发布状态：{{ item.published ? '发布' : '未发布' }}</div> <div class="status-item">发布状态：{{ item.published ? '发布' : '未发布' }}</div>
<div class="status-item">启停用状态：{{ item.enabled ? '启用' : '停用' }}</div> <div class="status-item">启停用状态：{{ item.enabled ? '启用' : '停用' }}</div>
<div class="status-item">审核状态：<el-link :type="getStatusLabel(item.status).type" @click.stop="" :underline="false">{{getStatusLabel(item.status).label}}</el-link></div> <div class="status-item">审核状态：<el-link :type="getStatusLabel(item.status).type" @click.stop=""
:underline="false">{{getStatusLabel(item.status).label}}</el-link></div>
</div> </div>
<div class="btn-container"> <div class="btn-container">
<el-link class="btn-item" @mouseenter.native="$set(hoverStates, it.uniqueKey, true )" @mouseleave.native="$set(hoverStates, it.uniqueKey, false )" :style="{color: it.labelColor ? it.labelColor : (hoverStates[it.uniqueKey] ? '#4284F7' : '#000000')}" v-for="(it, idx) in availableActions(item)" :key="idx" :underline="false" type="primary" @click.stop="it.handler(item)"><svg-icon style="margin-right: 5px;font-size:19px;padding-top: 4px;color:#000000" :icon-class="hoverStates[it.uniqueKey] ? it.hoverIcon : it.icon"></svg-icon>{{it.label}}</el-link> <el-link class="btn-item" @mouseenter.native="$set(hoverStates, it.uniqueKey, true )"
@mouseleave.native="$set(hoverStates, it.uniqueKey, false )"
:style="{color: it.labelColor ? it.labelColor : (hoverStates[it.uniqueKey] ? '#4284F7' : '#000000')}"
v-for="(it, idx) in availableActions(item)" :key="idx" :underline="false" type="primary"
@click.stop="it.handler(item)"><svg-icon
style="margin-right: 5px;font-size:19px;padding-top: 4px;color:#000000"
:icon-class="hoverStates[it.uniqueKey] ? it.hoverIcon : it.icon"></svg-icon>{{it.label}}</el-link>
</div> </div>
</div> </div>
</div> </div>
<p v-if="loading" class="page-tip">加载中...</p> <p v-if="loading" class="page-tip">加载中...</p>
<div v-if="couresList.length == 0 && !loading"> <div v-if="couresList.length == 0 && !loading">
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div> <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
<div v-else class="zan-wu">暂无数据</div> <div v-else class="zan-wu">暂无数据</div>
</div> </div>
<p v-else-if="noMore" class="page-tip">没有更多了</p> <p v-else-if="noMore" class="page-tip">没有更多了</p>
</div> </div>
<!-- <div v-if="couresList.length > 0" style="text-align: center; margin-top:57px;"> <!-- <div v-if="couresList.length > 0" style="text-align: center; margin-top:57px;">
<el-pagination <el-pagination
@@ -106,31 +114,31 @@
</div> --> </div> -->
<div></div> <div></div>
<el-dialog title="二维码" :visible.sync="qrCodedialogVisible" width="900px" @close="closeCode" custom-class="g-dialog"> <el-dialog title="二维码" :visible.sync="qrCodedialogVisible" width="900px" @close="closeCode" custom-class="g-dialog">
<div> <div>
<el-form size="medium" label-width="100px"> <el-form size="medium" label-width="100px">
<el-form-item label="二维码" > <el-form-item label="二维码">
<div id="qrcode" ref="qrcode" class="qrcode-img" @mouseenter="showDownloadButton = true" @mouseleave="showDownloadButton = false"> <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> <div v-show="showDownloadButton" @click="downloadQrcode" class="downloadn-container">
<span>下载</span> <i class="el-icon-download" style="color: #409EFF;font-size:18px;margin-bottom:5px"></i>
</div> <span>下载</span>
</div> </div>
</el-form-item> </div>
</el-form-item>
<el-form-item label="链接">
<el-input v-model="copyUrl" readonly class="input-with-select" id="text"> <el-form-item label="链接">
<el-button slot="append" @click="handleCopyUrl">复制</el-button> <el-input v-model="copyUrl" readonly class="input-with-select" id="text">
</el-input> <el-button slot="append" @click="handleCopyUrl">复制</el-button>
</el-form-item> </el-input>
<el-form-item label="">上述内容兼容PC端与移动端，您可按需分享。</el-form-item> </el-form-item>
</el-form> <el-form-item label="">上述内容兼容PC端与移动端，您可按需分享。</el-form-item>
</el-form>
</div> </div>
<span slot="footer" class="dialog-footer"><el-button @click="closeCode">关 闭</el-button></span> <span slot="footer" class="dialog-footer"><el-button @click="closeCode">关 闭</el-button></span>
</el-dialog> </el-dialog>
<!-- TODO 修改展示字段 --> <!-- TODO 修改展示字段 -->
<el-dialog title="审核记录" :visible.sync="dialogVisible" width="900px" custom-class="g-dialog"> <el-dialog title="审核记录" :visible.sync="dialogVisible" width="900px" custom-class="g-dialog">
<div> <div>
@@ -146,7 +154,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="auditUser" label="审核人"></el-table-column> <el-table-column prop="auditUser" label="审核人"></el-table-column>
<el-table-column prop="auditTime" label="审核结果"></el-table-column> <el-table-column prop="auditTime" label="审核结果"></el-table-column>
<el-table-column prop="auditTime" label="审核时间"></el-table-column> <el-table-column prop="auditTime" label="审核时间"></el-table-column>
<el-table-column prop="auditRemark" label="审核意见"></el-table-column> <el-table-column prop="auditRemark" label="审核意见"></el-table-column>
</el-table> </el-table>
@@ -158,62 +166,88 @@
</template> </template>
<script> <script>
import QRCode from 'qrcodejs2'; import QRCode from "qrcodejs2";
import courseImage from '@/components/Course/courseImage.vue'; import courseImage from "@/components/Course/courseImage.vue";
import { mapGetters } from 'vuex'; import { mapGetters } from "vuex";
import studyItem from '@/components/Course/studyItem.vue'; import studyItem from "@/components/Course/studyItem.vue";
import courseForm from '@/components/Course/courseForm.vue'; import courseForm from "@/components/Course/courseForm.vue";
import apiCourse from '@/api/modules/course.js'; import apiCourse from "@/api/modules/course.js";
import { courseType } from '@/utils/tools.js'; import { courseType } from "@/utils/tools.js";
import apiAudit from '@/api/system/audit.js'; import apiAudit from "@/api/system/audit.js";
import apiHRBP from '@/api/boe/HRBP.js'; import apiHRBP from "@/api/boe/HRBP.js";
import apiOrg from '@/api/system/organiza.js'; import apiOrg from "@/api/system/organiza.js";
import apiUserBasic from '@/api/boe/userbasic.js'; import apiUserBasic from "@/api/boe/userbasic.js";
// 状态权限映射 // 状态权限映射
const STATUS_PERMISSIONS = { const STATUS_PERMISSIONS = {
// 未发布状态 // 未发布状态
unpublished: { unpublished: {
1: ['edit', 'delete'], // 无审核状态 1: ["edit", "delete"], // 无审核状态
2: ['auditRecord'], // 审核中'withdraw' 2: ["auditRecord"], // 审核中'withdraw'
3: ['edit', 'delete', 'auditRecord'] // 审核驳回 3: ["edit", "delete", "auditRecord"], // 审核驳回
}, },
// 已发布状态 // 已发布状态
published: { published: {
enabled: { enabled: {
1: ['edit', 'manage', 'auditRecord', 'qrcode'], //'offShelfApply', 'viewCurrent' 1: ["edit", "manage", "auditRecord", "qrcode"], //'offShelfApply', 'viewCurrent'
2: ['manage', 'auditRecord', 'qrcode'], // withdraw , 'viewCurrent' 2: ["manage", "auditRecord", "qrcode"], // withdraw , 'viewCurrent'
3: ['edit', 'manage', 'auditRecord', 'qrcode'], //'offShelfApply', 'viewCurrent' 3: ["edit", "manage", "auditRecord", "qrcode"], //'offShelfApply', 'viewCurrent'
5: ['edit', 'manage', 'auditRecord', 'qrcode'] //'offShelfApply', 'viewCurrent' 5: ["edit", "manage", "auditRecord", "qrcode"], //'offShelfApply', 'viewCurrent'
}, },
disabled: { disabled: {
// 所有状态在停用时操作一致 // 所有状态在停用时操作一致
1: ['manage', 'auditRecord'], //, 'viewCurrent' 1: ["manage", "auditRecord"], //, 'viewCurrent'
2: ['manage', 'auditRecord'], //, 'viewCurrent' 2: ["manage", "auditRecord"], //, 'viewCurrent'
3: ['manage', 'auditRecord'], //, 'viewCurrent' 3: ["manage", "auditRecord"], //, 'viewCurrent'
5: ['manage', 'auditRecord'] //, 'viewCurrent' 5: ["manage", "auditRecord"], //, 'viewCurrent'
} },
} },
} };
// 操作配置映射表 // 操作配置映射表
const ACTION_CONFIG = { const ACTION_CONFIG = {
edit: { label: '编辑', handler: 'editCourse', icon: 'edit', hoverIcon: 'editHover' }, edit: {
manage: { label: '管理', handler: 'handleManage', icon: 'manage', hoverIcon: 'manageHover'}, label: "编辑",
handler: "editCourse",
icon: "edit",
hoverIcon: "editHover",
},
manage: {
label: "管理",
handler: "handleManage",
icon: "manage",
hoverIcon: "manageHover",
},
// withdraw: { label: '撤回', handler: 'handleWithdraw' }, // withdraw: { label: '撤回', handler: 'handleWithdraw' },
auditRecord: { label: '审核记录', handler: 'toExamine', icon: 'check', hoverIcon: 'checkHover' }, auditRecord: {
qrcode: { label: '二维码', handler: 'handleQrcode', icon: 'ercode', hoverIcon: 'ercodeHover' }, label: "审核记录",
handler: "toExamine",
icon: "check",
hoverIcon: "checkHover",
},
qrcode: {
label: "二维码",
handler: "handleQrcode",
icon: "ercode",
hoverIcon: "ercodeHover",
},
// offShelfApply: { label: '下架申请', handler: 'handleOffShelfApply' }, // offShelfApply: { label: '下架申请', handler: 'handleOffShelfApply' },
// viewCurrent: { label: '查看当前版本', handler: 'handleViewCurrent', icon: 'detail' }, // viewCurrent: { label: '查看当前版本', handler: 'handleViewCurrent', icon: 'detail' },
delete: { label: '删除', labelColor: '#FF1718', handler: 'delItem', icon: 'del', hoverIcon: 'del' }, delete: {
} label: "删除",
labelColor: "#FF1718",
handler: "delItem",
icon: "del",
hoverIcon: "del",
},
};
export default { export default {
name: 'ucStudyIndex', name: "ucStudyIndex",
components: { studyItem, courseForm, courseImage }, components: { studyItem, courseForm, courseImage },
computed: { computed: {
...mapGetters(['userInfo']), ...mapGetters(["userInfo"]),
disabled() { disabled() {
return this.loading || this.noMore; return this.loading || this.noMore;
}, },
}, },
@@ -225,31 +259,42 @@ export default {
courseType: courseType, courseType: courseType,
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL, fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
count: 0, count: 0,
params: { name: '', publish: '', status: '', enabled: '', pageIndex: 0, pageSize: 10 }, params: {
name: "",
publish: "",
status: "",
enabled: "",
pageIndex: 0,
pageSize: 10,
},
couresList: [], couresList: [],
flag: true, flag: true,
isSearh:false, isSearh: false,
qrCodedialogVisible: false, qrCodedialogVisible: false,
copyUrl: '', copyUrl: "",
qrcodeImgUrl: '', qrcodeImgUrl: "",
showDownloadButton: false, // 是否显示下载按钮 showDownloadButton: false, // 是否显示下载按钮
loading: false, loading: false,
noMore: false, noMore: false,
auditEnum: { auditEnum: {
1: '未审核', 1: "未审核",
2: '审核不通过', 2: "审核不通过",
9: '审核通过' 9: "审核通过",
}, },
hoverStates: {} hoverStates: {},
}; };
}, },
mounted() { mounted() {
if(this.$route.query && this.$route.query.open && this.$route.query.open == 'new') { if (
this.addNewCourse(); this.$route.query &&
this.$route.query.open &&
this.$route.query.open == "new"
) {
this.addNewCourse();
} }
// this.getList(); // this.getList();
}, },
watch:{ watch: {
// '$route.query.open':function(val){ // '$route.query.open':function(val){
// if(val == 'new') { // if(val == 'new') {
// this.addNewCourse(); // this.addNewCourse();
@@ -257,13 +302,13 @@ export default {
// } // }
}, },
methods: { methods: {
handleM(){ handleM() {
console.log('handleM') console.log("handleM");
}, },
load() { load() {
this.loading = true this.loading = true;
this.params.pageIndex++ this.params.pageIndex++;
this.getList() this.getList();
}, },
getNewList() { getNewList() {
@@ -272,46 +317,50 @@ export default {
this.getList(); this.getList();
}, },
getStatusLabel(code) { getStatusLabel(code) {
if (code == '1') { if (code == "1") {
return {type:'info',label:'-'} return { type: "info", label: "-" };
} else if (code == '2') { } else if (code == "2") {
return {type:'warning',label:'审核中'} return { type: "warning", label: "审核中" };
} else if (code == '3') { } else if (code == "3") {
return {type:'danger',label:'审核驳回'} return { type: "danger", label: "审核驳回" };
} else if (code == '5') { } else if (code == "5") {
return {type:'success',label:'审核通过'} return { type: "success", label: "审核通过" };
} }
}, },
// 获取可用的操作配置 // 获取可用的操作配置
availableActions(item) { availableActions(item) {
const { status, published, enabled } = item const { status, published, enabled } = item;
let actionKeys = [] let actionKeys = [];
if (!published) { if (!published) {
// 未发布状态 // 未发布状态
actionKeys = STATUS_PERMISSIONS.unpublished[status] || [] actionKeys = STATUS_PERMISSIONS.unpublished[status] || [];
} else { } else {
// 已发布状态 // 已发布状态
const stateKey = enabled ? 'enabled' : 'disabled' const stateKey = enabled ? "enabled" : "disabled";
actionKeys = STATUS_PERMISSIONS.published[stateKey][status] || [] actionKeys = STATUS_PERMISSIONS.published[stateKey][status] || [];
} }
return actionKeys.map((key,index) => ({ return actionKeys
name: key, .map((key, index) => ({
label: ACTION_CONFIG[key].label, name: key,
handler: this[ACTION_CONFIG[key].handler], label: ACTION_CONFIG[key].label,
icon: ACTION_CONFIG[key].icon, handler: this[ACTION_CONFIG[key].handler],
hoverIcon: ACTION_CONFIG[key].hoverIcon, icon: ACTION_CONFIG[key].icon,
labelColor: ACTION_CONFIG[key].labelColor, hoverIcon: ACTION_CONFIG[key].hoverIcon,
uniqueKey: `${item.id}-${key}-${index}` labelColor: ACTION_CONFIG[key].labelColor,
})).filter(Boolean) uniqueKey: `${item.id}-${key}-${index}`,
}))
.filter(Boolean);
}, },
handleManage(item) { handleManage(item) {
sessionStorage.setItem('courseDetail',JSON.stringify(item)); sessionStorage.setItem("courseDetail", JSON.stringify(item));
this.$router.push({ path: '/course/coursemanage' }); this.$router.push({ path: "/course/coursemanage" });
}, },
downloadQrcode() { downloadQrcode() {
let img = document.getElementById("qrcode").getElementsByTagName("img")[0]; let img = document
.getElementById("qrcode")
.getElementsByTagName("img")[0];
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
canvas.width = img.width; canvas.width = img.width;
canvas.height = img.height; canvas.height = img.height;
@@ -320,25 +369,26 @@ export default {
let tempUrl = canvas.toDataURL("image/png"); let tempUrl = canvas.toDataURL("image/png");
// 创建a标签下载 // 创建a标签下载
let link = document.createElement('a'); //创建a标签 let link = document.createElement("a"); //创建a标签
link.style.display = 'none'; //使其隐藏 link.style.display = "none"; //使其隐藏
link.download = tempUrl; link.download = tempUrl;
link.setAttribute('target', '_blank'); link.setAttribute("target", "_blank");
link.href = tempUrl; //赋予文件下载地址 link.href = tempUrl; //赋予文件下载地址
link.setAttribute('download', '二维码.jpg'); //设置下载属性 以及文件名 link.setAttribute("download", "二维码.jpg"); //设置下载属性 以及文件名
document.body.appendChild(link); //a标签插至页面中 document.body.appendChild(link); //a标签插至页面中
link.click(); //强制触发a标签事件 link.click(); //强制触发a标签事件
document.body.removeChild(link); document.body.removeChild(link);
}, },
handleCopyUrl() { handleCopyUrl() {
document.getElementById("text").select() document.getElementById("text").select();
document.execCommand("Copy") document.execCommand("Copy");
this.$message.success("复制成功") this.$showMessage('复制成功', 'success')
}, },
handleQrcode(row) { handleQrcode(row) {
this.qrCodedialogVisible = true; this.qrCodedialogVisible = true;
let urlPre=window.location.protocol+'//'+window.location.host; let urlPre = window.location.protocol + "//" + window.location.host;
//动态的地址 //动态的地址
//urlPre=urlPre+'/m?returnUrl='+urlPre+'/mobile/pages/login/loading?returnUrl='; //urlPre=urlPre+'/m?returnUrl='+urlPre+'/mobile/pages/login/loading?returnUrl=';
@@ -350,52 +400,54 @@ export default {
// if(row.type==20){ // if(row.type==20){
// this.copyUrl=urlPre+this.webBaseUrl+'/course/detail?id='+row.id; // this.copyUrl=urlPre+this.webBaseUrl+'/course/detail?id='+row.id;
// } // }
this.copyUrl = this.qrcodeImgUrl = process.env.VUE_APP_BOE_WEB_URL + '/systemapi/xboe/m/course/manage/redirectDetail?courseId=' + row.id this.copyUrl = this.qrcodeImgUrl =
console.log('qrcodeImgUrl', this.qrcodeImgUrl) process.env.VUE_APP_BOE_WEB_URL +
console.log('webBaseUrl', this.webBaseUrl) "/systemapi/xboe/m/course/manage/redirectDetail?courseId=" +
row.id;
console.log("qrcodeImgUrl", this.qrcodeImgUrl);
console.log("webBaseUrl", this.webBaseUrl);
// 使用$nextTick确保数据渲染 // 使用$nextTick确保数据渲染
this.$nextTick(() => { this.$nextTick(() => {
this.crateQrcode(); this.crateQrcode();
}); });
}, },
// 生成二维码 // 生成二维码
crateQrcode() { crateQrcode() {
let qrcode = new QRCode('qrcode', { let qrcode = new QRCode("qrcode", {
width: 150, width: 150,
height: 150, // 高度 height: 150, // 高度
text: this.qrcodeImgUrl // 二维码内容 text: this.qrcodeImgUrl, // 二维码内容
// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas） // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f' // background: '#f0f'
// foreground: '#ff0' // foreground: '#ff0'
}); });
console.log('qrcode', qrcode) console.log("qrcode", qrcode);
}, },
// 关闭弹框,清除已经生成的二维码 // 关闭弹框,清除已经生成的二维码
closeCode() { closeCode() {
this.qrCodedialogVisible = false this.qrCodedialogVisible = false;
// 逐个节点移除防止事件一起移除 // 逐个节点移除防止事件一起移除
let images = document.querySelectorAll('.qrcode-img img'); let images = document.querySelectorAll(".qrcode-img img");
images.forEach(img => img.remove()); images.forEach((img) => img.remove());
let canvas = document.querySelectorAll('.qrcode-img canvas'); let canvas = document.querySelectorAll(".qrcode-img canvas");
canvas.forEach(canvas => canvas.remove()); canvas.forEach((canvas) => canvas.remove());
}, },
// 撤回接口 // 撤回接口
withdraw(item) { withdraw(item) {
this.$confirm('此操作将撤回审核中的课程, 是否继续?', '提示', { this.$confirm("此操作将撤回审核中的课程, 是否继续?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}) })
.then(() => { .then(() => {
apiCourse.revokeSubmit(item.id).then(res => { apiCourse.revokeSubmit(item.id).then((res) => {
if (res.status == 200) { if (res.status == 200) {
if (res.result) { if (res.result) {
this.$message({ this.$message({
type: 'success', type: "success",
message: '撤回成功!' message: "撤回成功!",
}); });
this.getNewList(); this.getNewList();
} }
@@ -404,16 +456,16 @@ export default {
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: 'info', type: "info",
message: '已取消撤回' message: "已取消撤回",
}); });
}); });
}, },
reset() { reset() {
this.params.name = '' this.params.name = "";
this.params.publish = '' this.params.publish = "";
this.params.status = '' this.params.status = "";
this.params.enabled = '' this.params.enabled = "";
this.params.pageIndex = 1; this.params.pageIndex = 1;
// this.getList(); // this.getList();
this.isSearh = false; this.isSearh = false;
@@ -421,158 +473,114 @@ export default {
toExamine(row) { toExamine(row) {
// this.detailType = row.type; // this.detailType = row.type;
this.dialogVisible = true; this.dialogVisible = true;
apiCourse.auditCourseRecords({ apiCourse
courseId: row.id .auditCourseRecords({
}).then(res => { courseId: row.id,
if (res.status === 200) { })
this.inviteTeacher = res.result; .then((res) => {
} else { if (res.status === 200) {
this.$message.error(res.message); this.inviteTeacher = res.result;
} } else {
}); this.$message.error(res.message);
}
});
}, },
examine(row) { examine(row) {
if(!row.orgId){ if (!row.orgId) {
this.$message.error("课程还未设置资源归属，请先设置资源归属"); this.$message.error("课程还未设置资源归属，请先设置资源归属");
return; return;
} }
let $this=this; let $this = this;
this.$confirm('您确定要直接提交审核所选课程吗？', '友情提示', { this.$confirm("您确定要直接提交审核所选课程吗？", "友情提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(()=>{ }).then(() => {
//新的提交流程 //新的提交流程
apiUserBasic.getOrgHrbpInfo(row.orgId).then(rs=>{ apiUserBasic.getOrgHrbpInfo(row.orgId).then((rs) => {
if(rs.status==200 && rs.result){ if (rs.status == 200 && rs.result) {
let req={ let req = {
courseId:row.id, courseId: row.id,
email:rs.result.email, email: rs.result.email,
courseUser:row.sysCreateBy, courseUser: row.sysCreateBy,
courseName:row.name, courseName: row.name,
ucode:rs.result.userNo, ucode: rs.result.userNo,
auditUser:rs.result.name, auditUser: rs.result.name,
//ukid:hrbpUser.user_id, //ukid:hrbpUser.user_id,
orgId:row.orgId, orgId: row.orgId,
orgName:rs.result.orgNamePath +'/'+rs.result.name orgName: rs.result.orgNamePath + "/" + rs.result.name,
} };
apiCourse.sumbits(req).then(res=>{ apiCourse.sumbits(req).then((res) => {
if(res.status==200){ if (res.status == 200) {
$this.$message.success('提交成功'); $this.$message.success("提交成功");
row.status=2 row.status = 2;
} }
if(res.status==400){ if (res.status == 400) {
$this.$message.error('提交失败:'+res.message); $this.$message.error("提交失败:" + res.message);
} }
}) });
}else{ } else {
$this.$message.error("获取HRBP审核人员失败:"+rs.message); $this.$message.error("获取HRBP审核人员失败:" + rs.message);
} }
}); });
});
// apiOrg.getSimple(row.orgId).then(rrs=>{
// if(rrs.status==200){
// apiHRBP.getHRBP(rrs.result.kid).then(rs=>{
// if(rs.status==200 && rs.result.length>0){
// let hrbpUser=rs.result[0];
// let req={
// courseId:row.id,
// email:hrbpUser.email,
// courseUser:row.sysCreateBy,
// courseName:row.name,
// ucode:hrbpUser.user_no,
// auditUser:hrbpUser.real_name,
// ukid:hrbpUser.user_id,
// orgId:row.orgId,
// orgName:rs.result.orgnization_name_path+'/'+rrs.result.name
// }
// apiCourse.sumbits(req).then(res=>{
// if(res.status==200){
// $this.$message.success('提交成功');
// row.status=2
// }
// if(res.status==400){
// $this.$message.error('提交失败:'+res.message);
// }
// })
// }else{
// $this.$message.error("获取HRBP审核人员失败:"+rs.message);
// }
// })
// }else{
// $this.$message.error("处理资源归属失败，请重新设置资源归属");
// }
// })
})
}, },
delItem(row) { async delItem(row) {
console.log('delItem', row); this.$messageBox.confirm({
this.$confirm(`确认删除${row.name}吗？`, '删除提示', { title: "删除确认",
confirmButtonText: '确定', message: `确认删除${row.name}吗？`,
cancelButtonText: '取消', handleConfirm: async () => {
type: 'warning'
})
.then(async () => {
let params = { let params = {
id: row.id, id: row.id,
title: row.name title: row.name,
}; };
try { try {
// {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注} // {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
const { status } = await apiCourse.del(params); const { status } = await apiCourse.del(params);
if (status === 200) { if (status === 200) {
this.$message.success('操作成功！'); this.$showMessage('删除成功', 'success')
//事件移到后端处理 // this.$message.success("操作成功！");
// if(!row.erasable){
// let event = {
// key: "DeleteCourse",//被管理员删除
// title: '自己删除课程',//事件的标题
// parameters:"author:"+this.userInfo.aid,//自己删除自己的课程，作者就是当前人
// content: '自己删除课程',//事件的内容
// objId: row.id,//关联的id
// objType: "1",//关联的类型
// objInfo:row.name,
// aid: this.userInfo.aid, //当前登录人的id
// aname: this.userInfo.name,//当前人的姓名
// status: 1 //状态，直接写1
// }
// this.$store.dispatch("userTrigger", event);
// }
this.getNewList(); this.getNewList();
} else { } else {
this.$message.success('操作失败！'); this.$showMessage('删除失败', 'error')
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
}) },
.catch(err => { handleCancel: () => {
this.$message({ type: 'info', message: '已取消删除', offset: 50 }); this.$showMessage('已取消删除', 'warning')
}); },
});
}, },
jumpRouter(item) { jumpRouter(item) {
if (item.published) { if (item.published) {
// if (item.type == 10) { // if (item.type == 10) {
// let routeData = this.$router.resolve({ path: '/course/micro?id='+item.id}); // let routeData = this.$router.resolve({ path: '/course/micro?id='+item.id});
// window.open(this.webBaseUrl+routeData.href, '_blank'); // window.open(this.webBaseUrl+routeData.href, '_blank');
// window.open(this.webBaseUrl + '/course/micro?id=' + item.id, '_blank'); // window.open(this.webBaseUrl + '/course/micro?id=' + item.id, '_blank');
// this.$router.push({path:'/course/micro',query:{id:item.id}}) // this.$router.push({path:'/course/micro',query:{id:item.id}})
// } // }
// if (item.type == 20) { // if (item.type == 20) {
// let routeData = this.$router.resolve({ path: '/course/detail?id='+item.id}); // let routeData = this.$router.resolve({ path: '/course/detail?id='+item.id});
// window.open(this.webBaseUrl+routeData.href, '_blank'); // window.open(this.webBaseUrl+routeData.href, '_blank');
// window.open(this.webBaseUrl + '/course/detail?id=' + item.id, '_blank'); // window.open(this.webBaseUrl + '/course/detail?id=' + item.id, '_blank');
//this.$router.push({path:'/course/detail',query:{id:item.id}}) //this.$router.push({path:'/course/detail',query:{id:item.id}})
this.$router.push({path:'/course/studyindex',query:{id:item.id}}) this.$router.push({
// } path: "/course/studyindex",
query: { id: item.id },
});
// }
} else { } else {
// if (item.type == 10) { // if (item.type == 10) {
// // window.open(`${this.webBaseUrl}/course/microPreview?id=${item.id}`); // // window.open(`${this.webBaseUrl}/course/microPreview?id=${item.id}`);
// this.$router.push({path:'/course/microPreview',query:{id:item.id}}) // this.$router.push({path:'/course/microPreview',query:{id:item.id}})
// } else { // } else {
// window.open(`${this.webBaseUrl}/course/rePreview?id=${item.id}`); // window.open(`${this.webBaseUrl}/course/rePreview?id=${item.id}`);
this.$router.push({path:'/course/rePreview',query:{id:item.id}}) this.$router.push({
path: "/course/rePreview",
query: { id: item.id },
});
// } // }
} }
}, },
@@ -582,19 +590,19 @@ export default {
}, },
getList() { getList() {
this.noMore = false; this.noMore = false;
this.params.teacherId = this.userInfo.aid; // this.params.teacherId = this.userInfo.aid;
apiCourse.courseList(this.params).then(res => { apiCourse.courseList(this.params).then((res) => {
this.loading = false; this.loading = false;
if (res.status == 200) { if (res.status == 200) {
this.couresList = [...this.couresList, ...res.result.list]; this.couresList = [...this.couresList, ...res.result.list];
this.count = res.result.count; this.count = res.result.count;
console.log(this.couresList.length, 'this.count', this.count); console.log(this.couresList.length, "this.count", this.count);
if (this.couresList.length >= this.count){ if (this.couresList.length >= this.count) {
this.noMore = true; this.noMore = true;
} }
} else { } else {
this.$message.error(res.message); this.$showMessage(res.message, 'error')
} }
}); });
}, },
@@ -602,13 +610,13 @@ export default {
this.$refs.courseForm.initShow(); this.$refs.courseForm.initShow();
}, },
editCourse(row) { editCourse(row) {
console.log(row, 'editCourse'); console.log(row, "editCourse");
this.$refs.courseForm.initShow(row); this.$refs.courseForm.initShow(row);
}, },
lastTabChange(tab, event) { lastTabChange(tab, event) {
console.log(tab.name); console.log(tab.name);
} },
} },
}; };
</script> </script>
@@ -618,7 +626,7 @@ export default {
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
} }
.list-wu{ .list-wu {
text-align: center; text-align: center;
margin: 40px; margin: 40px;
color: #333; color: #333;
@@ -683,7 +691,7 @@ export default {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
span { span {
color: #409EFF; color: #409eff;
display: block; display: block;
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
@@ -697,10 +705,11 @@ export default {
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
padding: 20px 0px 15px 0px; padding: 20px 0px 15px 0px;
margin: 0 32px 0 22px; margin: 0 32px 0 22px;
::v-deep .uc-course-img { ::v-deep .uc-course-img {
width: 212px; width: 212px;
img { img {
width: 212px;height:119px; width: 212px;
height: 119px;
border: 1px solid #f4f4f5; border: 1px solid #f4f4f5;
} }
} }
@@ -716,7 +725,7 @@ export default {
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
width: 90%; width: 90%;
word-break:break-all; word-break: break-all;
display: -webkit-box; display: -webkit-box;
// overflow: hidden; // overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -725,13 +734,13 @@ export default {
.uc-course-name { .uc-course-name {
font-size: 16px; font-size: 16px;
display: -webkit-box; display: -webkit-box;
white-space:pre-wrap; white-space: pre-wrap;
// word-wrap: break-word; // word-wrap: break-word;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
word-break:break-all; word-break: break-all;
// font-weight: 700; // font-weight: 700;
} }
.uc-course-item { .uc-course-item {
@@ -752,11 +761,9 @@ export default {
.btn-item { .btn-item {
margin-right: 20px; margin-right: 20px;
} }
} }
} }
.uc-course-btns { .uc-course-btns {
text-align: right; text-align: right;
.btn1 { .btn1 {
height: 44px; height: 44px;