Skip to content

N
national_museum_vod
Commit b6d5cfd9 authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

添加展板视频详情功能

parent bdaa5854
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 174 deletions
src/page/content/display/content/details.vue
View file @ b6d5cfd9
<template>
<div class="info">
<div class="info-header">学习内容详情</div>
<div class="info info-board">
<div class="info-header">展板内容详情</div>
<div class="page-tip">
<span class="tip-title">页面说明：</span>
<span
>可查看某块展板包含的所有文字及文件信息，视频及文档材料可下载到本地观看。</span
>
</div>
<div class="info-container">
<div class="info-wrapper">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse v-model="activeNames">
<el-collapse-item title="审核意见" name="1">
<el-form
class="demo-form-inline"
:inline="true"
:model="formInline"
:model="reviewData"
label-position="top"
>
<el-form-item label="审核层级" class="w100">
<span class="w50 l-float">
<strong>初审</strong> 2021/02/02
<strong>初审：</strong>{{ reviewData.firstTime }}
</span>
<span class="w50">
<strong>复审</strong> 2021/02/23
<strong>复审：</strong>{{ reviewData.secondTime }}
</span>
</el-form-item>
<el-form-item label="审核结果" class="w50">驳回</el-form-item>
<el-form-item label="审核结果" class="w50">{{
keyMap[reviewData.status]
}}</el-form-item>
<el-form-item
label="驳回原因"
>各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给
</el-form-item>
v-if="reviewData.status === 'REFUSED'"
>{{
reviewData.firstRemarks || reviewData.secondRemarks
}}</el-form-item
>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板基本信息" name="2">
<el-form
class="demo-form-inline"
:inline="true"
:model="formInline"
:model="contentData"
label-position="top"
>
<el-form-item label="版权方" class="w50">xxxxxxx</el-form-item>
<el-form-item label="创建时间" >2021/02/23</el-form-item>
<el-form-item label="展板分类" class="w50">反腐类</el-form-item>
<el-form-item label="上架情况" >已上架</el-form-item>
<el-form-item label="审核情况" class="w50">已审核</el-form-item>
<el-form-item label="版权方" class="w50">{{
contentData.boardCopyrightOwnerName
}}</el-form-item>
<el-form-item label="创建时间">{{
contentData.createTime
}}</el-form-item>
<el-form-item label="展板分类" class="w50">{{
contentData.createTime
}}</el-form-item>
<el-form-item label="上架情况">{{
contentData.published ? "已上架" : "未上架"
}}</el-form-item>
<el-form-item label="审核情况" class="w50">{{
keyMap[contentData.auditStatus]
}}</el-form-item>
<el-form-item label="展板图片" class="w50">
<img class="imgSize" src alt />
</el-form-item>
<el-form-item
label="展板简介"
>各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给
<img class="imgSize" :src="contentData.cover" />
</el-form-item>
<el-form-item label="展板简介">{{
contentData.remarks
}}</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板影音信息" name="3">
<el-form
<el-form
class="demo-form-inline"
:inline="true"
:model="formInline"
:model="contentData"
label-position="top"
>
<el-form-item label="展板视频" class="w100">
<div>
<img class="iconImg" src alt />
<span>xxx.mp4</span>
<img class="iconImg" src alt />
<span>xxx.mp4</span>
<el-form-item label="展板视频" class="w100">
<div v-if="contentData.videoList.length">
<span
class="file-box"
v-for="(s, i) in contentData.videoList"
:key="i"
>
<video
controls
width="100%"
height="100%"
poster="images/applets/video.png"
>
<source :src="s.fileUrl" />
</video>
<span>{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板音频">
<div>
<img class="iconImg" src alt />
<span>xxx.mp3</span>
<div v-if="contentData.audioList.length">
<span
class="file-box"
v-for="(s, i) in contentData.audioList"
:key="i"
>
<audio
controls
width="100%"
height="100%"
poster="images/applets/audio.png"
>
<source :src="s.fileUrl" />
</audio>
<span>{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板图片" class="w100">
<img class="imgSize" src alt />
<img class="imgSize" src alt />
<img class="imgSize" src alt />
<img class="imgSize" src alt />
<div v-if="contentData.imagesList.length">
<span
class="file-box"
v-for="(s, i) in contentData.imagesList"
:key="i"
>
<img class="imgSize" :src="s.fileUrl" alt />
<span>{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板文档">
<div>
<img class="iconImg" src alt />
<span>xxx.pdf</span>
<el-form-item label="展板文档(可点击查看或下载查看)" class="w100">
<div v-if="contentData.dirList.length">
<span
class="dir-box"
v-for="(s, i) in contentData.dirList"
:key="i"
@click="reviewFile(s)"
>
<img
v-if="s.fileExtName === 'pdf'"
src="@/assets/pdf-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'pptx'"
src="@/assets/ppt-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'docx'"
src="@/assets/doc-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'mp4'"
src="@/assets/video-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'mp3'"
src="@/assets/audio-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'xls'"
src="@/assets/excel-icon.png"
alt=""
/>
<span><a target="_blank" :href="s.fileUrl">{{ s.fileName }}</a></span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
</el-form>
</el-collapse-item>
......@@ -89,7 +178,13 @@
<div class="info-footer">
<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>
......@@ -98,62 +193,152 @@
<script>
export default {
data() {
const keyMap = {
TBC: "待初审",
REFUSED: "已驳回",
TBCA: "待复审",
APPROVED_FINAL: "通过",
};
return {
tableData: [
{
id: "1",
name: "1"
},
{
id: "2",
name: "2"
},
{
id: "3",
name: "3"
}
],
activeNames: ["1","2","3"],
formInline: {
user: "",
region: ""
}
id: "",
activeNames: ["1", "2", "3"],
keyMap: keyMap,
contentData: {},
reviewData: {},
};
},
mounted() {
this.id = this.$route.query.id;
this.getReviewById();
this.getContentById();
},
methods: {
close() {
history.go(-1);
},
handleChange(val) {
console.log(val);
},
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"
getContentById() {
let vm = this;
vm.$https({
url: "exhibitionBoard/get/" + this.id,
method: "get",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
vm.contentData = res.data.data;
vm.contentData.imagesList = [];
vm.contentData.dirList = [];
vm.contentData.datumList.forEach((item) => {
if (item.fileType === "IMAGE") {
vm.contentData.imagesList.push(item);
} else {
vm.contentData.dirList.push(item);
}
});
} else {
this.$message.error(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
}
},
moveDown(row, index) {
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条，下移失败",
type: "warning"
getReviewById() {
let vm = this;
const param = {
id: this.id,
type: "EXHIBITION_BOARD",
};
vm.$https(
{
url: "audit/getById",
method: "get",
authType: this.backToken,
},
param
)
.then((res) => {
if (res.data.resultCode === "200") {
vm.reviewData = res.data.data || {};
} else {
this.$message.error(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
}
}
},
reviewFile() {
console.log("点击预览。。。");
// const _this = this;
// this.$confirm("确定要下载该文件？", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// center: true,
// })
// .then(() => {
// this.updateVersion(row);
// })
// .catch(() => {
// this.$message("已取消");
// });
},
close() {
this.$router.go(-1);
},
},
};
</script>
<style lang="less">
<style lang="less" scoped>
.info-board {
.file-box {
display: inline-block;
width: 180px;
height: 180px;
margin: 0 10px;
}
/deep/.el-collapse-item__wrap {
padding: 16px;
}
/deep/.el-collapse-item__header {
position: relative;
padding-left: 20px;
font-size: 18px;
color: #333;
&::before {
content: "";
position: absolute;
top: 14px;
left: 0px;
width: 4px;
height: 18px;
background: #000;
}
}
.page-tip {
width: 640px;
background: #f7f5f2;
border-radius: 8px;
padding: 16px 20px;
margin: 20px auto;
font-size: 14px;
color: #333333;
.tip-title {
font-weight: 700;
margin-right: 5px;
}
}
.dir-box {
display: block;
width: 100%;
height: 96px;
img {
width: 96px;
height: 96px;
vertical-align: middle;
}
span {
margin-left: 10px;
line-height: 96px;
}
}
}
</style>
\ No newline at end of file
src/page/content/video/content/index.vue
View file @ b6d5cfd9
......@@ -153,7 +153,7 @@
<!--查看详情-->
<el-dialog
custom-class="party-dialog"
title="查看详情"
title="审核详情"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
......@@ -165,37 +165,25 @@
class="party-form"
ref="editform"
label-width="80px"
label-position="right"
label-position="top"
:rules="rules"
>
<el-form-item label="审核层级：" :label-width="formLabelWidth">
<el-input size="small" v-model="editform.sort" auto-complete="off" clearable></el-input>
<el-form-item label="初审时间：" :label-width="formLabelWidth">
<span class="input-item">{{editform.firstTime}}</span>
</el-form-item>
<el-form-item label="审核时间：" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.menuName"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
<el-form-item label="复审时间：" :label-width="formLabelWidth">
<span class="input-item">{{editform.secondTime}}</span>
</el-form-item>
<el-form-item label="审核结果：" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.menuUrl"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
<span class="input-item">{{keyMap[editform.status]}}</span>
</el-form-item>
<el-form-item label="驳回原因：" :label-width="formLabelWidth">
<el-input type="textarea" v-model="editform.desc"></el-input>
<el-form-item label="驳回原因：" :label-width="formLabelWidth" v-if="editform.status==='REFUSED'">
<span class="input-item">{{editform.firstRemarks || editform.secondRemarks}}</span>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
<el-button size="mini" type="primary" @click="close">确定</el-button>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</el-dialog>
......@@ -213,7 +201,9 @@ export default {
}
}
};
const keyMap ={'TBC':'待初审','REFUSED':'已驳回','TBCA':'待复审','APPROVED_FINAL':'通过'}
return {
keyMap:keyMap,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
......@@ -223,13 +213,7 @@ export default {
form: {
name: ""
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: ""
},
editform: {},
permisform: {
menuName: "",
menuUrl: "",
......@@ -439,17 +423,21 @@ export default {
// 获取视频分类详情
getAssetInfo(id) {
let vm = this;
const param ={
id:id,
type:'VIDEO_CONTENT'
}
vm.$https(
{
url: "videoContent/get/" + id,
url: "audit/getById",
method: "get",
authType: this.backToken
}
// param
},
param
)
.then(res => {
let data = res.data.data;
this.editform = data;
this.editform = data || {};
})
.catch(function(err) {
console.log(err);
......@@ -485,57 +473,6 @@ export default {
})
.catch(() => {});
},
// 保存编辑信息
submitForm() {
let _this = this;
_this.$refs.editform.validate(valid => {
if (valid) {
let searchObj = {};
for (let key in _this.editform) {
if (this.editform[key]) {
searchObj[key] = _this.editform[key];
}
}
let str = _this.editform.menuName;
let index = str.lastIndexOf("-");
str = str.substring(index + 1, str.length);
searchObj.menuName = str;
_this
.$https(
{
url: "menu/edit",
method: "put",
authType: this.backToken
},
_this.$qs.stringify(searchObj)
)
.then(
res => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: "success",
message: res.data.message
});
_this.onSearch();
_this.FormVisible = false;
_this.$refs["editform"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.message
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
}
});
},
// 批量操作
handleSelectionChange(selection) {
......@@ -604,4 +541,11 @@ export default {
@import "../../../../style/table.less";
@import "../../../../style/pagination.less";
@import "../../../../style/dialog.less";
.listPage {
.input-item {
font-size: 16px;
color:#333;
}
}
</style>
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