Skip to content

N
national_museum_vod
Commit 8e8e832c authored by Your Name's avatar Your Name
Browse files
Options

学习项目和学习内容改动

parent 53f8b625
Hide whitespace changes
Inline Side-by-side
Showing with 2849 additions and 2122 deletions
src/main.js
View file @ 8e8e832c
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import $ from 'jquery'
import moment from 'moment'
import Vuex from 'vuex'
import qs from 'qs'
import axios from 'axios'
import {backToken} from './config/env'
import http from './config/httpServer'
import echarts from 'echarts'
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$echarts = echarts
// 引入JsPdf
import exportToPdf　from "@/utils/exportToPdf"
Vue.use(exportToPdf)
Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})
Vue.prototype.$querystring = qs//其他的代码用到比较多 就新增一个可以了
Vue.prototype.$qs = qs
Vue.prototype.$http = axios
Vue.prototype.$https = http
Vue.prototype.backToken=backToken
Vue.prototype.moment = moment
Vue.use(ElementUI);
Vue.use(Vuex);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import $ from 'jquery'
import moment from 'moment'
import Vuex from 'vuex'
import qs from 'qs'
import axios from 'axios'
import {backToken} from './config/env'
import http from './config/httpServer'
import echarts from 'echarts'
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$echarts = echarts
// 引入JsPdf
import exportToPdf　from "@/utils/exportToPdf"
Vue.use(exportToPdf)
Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})
Vue.prototype.$querystring = qs//其他的代码用到比较多 就新增一个可以了
Vue.prototype.$qs = qs
Vue.prototype.$http = axios
Vue.prototype.$https = http
Vue.prototype.backToken=backToken
Vue.prototype.moment = moment
Vue.use(ElementUI);
Vue.use(Vuex);
Vue.config.productionTip = false
Vue.directive("defaultSelect", {
componentUpdated (el, bindings) {
const [defaultValues] = bindings.value
const dealStyle = function (tags) {
// 因为不可删除原有值，所以原有值的index是不会变的，也就是将前n个tag的close隐藏掉即可。n即已有值的长度defaultValues.length
tags.forEach((el, index) => {
if (index<=defaultValues.length-1 && ![...el.classList].includes('select-tag-close-none')) {
el.classList.add('none')
}
})
}
// 设置样式 隐藏close icon
const tags = el.querySelectorAll('.el-tag__close')
if (tags.length === 0) {
// 初始化tags为空处理
setTimeout(() => {
const tagTemp = el.querySelectorAll('.el-tag__close')
dealStyle(tagTemp)
})
} else {
dealStyle(tags)
}
}
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src/page/content/components/uploadVue/uploadImg.vue
View file @ 8e8e832c
......@@ -24,17 +24,18 @@
<script>
export default {
props:{
fileList:{
type:Array,
default:[]
},
},
// props:{
// fileList:{
// type: Array,
// default: () => [],
// },
// },
data() {
return {
fileList: [],
dialogImageUrl: "",
dialogVisible: false,
imageUrl:""
imageUrl:"",
};
},
computed: {
......
src/page/content/display/content/add.vue
View file @ 8e8e832c
<template>
<div class="info">
<div class="info-header">{{ type === 'Update'?'修改':'新建'}}展板</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
创建展板内容，“*”为必填项，音频资料支持汉语、蒙语、藏语、维吾尔语、英语五种言音频上传，参考资料支持多文件上传。
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="展板基本信息" name="1">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="party-form"
:inline="true"
label-position="top"
>
<!-- <el-form-item label="多文件上传测试" >
<div style="color:red;">
（可支持word、PDF、ppt、视频类型文件及图片上传）
</div>
<upload-folder ></upload-folder>
</el-form-item> -->
<el-form-item label="展板名称" prop="name" class="w100">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="boardCopyrightOwnerId">
<el-select
placeholder="请选择展板版权方"
v-model="ruleForm.boardCopyrightOwnerId"
clearable
@change="clearBoardCat"
>
<el-option
v-for="item in boardCopyrightOwnerId"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板分类" prop="exhibitionBoardCatId">
<el-select
placeholder="请选择展板分类"
v-model="ruleForm.exhibitionBoardCatId"
@focus="getExhibitionBoardCatId"
clearable
>
<el-option
v-for="item in exhibitionBoardCatId"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板图片" class="w50" prop="cover" required>
<upload-img :fileList="ruleForm.imageList" @imgUrl="imgUrl" ></upload-img>
</el-form-item>
<el-form-item label="展板二维码" class prop="qrcodeUrl" required>
<upload-qrcode :fileList="ruleForm.qrcodeList" @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
</el-form-item>
<el-form-item label="展板简介" style="width:100%" prop="remarks">
<el-input type="textarea" v-model="ruleForm.remarks"></el-input>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板影音信息" name="2">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="party-form"
:inline="true"
label-position="top"
>
<el-form-item label="请选择视频版权方" class="w50" prop="videoContentCopyrightOwnerId">
<el-select
placeholder="请选择视频版权方"
v-model="ruleForm.videoContentCopyrightOwnerId"
@change="clearVideoCat"
clearable
>
<el-option
v-for="item in copyrightOwner"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="请选择视频分类" prop="videoContentCatId">
<el-select
placeholder="请选择视频分类"
v-model="ruleForm.videoContentCatId"
@focus="getVideoContentCatData"
@change="clearVideo"
clearable
>
<el-option
v-for="item in videoContentCat"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="请选择视频" prop="videoContentId" class="w100">
<el-select
@focus="getVideoData"
placeholder="请选择视频"
v-model="ruleForm.videoContentId"
clearable
>
<el-option
v-for="item in videoContentId"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item></el-form-item>
<el-form-item label="语音导览" prop="audioIdList" >
<div style="color:red;">（可上传汉语、蒙语、藏语、维吾尔语、英语五种语言音频资料，命名方式为展板名称+语言）</div>
<upload-audio :fileList="ruleForm.audioList" @audioList="audioList"></upload-audio>
</el-form-item>
<el-form-item label="参考资料" prop="datumIdList" >
<div style="color:red;">
（可支持word、PDF、ppt、视频类型文件及图片上传）
</div>
<upload-datum :fileList="ruleForm.datumList" @datumList="datumList"></upload-datum>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<el-button class="btn_form_search" @click="close">关闭</el-button>
<el-button v-show="type === 'add'" type="primary" class="btn_form_search" @click="submitForm('ruleForm')">提交审核</el-button>
<el-button v-show="type === 'Update'" type="primary" class="btn_form_search" @click="updateForm('ruleForm')">提交审核</el-button>
</div>
</div>
</div>
</template>
<script>
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import uploadQrcode from "@/page/content/components/uploadVue/uploadQrcode";
import uploadFile from "@/page/content/components/uploadVue/uploadFile";
import uploadDatum from "@/page/content/components/uploadVue/uploadDatum";
import uploadAudio from "@/page/content/components/uploadVue/uploadAudio";
import mulDisplay from "@/page/content/components/mulClassify/mulDisplay";
import addCopyright from "@/page/content/components/dialog/addCopyright";
import uploadFolder from "@/page/content/components/uploadVue/uploadFolder";
export default {
components: {
uploadImg,
uploadFile,
uploadDatum,
uploadAudio,
mulDisplay,
addCopyright,
uploadQrcode,
uploadFolder
},
data() {
return {
activeNames: ["1", "2"],
type: this.$route.query.type,
boardCopyrightOwnerId:[], // 展板版权方
exhibitionBoardCatId:[], // 展板分类
copyrightOwner: [], // 视频版权方
videoContentCat: [], // 视频分类
videoContentId:[], // 视频
formLabelWidth: "100px",
ruleForm: {
name: "",
exhibitionBoardCatId:'',
boardCopyrightOwnerId:"",
videoContentCopyrightOwnerId: "",
videoContentCatId: "",
videoContentId:"",
audioIdList: [],
datumIdList: [],
datumList:[],
audioList:[],
imageList:[],
qrcodeList:[]
},
rules: {
name: [
{ required: true, message: "请输入版权方名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
boardCopyrightOwnerId: [
{ required: true, message: "请选择展板版权方", trigger: "change" }
],
exhibitionBoardCatId: [
{ required: true, message: "请选择展板分类", trigger: "change" }
],
videoContentCopyrightOwnerId: [
{ required: true, message: "请选择视频版权方", trigger: "change" }
],
videoContentCatId: [
{ required: true, message: "请选择视频分类", trigger: "change" }
],
videoContentId: [
{ required: true, message: "请选择视频", trigger: "change" }
],
audioIdList:[
{ required: true, message: "请上传音频", trigger: "blur" }
],
datumIdList:[
{ required: true, message: "请上传参考资料", trigger: "blur" }
],
remarks: [
{ min: 1, max: 100, message: "请输入1到100个字" },
],
},
};
},
mounted(){
this.init()
},
methods: {
init() {
// this.getVideoContentCatData();
this.getVideoContentCopyrightData();
// this.getExhibitionBoardCatId();
this.getBoardCopyrightOwnerId();
// this.getVideoData();
if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
}
},
// 更换展板版权方，展板分类清空
clearBoardCat(){
this.ruleForm.exhibitionBoardCatId = ''
},
// 更换视频版权方，视频分类清空
clearVideoCat(){
this.ruleForm.videoContentCatId = ''
this.ruleForm.videoContentId = ''
},
// 获取版权方详情
getInfo(id) {
let vm = this;
vm.$https(
{
url: "exhibitionBoard/get/" + id,
method: "get",
authType: this.backToken
}
).then(res => {
let data = res.data.data;
this.ruleForm = {
videoContentCopyrightOwnerId :data.videoContentCopyrightOwnerId,
videoContentId:data.videoContentId,
videoContentCatId:data.videoContentCatId,
boardCopyrightOwnerId:data.boardCopyrightOwnerId,
cover:data.cover,
exhibitionBoardCatId:data.exhibitionBoardCatId,
id:data.id,
name:data.name,
qrcodeUrl:data.qrcodeUrl,
remarks:data.remarks,
audioIdList:data.audioIdList,
datumIdList:data.datumIdList,
datumList:data.datumList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}),
audioList:data.audioList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}),
imageList:[{url:data.cover}],
qrcodeList:[{url:data.qrcodeUrl}]
}
// console.log(this.ruleForm)
this.getVideoContentCatData();
this.getExhibitionBoardCatId();
this.getVideoData();
}).catch(function(err) {
console.log(err);
});
},
// 缩略图
imgUrl(url) {
this.ruleForm.cover = url;
},
// 二维码
qrcodeUrl(url){
this.ruleForm.qrcodeUrl = url
},
// 音频
audioList(list){
this.ruleForm.audioIdList = list;
},
// 资料
datumList(list){
this.ruleForm.datumIdList = list;
},
// 新增
submitForm(formName) {
console.log(this.ruleForm)
this.$refs[formName].validate(valid => {
if (valid) {
this.$https(
{
url: "exhibitionBoard/save",
method: "post",
authType: this.backToken
},
this.$qs.stringify(this.ruleForm)
).then(res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "新增展板申请已提交,待审核！" });
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
}).catch(function(err) {
console.log(err);
});
}
});
},
// 修改
updateForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.ruleForm))
delete params.datumList
delete params.audioList
delete params.imageList
delete params.qrcodeList
console.log(params)
this.$https(
{
url: "exhibitionBoard/update",
method: "put",
authType: this.backToken
},
this.$qs.stringify(params)
).then(res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "修改展板申请已提交,待审核！" });
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
}).catch(function(err) {
console.log(err);
});
}
});
},
// 获取视频版权方
getVideoContentCopyrightData() {
let vm = this;
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "VIDEO_CONTENT" }
)
.then(res => {
this.copyrightOwner = res.data.data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取展板版权方
getBoardCopyrightOwnerId() {
let vm = this;
vm.$https({
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "EXHIBITION_BOARD" }
).then(res => {
this.boardCopyrightOwnerId = res.data.data;
}).catch(function(err) {
console.log(err);
});
},
//获取展板分类
getExhibitionBoardCatId(){
let vm = this;
if(this.ruleForm.boardCopyrightOwnerId){
vm.$https({
url: "exhibitionBoardCat/getList",
method: "post",
authType: this.backToken
},this.$qs.stringify({copyrightOwnerId:this.ruleForm.boardCopyrightOwnerId})).then(res => {
this.exhibitionBoardCatId = res.data.data
}).catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择展板版权方！")
}
},
// 获取视频分类列表
getVideoContentCatData() {
let vm = this;
if(this.ruleForm.videoContentCopyrightOwnerId){
vm.$https({
url: "videoContentCat/getList",
method: "get",
authType: this.backToken
},{copyrightOwnerId:this.ruleForm.videoContentCopyrightOwnerId}).then(res => {
this.videoContentCat = res.data.data;
}).catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择视频版权方！")
}
},
// 视频版权方或视频分类发生变化时，重置视频的值
clearVideo(){
this.ruleForm.videoContentId = ''
},
// 获取视频列表
getVideoData() {
const param = {
videoContentCatId:this.ruleForm.videoContentCatId,
videoContentCopyrightOwnerId:this.ruleForm.videoContentCopyrightOwnerId
}
if((this.ruleForm.videoContentCatId)&&(this.ruleForm.videoContentCopyrightOwnerId)){
let vm = this;
vm.$https({
url: "videoContent/getList",
method: "get",
authType: this.backToken
},
param).then(res => {
this.videoContentId = res.data.data;
}).catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择视频版权方和视频分类！")
this.videoContentId = []
}
},
// 关闭
close() {
this.$router.go(-1);
},
}
};
</script>
<style lang="less" scoped>
.info-add {
/deep/.el-collapse-item__wrap {
padding: 16px;
}
/deep/.el-collapse-item__header {
position: relative;
padding-left: 20px;
font-size: 18px;
color: #333;
&::before {
content: "";
position: absolute;
top: 14px;
left: 0px;
width: 4px;
height: 18px;
background: #000;
}
}
}
</style>
<template>
<div class="info">
<div class="info-header">{{ type === 'Update'?'修改':'新建'}}展板</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
创建展板内容，“*”为必填项，音频资料支持汉语、蒙语、藏语、维吾尔语、英语五种言音频上传，参考资料支持多文件上传。
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="展板基本信息" name="1">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="party-form"
:inline="true"
label-position="top"
>
<!-- <el-form-item label="多文件上传测试" >
<div style="color:red;">
（可支持word、PDF、ppt、视频类型文件及图片上传）
</div>
<upload-folder ></upload-folder>
</el-form-item> -->
<el-form-item label="展板名称" prop="name" class="w100">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="boardCopyrightOwnerId">
<el-select
placeholder="请选择展板版权方"
v-model="ruleForm.boardCopyrightOwnerId"
clearable
@change="clearBoardCat"
>
<el-option
v-for="item in boardCopyrightOwnerId"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板分类" prop="exhibitionBoardCatId">
<el-select
placeholder="请选择展板分类"
v-model="ruleForm.exhibitionBoardCatId"
@focus="getExhibitionBoardCatId"
clearable
>
<el-option
v-for="item in exhibitionBoardCatId"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板图片" class="w50" prop="cover" required>
<upload-img :fileList="ruleForm.imageList" @imgUrl="imgUrl" ></upload-img>
</el-form-item>
<el-form-item label="展板二维码" class prop="qrcodeUrl" required>
<upload-qrcode :fileList="ruleForm.qrcodeList" @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
</el-form-item>
<el-form-item label="展板简介" style="width:100%" prop="remarks">
<el-input type="textarea" v-model="ruleForm.remarks"></el-input>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板影音信息" name="2">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="party-form"
:inline="true"
label-position="top"
>
<el-form-item label="请选择视频版权方" class="w50" prop="videoContentCopyrightOwnerId">
<el-select
placeholder="请选择视频版权方"
v-model="ruleForm.videoContentCopyrightOwnerId"
@change="clearVideoCat"
clearable
>
<el-option
v-for="item in copyrightOwner"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="请选择视频分类" prop="videoContentCatId">
<el-select
placeholder="请选择视频分类"
v-model="ruleForm.videoContentCatId"
@focus="getVideoContentCatData"
@change="clearVideo"
clearable
>
<el-option
v-for="item in videoContentCat"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="请选择视频" prop="videoContentId" class="w100">
<el-select
@focus="getVideoData"
placeholder="请选择视频"
v-model="ruleForm.videoContentId"
clearable
>
<el-option
v-for="item in videoContentId"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item></el-form-item>
<el-form-item label="语音导览" prop="audioIdList" >
<div style="color:red;">（可上传汉语、蒙语、藏语、维吾尔语、英语五种语言音频资料，命名方式为展板名称+语言）</div>
<upload-audio :fileList="ruleForm.audioList" @audioList="audioList"></upload-audio>
</el-form-item>
<el-form-item label="参考资料" prop="datumIdList" >
<div style="color:red;">
（可支持word、PDF、ppt、视频类型文件及图片上传）
</div>
<upload-datum :fileList="ruleForm.datumList" @datumList="datumList"></upload-datum>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<el-button class="btn_form_search" @click="close">关闭</el-button>
<el-button v-show="type === 'add'" type="primary" class="btn_form_search" @click="submitForm('ruleForm')">提交审核</el-button>
<el-button v-show="type === 'Update'" type="primary" class="btn_form_search" @click="updateForm('ruleForm')">提交审核</el-button>
</div>
</div>
</div>
</template>
<script>
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import uploadQrcode from "@/page/content/components/uploadVue/uploadQrcode";
import uploadFile from "@/page/content/components/uploadVue/uploadFile";
import uploadDatum from "@/page/content/components/uploadVue/uploadDatum";
import uploadAudio from "@/page/content/components/uploadVue/uploadAudio";
import mulDisplay from "@/page/content/components/mulClassify/mulDisplay";
import addCopyright from "@/page/content/components/dialog/addCopyright";
import uploadFolder from "@/page/content/components/uploadVue/uploadFolder";
export default {
components: {
uploadImg,
uploadFile,
uploadDatum,
uploadAudio,
mulDisplay,
addCopyright,
uploadQrcode,
uploadFolder
},
data() {
return {
activeNames: ["1", "2"],
type: this.$route.query.type,
boardCopyrightOwnerId:[], // 展板版权方
exhibitionBoardCatId:[], // 展板分类
copyrightOwner: [], // 视频版权方
videoContentCat: [], // 视频分类
videoContentId:[], // 视频
formLabelWidth: "100px",
ruleForm: {
name: "",
exhibitionBoardCatId:'',
boardCopyrightOwnerId:"",
videoContentCopyrightOwnerId: "",
videoContentCatId: "",
videoContentId:"",
audioIdList: [],
datumIdList: [],
datumList:[],
audioList:[],
imageList:[],
qrcodeList:[]
},
rules: {
name: [
{ required: true, message: "请输入版权方名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
boardCopyrightOwnerId: [
{ required: true, message: "请选择展板版权方", trigger: "change" }
],
exhibitionBoardCatId: [
{ required: true, message: "请选择展板分类", trigger: "change" }
],
videoContentCopyrightOwnerId: [
{ required: true, message: "请选择视频版权方", trigger: "change" }
],
videoContentCatId: [
{ required: true, message: "请选择视频分类", trigger: "change" }
],
videoContentId: [
{ required: true, message: "请选择视频", trigger: "change" }
],
audioIdList:[
{ required: true, message: "请上传音频", trigger: "blur" }
],
datumIdList:[
{ required: true, message: "请上传参考资料", trigger: "blur" }
],
remarks: [
{ min: 1, max: 100, message: "请输入1到100个字" },
],
},
};
},
mounted(){
this.init()
},
methods: {
init() {
// this.getVideoContentCatData();
this.getVideoContentCopyrightData();
// this.getExhibitionBoardCatId();
this.getBoardCopyrightOwnerId();
// this.getVideoData();
if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
}
},
// 更换展板版权方，展板分类清空
clearBoardCat(){
this.ruleForm.exhibitionBoardCatId = ''
},
// 更换视频版权方，视频分类清空
clearVideoCat(){
this.ruleForm.videoContentCatId = ''
this.ruleForm.videoContentId = ''
},
// 获取版权方详情
getInfo(id) {
let vm = this;
vm.$https(
{
url: "exhibitionBoard/get/" + id,
method: "get",
authType: this.backToken
}
).then(res => {
let data = res.data.data;
this.ruleForm = {
videoContentCopyrightOwnerId :data.videoContentCopyrightOwnerId,
videoContentId:data.videoContentId,
videoContentCatId:data.videoContentCatId,
boardCopyrightOwnerId:data.boardCopyrightOwnerId,
cover:data.cover,
exhibitionBoardCatId:data.exhibitionBoardCatId,
id:data.id,
name:data.name,
qrcodeUrl:data.qrcodeUrl,
remarks:data.remarks,
audioIdList:data.audioIdList,
datumIdList:data.datumIdList,
datumList:data.datumList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}),
audioList:data.audioList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}),
imageList:[{url:data.cover}],
qrcodeList:[{url:data.qrcodeUrl}]
}
// console.log(this.ruleForm)
this.getVideoContentCatData();
this.getExhibitionBoardCatId();
this.getVideoData();
}).catch(function(err) {
console.log(err);
});
},
// 缩略图
imgUrl(url) {
this.ruleForm.cover = url;
},
// 二维码
qrcodeUrl(url){
this.ruleForm.qrcodeUrl = url
},
// 音频
audioList(list){
this.ruleForm.audioIdList = list;
},
// 资料
datumList(list){
this.ruleForm.datumIdList = list;
},
// 新增
submitForm(formName) {
// console.log(this.ruleForm)
this.$refs[formName].validate(valid => {
if (valid) {
this.$https(
{
url: "exhibitionBoard/save",
method: "post",
authType: this.backToken
},
this.$qs.stringify(this.ruleForm)
).then(res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "新增展板申请已提交,待审核！" });
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
}).catch(function(err) {
console.log(err);
});
}
});
},
// 修改
updateForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.ruleForm))
delete params.datumList
delete params.audioList
delete params.imageList
delete params.qrcodeList
// console.log(params)
this.$https(
{
url: "exhibitionBoard/update",
method: "put",
authType: this.backToken
},
this.$qs.stringify(params)
).then(res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "修改展板申请已提交,待审核！" });
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
}).catch(function(err) {
console.log(err);
});
}
});
},
// 获取视频版权方
getVideoContentCopyrightData() {
let vm = this;
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "VIDEO_CONTENT" }
)
.then(res => {
this.copyrightOwner = res.data.data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取展板版权方
getBoardCopyrightOwnerId() {
let vm = this;
vm.$https({
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "EXHIBITION_BOARD" }
).then(res => {
this.boardCopyrightOwnerId = res.data.data;
}).catch(function(err) {
console.log(err);
});
},
//获取展板分类
getExhibitionBoardCatId(){
let vm = this;
if(this.ruleForm.boardCopyrightOwnerId){
vm.$https({
url: "exhibitionBoardCat/getList",
method: "post",
authType: this.backToken
},this.$qs.stringify({copyrightOwnerId:this.ruleForm.boardCopyrightOwnerId})).then(res => {
this.exhibitionBoardCatId = res.data.data
}).catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择展板版权方！")
}
},
// 获取视频分类列表
getVideoContentCatData() {
let vm = this;
if(this.ruleForm.videoContentCopyrightOwnerId){
vm.$https({
url: "videoContentCat/getList",
method: "get",
authType: this.backToken
},{copyrightOwnerId:this.ruleForm.videoContentCopyrightOwnerId}).then(res => {
this.videoContentCat = res.data.data;
}).catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择视频版权方！")
}
},
// 视频版权方或视频分类发生变化时，重置视频的值
clearVideo(){
this.ruleForm.videoContentId = ''
},
// 获取视频列表
getVideoData() {
const param = {
videoContentCatId:this.ruleForm.videoContentCatId,
videoContentCopyrightOwnerId:this.ruleForm.videoContentCopyrightOwnerId
}
if((this.ruleForm.videoContentCatId)&&(this.ruleForm.videoContentCopyrightOwnerId)){
let vm = this;
vm.$https({
url: "videoContent/getList",
method: "get",
authType: this.backToken
},
param).then(res => {
this.videoContentId = res.data.data;
}).catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择视频版权方和视频分类！")
this.videoContentId = []
}
},
// 关闭
close() {
this.$router.go(-1);
},
}
};
</script>
<style lang="less" scoped>
.info-add {
/deep/.el-collapse-item__wrap {
padding: 16px;
}
/deep/.el-collapse-item__header {
position: relative;
padding-left: 20px;
font-size: 18px;
color: #333;
&::before {
content: "";
position: absolute;
top: 14px;
left: 0px;
width: 4px;
height: 18px;
background: #000;
}
}
}
</style>
src/page/content/learn/content/add.vue
View file @ 8e8e832c
<template>
<div class="info">
<video-dialog ref="videoDialog"></video-dialog>
<!-- <div class="info-header">新建学习内容</div> -->
<div class="info-header">{{ type === 'Update'?'修改':'新建'}}学习内容</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
“*”为必填项。展板类别及版权方支持多选。展板备选清单中可预览备选展板详情及展板内包含的视频。
</div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-form-inline party-form"
:inline="true"
label-position="top"
>
<el-form-item label="学习内容名称" prop="name" class="w50" style="padding-right: 100px">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="适用范围">
<span v-show="userType === '1'">全平台</span>
<el-radio-group v-show="userType !== '1'" v-model="ruleForm.applicableScope">
<el-radio label="THIS_ORGAN">仅本单位</el-radio>
<el-radio label="THIS_ORGAN_SUB">本单位及下属单位</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="所属学习项目" class="w50" prop="learningProjectId">
<el-select placeholder="请选所属学习项目" v-model="ruleForm.learningProjectId">
<el-option
v-for="item in learningProjectIdList"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="学习内容宣传图" prop="cover" class="w100">
<upload-img ref="uploadImg" @imgUrl="imgUrl"></upload-img>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="copyrightOwnerIdList">
<el-select
placeholder="请选择版权方"
multiple
v-model="ruleForm.copyrightOwnerIdList"
@change="getSelectDep2"
>
<el-checkbox :style="selfstyle" v-model="checkedThing2" @change="selectAllThing2">全选</el-checkbox>
<el-option
v-for="item in assetType2"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板类别" prop="exhibitionBoardCatIdList">
<el-select
placeholder="请选择展板类别"
multiple
v-model="ruleForm.exhibitionBoardCatIdList"
@focus="getAssetTypeData"
@change="getSelectDep"
>
<el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
<el-option
v-for="item in videoContentCat"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板备选清单" class="w100" prop="exhibitionBoardIdList">
<div class="party-table">
<el-table
border
@selection-change="handleSelectionChange"
style="width: 100%"
max-height="400"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="120" label="序号">
</el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板类别" prop="exhibitionBoardCatName"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<div class="table-btn-group">
<el-tooltip content="视频预览" placement="top">
<el-button circle @click="videoPreview(scope.row)">
<i class="icon-table icon-video"></i>
</el-button>
</el-tooltip>
<el-tooltip content="展板预览" placement="top">
<el-button circle @click="displayPreview(scope.row)">
<i class="icon-table icon-board"></i>
</el-button>
</el-tooltip>
</div>
<!-- <el-button
type="text"
style="padding: 0"
@click="videoPreview(scope.row)"
>视频预览</el-button
>
<el-button
type="text"
style="padding: 0"
@click="displayPreview(scope.row)"
>展板预览</el-button
>-->
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
<!--新增弹框-->
<el-dialog
custom-class="party-dialog"
title="展板预览区"
width="468px"
:visible.sync="dialogVisible"
:before-close="closeDialog"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rules"
id="ruleo"
class="party-form"
>
<el-form-item label="展板名称">
<el-input v-model="classForm.name" readonly></el-input>
</el-form-item>
<el-form-item label="版权方">
<el-input v-model="classForm.boardCopyrightOwnerName" readonly></el-input>
</el-form-item>
<el-form-item label="展板分类">
<el-input v-model="classForm.exhibitionBoardCatName" readonly></el-input>
</el-form-item>
<el-form-item label="展板宣传图">
<img class="imgSize" :src="classForm.cover" alt />
</el-form-item>
<el-form-item label="简介">
<el-input type="textarea" v-model="classForm.remarks" readonly></el-input>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button
v-show="type === 'add'"
size="mini"
type="primary"
class="btn_form_search"
@click="submitForm('ruleForm')"
>提交审核</el-button>
<el-button
v-show="type === 'Update'"
size="mini"
type="primary"
class="btn_form_search"
@click="updateForm('ruleForm')"
>提交审核</el-button>
<el-button size="mini" class="btn_form_search" @click="close">取消</el-button>
</div>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import videoDialog from "@/page/content/components/dialog/videoDialog";
import audioPlay from "@/page/content/components/audioPlay";
export default {
components: {
uploadImg,
videoDialog,
audioPlay
},
data() {
return {
dialogVisible: false,
classForm: {},
type: this.$route.query.type,
learningProjectIdList: "",
videoContentCat: [],
assetType2: [], // 版权方列表
checkedThing: false,
checkedThing2: false,
selfstyle: {
textAlign: "right",
width: "100%",
paddingRight: "10px"
},
tableData: [],
ruleForm: {
name: "", //学习内容名称
applicableScope: "ALL_PLAT", //适用范围
cover: "", //宣传图
learningProjectId: "", //所属学习项目
exhibitionBoardCatIdList: [], //展板类别
copyrightOwnerIdList: [], //版权方
exhibitionBoardIdList: [] // 展板备选
},
rules: {
name: [
{ required: true, message: "请输入学习内容名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
cover: [
{
required: true,
message: "请选择学习内容宣传图"
}
],
learningProjectId: [
{ required: true, message: "请选择所属学习项目", trigger: "change" }
],
exhibitionBoardCatIdList: [
{
required: true,
type: "array",
message: "请选择展板类别",
trigger: "change"
}
],
copyrightOwnerIdList: [
{
required: true,
type: "array",
message: "请选择版权方",
trigger: "change"
}
],
exhibitionBoardIdList: [
{
required: true,
type: "array",
message: "请选择展板",
trigger: "change"
}
]
},
multipleSelection: [],
userType: ""
};
},
mounted() {
this.userType = localStorage.getItem("userType");
this.init();
},
methods: {
// 视频预览
videoPreview(row) {
this.$refs.videoDialog.dialogVisible = true;
const videos = row.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
this.$refs.videoDialog.videoList = videos
},
// 展板预览
displayPreview(row) {
this.dialogVisible = true;
this.classForm = row;
},
// 关闭弹窗
closeDialog() {
this.dialogVisible = false;
},
init() {
this.getLearnProject();
// this.getAssetTypeData();
this.getAssetTypeData2();
if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
}
},
// 获取版权方详情
getInfo(id) {
let vm = this;
vm.$https({
url: "learningContent/get/" + id,
method: "get",
authType: this.backToken
})
.then(res => {
let data = res.data.data;
this.ruleForm = data;
this.ruleForm = {
name: data.name,
applicableScope: data.applicableScope,
copyrightOwnerIdList: data.copyrightOwnerIdList,
cover: data.cover,
learningProjectId: data.learningProjectId,
exhibitionBoardCatIdList: data.exhibitionBoardCatIdList,
id: data.id,
exhibitionBoardIdList: data.exhibitionBoardIdList
};
// this.tableData = data.exhibitionBoardList;
this.multipleSelection = data.exhibitionBoardList;
this.$refs.uploadImg.showImg(this.ruleForm.cover);
this.getExhibitionBoardTable();
this.getAssetTypeData()
})
.catch(function(err) {
console.log(err);
});
},
getExhibitionBoardTable() {
const param = {
boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList,
exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList
};
this.getTableData(param, "update");
},
setSelctTable() {
if (!this.multipleSelection.length) {
return false;
}
let _this = this;
let tableData = this.tableData;
let multipleSelection = this.multipleSelection;
tableData.forEach(v => {
multipleSelection.forEach(m => {
if (v.id == m.id) {
_this.$refs.multipleTable.toggleRowSelection(v);
}
});
});
},
// 获取展板类别列表
getAssetTypeData() {
let vm = this;
if(this.ruleForm.copyrightOwnerIdList.length>0){
vm.$https({
url: "exhibitionBoardCat/getList",
method: "post",
authType: this.backToken
},this.$qs.stringify({copyrightOwnerId:this.ruleForm.copyrightOwnerIdList.toString()}))
.then(res => {
let data = res.data.data;
vm.videoContentCat = data;
})
.catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择展板版权方！")
}
},
// 获取版权方列表
getAssetTypeData2() {
let vm = this;
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "EXHIBITION_BOARD" }
)
.then(res => {
let data = res.data.data;
console.log(data,"dhwdhwid")
vm.assetType2 = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取学习项目列表
getLearnProject() {
let vm = this;
vm.$https({
url: "learningProject/getList",
method: "get",
authType: this.backToken
})
.then(res => {
let data = res.data.data;
vm.learningProjectIdList = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取获取学习内容展板全部列表
getLearnContentBoard() {
let vm = this;
vm.$https(
{
url: "learningContentBoard/getList",
method: "get",
authType: this.backToken
},
{ learningContentId: this.$route.query.id }
)
.then(res => {
let data = res.data.data;
console.log(data);
})
.catch(function(err) {
console.log(err);
});
},
// 多选赋值
handleSelectionChange(val) {
this.multipleSelection = val;
let newArray = val.map(item => {
return item.id;
});
this.ruleForm.exhibitionBoardIdList = newArray;
},
// 新增
submitForm(formName) {
this.$refs[formName].validate(valid => {
console.log(this.ruleForm);
if (valid) {
this.$https(
{
url: "/learningContent/save",
method: "post",
authType: this.backToken
},
// this.ruleForm
this.$qs.stringify(this.ruleForm)
)
.then(res => {
if(res.data.resultCode === "200"){
if(this.userType === '1'){
this.$message({ type: "success", message: "新增学习内容申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "新增成功！" });
}
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
})
.catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 修改版权方
updateForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$https(
{
url: "learningContent/update",
method: "put",
authType: this.backToken
},
this.$qs.stringify(this.ruleForm)
// this.ruleForm
)
.then(res => {
if(res.data.resultCode === "200"){
if(this.userType === '1'){
this.$message({ type: "success", message: "修改学习内容申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "修改成功！" });
}
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
})
.catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
imgUrl(url) {
this.ruleForm.cover = url;
this.$refs.ruleForm.validateField("cover");
},
// 展板类别发生变化
getSelectDep(exhibitionBoardCatIdList) {
if (exhibitionBoardCatIdList.length === this.videoContentCat.length) {
this.checkedThing = true;
} else {
this.checkedThing = false;
}
this.getTableParam()
},
//
getSelectDep2(exhibitionBoardCatIdList) {
if (exhibitionBoardCatIdList.length === this.assetType2.length) {
this.checkedThing2 = true;
} else {
this.checkedThing2 = false;
}
// this.getTableParam()
},
// 筛选展板备选清单选项条件
getTableParam(){
// debugger
const param = {
boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList.toString(),
exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList.toString()
};
if((param.boardCopyrightOwnerIdList.length>0)&&(param.exhibitionBoardCatIdList.length>0)){
this.getTableData(param);
}else{
this.tableData = []
}
},
// 根据展板类别，版权方获取展板备选清单
getTableData(param, type) {
let vm = this;
vm.$https(
{
url: "exhibitionBoard/getList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
// alert(1)
// console.log(res)
let data = res.data.data;
vm.tableData = data;
if (type) {
// 选中表格数据
setTimeout(() => {
vm.setSelctTable();
}, 1000);
}
})
.catch(function(err) {
console.log(err);
});
},
selectAllThing() {
// debugger
this.ruleForm.exhibitionBoardCatIdList = [];
if (this.checkedThing) {
this.videoContentCat.map(item => {
this.ruleForm.exhibitionBoardCatIdList.push(item.id);
});
} else {
this.ruleForm.exhibitionBoardCatIdList = [];
}
this.getTableParam()
},
selectAllThing2() {
// debugger
this.ruleForm.copyrightOwnerIdList = [];
if (this.checkedThing2) {
this.assetType2.map(item => {
this.ruleForm.copyrightOwnerIdList.push(item.id);
});
} else {
this.ruleForm.copyrightOwnerIdList = [];
}
},
// 新增
addSubmit() {
// 至少选一个备选清单 提示
alert("请先至少选择一个展板备选清单");
},
close() {
history.go(-1);
},
moveUpward(row, index) {
if (index > 0) {
let upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
} else {
this.$message({
message: "已经是第一条，上移失败",
type: "warning"
});
}
},
moveDown(row, index) {
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条，下移失败",
type: "warning"
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
}
}
};
</script>
<style lang="less">
@import "../../../../style/table.less";
</style>
<template>
<div class="info">
<video-dialog ref="videoDialog"></video-dialog>
<!-- <div class="info-header">新建学习内容</div> -->
<div class="info-header">{{ type === 'Update'?'修改':'新建'}}学习内容</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
“*”为必填项。展板类别及版权方支持多选。展板备选清单中可预览备选展板详情及展板内包含的视频。
</div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-form-inline party-form"
:inline="true"
label-position="top"
>
<el-form-item label="学习内容名称" prop="name" class="w50" style="padding-right: 100px">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="适用范围">
<span v-show="userType === '1'">全平台</span>
<el-radio-group v-show="userType !== '1'" v-model="ruleForm.applicableScope">
<el-radio label="THIS_ORGAN">仅本单位</el-radio>
<el-radio label="THIS_ORGAN_SUB">本单位及下属单位</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="所属学习项目" class="w50" prop="learningProjectId">
<el-select placeholder="请选所属学习项目" v-model="ruleForm.learningProjectId" @change="getSelect(ruleForm.learningProjectId)">
<el-option
v-for="item in learningProjectIdList"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="学习内容宣传图" prop="cover" class="w100">
<upload-img ref="uploadImg" @imgUrl="imgUrl"></upload-img>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="copyrightOwnerIdList">
<el-select
placeholder="请选择版权方"
multiple
v-model="ruleForm.copyrightOwnerIdList"
@change="getSelectDep2"
>
<el-checkbox :style="selfstyle" v-model="checkedThing2" @change="selectAllThing2">全选</el-checkbox>
<el-option
v-for="item in assetType2"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板类别" prop="exhibitionBoardCatIdList">
<el-select
placeholder="请选择展板类别"
multiple
v-model="ruleForm.exhibitionBoardCatIdList"
@focus="getAssetTypeData"
@change="getSelectDep"
>
<el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
<el-option
v-for="item in videoContentCat"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板备选清单" class="w100" prop="exhibitionBoardIdList">
<div class="party-table">
<el-table
border
@selection-change="handleSelectionChange"
style="width: 100%"
max-height="400"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="120" label="序号">
</el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板类别" prop="exhibitionBoardCatName"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<div class="table-btn-group">
<el-tooltip content="视频预览" placement="top">
<el-button circle @click="videoPreview(scope.row)">
<i class="icon-table icon-video"></i>
</el-button>
</el-tooltip>
<el-tooltip content="展板预览" placement="top">
<el-button circle @click="displayPreview(scope.row)">
<i class="icon-table icon-board"></i>
</el-button>
</el-tooltip>
</div>
<!-- <el-button
type="text"
style="padding: 0"
@click="videoPreview(scope.row)"
>视频预览</el-button
>
<el-button
type="text"
style="padding: 0"
@click="displayPreview(scope.row)"
>展板预览</el-button
>-->
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
<!--新增弹框-->
<el-dialog
custom-class="party-dialog"
title="展板预览区"
width="468px"
:visible.sync="dialogVisible"
:before-close="closeDialog"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rules"
id="ruleo"
class="party-form"
>
<el-form-item label="展板名称">
<el-input v-model="classForm.name" readonly></el-input>
</el-form-item>
<el-form-item label="版权方">
<el-input v-model="classForm.boardCopyrightOwnerName" readonly></el-input>
</el-form-item>
<el-form-item label="展板分类">
<el-input v-model="classForm.exhibitionBoardCatName" readonly></el-input>
</el-form-item>
<el-form-item label="展板宣传图">
<img class="imgSize" :src="classForm.cover" alt />
</el-form-item>
<el-form-item label="简介">
<el-input type="textarea" v-model="classForm.remarks" readonly></el-input>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button
v-show="type === 'add'"
size="mini"
type="primary"
class="btn_form_search"
@click="submitForm('ruleForm')"
>提交审核</el-button>
<el-button
v-show="type === 'Update'"
size="mini"
type="primary"
class="btn_form_search"
@click="updateForm('ruleForm')"
>提交审核</el-button>
<el-button size="mini" class="btn_form_search" @click="close">取消</el-button>
</div>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import videoDialog from "@/page/content/components/dialog/videoDialog";
import audioPlay from "@/page/content/components/audioPlay";
export default {
components: {
uploadImg,
videoDialog,
audioPlay
},
data() {
return {
dialogVisible: false,
classForm: {},
type: this.$route.query.type,
learningProjectIdList: "",
videoContentCat: [],
assetType2: [], // 版权方列表
checkedThing: false,
checkedThing2: false,
selfstyle: {
textAlign: "right",
width: "100%",
paddingRight: "10px"
},
tableData: [],
ruleForm: {
name: "", //学习内容名称
applicableScope: "ALL_PLAT", //适用范围
cover: "", //宣传图
projectId: '',
learningProjectId: "", //所属学习项目
exhibitionBoardCatIdList: [], //展板类别
copyrightOwnerIdList: [], //版权方
exhibitionBoardIdList: [] // 展板备选
},
rules: {
name: [
{ required: true, message: "请输入学习内容名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
cover: [
{
required: true,
message: "请选择学习内容宣传图"
}
],
learningProjectId: [
{ required: true, message: "请选择所属学习项目", trigger: "change" }
],
exhibitionBoardCatIdList: [
{
required: true,
type: "array",
message: "请选择展板类别",
trigger: "change"
}
],
copyrightOwnerIdList: [
{
required: true,
type: "array",
message: "请选择版权方",
trigger: "change"
}
],
exhibitionBoardIdList: [
{
required: true,
type: "array",
message: "请选择展板",
trigger: "change"
}
]
},
multipleSelection: [],
userType: ""
};
},
mounted() {
this.userType = localStorage.getItem("userType");
this.init();
},
methods: {
// 视频预览
videoPreview(row) {
this.$refs.videoDialog.dialogVisible = true;
const videos = row.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
this.$refs.videoDialog.videoList = videos
},
// 展板预览
displayPreview(row) {
this.dialogVisible = true;
this.classForm = row;
},
// 关闭弹窗
closeDialog() {
this.dialogVisible = false;
},
async init() {
if (this.$route.query.type === "Update") {
await this.getInfo(this.$route.query.id);
}
await this.getLearnProject();
// this.getAssetTypeData();
},
// 获取版权方详情
async getInfo(id) {
let vm = this;
vm.$https({
url: "learningContent/get/" + id,
method: "get",
authType: this.backToken
})
.then(res => {
let data = res.data.data;
this.ruleForm = data;
// console.log(11111,this.ruleForm.learningProjectId)
this.ruleForm = {
name: data.name,
applicableScope: data.applicableScope,
copyrightOwnerIdList: data.copyrightOwnerIdList,
cover: data.cover,
learningProjectId: data.learningProjectId,
exhibitionBoardCatIdList: data.exhibitionBoardCatIdList,
id: data.id,
exhibitionBoardIdList: data.exhibitionBoardIdList,
};
// this.tableData = data.exhibitionBoardList;
this.multipleSelection = data.exhibitionBoardList;
this.$refs.uploadImg.showImg(this.ruleForm.cover);
this.getExhibitionBoardTable();
this.getAssetTypeData()
this.getAssetTypeData2();
})
.catch(function(err) {
console.log(err);
});
},
getExhibitionBoardTable() {
const param = {
boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList,
exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList
};
this.getTableData(param, "update");
},
setSelctTable() {
if (!this.multipleSelection.length) {
return false;
}
let _this = this;
let tableData = this.tableData;
let multipleSelection = this.multipleSelection;
tableData.forEach(v => {
multipleSelection.forEach(m => {
if (v.id == m.id) {
_this.$refs.multipleTable.toggleRowSelection(v);
}
});
});
},
// 获取展板类别列表
getAssetTypeData() {
let vm = this;
if(this.ruleForm.copyrightOwnerIdList.length>0){
vm.$https({
url: "exhibitionBoardCat/getListByProjectAndCopyright",
method: "post",
authType: this.backToken
},this.$qs.stringify({copyrightIds:this.ruleForm.copyrightOwnerIdList.toString(),learningProjectId:this.ruleForm.learningProjectId}))
.then(res => {
let data = res.data.data;
vm.videoContentCat = data;
})
.catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择展板版权方！")
}
},
getSelect() {
this.getAssetTypeData2()
},
// 获取版权方列表
getAssetTypeData2() {
let vm = this;
// console.log(this.ruleForm)
vm.$https(
{
url: "copyrightOwner/getListByLearningProjectId",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "EXHIBITION_BOARD",learningProjectId: vm.ruleForm.learningProjectId}
)
.then(res => {
let data = res.data.data;
// console.log(data,"dhwdhwid")
vm.assetType2 = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取学习项目列表
getLearnProject() {
let vm = this;
vm.$https({
url: "learningProject/getList",
method: "get",
authType: this.backToken
})
.then(res => {
let data = res.data.data;
vm.learningProjectIdList = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取获取学习内容展板全部列表
getLearnContentBoard() {
let vm = this;
vm.$https(
{
url: "learningContentBoard/getList",
method: "get",
authType: this.backToken
},
{ learningContentId: this.$route.query.id }
)
.then(res => {
let data = res.data.data;
// console.log(data);
})
.catch(function(err) {
console.log(err);
});
},
// 多选赋值
handleSelectionChange(val) {
this.multipleSelection = val;
let newArray = val.map(item => {
return item.id;
});
this.ruleForm.exhibitionBoardIdList = newArray;
},
// 新增
submitForm(formName) {
this.$refs[formName].validate(valid => {
// console.log(this.ruleForm);
if (valid) {
this.$https(
{
url: "/learningContent/save",
method: "post",
authType: this.backToken
},
// this.ruleForm
this.$qs.stringify(this.ruleForm)
)
.then(res => {
if(res.data.resultCode === "200"){
if(this.userType === '1'){
this.$message({ type: "success", message: "新增学习内容申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "新增成功！" });
}
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
})
.catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 修改版权方
updateForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$https(
{
url: "learningContent/update",
method: "put",
authType: this.backToken
},
this.$qs.stringify(this.ruleForm)
// this.ruleForm
)
.then(res => {
if(res.data.resultCode === "200"){
if(this.userType === '1'){
this.$message({ type: "success", message: "修改学习内容申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "修改成功！" });
}
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
})
.catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
imgUrl(url) {
this.ruleForm.cover = url;
this.$refs.ruleForm.validateField("cover");
},
// 展板类别发生变化
getSelectDep(exhibitionBoardCatIdList) {
if (exhibitionBoardCatIdList.length === this.videoContentCat.length) {
this.checkedThing = true;
} else {
this.checkedThing = false;
}
this.getTableParam()
},
//
getSelectDep2(exhibitionBoardCatIdList) {
if (exhibitionBoardCatIdList.length === this.assetType2.length) {
this.checkedThing2 = true;
} else {
this.checkedThing2 = false;
}
// this.getTableParam()
},
// 筛选展板备选清单选项条件
getTableParam(){
// debugger
const param = {
boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList.toString(),
exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList.toString(),
learningProjectId:this.ruleForm.learningProjectId
};
if((param.boardCopyrightOwnerIdList.length>0)&&(param.exhibitionBoardCatIdList.length>0)){
this.getTableData(param);
}else{
this.tableData = []
}
},
// 根据展板类别，版权方获取展板备选清单
getTableData(param, type) {
let vm = this;
vm.$https(
{
url: "exhibitionBoard/getListByLearningId",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
// alert(1)
// console.log(res)
let data = res.data.data;
vm.tableData = data;
if (type) {
// 选中表格数据
setTimeout(() => {
vm.setSelctTable();
}, 1000);
}
})
.catch(function(err) {
console.log(err);
});
},
selectAllThing() {
// debugger
this.ruleForm.exhibitionBoardCatIdList = [];
if (this.checkedThing) {
this.videoContentCat.map(item => {
this.ruleForm.exhibitionBoardCatIdList.push(item.id);
});
} else {
this.ruleForm.exhibitionBoardCatIdList = [];
}
this.getTableParam()
},
selectAllThing2() {
// debugger
this.ruleForm.copyrightOwnerIdList = [];
if (this.checkedThing2) {
this.assetType2.map(item => {
this.ruleForm.copyrightOwnerIdList.push(item.id);
});
} else {
this.ruleForm.copyrightOwnerIdList = [];
}
},
// 新增
addSubmit() {
// 至少选一个备选清单 提示
alert("请先至少选择一个展板备选清单");
},
close() {
history.go(-1);
},
moveUpward(row, index) {
if (index > 0) {
let upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
} else {
this.$message({
message: "已经是第一条，上移失败",
type: "warning"
});
}
},
moveDown(row, index) {
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条，下移失败",
type: "warning"
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
}
}
};
</script>
<style lang="less">
@import "../../../../style/table.less";
</style>
src/page/content/learn/content/details.vue
View file @ 8e8e832c
<template>
<div class="info">
<div class="info-header">学习内容详情</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
可查看学习内容包含的宣传图及展板列表，可手动调整展板播放顺序，调整后即刻生效。
</div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="审核意见" name="1">
<el-form
class="demo-form-inline"
:inline="true"
:model="checkForm"
label-position="top"
>
<el-form-item label="审核层级" class="w100">
<span class="w50 l-float">
<strong>初审</strong> {{checkForm.firstTime}}
</span>
<span class="w50">
<strong>复审</strong> {{checkForm.secondTime}}
</span>
</el-form-item>
<el-form-item label="审核结果" class="w50">
<span v-if="checkForm.status === 'TBC'">待初审</span>
<span v-else-if="checkForm.status === 'TBCA'">待复审</span>
<span v-else-if="checkForm.status === 'REFUSED'">驳回</span>
<span v-else-if="checkForm.status === 'APPROVED_FINAL'">通过</span>
</el-form-item>
<el-form-item
label="驳回原因"
class="w100"
>
{{checkForm.firstRemarks}}
{{checkForm.secondRemarks}}
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="学习内容" name="2">
<el-form
class="demo-form-inline"
:inline="true"
:model="formInline"
label-position="top"
>
<el-form-item label="学习内容名称" class="w50">{{ruleForm.name}}</el-form-item>
<el-form-item label="学习内容宣传图" class="w50">
<img class="imgSize" :src="ruleForm.cover" alt />
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板列表" name="3">
<!-- {{tableData}} -->
<div class="party-table">
<!-- {{tableData[0]}} -->
<el-table
border
style="width: 100%;height:100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="index" width="120" label="序号">
<!-- <template slot-scope="scope">
<span>{{ (page.currentPage - 1) * 10 + scope.$index + 1 }}</span>
</template> -->
</el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
style="padding:0"
:disabled="scope.$index == 0"
@click="moveUpward(scope.row, scope.$index)"
>上移</el-button>
<el-button
type="text"
style="padding:0"
:disabled="(scope.$index + 1) == tableData.length"
@click="moveDown(scope.row, scope.$index)"
>下移</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button size="mini" type="primary" class="btn_form_search" @click="close">关闭</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checkForm:{
firstTime:"",
secondTime:"",
status:"",
},
ruleForm:{
},
tableData: [
{
id: "1",
name: ""
},
{
id: "2",
name: ""
},
{
id: "3",
name: ""
}
],
activeNames: ["1","2","3"],
formInline: {
user: "",
region: ""
}
};
},
mounted(){
this.init()
},
methods: {
init() {
this.getInfo(this.$route.query.id);
// this.getLearnContentBoard()
this.getCheckInfo(this.$route.query.id)
},
// 获取审核详情
getCheckInfo(id) {
let vm = this;
vm.$https(
{
url: "audit/getById",
method: "get",
authType: this.backToken
},
{id:id,
type:"LEARNING_CONTENT"}
// this.$qs.stringify({
// id:id,
// type:"LEARNING_CONTENT"
// })
)
.then(res => {
let data = res.data.data;
this.checkForm = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取学习内容详情
getInfo(id) {
let vm = this;
vm.$https(
{
url: "learningContent/get/" + id,
method: "get",
authType: this.backToken
}
// param
)
.then(res => {
let data = res.data.data;
this.ruleForm = data;
console.log(this.ruleForm)
// this.ruleForm = {
// name :data.name,
// applicableScope:data.applicableScope,
// copyrightOwnerIdList:data.copyrightOwnerIdList,
// cover:data.cover,
// learningProjectId:data.learningProjectId,
// exhibitionBoardCatIdList:data.exhibitionBoardCatIdList,
// id:data.id,
// exhibitionBoardIdList:data.exhibitionBoardIdList,
// }
this.tableData = data.exhibitionBoardList
// this.multipleSelection = data.exhibitionBoardList
})
.catch(function(err) {
console.log(err);
});
},
// 获取获取学习内容展板全部列表
getLearnContentBoard(){
let vm = this;
vm.$https({
url: "learningContentBoard/getList",
method: "get",
authType: this.backToken
},
{learningContentId:this.$route.query.id}
)
.then(res => {
let data = res.data.data;
console.log(data)
this.tableData = data
// this.multipleSelection = data
})
.catch(function(err) {
console.log(err);
});
},
close() {
history.go(-1);
},
handleChange(val) {
console.log(val);
},
moveUpward(row, index) {
this.getSort(row.id,(this.tableData[index - 1]).id)
if (index > 0) {
let upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
} else {
this.$message({
message: "已经是第一条，上移失败",
type: "warning"
});
}
},
moveDown(row, index) {
this.getSort(row.id,(this.tableData[index + 1]).id)
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条，下移失败",
type: "warning"
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
},
// 排序接口
getSort(sourceId,targetId){
let _this = this;
_this
.$https({
method: "put",
// url: "learningContentBoard/sort",
url: "learningContentBoard/sortById",
authType: this.backToken
},
_this.$qs.stringify({
id:this.$route.query.id,
sourceId:sourceId,
targetId:targetId
}))
.then(
res => {
if(res.data.resultCode === "200"){
this.$message({
type: "success",
message: "成功!"
});
}else{
this.$message({ type: "error", message: res.data.message });
}
},
error => {
this.$message({
type: "fail",
message: "失败!" + error.response.data
});
}
);
},
}
};
</script>
<style lang="less">
<template>
<div class="info">
<div class="info-header">学习内容详情</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
可查看学习内容包含的宣传图及展板列表，可手动调整展板播放顺序，调整后即刻生效。
</div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="审核意见" name="1">
<el-form
class="demo-form-inline"
:inline="true"
:model="checkForm"
label-position="top"
>
<el-form-item label="审核层级" class="w100">
<span class="w50 l-float">
<strong>初审</strong> {{checkForm.firstTime}}
</span>
<span class="w50">
<strong>复审</strong> {{checkForm.secondTime}}
</span>
</el-form-item>
<el-form-item label="审核结果" class="w50">
<span v-if="checkForm.status === 'TBC'">待初审</span>
<span v-else-if="checkForm.status === 'TBCA'">待复审</span>
<span v-else-if="checkForm.status === 'REFUSED'">驳回</span>
<span v-else-if="checkForm.status === 'APPROVED_FINAL'">通过</span>
</el-form-item>
<el-form-item
label="驳回原因"
class="w100"
>
{{checkForm.firstRemarks}}
{{checkForm.secondRemarks}}
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="学习内容" name="2">
<el-form
class="demo-form-inline"
:inline="true"
:model="formInline"
label-position="top"
>
<el-form-item label="学习内容名称" class="w50">{{ruleForm.name}}</el-form-item>
<el-form-item label="学习内容宣传图" class="w50">
<img class="imgSize" :src="ruleForm.cover" alt />
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板列表" name="3">
<!-- {{tableData}} -->
<div class="party-table">
<!-- {{tableData[0]}} -->
<el-table
border
style="width: 100%;height:100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="index" width="120" label="序号">
<!-- <template slot-scope="scope">
<span>{{ (page.currentPage - 1) * 10 + scope.$index + 1 }}</span>
</template> -->
</el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
style="padding:0"
:disabled="scope.$index == 0"
@click="moveUpward(scope.row, scope.$index)"
>上移</el-button>
<el-button
type="text"
style="padding:0"
:disabled="(scope.$index + 1) == tableData.length"
@click="moveDown(scope.row, scope.$index)"
>下移</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button size="mini" type="primary" class="btn_form_search" @click="close">关闭</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checkForm:{
firstTime:"",
secondTime:"",
status:"",
},
ruleForm:{
},
tableData: [
{
id: "1",
name: ""
},
{
id: "2",
name: ""
},
{
id: "3",
name: ""
}
],
activeNames: ["1","2","3"],
formInline: {
user: "",
region: ""
}
};
},
mounted(){
this.init()
},
methods: {
init() {
this.getInfo(this.$route.query.id);
// this.getLearnContentBoard()
this.getCheckInfo(this.$route.query.id)
},
// 获取审核详情
getCheckInfo(id) {
let vm = this;
vm.$https(
{
url: "audit/getById",
method: "get",
authType: this.backToken
},
{id:id,
type:"LEARNING_CONTENT"}
// this.$qs.stringify({
// id:id,
// type:"LEARNING_CONTENT"
// })
)
.then(res => {
let data = res.data.data;
this.checkForm = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取学习内容详情
getInfo(id) {
let vm = this;
vm.$https(
{
url: "learningContent/get/" + id,
method: "get",
authType: this.backToken
}
// param
)
.then(res => {
let data = res.data.data;
this.ruleForm = data;
// console.log(this.ruleForm)
// this.ruleForm = {
// name :data.name,
// applicableScope:data.applicableScope,
// copyrightOwnerIdList:data.copyrightOwnerIdList,
// cover:data.cover,
// learningProjectId:data.learningProjectId,
// exhibitionBoardCatIdList:data.exhibitionBoardCatIdList,
// id:data.id,
// exhibitionBoardIdList:data.exhibitionBoardIdList,
// }
this.tableData = data.exhibitionBoardList
// this.multipleSelection = data.exhibitionBoardList
})
.catch(function(err) {
console.log(err);
});
},
// 获取获取学习内容展板全部列表
getLearnContentBoard(){
let vm = this;
vm.$https({
url: "learningContentBoard/getList",
method: "get",
authType: this.backToken
},
{learningContentId:this.$route.query.id}
)
.then(res => {
let data = res.data.data;
console.log(data)
this.tableData = data
// this.multipleSelection = data
})
.catch(function(err) {
console.log(err);
});
},
close() {
history.go(-1);
},
handleChange(val) {
console.log(val);
},
moveUpward(row, index) {
this.getSort(row.id,(this.tableData[index - 1]).id)
if (index > 0) {
let upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
} else {
this.$message({
message: "已经是第一条，上移失败",
type: "warning"
});
}
},
moveDown(row, index) {
this.getSort(row.id,(this.tableData[index + 1]).id)
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条，下移失败",
type: "warning"
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
},
// 排序接口
getSort(sourceId,targetId){
let _this = this;
_this
.$https({
method: "put",
// url: "learningContentBoard/sort",
url: "learningContentBoard/sortById",
authType: this.backToken
},
_this.$qs.stringify({
id:this.$route.query.id,
sourceId:sourceId,
targetId:targetId
}))
.then(
res => {
if(res.data.resultCode === "200"){
this.$message({
type: "success",
message: "成功!"
});
}else{
this.$message({ type: "error", message: res.data.message });
}
},
error => {
this.$message({
type: "fail",
message: "失败!" + error.response.data
});
}
);
},
}
};
</script>
<style lang="less">
</style>
\ No newline at end of file
src/page/content/learn/project/add.vue 0 → 100644
View file @ 8e8e832c
<template>
<div class="info">
<video-dialog ref="videoDialog"></video-dialog>
<!-- <div class="info-header">新建学习内容</div> -->
<div class="info-header">{{ type === 'Update'?'修改':'新建'}}学习项目</div>
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明：</strong>
“*”为必填项。展板类别及版权方支持多选。展板备选清单中可预览备选展板详情及展板内包含的视频。
</div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-form-inline party-form"
:inline="true"
label-position="top"
>
<el-form-item label="学习项目名称" prop="name" class="w50" style="padding-right: 100px">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="学习项目备注" prop="remarks" class="w50" style="padding-right: 100px">
<el-input type="textarea" v-model="ruleForm.remarks" style="min-height: 33px;width: 280px;"></el-input>
</el-form-item>
<el-form-item label="主学习内容名称" prop="major" class="w50" style="padding-right: 100px">
<el-input oninput="value = value.trim()" v-model="ruleForm.major"></el-input>
</el-form-item>
<!-- <el-form-item label="适用范围">
<span v-show="userType === '1'">全平台</span>
<el-radio-group v-show="userType !== '1'" v-model="ruleForm.applicableScope">
<el-radio label="THIS_ORGAN">仅本单位</el-radio>
<el-radio label="THIS_ORGAN_SUB">本单位及下属单位</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="所属学习项目" class="w50" prop="learningProjectId">
<el-select placeholder="请选择所属学习项目" v-model="ruleForm.learningProjectId">
<el-option
v-for="item in learningProjectIdList"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="学习内容宣传图" prop="cover" class="w100">
<upload-img ref="uploadImg" @imgUrl="imgUrl"></upload-img>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="copyrightOwnerIdList">
<el-select
placeholder="请选择版权方"
multiple
v-model="ruleForm.copyrightOwnerIdList"
@change="getSelectDep2"
>
<el-checkbox :style="selfstyle" v-model="checkedThing2" @change="selectAllThing2">全选</el-checkbox>
<el-option
v-for="item in assetType2"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板类别" prop="exhibitionBoardCatIdList">
<el-select
placeholder="请选择展板类别"
multiple
v-model="ruleForm.exhibitionBoardCatIdList"
@focus="getAssetTypeData"
@change="getSelectDep"
>
<el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
<el-option
v-for="item in videoContentCat"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板备选清单" class="w100" prop="exhibitionBoardIdList">
<div class="party-table">
<el-table
border
@selection-change="handleSelectionChange"
style="width: 100%"
max-height="400"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="120" label="序号">
</el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板类别" prop="exhibitionBoardCatName"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<div class="table-btn-group">
<el-tooltip content="视频预览" placement="top">
<el-button circle @click="videoPreview(scope.row)">
<i class="icon-table icon-video"></i>
</el-button>
</el-tooltip>
<el-tooltip content="展板预览" placement="top">
<el-button circle @click="displayPreview(scope.row)">
<i class="icon-table icon-board"></i>
</el-button>
</el-tooltip>
</div>
<!-- <el-button
type="text"
style="padding: 0"
@click="videoPreview(scope.row)"
>视频预览</el-button
>
<el-button
type="text"
style="padding: 0"
@click="displayPreview(scope.row)"
>展板预览</el-button
>-->
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
<!--新增弹框-->
<el-dialog
custom-class="party-dialog"
title="展板预览区"
width="468px"
:visible.sync="dialogVisible"
:before-close="closeDialog"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rules"
id="ruleo"
class="party-form"
>
<el-form-item label="展板名称">
<el-input v-model="classForm.name" readonly></el-input>
</el-form-item>
<el-form-item label="版权方">
<el-input v-model="classForm.boardCopyrightOwnerName" readonly></el-input>
</el-form-item>
<el-form-item label="展板分类">
<el-input v-model="classForm.exhibitionBoardCatName" readonly></el-input>
</el-form-item>
<el-form-item label="展板宣传图">
<img class="imgSize" :src="classForm.cover" alt />
</el-form-item>
<el-form-item label="简介">
<el-input type="textarea" v-model="classForm.remarks" readonly></el-input>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button
v-show="type === 'add'"
size="mini"
type="primary"
class="btn_form_search"
@click="submitForm('ruleForm')"
>提交审核</el-button>
<el-button
v-show="type === 'Update'"
size="mini"
type="primary"
class="btn_form_search"
@click="updateForm('ruleForm')"
>提交审核</el-button>
<el-button size="mini" class="btn_form_search" @click="close">取消</el-button>
</div>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import videoDialog from "@/page/content/components/dialog/videoDialog";
import audioPlay from "@/page/content/components/audioPlay";
export default {
components: {
uploadImg,
videoDialog,
audioPlay
},
data() {
return {
selectedFood: [], // 已有值，打开编辑页面调接口时拿到
selectedFood1:[],
dialogVisible: false,
classForm: {},
type: this.$route.query.type,
learningProjectIdList: "",
videoContentCat: [],
assetType2: [], // 版权方列表
checkedThing: false,
checkedThing2: false,
selfstyle: {
textAlign: "right",
width: "100%",
paddingRight: "10px"
},
tableData: [],
ruleForm: {
name: '',
remarks: '',
major: "", //主学习内容名称
// applicableScope: "ALL_PLAT", //适用范围
cover: "", //宣传图
// learningProjectId: "", //所属学习项目
exhibitionBoardCatIdList: [], //展板类别
copyrightOwnerIdList: [], //版权方
exhibitionBoardIdList: [] // 展板备选
},
minorLearningContentBoard: [],
rules: {
name: [
{ required: true, message: "请输入学习项目名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
cover: [
{
required: true,
message: "请选择学习内容宣传图"
}
],
major: [
{ required: true, message: "请输入主学习内容名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" }
],
learningProjectId: [
{ required: true, message: "请选择所属学习项目", trigger: "change" }
],
exhibitionBoardCatIdList: [
{
required: true,
type: "array",
message: "请选择展板类别",
trigger: "change"
}
],
copyrightOwnerIdList: [
{
required: true,
type: "array",
message: "请选择版权方",
trigger: "change"
}
],
exhibitionBoardIdList: [
{
required: true,
type: "array",
message: "请选择展板",
trigger: "change"
}
]
},
multipleSelection: [],
userType: ""
};
},
mounted() {
this.userType = localStorage.getItem("userType");
this.init();
},
methods: {
// selectInit (row) {
// if(this.minorLearningContentBoard.some(el=>{return el===row.id})){
// return false;
// }else{
// return true;
// }
// },
// 视频预览
videoPreview(row) {
this.$refs.videoDialog.dialogVisible = true;
const videos = row.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
this.$refs.videoDialog.videoList = videos
},
// 展板预览
displayPreview(row) {
this.dialogVisible = true;
this.classForm = row;
},
// 关闭弹窗
closeDialog() {
this.dialogVisible = false;
},
init() {
this.getLearnProject();
// this.getAssetTypeData();
this.getAssetTypeData2();
if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
}
},
// 获取版权方详情
getInfo(id) {
let vm = this;
vm.$https({
url: "learningProject/get/" + id,
method: "get",
authType: this.backToken
})
.then(res => {
let data = res.data.data;
this.ruleForm = data;
this.ruleForm = {
name: data.name,
remarks:data.remarks,
major: data.majorLearning.name,
applicableScope: data.majorLearning.applicableScope,
copyrightOwnerIdList: data.majorLearning.copyrightOwnerIdList,
cover: data.majorLearning.cover,
learningProjectId: data.majorLearning.learningProjectId,
exhibitionBoardCatIdList: data.majorLearning.exhibitionBoardCatIdList,
id: data.id,
exhibitionBoardIdList: data.majorLearning.exhibitionBoardIdList
};
// this.tableData = data.exhibitionBoardList;
this.multipleSelection = data.majorLearning.exhibitionBoardList
this.minorLearningContentBoard = data.minorLearningContentBoard
this.selectedFood = data.minorLearningContentCopyright
this.selectedFood1 = data.minorLearningContentCatBoard
this.$refs.uploadImg.showImg(this.ruleForm.cover);
this.getExhibitionBoardTable();
this.getAssetTypeData()
})
.catch(function(err) {
console.log(err);
});
},
getExhibitionBoardTable() {
const param = {
boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList,
exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList
};
this.getTableData(param, "update");
},
setSelctTable() {
if (!this.multipleSelection.length) {
return false;
}
let _this = this;
let tableData = this.tableData;
let multipleSelection = this.multipleSelection;
tableData.forEach(v => {
multipleSelection.forEach(m => {
if (v.id == m.id) {
_this.$refs.multipleTable.toggleRowSelection(v);
}
});
});
},
// 获取展板类别列表
getAssetTypeData() {
let vm = this;
if(this.ruleForm.copyrightOwnerIdList.length>0){
vm.$https({
url: "exhibitionBoardCat/getList",
method: "post",
authType: this.backToken
},this.$qs.stringify({copyrightOwnerId:this.ruleForm.copyrightOwnerIdList.toString()}))
.then(res => {
let data = res.data.data;
vm.videoContentCat = data;
})
.catch(function(err) {
console.log(err);
});
}else{
this.$message.warning("请先选择展板版权方！")
}
},
// 获取版权方列表
getAssetTypeData2() {
let vm = this;
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken
},
{ copyrightOwnerType: "EXHIBITION_BOARD" }
)
.then(res => {
let data = res.data.data;
// console.log(data,"dhwdhwid")
vm.assetType2 = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取学习项目列表
getLearnProject() {
let vm = this;
vm.$https({
url: "learningProject/getList",
method: "get",
authType: this.backToken
})
.then(res => {
let data = res.data.data;
vm.learningProjectIdList = data;
})
.catch(function(err) {
console.log(err);
});
},
// 获取获取学习内容展板全部列表
getLearnContentBoard() {
let vm = this;
vm.$https(
{
url: "learningContentBoard/getList",
method: "get",
authType: this.backToken
},
{ learningContentId: this.$route.query.id }
)
.then(res => {
let data = res.data.data;
console.log(data);
})
.catch(function(err) {
console.log(err);
});
},
// 多选赋值
handleSelectionChange(val) {
this.multipleSelection = val;
let newArray = val.map(item => {
return item.id;
});
this.ruleForm.exhibitionBoardIdList = newArray;
},
// 新增
submitForm(formName) {
this.$refs[formName].validate(valid => {
// console.log(this.ruleForm);
if (valid) {
this.$https(
{
url: "/learningProject/save",
method: "post",
authType: this.backToken
},
// this.ruleForm
this.$qs.stringify(this.ruleForm)
)
.then(res => {
if(res.data.resultCode === "200"){
if(this.userType === '1'){
this.$message({ type: "success", message: "新增学习内容申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "新增成功！" });
}
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
})
.catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 修改版权方
updateForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$https(
{
url: "learningProject/update",
method: "put",
authType: this.backToken
},
this.$qs.stringify(this.ruleForm)
// this.ruleForm
)
.then(res => {
if(res.data.resultCode === "200"){
if(this.userType === '1'){
this.$message({ type: "success", message: "修改学习内容申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "修改成功！" });
}
history.go(-1);
}else{
this.$message({ type: "error", message: res.data.message });
}
})
.catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
imgUrl(url) {
this.ruleForm.cover = url;
this.$refs.ruleForm.validateField("cover");
},
// 展板类别发生变化
getSelectDep(exhibitionBoardCatIdList) {
if (exhibitionBoardCatIdList.length === this.videoContentCat.length) {
this.checkedThing = true;
} else {
this.checkedThing = false;
}
this.getTableParam()
},
clearData(list) {
// console.log(list)
},
//
getSelectDep2(exhibitionBoardCatIdList) {
if (exhibitionBoardCatIdList.length === this.assetType2.length) {
this.checkedThing2 = true;
} else {
this.checkedThing2 = false;
}
// this.getTableParam()
},
// 筛选展板备选清单选项条件
getTableParam(){
// debugger
const param = {
boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList.toString(),
exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList.toString()
};
if((param.boardCopyrightOwnerIdList.length>0)&&(param.exhibitionBoardCatIdList.length>0)){
this.getTableData(param);
}else{
this.tableData = []
}
},
// 根据展板类别，版权方获取展板备选清单
getTableData(param, type) {
let vm = this;
vm.$https(
{
url: "exhibitionBoard/getList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
// alert(1)
// console.log(res)
let data = res.data.data;
vm.tableData = data;
// console.log(222222222222,vm.tableData)
if (type) {
// 选中表格数据
setTimeout(() => {
vm.setSelctTable();
}, 1000);
}
})
.catch(function(err) {
console.log(err);
});
},
selectAllThing() {
// debugger
this.ruleForm.exhibitionBoardCatIdList = [];
if (this.checkedThing) {
this.videoContentCat.map(item => {
this.ruleForm.exhibitionBoardCatIdList.push(item.id);
});
} else {
this.ruleForm.exhibitionBoardCatIdList = [];
}
this.getTableParam()
},
selectAllThing2() {
// debugger
this.ruleForm.copyrightOwnerIdList = [];
if (this.checkedThing2) {
this.assetType2.map(item => {
this.ruleForm.copyrightOwnerIdList.push(item.id);
});
} else {
this.ruleForm.copyrightOwnerIdList = [];
}
},
// 新增
addSubmit() {
// 至少选一个备选清单 提示
alert("请先至少选择一个展板备选清单");
},
close() {
history.go(-1);
},
moveUpward(row, index) {
if (index > 0) {
let upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
} else {
this.$message({
message: "已经是第一条，上移失败",
type: "warning"
});
}
},
moveDown(row, index) {
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条，下移失败",
type: "warning"
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
}
}
};
</script>
<style lang="less">
.none {
display: none !important;
}
@import "../../../../style/table.less";
</style>
src/page/content/learn/project/index.vue
View file @ 8e8e832c
<template>
<div class="listPage H100">
<div class="search-container">
<el-form :inline="true" :model="form" ref="form" onsubmit="return false;">
<el-form-item>
<el-input
placeholder="请输入学习项目名称"
v-model="form.nameOrCode"
@keyup.enter.native="Search"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
value-format="yyyy-MM-dd"
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" class="btn_form_search" @click="Search"
>查询</el-button
>
<el-button class="btn_form_search" @click="Reset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips"
>展示系统所有的学习项目，可按照时间及相关名称进行快速信息搜索。</span
>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary" @click="addPermis()">新建学习项目</el-button>
</div>
<div class="party-table">
<el-table
border
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="index" width="120" label="序号">
<template slot-scope="scope">
<span>{{ (page.currentPage - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="学习项目名称" prop="name"></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column
label="相关学习内容"
prop="learningContentNames"
></el-table-column>
<el-table-column label="备注" prop="remarks"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<div class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle @click="openEdit(scope.row)">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button circle @click="handleDelete(scope.row)">
<i class="icon-table icon-del"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
</div>
<!--新增弹框-->
<el-dialog
title="新建"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible1"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rule"
id="ruleo"
class="party-form"
>
<el-form-item label="学习项目名称" prop="name">
<el-input oninput="value = value.trim()" v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" v-show="type" type="primary" @click="handleSubmit('save')"
>确定</el-button
>
<el-button size="mini" v-show="!type" type="primary" @click="handleSubmit('edit')"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
type: true,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: "",
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: "",
},
classForm: {
id: "",
name: "",
remarks: "",
},
typeList: [],
rule:{
name: [
{ required: true, message: "请输入学习项目名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
remarks:[
{ min: 1, max: 100, message: "请输入1到100个字" },
]
},
rules: {
name: [
{ required: true, message: "请输入学习项目名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
// remarks:[
// { required: true, message: "请输入学习项目名称", trigger: "blur" },
// { min: 1, max: 2, message: "请输入1到20个字" },
// ]
},
value: "",
name: "",
};
},
computed: {},
mounted() {
this.onSearch();
},
components: {},
methods: {
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https(
{
url: "learningProject/getPageList",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
// param
)
.then((res) => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function (err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
nameOrCode: _this.form.nameOrCode,
startDate: this.value1 ? this.value1[0] : "",
endDate: this.value1 ? this.value1[1] : "",
};
this.getTableData(searchObj);
},
// 重置
Reset() {
this.form = {};
this.value1= []
this.Search();
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize,
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
// 添加
addPermis() {
// this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
$(".el-dialog__title").html("新建");
this.FormVisible1 = true;
this.type = true;
},
handleSubmit(type) {
let httpUrl, httpMethod,requestParams;
if (type === "save") {
httpUrl = "learningProject/save";
httpMethod = "post";
}
if (type === "edit") {
httpUrl = "learningProject/update";
httpMethod = "put";
}
requestParams = {...this.classForm}
this.handleSave(httpUrl,httpMethod,requestParams)
},
handleSave(url,method,requestParams){
let _this = this;
_this.$refs.classForm.validate((valid) => {
if (valid) {
_this.$https(
{
url: url,
method: method,
authType: this.backToken,
},
_this.$qs.stringify(requestParams)
)
.then(
(res) => {
if (res.data.resultCode === "200" || res.data.resultCode === "201") {
_this.$message({
type: "success",
message: res.data.message,
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.message,
});
}
},
(error) => {
_this.$message({
type: "error",
message: error,
});
}
);
}
});
},
// 编辑关闭
close() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.type = false;
$(".el-dialog__title").html("编辑");
let _this = this;
_this.FormVisible1 = true;
this.getAssetTypeInfo(row.id);
},
// 获取视频分类详情
getAssetTypeInfo(id) {
let vm = this;
vm.$https(
{
url: "learningProject/get/" + id,
method: "get",
authType: this.backToken,
}
// param
)
.then((res) => {
let data = res.data.data;
this.classForm.id = data.id;
this.classForm.name = data.name;
this.classForm.remarks = data.remarks;
})
.catch(function (err) {
console.log(err);
});
},
openDetails() {
let _this = this;
_this.FormVisible = true;
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
_this
.$https({
method: "delete",
url: "learningProject/delete/" + row.id,
authType: this.backToken,
})
.then(
(res) => {
if(res.data.resultCode==='200'){
this.$message({ type: "success", message: "删除成功!" });
_this.Search();
}else{
this.$message({ type: "error", message: res.data.message });
}
},
(error) => {
this.$message({
type: "fail",
message: "删除失败!" + error.response.data,
});
}
);
})
.catch(() => {});
}
}
};
</script>
<style lang="less">
@import "../../../../style/dialog.less";
@import "../../../../style/table.less";
@import "../../../../style/pagination.less";
</style>
<template>
<div class="listPage H100">
<div class="search-container">
<el-form :inline="true" :model="form" ref="form" onsubmit="return false;">
<el-form-item>
<el-input
placeholder="请输入学习项目名称"
v-model="form.nameOrCode"
@keyup.enter.native="Search"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
value-format="yyyy-MM-dd"
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" class="btn_form_search" @click="Search"
>查询</el-button
>
<el-button class="btn_form_search" @click="Reset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips"
>展示系统所有的学习项目，可按照时间及相关名称进行快速信息搜索。</span
>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary" @click="addPermis()">新建学习项目</el-button>
</div>
<div class="party-table">
<el-table
border
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="index" width="120" label="序号">
<template slot-scope="scope">
<span>{{ (page.currentPage - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="学习项目名称" prop="name"></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column
label="相关学习内容"
prop="learningContentNames"
></el-table-column>
<el-table-column label="备注" prop="remarks"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<div class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle @click="openEdit(scope.row)">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button circle @click="handleDelete(scope.row)">
<i class="icon-table icon-del"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
</div>
<!--新增弹框-->
<el-dialog
title="新建"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible1"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rule"
id="ruleo"
class="party-form"
>
<el-form-item label="学习项目名称" prop="name">
<el-input oninput="value = value.trim()" v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" v-show="type" type="primary" @click="handleSubmit('save')"
>确定</el-button
>
<el-button size="mini" v-show="!type" type="primary" @click="handleSubmit('edit')"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
type: true,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: "",
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: "",
},
classForm: {
id: "",
name: "",
remarks: "",
},
typeList: [],
rule:{
name: [
{ required: true, message: "请输入学习项目名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
remarks:[
{ min: 1, max: 100, message: "请输入1到100个字" },
]
},
rules: {
name: [
{ required: true, message: "请输入学习项目名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
// remarks:[
// { required: true, message: "请输入学习项目名称", trigger: "blur" },
// { min: 1, max: 2, message: "请输入1到20个字" },
// ]
},
value: "",
name: "",
};
},
computed: {},
mounted() {
this.onSearch();
},
components: {},
methods: {
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https(
{
url: "learningProject/getPageList",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
// param
)
.then((res) => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function (err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
nameOrCode: _this.form.nameOrCode,
startDate: this.value1 ? this.value1[0] : "",
endDate: this.value1 ? this.value1[1] : "",
};
this.getTableData(searchObj);
},
// 重置
Reset() {
this.form = {};
this.value1= []
this.Search();
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize,
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
// 添加
addPermis() {
this.$router.push({ path: "learnProjectAdd", query: { type: "add" } });
// $(".el-dialog__title").html("新建");
// this.FormVisible1 = true;
// this.type = true;
},
handleSubmit(type) {
let httpUrl, httpMethod,requestParams;
if (type === "save") {
httpUrl = "learningProject/save";
httpMethod = "post";
}
if (type === "edit") {
httpUrl = "learningProject/update";
httpMethod = "put";
}
requestParams = {...this.classForm}
this.handleSave(httpUrl,httpMethod,requestParams)
},
handleSave(url,method,requestParams){
let _this = this;
_this.$refs.classForm.validate((valid) => {
if (valid) {
_this.$https(
{
url: url,
method: method,
authType: this.backToken,
},
_this.$qs.stringify(requestParams)
)
.then(
(res) => {
if (res.data.resultCode === "200" || res.data.resultCode === "201") {
_this.$message({
type: "success",
message: res.data.message,
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.message,
});
}
},
(error) => {
_this.$message({
type: "error",
message: error,
});
}
);
}
});
},
// 编辑关闭
close() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "learnProjectUpdate",
query: { type: "Update", id: row.id },
});
// this.type = false;
// $(".el-dialog__title").html("编辑");
// let _this = this;
// _this.FormVisible1 = true;
// this.getAssetTypeInfo(row.id);
},
// 获取视频分类详情
getAssetTypeInfo(id) {
let vm = this;
vm.$https(
{
url: "learningProject/get/" + id,
method: "get",
authType: this.backToken,
}
// param
)
.then((res) => {
let data = res.data.data;
this.classForm.id = data.id;
this.classForm.name = data.name;
this.classForm.remarks = data.remarks;
})
.catch(function (err) {
console.log(err);
});
},
openDetails() {
let _this = this;
_this.FormVisible = true;
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
_this
.$https({
method: "delete",
url: "learningProject/delete/" + row.id,
authType: this.backToken,
})
.then(
(res) => {
if(res.data.resultCode==='200'){
this.$message({ type: "success", message: "删除成功!" });
_this.Search();
}else{
this.$message({ type: "error", message: res.data.message });
}
},
(error) => {
this.$message({
type: "fail",
message: "删除失败!" + error.response.data,
});
}
);
})
.catch(() => {});
}
}
};
</script>
<style lang="less">
@import "../../../../style/dialog.less";
@import "../../../../style/table.less";
@import "../../../../style/pagination.less";
</style>
src/router/learn.js
View file @ 8e8e832c
// 内容管理
const videoCopyrightAdd = r => require.ensure([], () => r(require('@/page/content/video/copyright/add')), 'videoCopyrightAdd');
const videoCopyrightUpdate = r => require.ensure([], () => r(require('@/page/content/video/copyright/add')), 'videoCopyrightUpdate');
const videoContentAdd = r => require.ensure([], () => r(require('@/page/content/video/content/add')), 'videoContentAdd');
const videoContentUpdate = r => require.ensure([], () => r(require('@/page/content/video/content/add')), 'videoContentUpdate');
export let learnRoute = [
{
path: '/videoCopyrightAdd',
name: '新建版权方',
component: videoCopyrightAdd,
meta: {
showBreadcrumb: true,
title: '新建版权方',
}
},
{
path: '/videoCopyrightUpdate',
name: '修改版权方',
component: videoCopyrightUpdate,
meta: {
showBreadcrumb: true,
title: '修改版权方',
}
},
{
path: '/videoContentAdd',
name: '新建视频',
component: videoContentAdd,
meta: {
showBreadcrumb: true,
title: '新建视频',
}
},
{
path: '/videoContentUpdate',
name: '修改视频',
component: videoContentUpdate,
meta: {
showBreadcrumb: true,
title: '修改视频',
}
},
{
path: '/videoCopyright',
name: '视频版权方管理',
component: () => import('@/page/content/video/copyright/index'),
meta: {
showBreadcrumb: true,
title: '视频版权方管理',
}
},
{
path: '/videoClassify',
name: '视频分类管理',
component: () => import('@/page/content/video/classify/index'),
meta: {
showBreadcrumb: true,
title: '视频分类管理',
}
},
{
path: '/videoContent',
name: '视频内容管理',
component: () => import('@/page/content/video/content/index'),
meta: {
showBreadcrumb: true,
title: '视频内容管理',
}
},
{
path: '/videoRemit',
name: '视频汇出',
component: () => import('@/page/content/video/remit/index'),
meta: {
showBreadcrumb: true,
title: '视频汇出',
}
},
// --- 展板
{
path: '/displayCopyright',
name: '展板版权方管理',
component: () => import('@/page/content/display/copyright/index'),
meta: {
showBreadcrumb: true,
title: '展板版权方管理',
}
},
{
path: '/displayCopyrightAdd',
name: '新建展板版权方',
component: () => import('@/page/content/display/copyright/add'),
meta: {
showBreadcrumb: true,
title: '新建展板版权方',
}
},
{
path: '/displayCopyrightUpdate',
name: '修改展板版权方',
component: () => import('@/page/content/display/copyright/add'),
meta: {
showBreadcrumb: true,
title: '修改展板版权方',
}
},
{
path: '/displayClassify',
name: '展板分类管理',
component: () => import('@/page/content/display/classify/index'),
meta: {
showBreadcrumb: true,
title: '展板分类管理',
}
},
{
path: '/displayContent',
name: '展板内容管理',
component: () => import('@/page/content/display/content/index'),
meta: {
showBreadcrumb: true,
title: '展板内容管理',
}
},
{
path: '/displayContentAdd',
name: '新建展板',
component: () => import('@/page/content/display/content/add'),
meta: {
showBreadcrumb: true,
title: '新建展板',
}
},
{
path: '/displayContentUpdate',
name: '修改展板',
component: () => import('@/page/content/display/content/add'),
meta: {
showBreadcrumb: true,
title: '修改展板',
}
},
{
path: '/displayContentDetails',
name: '展板管理详情',
component: () => import('@/page/content/display/content/details'),
meta: {
showBreadcrumb: true,
title: '展板管理详情',
}
},
// --学习
{
path: '/learnProject',
name: '学习项目管理',
component: () => import('@/page/content/learn/project/index'),
meta: {
showBreadcrumb: true,
title: '学习项目管理',
}
},
{
path: '/learnContent',
name: '学习内容制作',
component: () => import('@/page/content/learn/content/index'),
meta: {
showBreadcrumb: true,
title: '学习内容制作',
}
},
{
path: '/learnContentAdd',
name: '新建学习内容',
component: () => import('@/page/content/learn/content/add'),
meta: {
showBreadcrumb: true,
title: '新建学习内容',
}
},
{
path: '/learnContentUpdate',
name: '修改学习内容',
component: () => import('@/page/content/learn/content/add'),
meta: {
showBreadcrumb: true,
title: '修改学习内容',
}
},
{
path: '/learnContentDetails',
name: '学习内容详情',
component: () => import('@/page/content/learn/content/details'),
meta: {
showBreadcrumb: true,
title: '学习内容详情',
}
},
// 审核
{
path: '/checkVideo',
name: '视频审核',
component: () => import('@/page/check/video/index'),
meta: {
showBreadcrumb: true,
title: '视频审核',
}
},
{
path: '/checkDisplay',
name: '展板审核',
component: () => import('@/page/check/display/index'),
meta: {
showBreadcrumb: true,
title: '展板审核',
}
},
{
path: '/checkLearn',
name: '平台学习内容审核',
component: () => import('@/page/check/learn/index'),
meta: {
showBreadcrumb: true,
title: '平台学习内容审核',
}
},
{
path: '/checkLearnDetails',
name: '学习内容详情',
component: () => import('@/page/check/learn/details'),
meta: {
showBreadcrumb: true,
title: '学习内容详情',
}
}
]
// 内容管理
const videoCopyrightAdd = r => require.ensure([], () => r(require('@/page/content/video/copyright/add')), 'videoCopyrightAdd');
const videoCopyrightUpdate = r => require.ensure([], () => r(require('@/page/content/video/copyright/add')), 'videoCopyrightUpdate');
const videoContentAdd = r => require.ensure([], () => r(require('@/page/content/video/content/add')), 'videoContentAdd');
const videoContentUpdate = r => require.ensure([], () => r(require('@/page/content/video/content/add')), 'videoContentUpdate');
export let learnRoute = [
{
path: '/videoCopyrightAdd',
name: '新建版权方',
component: videoCopyrightAdd,
meta: {
showBreadcrumb: true,
title: '新建版权方',
}
},
{
path: '/videoCopyrightUpdate',
name: '修改版权方',
component: videoCopyrightUpdate,
meta: {
showBreadcrumb: true,
title: '修改版权方',
}
},
{
path: '/videoContentAdd',
name: '新建视频',
component: videoContentAdd,
meta: {
showBreadcrumb: true,
title: '新建视频',
}
},
{
path: '/videoContentUpdate',
name: '修改视频',
component: videoContentUpdate,
meta: {
showBreadcrumb: true,
title: '修改视频',
}
},
{
path: '/videoCopyright',
name: '视频版权方管理',
component: () => import('@/page/content/video/copyright/index'),
meta: {
showBreadcrumb: true,
title: '视频版权方管理',
}
},
{
path: '/videoClassify',
name: '视频分类管理',
component: () => import('@/page/content/video/classify/index'),
meta: {
showBreadcrumb: true,
title: '视频分类管理',
}
},
{
path: '/videoContent',
name: '视频内容管理',
component: () => import('@/page/content/video/content/index'),
meta: {
showBreadcrumb: true,
title: '视频内容管理',
}
},
{
path: '/videoRemit',
name: '视频汇出',
component: () => import('@/page/content/video/remit/index'),
meta: {
showBreadcrumb: true,
title: '视频汇出',
}
},
// --- 展板
{
path: '/displayCopyright',
name: '展板版权方管理',
component: () => import('@/page/content/display/copyright/index'),
meta: {
showBreadcrumb: true,
title: '展板版权方管理',
}
},
{
path: '/displayCopyrightAdd',
name: '新建展板版权方',
component: () => import('@/page/content/display/copyright/add'),
meta: {
showBreadcrumb: true,
title: '新建展板版权方',
}
},
{
path: '/displayCopyrightUpdate',
name: '修改展板版权方',
component: () => import('@/page/content/display/copyright/add'),
meta: {
showBreadcrumb: true,
title: '修改展板版权方',
}
},
{
path: '/displayClassify',
name: '展板分类管理',
component: () => import('@/page/content/display/classify/index'),
meta: {
showBreadcrumb: true,
title: '展板分类管理',
}
},
{
path: '/displayContent',
name: '展板内容管理',
component: () => import('@/page/content/display/content/index'),
meta: {
showBreadcrumb: true,
title: '展板内容管理',
}
},
{
path: '/displayContentAdd',
name: '新建展板',
component: () => import('@/page/content/display/content/add'),
meta: {
showBreadcrumb: true,
title: '新建展板',
}
},
{
path: '/displayContentUpdate',
name: '修改展板',
component: () => import('@/page/content/display/content/add'),
meta: {
showBreadcrumb: true,
title: '修改展板',
}
},
{
path: '/displayContentDetails',
name: '展板管理详情',
component: () => import('@/page/content/display/content/details'),
meta: {
showBreadcrumb: true,
title: '展板管理详情',
}
},
// --学习
{
path: '/learnProject',
name: '学习项目管理',
component: () => import('@/page/content/learn/project/index'),
meta: {
showBreadcrumb: true,
title: '学习项目管理',
}
},
{
path: '/learnContent',
name: '学习内容制作',
component: () => import('@/page/content/learn/content/index'),
meta: {
showBreadcrumb: true,
title: '学习内容制作',
}
},
{
path: '/learnContentAdd',
name: '新建学习内容',
component: () => import('@/page/content/learn/content/add'),
meta: {
showBreadcrumb: true,
title: '新建学习内容',
}
},
{
path: '/learnProjectAdd',
name: '新建学习项目',
component: () => import('@/page/content/learn/project/add'),
meta: {
showBreadcrumb: true,
title: '新建学习项目',
}
},
{
path: '/learnProjectUpdate',
name: '修改学习项目',
component: () => import('@/page/content/learn/project/add'),
meta: {
showBreadcrumb: true,
title: '修改学习项目',
}
},
{
path: '/learnContentUpdate',
name: '修改学习内容',
component: () => import('@/page/content/learn/content/add'),
meta: {
showBreadcrumb: true,
title: '修改学习内容',
}
},
{
path: '/learnContentDetails',
name: '学习内容详情',
component: () => import('@/page/content/learn/content/details'),
meta: {
showBreadcrumb: true,
title: '学习内容详情',
}
},
// 审核
{
path: '/checkVideo',
name: '视频审核',
component: () => import('@/page/check/video/index'),
meta: {
showBreadcrumb: true,
title: '视频审核',
}
},
{
path: '/checkDisplay',
name: '展板审核',
component: () => import('@/page/check/display/index'),
meta: {
showBreadcrumb: true,
title: '展板审核',
}
},
{
path: '/checkLearn',
name: '平台学习内容审核',
component: () => import('@/page/check/learn/index'),
meta: {
showBreadcrumb: true,
title: '平台学习内容审核',
}
},
{
path: '/checkLearnDetails',
name: '学习内容详情',
component: () => import('@/page/check/learn/details'),
meta: {
showBreadcrumb: true,
title: '学习内容详情',
}
}
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment