Files
learning-system-portal/src/views/course/WaitAudit.vue
2022-06-02 17:23:46 +08:00

608 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="u-page">
<div style="padding: 2px 0px 10px 0px;">
<el-row :gutter="10">
<!-- <el-col :span="6">
<el-cascader placeholder="资源归属" clearable v-model="resOwner" :props="defaultProps" :options="resOwnerListMap"></el-cascader>
</el-col> -->
<el-col :span="4">
<el-cascader placeholder="内容分类" clearable v-model="sysTypeList" :props="defaultTypeProps" :options="sysTypeListMap"></el-cascader>
</el-col>
<el-col :span="4">
<el-input placeholder="创建人" v-model="params.createUser" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input placeholder="名称" v-model="params.keyword" clearable></el-input>
</el-col>
<el-col :span="4">
<el-select v-model="params.publish" placeholder="是否发布" clearable>
<el-option label="全部" :value="null"></el-option>
<el-option label="已发布" :value="true"></el-option>
<el-option label="未发布" :value="false"></el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="getseatch();" icon="el-icon-search">搜索</el-button>
<el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button>
</el-col>
</el-row>
</div>
<!-- <div style="padding-left">
</div> -->
<el-table :data="pageData" border stripe>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="名称" prop="name" show-overflow-tooltip width="200px">
<template slot-scope="scope">
<span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="内容分类" prop="sysType" sortable width="240px">
<template slot-scope="scope">
<span v-if="scope.row.sysType1 != ''">{{sysTypeName(scope.row.sysType1)}}</span>
<span v-if="scope.row.sysType2 != ''">/{{sysTypeName(scope.row.sysType2)}}</span>
<span v-if="scope.row.sysType3 != ''">/{{sysTypeName(scope.row.sysType3)}}</span>
</template>
</el-table-column>
<!-- <el-table-column label="资源归属" sortable prop="author" width="240px">
<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>
</template>
</el-table-column> -->
<!-- <el-table-column label="授课方式" prop="type" width="120px">
<template slot-scope="scope">
{{ courseType(scope.row.type)}}
</template>
</el-table-column> -->
<el-table-column label="状态" prop="status" width="120px">
<template slot-scope="scope">
<!-- 1未提交 2.已提交 = 未审核 5 已审核 3.不通过-->
<span v-if="scope.row.status == 1">未提交</span>
<span v-if="scope.row.status == 2">待审核</span>
<span v-if="scope.row.status == 5">已审核</span>
<span v-if="scope.row.status == 3">审核未通过</span>
</template>
</el-table-column>
<el-table-column label="是否发布" width="130px">
<template slot-scope="scope">
{{ scope.row.published !== true ? '未发布' : '已发布' }}
</template>
</el-table-column>
<el-table-column label="创建人" prop="sysCreateBy"></el-table-column>
<el-table-column label="创建时间" prop="sysCreateTime" width="200px" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100px" fixed="right">
<template slot-scope="scope">
<el-button @click="toExamine(scope.row)" type="text" >审核</el-button>
<el-button @click="toPreview(scope.row)" type="text" >预览</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="pageData.length > 0" style="text-align: center;margin-top:70px">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.pageIndex"
:page-sizes="[10, 20, 30, 40]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.count"
></el-pagination>
</div>
<div style="height: 100px;"></div>
<!--邀请审核-->
<el-dialog custom-class="g-dialog" title="邀请教师审核课程" :visible.sync="inviteTeacher.dlgShow">
<div style="display: flex;justify-content:flex-start;padding-bottom: 10px;">
<div style="padding: 0px 5px;"><el-input placeholder="姓名" v-model="inviteTeacher.params.name"></el-input></div>
<div style="padding: 0px 5px;"><el-button @click="findTeachers()" icon="el-icon-search" type="primary" size="small">搜索</el-button></div>
</div>
<div>
<el-table max-height="500" border :data="inviteTeacher.list" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="code" label="工号"></el-table-column>
<el-table-column prop="orgInfo" label="组织"></el-table-column>
<el-table-column prop="orgInfo" label="选择">
<template slot-scope="scope">
<el-radio v-model="scope.row.checked">选择</el-radio>
</template>
</el-table-column>
</el-table>
</div>
<template #footer>
<el-button @click="inviteTeacher.dlgShow = false"> </el-button>
<el-button type="primary" @click="enSure">确认</el-button>
</template>
</el-dialog>
<!-- 审核 -->
<el-dialog title="审核" :visible.sync="dialogVisible" width="900px" custom-class="g-dialog" @close="examin={}">
<div v-show="expandDetails">
<div v-if="examin.detailType == 10"><auditCourse1 :showTest="true" :isDetails="false" :id="examin.examineId"></auditCourse1></div>
<div v-if="examin.detailType == 20"><auditCourse2 :showTest="true" :isDetails="false" :id="examin.examineId"></auditCourse2></div>
</div>
<div style="border-top: 1px solid #eee; background-color: #eee; padding: 5px;">
<div style="text-align: center;margin-bottom: 10px;">
<el-button @click="expandDetails = !expandDetails">{{expandDetails? '详情折叠':'详情展开'}}</el-button>
<!-- <el-button @click="isExamine = 1">直接审核</el-button> -->
<!-- <el-button @click="isExamine = 2">邀请审核</el-button> -->
</div>
<el-form label-width="80px" v-if="isExamine === 1">
<el-form-item label="审核">
<el-radio-group v-model="auditInfo.pass">
<el-radio :label="true">通过</el-radio>
<el-radio :label="false">不通过</el-radio>
</el-radio-group>
<span v-if="auditInfo.pass" style="margin-left: 50px; color: #1381e8; ">审核通过提交后同时会发布课程</span>
</el-form-item>
<el-form-item label="审核意见"><el-input v-model="auditInfo.remark" type="textarea" rows="3"></el-input></el-form-item>
</el-form>
<div v-if="isExamine === 2">
<div style="display: flex;justify-content:flex-start;padding-bottom: 10px;">
<div style="padding: 0px 5px;"><el-input placeholder="姓名" v-model="inviteTeacher.params.name"></el-input></div>
<div style="padding: 0px 5px;"><el-button @click="findTeachers()" icon="el-icon-search" type="primary" >搜索</el-button></div>
</div>
<div>
<el-table v-if="inviteTeacher.list.length !== 0" max-height="500" border :data="inviteTeacher.list" style="width: 100%;margin-bottom: 10px;">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="code" label="工号"></el-table-column>
<el-table-column prop="orgInfo" label="组织"></el-table-column>
<el-table-column prop="orgInfo" label="选择">
<template slot-scope="scope">
<el-radio v-model="scope.row.checked">选择</el-radio>
</template>
</el-table-column>
</el-table>
<div>审核记录</div>
<el-table max-height="500" border :data="inviteTeacher.list" style="width: 100%;">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="code" label="工号"></el-table-column>
<el-table-column prop="orgInfo" label="组织"></el-table-column>
<el-table-column prop="type" label="审核状态"></el-table-column>
<el-table-column prop="text" label="备注"></el-table-column>
</el-table>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false;examin={}"> </el-button>
<el-button type="primary" @click="examineData(true)">提交</el-button>
<!-- <el-button type="primary" @click="examineData(true)">提交并发布</el-button> -->
</span>
</el-dialog>
<el-dialog title="课程详情" :visible.sync="showDetails" @close="examin = {};" width="900px" custom-class="g-dialog">
<!-- <div v-show="expandDetails"> -->
<div v-if="examin.detailType == 10"><auditCourse1 :showTest="true" :isDetails="false" :isShow="false" :id="examin.examineId"></auditCourse1></div>
<div v-if="examin.detailType == 20"><auditCourse2 :showTest="true" :isDetails="false" :isShow="false" :id="examin.examineId"></auditCourse2></div>
<!-- </div> -->
<span slot="footer" class="dialog-footer">
<el-button @click="showDetails = false;examin = {};"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import courseForm from '@/components/Course/courseForm.vue';
import manager from '@/components/Study/manager.vue';
import QRCode from 'qrcodejs2';
import auditCourse1 from '@/components/Course/auditCourse1.vue';
import auditCourse2 from '@/components/Course/auditCourse2.vue';
import adminPage from '@/components/Administration/adminPage.vue';
import {courseType} from '../../utils/tools.js';
import apiType from '../../api/modules/type.js';
import apiCourse from '../../api/modules/course.js';
import { mapGetters,mapActions} from 'vuex';
export default {
name: 'manageCourse',
components: {courseForm, manager, auditCourse1, auditCourse2,adminPage },
computed: {
...mapGetters(['resOwnerMap','sysTypeMap']),
},
data() {
return {
loading: true,
sysTypeList: [],
sysTypeListMap:[],
resOwnerListMap:[],
showDetails:false,
examin:{
detailType: '',
examineId: '',
examineName: '',
},
paperJson:{items:[]},
courseType: courseType,
page: {
pageIndex: 1,//第几页
pageSize: 10, // 每页多少条
count: 0
},
resOwner: [],
defaultProps:{
value: 'code',
label: 'name',
},
defaultTypeProps:{
value: 'id',
label: 'name',
},
manageStudyData: {},
expandDetails: false,
qrcode: '',
isExamine: 1,
auditInfo: {
pass: true,
remark: ''
},
detailType: 1,
dialogVisible: false,
qrcodeShow: false,
currentPage4: 4,
inviteTeacher: {
//邀请
dlgShow: false,
params: { name: '' },
list: []
},
manageStudy: {
dlgShow: false
},
params: {},
pageData:[],
courseChooseShow: false,
courseChooseId: '',
weike: {
onlyRequired: false,
dlgShow: false,
fileType: '',
info: {
shebei: ''
}
},
biaoke: {
dlgShow: false
},
recommend: {
dlgShow: false,
},
catalogs: {
addNewZhang: false,
addNewCell: false,
}
};
},
mounted() {
this.searchData();
this.getResOwnerTree().then(rs=>{
this.resOwnerListMap=rs;
});
this.getSysTypeTree().then(rs=>{
this.sysTypeListMap=rs;
})
this.loadResOwners();
this.loadSysTypes();
},
methods: {
getseatch(){
this.params.pageIndex= 1;
this.searchData();
},
reset(){
this.resOwner = ''
this.params.sysType = ''
this.params.createUser = ''
this.params.keyword = ''
this.params.type = ''
this.params.publish = ''
this.sysTypeList = [];
this.params.sysType1 = '';
this.params.sysType2 = '';
this.params.sysType3 = '';
this.params.pageIndex= 1;
this.searchData();
},
...mapActions({
getResOwnerTree:'resOwner/getResOwnerTree',
loadResOwners:'resOwner/loadResOwners',
getSysTypeTree:'sysType/getSysTypeTree',
loadSysTypes:'sysType/loadSysTypes'
}),
resOwnerName(code){
if(code==''){return '';}
return this.resOwnerMap.get(code);
},
sysTypeName(code){
if(code==''){return '';}
return this.sysTypeMap.get(code);
},
//预览跳转页面
toPreview(row) {
if(row.type == 10) {
window.open(`${this.webBaseUrl}/course/microPreview?id=${row.id}`);
} else{
window.open(`${this.webBaseUrl}/course/rePreview?id=${row.id}`);
}
},
// 直接审核
examineData(flag) {
if(this.isExamine == 1) {
let params = {
id:this.examin.examineId,//课程id,
title:this.examin.examineName,//课程的名称,
pass: this.auditInfo.pass,//Boolean 是否通过,
remark: this.auditInfo.remark// 备注
}
if(flag){
apiCourse.auditAndPublish(params).then(res=>{
if(res.status === 200) {
this.$message.success('操作成功!');
this.dialogVisible = false;
this.searchData();
this.$store.dispatch('refrashReviewed');
}else{
this.$message.error(res.message);
}
})
}else{
apiCourse.audit(params).then(res=>{
if(res.status === 200) {
this.$message.success('操作成功!');
this.dialogVisible = false;
this.searchData();
this.$store.dispatch('refrashReviewed');
}else{
this.$message.error(res.message);
}
})
}
} else {
this.$message.warning('暂未开放!');
}
},
// 课程查询
async searchData() {
this.params.resOwner1 = this.resOwner[0];
this.params.resOwner2 = this.resOwner[1];
this.params.resOwner3 = this.resOwner[2];
this.params.status = 2;
this.params.pageIndex = this.page.pageIndex;
this.params.pageSize = this.page.pageSize;
this.params.sysType1 = this.sysTypeList[0];
this.params.sysType2 = this.sysTypeList[1];
this.params.sysType3 = this.sysTypeList[2];
try {
this.loading = true;
const {result, status,message} = await apiCourse.auditList(this.params);
if(status === 200) {
this.pageData = result.list;
this.page.count = result.count;
} else {
this.$message.error(message)
}
this.loading = false;
} catch (error) {
this.loading = false;
console.log(error);
}
},
viewTopic(row) {
this.examin.detailType = row.type;
this.examin.examineId = row.id;
this.examin.examineName = row.name;
this.showDetails = true;
},
editCurriculum(row) {
this.editData = row;
},
jumpDetails() {
// 跳转打开新页面
let routeData = this.$router.resolve({ path: '/course/micro'});
window.open(this.webBaseUrl+routeData.href, '_blank');
},
toExamine(row) {
this.examin.detailType = row.type;
this.examin.examineId = row.id;
this.examin.examineName = row.name;
this.auditInfo.remark = '';
this.dialogVisible = true;
},
enSure() {
// 确认事件
},
handleSizeChange(val) {
this.page.pageSize = val;
this.page.pageIndex = 1;
this.searchData();
},
handleCurrentChange(val) {
this.page.pageIndex = val;
this.searchData();
},
chooseInvite(row) {
//邀请老师审核
this.inviteTeacher.dlgShow = true;
},
findTeachers() {
this.inviteTeacher.list = [
{ id: '1', name: '李玉冰', type:'通过',text: '实用',sex: '男', code: '1023123', orgInfo: '教育技术中心', checked: false },
{ id: '2', name: '李玉冰', type:'未通过',text: '内容在调整',sex: '男', code: '1023123', orgInfo: '教育技术中心', checked: false },
{ id: '3', name: '李玉冰', type:'驳回',text: '内容重复',sex: '男', code: '1023123', orgInfo: '教育技术中心', checked: false }
];
},
showQrimage() {
this.qrcodeShow = true;
// 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
this.qrcode = 'https://yuchengkai.cn/docs/frontend/#typeof';
// 使用$nextTick确保数据渲染
this.$nextTick(() => {
this.crateQrcode();
});
},
// creatQrCode() {
// },
// 生成二维码
crateQrcode() {
this.qr = new QRCode('qrcode', {
width: 150,
height: 150, // 高度
text: this.qrcode // 二维码内容
// render: 'canvas' // 设置渲染方式(有两种方式 table和canvas默认是canvas
// background: '#f0f'
// foreground: '#ff0'
});
},
// 关闭弹框,清除已经生成的二维码
closeCode() {
this.$refs.qrcode.innerHTML = '';
},
showManageStudy(row) {
this.manageStudyData = row;
this.manageStudy.dlgShow = true;
},
releaseData(row) {
this.$confirm('正在发布考试, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.pageData.list.forEach((item, index) => {
if (item.id === row.id) {
item.collectNumber = 1;
}
});
this.$message({
type: 'success',
message: '发布成功!'
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
showChooseCourse() {
this.courseChooseShow = true;
},
chooseCourseType(item, idx) {
this.courseChooseId = item.id;
},
toInputCourse() {
if (this.courseChooseId == '1') {
this.showWeike();
} else if (this.courseChooseId == '2') {
this.showBiaoke();
}
this.courseChooseShow = false;
},
newHandleClick() {},
showRecords(item) {
this.recommend.dlgShow = true;
},
showWeike() {
this.weike.dlgShow = true;
},
showBiaoke() {
this.biaoke.dlgShow = true;
},
setTop(item, idx) {
let msg = '已设置置顶';
if (item.isTop) {
item.isTop = false;
msg = '已取消置顶';
} else {
item.isTop = true;
}
this.$message({ message: msg, type: 'success', offset: 50 });
},
delItem(item, idx) {
this.$confirm('您确定要删除所选课程吗?', '删除提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.items.splice(idx, 1);
this.$message({ type: 'success', message: '删除成功!', offset: 50 });
})
.catch(() => {
this.$message({ type: 'info', message: '已取消删除', offset: 50 });
});
},
showAddCatalogZhang(bal) {
this.catalogs.addNewZhang = bal;
},
saveNewCatalogZhang() {
this.catalogs.addNewZhang = false;
},
filterType(value, row) {
return row.type === value;
},
filterStatus(value, row) {
return row.status === value;
}
}
};
</script>
<style lang="scss" scoped>
.course-types {
display: flex;
justify-content: center;
padding: 15px;
.course-type {
margin: 10px;
text-align: center;
padding: 5px;
cursor: pointer;
img {
width: 110px;
height: 110px;
}
.info {
padding-top: 10px;
}
}
.choose {
border: 2px solid #008000;
}
}
.el-aside {
padding: 5px 10px;
}
.cctree {
.cctree-chapter {
.cctree-chapter-name {
border-bottom: 1px solid #dddddd;
}
.cctree-chapter-cells {
margin: 0px;
list-style-type: circle;
padding: 0px;
.cctree-chapter-cell {
line-height: 30px;
list-style-type: circle;
padding-left: 25px;
}
}
}
}
</style>