Skip to content

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

展板内容管理修改

parent 9d815ae5
Hide whitespace changes
Inline Side-by-side
Showing with 1121 additions and 1104 deletions
src/page/check/display/index.vue
View file @ 0c7ef795
<template>
<div class="listPage H100">
<div class="search-container">
<el-form :inline="true" :model="form" ref="form" onsubmit="return false;">
<el-form-item label>
<el-input
placeholder="请输入展板名称或提交人"
v-model="form.name"
@keyup.enter.native="Search"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="form.status" placeholder="请选择审核状态">
<el-option label="待初审" value="TBC"></el-option>
<el-option label="已驳回" value="REFUSED"></el-option>
<el-option label="待复审" value="TBCA"></el-option>
<el-option label="通过" value="APPROVED_FINAL"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="Search">查询</el-button>
<el-button @click="Reset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看展板待审核的所有内容，可根据审核类别进行筛选</span>
</div>
</div>
<div class="table-content">
<div class="party-table noAdd">
<el-table
border
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="120" label="序号">
<template slot-scope="scope">
<span>{{ (page.currentPage - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="展板名称" prop="content"></el-table-column>
<el-table-column label="提交人" prop="userName"></el-table-column>
<el-table-column label="提交日期" prop="createTime"></el-table-column>
<el-table-column label="审核项" prop="operation">
<template slot-scope="scope">
<span class="input-item">{{keyMap[scope.row.operation]}}</span>
</template>
</el-table-column>
<el-table-column label="审核状态" prop="status">
<template slot-scope="scope">
<span v-if="scope.row.status === 'TBC'">待初审</span>
<span v-else-if="scope.row.status === 'REFUSED'">已驳回</span>
<span v-else-if="scope.row.status === 'TBCA'">待复审</span>
<span v-else-if="scope.row.status === 'APPROVED_FINAL'">通过</span>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<div class="table-btn-group">
<el-tooltip content="详情" placement="top">
<el-button
:disabled="
scope.row.operation === 'REMOVE' &&
scope.row.status === 'APPROVED_FINAL'
"
circle
@click="openDetails(scope.row)"
>
<i class="icon-table icon-detail"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column label="审核" width="220" header-align="center" align="center">
<template slot-scope="scope">
<!-- 管理员、初审员、复审员 -->
<div v-if="((scope.row.one)&&(scope.row.two))" class="table-btn-group">
<el-button round class="passed" :disabled="scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="adopt(scope.row)">通过</el-button>
<el-button round class="rejected" :disabled="scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="reject(scope.row)">驳回</el-button>
</div>
<div v-else-if="((scope.row.one === true)&&(scope.row.two === false))" class="table-btn-group">
<el-button round class="passed" :disabled="scope.row.status === 'TBCA'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="adopt(scope.row)">通过</el-button>
<el-button round class="rejected" :disabled="scope.row.status === 'TBCA'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="reject(scope.row)">驳回</el-button>
</div>
<div v-else-if="((scope.row.one === false)&&(scope.row.two === true))" class="table-btn-group">
<el-button round class="passed" :disabled="scope.row.status === 'TBC'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="adopt(scope.row)">通过</el-button>
<el-button round class="rejected" :disabled="scope.row.status === 'TBC'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="reject(scope.row)">驳回</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
</div>
<!--新增弹框-->
<el-dialog
title="新建"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible1"
:before-close="close1"
>
<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 type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="permisSave">确定</el-button>
<!-- <el-button size="mini" v-show="!type" type="primary" @click="permisEdit">确定</el-button> -->
<el-button size="mini" @click="close1">取 消</el-button>
</div>
</el-dialog>
<!--请填写驳回原因-->
<el-dialog
custom-class="party-dialog"
title="展板详情"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="editForm"
disabled
class="party-form demo-form-inline"
ref="editForm"
label-width="80px"
label-position="top"
:rules="rules"
>
<el-form-item label="展板名称" :label-width="formLabelWidth">
<el-input size="small" v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="版权方" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editForm.boardCopyrightOwnerName"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item>
<el-form-item label="宣传图" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.cover" alt />
</el-form-item>
<el-form-item label="二维码" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.qrcodeUrl" alt />
</el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth">
<el-input type="textarea" v-model="editForm.remarks"></el-input>
</el-form-item>
<el-form-item label="展板视频" :label-width="formLabelWidth">
<div class="video-box" @contextmenu.prevent>
<div class="video-item" v-for="(item, index) in editForm.videoList" :key="index">
<video :poster="item.thumbnail" :src="item.fileUrl" controls controlsList='nodownload noremote footbar' />
<span>{{ item.fileName }}</span>
</div>
</div>
</el-form-item>
<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 />
<span>{{ item.fileName }}</span>
</div>
</div>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="close">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
export default {
data() {
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
const keyMap = {
ADD: "新增",
EDIT: "修改",
REMOVE: "删除",
DISABLE: "禁用",
ENABLE: "启用",
UPPER: "上架",
LOWER: "下架"
};
return {
keyMap: keyMap,
type: true,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: "",
type: "EXHIBITION_BOARD"
},
editForm: {
name: "",
cover: "",
sort: ""
},
classForm: {
status: "",
remarks: "",
id: ""
},
typeList: [],
rules: {
sort: [
{ required: true, message: "请输入顺序值", trigger: "change" },
{ pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" }
],
menuName: [
{ required: true, message: "请输入菜单名称", trigger: "change" },
{ max: 20, message: "不能超过20个字符", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
menuUrl: [
{ required: true, message: "请输入菜单地址", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
parentId: [
{ required: true, message: "请输入父级菜单", trigger: "change" }
]
},
value: "",
name: ""
};
},
computed: {},
mounted() {
this.onSearch();
// this.getPermis();
},
components: {},
methods: {
// 渲染父级权限
getPermis() {
let vm = this;
vm.$https({
method: "get",
url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"),
authType: this.backToken
}).then(
res => {
let data = res.data;
vm.typeList = data.map((e, i) => {
return {
id: e.id,
name:
e.menuName.indexOf("-") == -1
? e.menuName
: e.menuName.split("-")[1]
};
});
},
error => {
console.log(error);
}
);
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https(
{
url: "audit/getPageAllList",
method: "get",
authType: this.backToken
},
// vm.$qs.stringify(param)
param
)
.then(res => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function(err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
name: _this.form.name,
status: _this.form.status,
type: "EXHIBITION_BOARD"
};
this.getTableData(searchObj);
},
// 重置
Reset() {
// this.$refs["form"].resetFields();
this.form = { type: "EXHIBITION_BOARD" };
this.Search();
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
// 添加
addPermis() {
// this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
$(".el-dialog__title").html("新建");
this.FormVisible1 = true;
this.type = true;
},
// 请填写驳回原因视频分类确认保存
permisEdit() {
let _this = this;
_this.$refs.classForm.validate(valid => {
if (valid) {
_this
.$https(
{
url: "videoContentCat/update",
method: "put",
authType: this.backToken
},
_this.$qs.stringify(_this.classForm)
// _this.classForm
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: "新建成功！"
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.msg
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
}
});
},
// 请填写驳回原因关闭
close() {
this.editForm = {};
this.FormVisible = false;
// for (let key in this.classForm) {
// this.classForm[key] = null;
// }
// this.$refs["classForm"].resetFields();
// this.FormVisible = false;
// this.$refs["editForm"].resetFields();
},
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
},
// 通过
adopt(row) {
this.classForm.id = row.id;
this.classForm.status = "APPROVED_FINAL";
this.classForm.remarks = "";
this.permisSave("classForm");
},
// 请填写驳回原因弹框
reject(row) {
this.type = false;
$(".el-dialog__title").html("请填写驳回原因");
let _this = this;
_this.classForm.id = row.id;
_this.classForm.status = "REFUSED";
_this.FormVisible1 = true;
},
// 驳回原因保存
permisSave() {
let _this = this;
_this
.$https(
{
url: "audit/updateAuditAllById",
headers: { "Content-Type": "application/json" },
method: "put",
authType: this.backToken
},
// _this.$qs.stringify(_this.classForm)
_this.classForm
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: "操作成功！"
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.msg
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
// _this.$refs.classForm.validate(valid => {
// if (valid) {
// }
// });
},
// 获取视频分类详情
getAssetTypeInfo(id) {
let vm = this;
vm.$https(
{
url: "videoContentCat/get/" + id,
method: "get",
authType: this.backToken
}
// param
)
.then(res => {
let data = res.data.data;
this.classForm = data;
})
.catch(function(err) {
console.log(err);
});
},
openDetails(row) {
let _this = this;
_this.FormVisible = true;
if(row.operation === 'EDIT'){
// 参照后台更改文档审核记录的"operation"为"EDIT"时，调用的详情接口
this.getInfo(row.id,"exhibitionBoard/getAudit/")
}else{
this.getInfo(row.refItemId,"exhibitionBoard/get/");
}
$(".el-dialog__title").html(row.name + "展板详情");
},
// 获取版权方详情
getInfo(id,url) {
let vm = this;
vm.$https(
{
url: url + id,
method: "get",
authType: this.backToken
}
// param
)
.then(res => {
let resData = res.data.data;
const videos = res.data.data.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
this.editForm = resData;
this.editForm.videoList = videos
})
.catch(function(err) {
console.log(err);
});
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
_this
.$https({
method: "delete",
url: "videoContentCat/delete/" + row.id,
authType: this.backToken
})
.then(
res => {
this.$message({ type: "success", message: "删除成功!" });
_this.Search();
},
error => {
this.$message({
type: "fail",
message: "删除失败!" + error.response.data
});
}
);
})
.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) {
let _this = this;
_this.selection = selection;
},
getMultipleSelect() {
let _this = this;
let arr = [];
let str = "";
if (_this.selection) {
_this.selection.forEach(function(e) {
arr.push(e.id);
});
str = arr.join(",");
} else {
str = "";
}
return str;
},
// 批量删除
multipleDelete() {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm("此操作将删除选中菜单, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
_this
.$https({
url: "menu/batchDel?menuIds=" + str,
method: "DELETE",
authType: this.backToken
})
.then(
res => {
if (res.data.status == 201 || res.data.status == 200) {
this.$message({
type: "success",
message: "删除成功!"
});
}
//重新查询数据
_this.onSearch();
},
error => {}
);
});
} else {
this.$message({
type: "info",
message: "请至少选择一个选项！"
});
}
}
}
};
</script>
<style lang="less">
.imgSize {
width: 160px;
height: 100px;
}
.iconImg {
height: 32px;
width: 32px;
margin-right: 8px;
}
// @import "../../../../style/common";
// @import "../../style/list";
@import "../../../style/dialog.less";
@import "../../../style/table.less";
@import "../../../style/pagination.less";
.video-box {
width: 100%;
.video-item {
width: 100%;
}
video {
width: 100%;
height: 200px;
}
}
audio:focus {
outline: none;
}
</style>
<template>
<div class="listPage H100">
<div class="search-container">
<el-form :inline="true" :model="form" ref="form" onsubmit="return false;">
<el-form-item label>
<el-input
placeholder="请输入展板名称或提交人"
v-model="form.name"
@keyup.enter.native="Search"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="form.status" placeholder="请选择审核状态">
<el-option label="待初审" value="TBC"></el-option>
<el-option label="已驳回" value="REFUSED"></el-option>
<el-option label="待复审" value="TBCA"></el-option>
<el-option label="通过" value="APPROVED_FINAL"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="Search">查询</el-button>
<el-button @click="Reset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看展板待审核的所有内容，可根据审核类别进行筛选</span>
</div>
</div>
<div class="table-content">
<div class="party-table noAdd">
<el-table
border
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="120" label="序号">
<template slot-scope="scope">
<span>{{ (page.currentPage - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="展板名称" prop="content"></el-table-column>
<el-table-column label="提交人" prop="userName"></el-table-column>
<el-table-column label="提交日期" prop="createTime"></el-table-column>
<el-table-column label="审核项" prop="operation">
<template slot-scope="scope">
<span class="input-item">{{keyMap[scope.row.operation]}}</span>
</template>
</el-table-column>
<el-table-column label="审核状态" prop="status">
<template slot-scope="scope">
<span v-if="scope.row.status === 'TBC'">待初审</span>
<span v-else-if="scope.row.status === 'REFUSED'">已驳回</span>
<span v-else-if="scope.row.status === 'TBCA'">待复审</span>
<span v-else-if="scope.row.status === 'APPROVED_FINAL'">通过</span>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<div class="table-btn-group">
<el-tooltip content="详情" placement="top">
<el-button
:disabled="
scope.row.operation === 'REMOVE' &&
scope.row.status === 'APPROVED_FINAL'
"
circle
@click="openDetails(scope.row)"
>
<i class="icon-table icon-detail"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column label="审核" width="220" header-align="center" align="center">
<template slot-scope="scope">
<!-- 管理员、初审员、复审员 -->
<div v-if="((scope.row.one)&&(scope.row.two))" class="table-btn-group">
<el-button round class="passed" :disabled="scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="adopt(scope.row)">通过</el-button>
<el-button round class="rejected" :disabled="scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="reject(scope.row)">驳回</el-button>
</div>
<div v-else-if="((scope.row.one === true)&&(scope.row.two === false))" class="table-btn-group">
<el-button round class="passed" :disabled="scope.row.status === 'TBCA'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="adopt(scope.row)">通过</el-button>
<el-button round class="rejected" :disabled="scope.row.status === 'TBCA'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="reject(scope.row)">驳回</el-button>
</div>
<div v-else-if="((scope.row.one === false)&&(scope.row.two === true))" class="table-btn-group">
<el-button round class="passed" :disabled="scope.row.status === 'TBC'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="adopt(scope.row)">通过</el-button>
<el-button round class="rejected" :disabled="scope.row.status === 'TBC'||scope.row.status === 'REFUSED' ||scope.row.status === 'APPROVED_FINAL'" @click="reject(scope.row)">驳回</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
</div>
<!--新增弹框-->
<el-dialog
title="新建"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible1"
:before-close="close1"
>
<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 type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="permisSave">确定</el-button>
<!-- <el-button size="mini" v-show="!type" type="primary" @click="permisEdit">确定</el-button> -->
<el-button size="mini" @click="close1">取 消</el-button>
</div>
</el-dialog>
<!--请填写驳回原因-->
<el-dialog
custom-class="party-dialog"
title="展板详情"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="editForm"
disabled
class="party-form demo-form-inline"
ref="editForm"
label-width="80px"
label-position="top"
:rules="rules"
>
<el-form-item label="展板名称" :label-width="formLabelWidth">
<el-input size="small" v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="版权方" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editForm.boardCopyrightOwnerName"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item>
<el-form-item label="宣传图" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.cover" alt />
</el-form-item>
<el-form-item label="二维码" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.qrcodeUrl" alt />
</el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth">
<el-input type="textarea" v-model="editForm.remarks"></el-input>
</el-form-item>
<el-form-item label="展板视频" :label-width="formLabelWidth">
<div class="video-box" @contextmenu.prevent>
<div class="video-item" v-for="(item, index) in editForm.videoList" :key="index">
<video :poster="item.thumbnail" :src="item.fileUrl" controls controlsList='nodownload noremote footbar' />
<span>{{ item.fileName }}</span>
</div>
</div>
</el-form-item>
<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"/>
<span>{{ item.fileName }}</span>
</div>
</div>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="close">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
export default {
data() {
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
const keyMap = {
ADD: "新增",
EDIT: "修改",
REMOVE: "删除",
DISABLE: "禁用",
ENABLE: "启用",
UPPER: "上架",
LOWER: "下架"
};
return {
keyMap: keyMap,
type: true,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: "",
type: "EXHIBITION_BOARD"
},
editForm: {
name: "",
cover: "",
sort: ""
},
classForm: {
status: "",
remarks: "",
id: ""
},
typeList: [],
rules: {
sort: [
{ required: true, message: "请输入顺序值", trigger: "change" },
{ pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" }
],
menuName: [
{ required: true, message: "请输入菜单名称", trigger: "change" },
{ max: 20, message: "不能超过20个字符", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
menuUrl: [
{ required: true, message: "请输入菜单地址", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
parentId: [
{ required: true, message: "请输入父级菜单", trigger: "change" }
]
},
value: "",
name: ""
};
},
computed: {},
mounted() {
this.onSearch();
// this.getPermis();
},
components: {},
methods: {
// 渲染父级权限
getPermis() {
let vm = this;
vm.$https({
method: "get",
url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"),
authType: this.backToken
}).then(
res => {
let data = res.data;
vm.typeList = data.map((e, i) => {
return {
id: e.id,
name:
e.menuName.indexOf("-") == -1
? e.menuName
: e.menuName.split("-")[1]
};
});
},
error => {
console.log(error);
}
);
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https(
{
url: "audit/getPageAllList",
method: "get",
authType: this.backToken
},
// vm.$qs.stringify(param)
param
)
.then(res => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function(err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
name: _this.form.name,
status: _this.form.status,
type: "EXHIBITION_BOARD"
};
this.getTableData(searchObj);
},
// 重置
Reset() {
// this.$refs["form"].resetFields();
this.form = { type: "EXHIBITION_BOARD" };
this.Search();
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
// 添加
addPermis() {
// this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
$(".el-dialog__title").html("新建");
this.FormVisible1 = true;
this.type = true;
},
// 请填写驳回原因视频分类确认保存
permisEdit() {
let _this = this;
_this.$refs.classForm.validate(valid => {
if (valid) {
_this
.$https(
{
url: "videoContentCat/update",
method: "put",
authType: this.backToken
},
_this.$qs.stringify(_this.classForm)
// _this.classForm
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: "新建成功！"
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.msg
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
}
});
},
// 请填写驳回原因关闭
close() {
this.editForm = {};
this.FormVisible = false;
// for (let key in this.classForm) {
// this.classForm[key] = null;
// }
// this.$refs["classForm"].resetFields();
// this.FormVisible = false;
// this.$refs["editForm"].resetFields();
},
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
},
// 通过
adopt(row) {
this.classForm.id = row.id;
this.classForm.status = "APPROVED_FINAL";
this.classForm.remarks = "";
this.permisSave("classForm");
},
// 请填写驳回原因弹框
reject(row) {
this.type = false;
$(".el-dialog__title").html("请填写驳回原因");
let _this = this;
_this.classForm.id = row.id;
_this.classForm.status = "REFUSED";
_this.FormVisible1 = true;
},
// 驳回原因保存
permisSave() {
let _this = this;
_this
.$https(
{
url: "audit/updateAuditAllById",
headers: { "Content-Type": "application/json" },
method: "put",
authType: this.backToken
},
// _this.$qs.stringify(_this.classForm)
_this.classForm
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: "操作成功！"
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.msg
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
// _this.$refs.classForm.validate(valid => {
// if (valid) {
// }
// });
},
// 获取视频分类详情
getAssetTypeInfo(id) {
let vm = this;
vm.$https(
{
url: "videoContentCat/get/" + id,
method: "get",
authType: this.backToken
}
// param
)
.then(res => {
let data = res.data.data;
this.classForm = data;
})
.catch(function(err) {
console.log(err);
});
},
openDetails(row) {
let _this = this;
_this.FormVisible = true;
if(row.operation === 'EDIT'){
// 参照后台更改文档审核记录的"operation"为"EDIT"时，调用的详情接口
this.getInfo(row.id,"exhibitionBoard/getAudit/")
}else{
this.getInfo(row.refItemId,"exhibitionBoard/get/");
}
$(".el-dialog__title").html(row.name + "展板详情");
},
// 获取版权方详情
getInfo(id,url) {
let vm = this;
vm.$https(
{
url: url + id,
method: "get",
authType: this.backToken
}
// param
)
.then(res => {
let resData = res.data.data;
const videos = res.data.data.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
this.editForm = resData;
this.editForm.videoList = videos
})
.catch(function(err) {
console.log(err);
});
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
_this
.$https({
method: "delete",
url: "videoContentCat/delete/" + row.id,
authType: this.backToken
})
.then(
res => {
this.$message({ type: "success", message: "删除成功!" });
_this.Search();
},
error => {
this.$message({
type: "fail",
message: "删除失败!" + error.response.data
});
}
);
})
.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) {
let _this = this;
_this.selection = selection;
},
getMultipleSelect() {
let _this = this;
let arr = [];
let str = "";
if (_this.selection) {
_this.selection.forEach(function(e) {
arr.push(e.id);
});
str = arr.join(",");
} else {
str = "";
}
return str;
},
// 批量删除
multipleDelete() {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm("此操作将删除选中菜单, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
_this
.$https({
url: "menu/batchDel?menuIds=" + str,
method: "DELETE",
authType: this.backToken
})
.then(
res => {
if (res.data.status == 201 || res.data.status == 200) {
this.$message({
type: "success",
message: "删除成功!"
});
}
//重新查询数据
_this.onSearch();
},
error => {}
);
});
} else {
this.$message({
type: "info",
message: "请至少选择一个选项！"
});
}
}
}
};
</script>
<style lang="less">
.imgSize {
width: 160px;
height: 100px;
}
.iconImg {
height: 32px;
width: 32px;
margin-right: 8px;
}
// @import "../../../../style/common";
// @import "../../style/list";
@import "../../../style/dialog.less";
@import "../../../style/table.less";
@import "../../../style/pagination.less";
.video-box {
width: 100%;
.video-item {
width: 100%;
}
video {
width: 100%;
height: 200px;
}
}
audio:focus {
outline: none;
}
</style>
src/page/content/display/content/add.vue
View file @ 0c7ef795
......@@ -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"></el-input>
<el-input oninput="value = value.trim()" v-model="ruleForm.name" maxlength="30"></el-input>
</el-form-item>
<el-form-item label="展板版权方" class="w50" prop="boardCopyrightOwnerId">
......@@ -67,7 +67,7 @@
<upload-qrcode :fileList="ruleForm.qrcodeList" @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
</el-form-item>
<el-form-item label="展板简介" style="width:100%" prop="remarks">
<el-input type="textarea" v-model="ruleForm.remarks"></el-input>
<el-input type="textarea" v-model="ruleForm.remarks" maxlength="2000"></el-input>
</el-form-item>
</el-form>
</el-collapse-item>
......@@ -200,7 +200,7 @@ export default {
rules: {
name: [
{ required: true, message: "请输入版权方名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
{ min: 1, max: 30, message: "请输入1到30个字" },
],
boardCopyrightOwnerId: [
{ required: true, message: "请选择展板版权方", trigger: "change" }
......@@ -208,15 +208,15 @@ export default {
exhibitionBoardCatId: [
{ required: true, message: "请选择展板分类", trigger: "change" }
],
videoContentCopyrightOwnerId: [
{ required: true, message: "请选择视频版权方", trigger: "change" }
],
videoContentCatId: [
{ required: true, message: "请选择视频分类", trigger: "change" }
],
videoContentId: [
{ required: true, message: "请选择视频", trigger: "change" }
],
// videoContentCopyrightOwnerId: [
// { required: true, message: "请选择视频版权方", trigger: "change" }
// ],
// videoContentCatId: [
// { required: true, message: "请选择视频分类", trigger: "change" }
// ],
// videoContentId: [
// { required: true, message: "请选择视频", trigger: "change" }
// ],
audioIdList:[
{ required: true, message: "请上传音频", trigger: "blur" }
],
......@@ -313,6 +313,11 @@ export default {
submitForm(formName) {
// console.log(this.ruleForm)
this.$refs[formName].validate(valid => {
if (this.ruleForm.videoContentCopyrightOwnerId !== '' && this.ruleForm.videoContentCatId === '') {
this.$message({type: "error", message: '请选择视频分类！' })
}else if(this.ruleForm.videoContentCopyrightOwnerId !== '' && this.ruleForm.videoContentCatId !== '' && this.ruleForm.videoContentId ==='') {
this.$message({type: "error", message: '请选择视频！' })
}else{
if (valid) {
this.$https(
{
......@@ -322,6 +327,7 @@ export default {
},
this.$qs.stringify(this.ruleForm)
).then(res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "新增展板申请已提交,待审核！" });
history.go(-1);
......@@ -331,7 +337,7 @@ export default {
}).catch(function(err) {
console.log(err);
});
}
}}
});
},
// 修改
......
src/page/content/display/content/details.vue
View file @ 0c7ef795
<template>
<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">
<el-collapse-item title="审核意见" name="1">
<el-form
class="demo-form-inline"
:inline="true"
:model="reviewData"
label-position="top"
>
<el-form-item label="审核层级" class="w100">
<span class="w50 l-float">
<strong>初审：</strong>{{ reviewData.firstTime }}
</span>
<span class="w50">
<strong>复审：</strong>{{ reviewData.secondTime }}
</span>
</el-form-item>
<el-form-item label="审核结果" class="w50">{{
keyMap[reviewData.status]
}}</el-form-item>
<el-form-item
label="驳回原因"
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="contentData"
label-position="top"
>
<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="contentData.cover" />
</el-form-item>
<el-form-item label="展板二维码" class="">
<img class="imgSize" :src="contentData.qrcodeUrl" />
</el-form-item>
<el-form-item label="展板简介" class="w100">{{
contentData.remarks
}}</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板影音信息" name="3">
<el-form
class="demo-form-inline"
:inline="true"
:model="contentData"
label-position="top"
>
<el-form-item label="展板视频" class="w100">
<div v-if="contentData.videoList.length" @contextmenu.prevent>
<span
class="file-box"
v-for="(s, i) in contentData.videoList"
:key="i"
>
<video
controls
width="100%"
height="100%"
poster="images/applets/video.png"
controlsList='nodownload noremote footbar'
>
<source :src="s.fileUrl" />
</video>
<span>{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板音频">
<div v-if="contentData.audioList.length">
<span
class=""
v-for="(s, i) in contentData.audioList"
:key="i"
>
<audio
style="float:left;"
controls
width="100%"
height="100%"
poster="images/applets/audio.png"
>
<source :src="s.fileUrl" />
</audio>
<span style="float:left;display:inline-block;margin:10px 0px 20px 20px;">{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板图片" class="w100">
<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="展板文档(可点击查看或下载查看)" 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>
</el-collapse>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button
size="mini"
type="primary"
class="btn_form_search"
@click="close"
>关闭</el-button
>
</div>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
export default {
data() {
const keyMap = {
TBC: "待初审",
REFUSED: "已驳回",
TBCA: "待复审",
APPROVED_FINAL: "通过",
};
return {
id: "",
activeNames: ["1", "2", "3"],
keyMap: keyMap,
contentData: {
imagesList:[],
dirList:[],
videoList:[],
audioList:[]
},
reviewData: {},
};
},
mounted() {
this.id = this.$route.query.id;
this.getReviewById();
this.getContentById();
},
methods: {
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;
// console.log(vm.contentData.videoList)
const videos = vm.contentData.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
vm.contentData.videoList = videos
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);
});
},
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);
});
},
reviewFile() {
console.log("点击预览。。。");
},
close() {
this.$router.go(-1);
},
},
};
</script>
<style lang="less" scoped>
.info-board {
.file-box {
display: inline-block;
width: 180px;
height: 180px;
margin: 0 10px;
}
.info-container {
height: calc(100% - 250px);
}
/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;
}
}
}
<template>
<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">
<el-collapse-item title="审核意见" name="1">
<el-form
class="demo-form-inline"
:inline="true"
:model="reviewData"
label-position="top"
>
<el-form-item label="审核层级" class="w100">
<span class="w50 l-float">
<strong>初审：</strong>{{ reviewData.firstTime }}
</span>
<span class="w50">
<strong>复审：</strong>{{ reviewData.secondTime }}
</span>
</el-form-item>
<el-form-item label="审核结果" class="w50">{{
keyMap[reviewData.status]
}}</el-form-item>
<el-form-item
label="驳回原因"
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="contentData"
label-position="top"
>
<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="contentData.cover" />
</el-form-item>
<el-form-item label="展板二维码" class="">
<img class="imgSize" :src="contentData.qrcodeUrl" />
</el-form-item>
<el-form-item label="展板简介" class="w100">{{
contentData.remarks
}}</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板影音信息" name="3">
<el-form
class="demo-form-inline"
:inline="true"
:model="contentData"
label-position="top"
>
<el-form-item label="展板视频" class="w100">
<div v-if="contentData.videoList.length" @contextmenu.prevent>
<span
class="file-box"
v-for="(s, i) in contentData.videoList"
:key="i"
>
<video
controls
width="100%"
height="100%"
poster="images/applets/video.png"
controlsList='nodownload noremote footbar'
>
<source :src="s.fileUrl" />
</video>
<span>{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板音频">
<div v-if="contentData.audioList.length">
<span
class=""
v-for="(s, i) in contentData.audioList"
:key="i"
>
<audio
style="float:left;"
controls
width="100%"
height="100%"
poster="images/applets/audio.png"
controlsList='nodownload'
oncontextmenu="return false"
>
<source :src="s.fileUrl" />
</audio>
<span style="float:left;display:inline-block;margin:10px 0px 20px 20px;">{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item>
<el-form-item label="展板图片" class="w100">
<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="展板文档(可点击查看或下载查看)" 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>
</el-collapse>
</div>
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button
size="mini"
type="primary"
class="btn_form_search"
@click="close"
>关闭</el-button
>
</div>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64
export default {
data() {
const keyMap = {
TBC: "待初审",
REFUSED: "已驳回",
TBCA: "待复审",
APPROVED_FINAL: "通过",
};
return {
id: "",
activeNames: ["1", "2", "3"],
keyMap: keyMap,
contentData: {
imagesList:[],
dirList:[],
videoList:[],
audioList:[]
},
reviewData: {},
};
},
mounted() {
this.id = this.$route.query.id;
this.getReviewById();
this.getContentById();
},
methods: {
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;
// console.log(vm.contentData.videoList)
const videos = vm.contentData.videoList
for(var i=0;i<videos.length;i++){
videos[i].fileUrl = Base64.decode(videos[i].intro)
}
vm.contentData.videoList = videos
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);
});
},
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);
});
},
reviewFile() {
console.log("点击预览。。。");
},
close() {
this.$router.go(-1);
},
},
};
</script>
<style lang="less" scoped>
.info-board {
.file-box {
display: inline-block;
width: 180px;
height: 180px;
margin: 0 10px;
}
.info-container {
height: calc(100% - 250px);
}
/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/display/content/index.vue
View file @ 0c7ef795
......@@ -221,7 +221,7 @@ export default {
.then(res => {
let data = res.data.data;
vm.page.total = data.total;
vm.tableData = data.records;
vm.tableData = data.records;
})
.catch(function(err) {
console.log(err);
......
src/page/content/learn/content/add.vue
View file @ 0c7ef795
......@@ -21,8 +21,11 @@
<el-form-item label="学习内容名称" prop="name" class="w50" style="padding-right: 100px">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="适用范围">
<span v-show="userType === '1'">全平台</span>
<el-form-item label="适用范围" prop="applicableScope">
<!-- <span v-show="userType === '1'" value="ALL_PLAT">全平台</span> -->
<el-radio-group v-show="userType === '1'" v-model="ruleForm.applicableScope">
<el-radio v-show="userType === '1'" label="ALL_PLAT">全平台</el-radio>
</el-radio-group>
<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>
......@@ -218,7 +221,7 @@ export default {
tableData: [],
ruleForm: {
name: "", //学习内容名称
applicableScope: "ALL_PLAT", //适用范围
applicableScope: "", //适用范围
cover: "", //宣传图
projectId: '',
learningProjectId: "", //所属学习项目
......@@ -231,6 +234,12 @@ export default {
{ required: true, message: "请输入学习内容名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
applicableScope: [
{
required: true,
message: "请选择适用范围"
}
],
cover: [
{
required: true,
......
src/page/content/learn/content/details.vue
View file @ 0c7ef795
......@@ -51,7 +51,7 @@
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="展板列表" name="3">
<el-collapse-item title="展板列表" name="10">
<!-- {{tableData}} -->
<div class="party-table">
<!-- {{tableData[0]}} -->
......
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