<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="name"></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 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 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> </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" @click="close1">取 消</el-button> </div> </el-dialog> <!--请填写驳回原因--> <el-dialog custom-class="party-dialog" title="视频详情" height="200px" width="800px" :visible.sync="FormVisible" :before-close="close" > <div class="dialog-content"> <span v-for="(item, index) in videoList" :key="index"> <video :preload="preload" :poster="item.thumbnail" :height="height" :width="width" align="center" :controls="controls" > <source :src="item.fileUrl" /> </video> <span> </span> </span> </div> </el-dialog> </div> </template> <script> export default { components: {}, 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 { videoList:[], videoSrc: "", videoSrc: "https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4", videoImg: "https://sm.ms/image/ueRFCZfk2xTONGb", playStatus: "", muteStatus: "", isMute: true, isPlay: false, width: "350px", // 设置视频播放器的显示宽度(以像素为单位) height: "200px", // 设置视频播放器的显示高度(以像素为单位) preload: "auto", // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。 controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。 autoplay: "", //-- keyMap: keyMap, type: true, value1: "", page: { currentPage: 1, pageSize: 10, total: 0 }, tableData: [], FormVisible: false, FormVisible1: false, formLabelWidth: "100px", form: { name: "", type: "VIDEO_CONTENT" }, editform: { menuName: "", menuUrl: "", parentId: "", sort: "", id: "" }, classForm: { menuName: "", menuUrl: "", parentId: "", sort: "" }, 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: "VIDEO_CONTENT" }; this.getTableData(searchObj); }, // 重置 Reset() { // this.$refs["form"].resetFields(); this.form = { type: "VIDEO_CONTENT" }; 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.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) { this.getInfo(row.refItemId); }, // 获取详情视频 getInfo(id) { let vm = this; vm.$https( { url: "videoContent/get/" + id, method: "get", authType: this.backToken } // param ) .then(res => { let data = res.data.data; console.log(res.data.data.videoFileList[0].fileUrl); this.videoList = res.data.data.videoFileList console.log(this.videoSrc); vm.FormVisible = true; // this.videoSrc = res.data.data.videoFileList[0].fileUrl; // this.videoImg = data.thumbnail; }) .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(() => {}); }, // 批量操作 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"> // @import "../../../../style/common"; // @import "../../style/list"; @import "../../../style/dialog.less"; @import "../../../style/table.less"; @import "../../../style/pagination.less"; </style>