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