Skip to content

N
national_museum_vod
Commit 0d7119b8 authored by Your Name's avatar Your Name
Browse files
Options

新建学习内容添加备选资料清单

parent 0c7ef795
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 70 deletions
package.json
View file @ 0d7119b8
......@@ -24,6 +24,7 @@
"qs": "^6.5.2",
"qs-stringify": "^1.1.0",
"swiper": "^5.4.5",
"v-viewer": "^1.6.3",
"video.js": "^7.11.4",
"vue": "^2.5.2",
"vue-awesome-swiper": "^4.1.1",
......
src/page/check/display/index.vue
View file @ 0d7119b8
......@@ -169,7 +169,7 @@
></el-input>
</el-form-item>
<el-form-item label="宣传图" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.cover" alt />
<img v-viewer class="imgSize" :src="editForm.cover" alt />
</el-form-item>
<el-form-item label="二维码" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.qrcodeUrl" alt />
......@@ -188,8 +188,22 @@
<el-form-item label="展板音频" :label-width="formLabelWidth">
<div class="audio-box">
<div class="audio-item" v-for="(item, index) in editForm.audioList" :key="index">
<audio :src="item.fileUrl" controls controlsList='nodownload' oncontextmenu="return false"/>
<audio v-if="item.fileExtName ==='mp3'" :src="item.fileUrl" controls controlsList='nodownload' oncontextmenu="return false"/>
<span v-if="item.fileExtName ==='mp3'">{{ item.fileName }}</span>
</div>
</div>
</el-form-item>
<el-form-item label="参考资料" :label-width="formLabelWidth">
<div class="audio-box">
<div class="audio-item ckzl" v-for="(item, index) in editForm.datumList" :key="index">
<div>
<iframe class="imgSize" v-if="item.fileExtName === 'pdf'" :src="item.fileUrl" controls controlsList='nodownload' oncontextmenu="return false"/>
<img :src="item.fileUrl" v-else-if="item.fileExtName === 'jpg' || item.fileExtName === 'png' || item.fileExtName === 'docx'" class="imgSize"/>
<video :src="item.fileUrl" v-else="item.fileExtName === 'mp4'" class="imgSize" controls />
</div>
<div>
<span>{{ item.fileName }}</span>
</div>
</div>
</div>
</el-form-item>
......@@ -203,6 +217,9 @@
</template>
<script>
let Base64 = require('js-base64').Base64
import Viewer from 'v-viewer';
export default {
data() {
var checkIsNull = (rule, value, callback) => {
......@@ -706,6 +723,10 @@ export default {
</script>
<style lang="less">
.ckzl {
display: flex;
flex-direction: column;
}
.imgSize {
width: 160px;
height: 100px;
......
src/page/content/components/dialog/videoDialog.vue
View file @ 0d7119b8
<template>
<!--新增弹框-->
<el-dialog
custom-class="party-dialog"
title="视频详情"
width="400px"
:visible.sync="dialogVisible"
:before-close="close"
@contextmenu.prevent
>
<span v-for="(item,index) in videoList" :key="index">
<video
:preload="preload"
:poster="item.cover"
:height="height"
:width="width"
align="center"
controls controlsList='nodownload noremote footbar'
>
<source :src="item.fileUrl" />
</video>
<span>&nbsp;&nbsp;&nbsp;&nbsp; </span>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
videoList:[],
dialogVisible: false,
// videoSrc: 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4',
// videoImg: 'https://sm.ms/image/ueRFCZfk2xTONGb',
videoSrc: "",
videoImg: "",
playStatus: "",
muteStatus: "",
isMute: true,
isPlay: false,
width: "320", // 设置视频播放器的显示宽度（以像素为单位）
height: "200", // 设置视频播放器的显示高度（以像素为单位）
preload: "auto", // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
autoplay: "",
};
},
methods: {
// 新增关闭
close() {
// 为防止关闭后继续播放
this.videoList = []
this.dialogVisible = false;
},
},
};
</script>
<style>
<template>
<!--新增弹框-->
<el-dialog
custom-class="party-dialog"
title="视频详情"
width="400px"
:visible.sync="dialogVisible"
:before-close="close"
@contextmenu.prevent
>
<template v-if="videoList && videoList.length > 0">
<span v-for="(item,index) in videoList" :key="index">
<video
:preload="preload"
:poster="item.cover"
:height="height"
:width="width"
align="center"
controls controlsList='nodownload noremote footbar'
>
<source :src="item.fileUrl" />
</video>
<span>&nbsp;&nbsp;&nbsp;&nbsp; </span>
</span>
</template>
<template v-else>
<div style="text-align:center;font-size:14px">未关联视频</div>
</template>
</el-dialog>
</template>
<script>
export default {
data() {
return {
videoList:[],
dialogVisible: false,
// videoSrc: 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4',
// videoImg: 'https://sm.ms/image/ueRFCZfk2xTONGb',
videoSrc: "",
videoImg: "",
playStatus: "",
muteStatus: "",
isMute: true,
isPlay: false,
width: "320", // 设置视频播放器的显示宽度（以像素为单位）
height: "200", // 设置视频播放器的显示高度（以像素为单位）
preload: "auto", // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
autoplay: "",
};
},
methods: {
// 新增关闭
close() {
// 为防止关闭后继续播放
this.videoList = []
this.dialogVisible = false;
},
},
};
</script>
<style>
</style>
\ No newline at end of file
src/page/content/display/content/add.vue
View file @ 0d7119b8
......@@ -27,7 +27,7 @@
</el-form-item> -->
<el-form-item label="展板名称" prop="name" class="w100">
<el-input oninput="value = value.trim()" v-model="ruleForm.name" maxlength="30"></el-input>
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="boardCopyrightOwnerId">
......@@ -67,7 +67,8 @@
<upload-qrcode :fileList="ruleForm.qrcodeList" @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
</el-form-item>
<el-form-item label="展板简介" style="width:100%" prop="remarks">
<el-input type="textarea" v-model="ruleForm.remarks" maxlength="2000"></el-input>
<el-input type="textarea" v-model="ruleForm.remarks" class="indet"></el-input>
<!-- @keyup.enter.native="onSubmit" -->
</el-form-item>
</el-form>
</el-collapse-item>
......@@ -224,7 +225,7 @@ export default {
{ required: true, message: "请上传参考资料", trigger: "blur" }
],
remarks: [
{ min: 1, max: 100, message: "请输入1到100个字" },
{ min: 1, max: 2000, message: "最多只能输入2000个字"},
],
},
......@@ -478,6 +479,9 @@ export default {
</script>
<style lang="less" scoped>
.indet /deep/ textarea{
text-indent: 2em;
}
.info-add {
/deep/.el-collapse-item__wrap {
padding: 16px;
......
src/page/content/learn/content/add.vue
View file @ 0d7119b8
......@@ -126,7 +126,25 @@
</el-table>
</div>
</el-form-item>
<el-form-item label="展板参考资料备选清单" class="w100" prop="fileList">
<div class="party-table">
<el-table
border
@selection-change="handleSelectionChange1"
style="width: 100%"
max-height="400"
ref="multipleTable1"
:data="tableData1"
>
<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="boardName"></el-table-column>
<el-table-column show-overflow-tooltip label="参考资料名称" prop="fileName"></el-table-column>
<el-table-column show-overflow-tooltip label="参考资料类型" prop="fileType"></el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
<!--新增弹框-->
......@@ -219,6 +237,7 @@ export default {
paddingRight: "10px"
},
tableData: [],
tableData1: [],
ruleForm: {
name: "", //学习内容名称
applicableScope: "", //适用范围
......@@ -227,7 +246,8 @@ export default {
learningProjectId: "", //所属学习项目
exhibitionBoardCatIdList: [], //展板类别
copyrightOwnerIdList: [], //版权方
exhibitionBoardIdList: [] // 展板备选
exhibitionBoardIdList: [], // 展板备选
fileList:[] // 展板资料备选
},
rules: {
name: [
......@@ -275,6 +295,7 @@ export default {
]
},
multipleSelection: [],
multipleSelection1:[],
userType: ""
};
},
......@@ -364,6 +385,22 @@ export default {
});
});
},
setSelctTable1() {
// console.log(this.multipleSelection1)
if (!this.multipleSelection1.length) {
return false;
}
let _this = this;
let tableData1 = this.tableData1;
let multipleSelection1 = this.multipleSelection1;
tableData1.forEach(v => {
multipleSelection1.forEach(m => {
if (v.id == m.id) {
_this.$refs.multipleTable1.toggleRowSelection(v);
}
});
});
},
// 获取展板类别列表
getAssetTypeData() {
let vm = this;
......@@ -444,13 +481,22 @@ export default {
console.log(err);
});
},
// 多选赋值
handleSelectionChange(val) {
// 展板多选赋值
async handleSelectionChange(val) {
this.multipleSelection = val;
let newArray = val.map(item => {
return item.id;
});
this.ruleForm.exhibitionBoardIdList = newArray;
await this.getTableParam1()
},
// 展板资料多选赋值
handleSelectionChange1(val) {
this.multipleSelection1 = this.multipleSelection1.concat(val);
let newArray = val.map(item => {
return item.id;
});
this.ruleForm.fileList = newArray;
},
// 新增
submitForm(formName) {
......@@ -560,6 +606,36 @@ export default {
this.tableData = []
}
},
// 筛选展板资料备选清单选项条件
getTableParam1(){
if((this.ruleForm.exhibitionBoardIdList.length>0)){
let vm = this;
vm.$https(
{
url: "asset/getAssetByBoard",
method: "get",
authType: this.backToken
},
{ boardList:vm.ruleForm.exhibitionBoardIdList.toString()}
)
.then(res => {
// alert(1)
const data = res.data.data;
// console.log(data)
vm.tableData1 = data;
// 选中表格数据
vm.multipleSelection1 = res.data.data
setTimeout(() => {
vm.setSelctTable1();
}, 1000);
})
.catch(function(err) {
console.log(err);
});
}else{
this.tableData1 = []
}
},
// 根据展板类别，版权方获取展板备选清单
getTableData(param, type) {
......@@ -588,7 +664,6 @@ export default {
console.log(err);
});
},
selectAllThing() {
// debugger
......
src/page/content/learn/content/details.vue
View file @ 0d7119b8
......@@ -161,7 +161,6 @@ export default {
.then(res => {
let data = res.data.data;
this.checkForm = data;
})
.catch(function(err) {
console.log(err);
......
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