|
|
@@ -0,0 +1,412 @@
|
|
|
+<template>
|
|
|
+ <div class="container container-road-show">
|
|
|
+ <div class="top-wrap">
|
|
|
+ <div style="display: flex">
|
|
|
+ <span :class="['item', 'active']">路演回放</span>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="fileName" @input="fileNameHandle" placeholder="请输入文件名称" clearable style="display: inline-block; width: 350px">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- // 筛选 表格 -->
|
|
|
+ <el-card style="margin-top: 20px">
|
|
|
+ <div class="select-content">
|
|
|
+ <div>
|
|
|
+ <el-select v-if="tabActive == 1 || tabActive == 2" placeholder="活动类型" clearable v-model="cactivityTypeVal" @change="selectChangeHandle">
|
|
|
+ <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <date-picker
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ v-model="issueTime"
|
|
|
+ type="date"
|
|
|
+ range
|
|
|
+ :placeholder="tabActive == 4 || tabActive == 3 ? '发布时间' : '活动时间'"
|
|
|
+ value-type="format"
|
|
|
+ @change="selectChangeHandle"
|
|
|
+ >
|
|
|
+ </date-picker>
|
|
|
+ <el-select v-if="tabActive == 4 || tabActive == 3" placeholder="发布状态" clearable v-model="publishStatus" @change="selectChangeHandle" style="margin-bottom: 20px">
|
|
|
+ <el-option v-for="item in publishSelect" :label="item.name" :key="item.value" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" v-if="tabActive === 4" @click="addEditdialogVisib = true">添加视频</el-button>
|
|
|
+ <el-button type="primary" v-if="tabActive === 3" @click="addEditdialogReleaseAudio = true">发布问答</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table :data="dataList" style="width: 100%" border @sort-change="sortChangeHandle">
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in tableColums"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :min-width="item.minwidthsty"
|
|
|
+ align="center"
|
|
|
+ :sortable="item.key === 'VideoCounts' || item.key === 'VoiceCounts' ? 'custom' : false"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
|
|
|
+ </template></el-table-column
|
|
|
+ >
|
|
|
+ <el-table-column align="center" prop="LastUpdatedTime" width="170" label="操作">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div v-if="tabActive === 4 || tabActive === 3">
|
|
|
+ <span class="editsty" @click="handlePublish(row)">{{ row.PublishStatus == 1 ? "取消发布" : "发布" }}</span>
|
|
|
+
|
|
|
+ <span class="editsty" @click="handleEditVideo(row, '产业')">编辑</span>
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <span class="editsty" @click="titleBtnClick(row.ActivityId)">活动详情</span>
|
|
|
+ <span class="editsty" @click="handleEditVideo(row, '活动')"> 编辑活动</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-col :span="24" class="toolbar">
|
|
|
+ <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
|
|
|
+ </el-col>
|
|
|
+ </el-card>
|
|
|
+ <playDetails :playDetailsVisible.sync="playDetailsVisible" :playDetailsList.sync="playDetailsList" :tabActive="tabActive" />
|
|
|
+ <addVideoDlg :addEditdialogVisib.sync="addEditdialogVisib" :chartPermissionList="chartPermissionList" :playDetailsList.sync="editDetails" />
|
|
|
+ <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
|
|
|
+ <generation-ask :generaitondialogVisib.sync="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" :tabActiveRoadshow="tabActive" />
|
|
|
+ <release-audio :addEditdialogReleaseAudio.sync="addEditdialogReleaseAudio" :chartPermissionList="chartPermissionList" :playDetailsList.sync="editDetails" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { raiInterface, raiVideoApi } from "@/api/api.js";
|
|
|
+import { PublishSelect } from "../components/apply/applyTableColums";
|
|
|
+import mPage from "@/components/mPage.vue";
|
|
|
+import playDetails from "./roadShow/components/playDetailsDlg.vue";
|
|
|
+import addVideoDlg from "./roadShow/components/addVideoDlg.vue";
|
|
|
+import moment from "moment";
|
|
|
+import AtcParticulars from "../components/atcParticulars.vue";
|
|
|
+import GenerationAsk from "../components/generationAsk.vue";
|
|
|
+import ReleaseAudio from "./roadShow/components/releaseAudio.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "",
|
|
|
+ components: { mPage, playDetails, addVideoDlg, AtcParticulars, GenerationAsk, ReleaseAudio },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableColums: [
|
|
|
+ {
|
|
|
+ label: "文件名称",
|
|
|
+ key: "VideoName",
|
|
|
+ widthsty: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "文件类型",
|
|
|
+ key: "FileName",
|
|
|
+ widthsty: 90,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "行业",
|
|
|
+ key: "ChartPermissionName",
|
|
|
+ widthsty: 90,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "活动类型",
|
|
|
+ key: "ActivityTypeName",
|
|
|
+ minwidthsty: "110",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "活动标签",
|
|
|
+ key: "Label",
|
|
|
+ minwidthsty: "120",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "活动时间",
|
|
|
+ key: "ActivityTimeText",
|
|
|
+ minwidthsty: "200",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "时长",
|
|
|
+ key: "VideoDuration",
|
|
|
+ widthsty: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "播放量",
|
|
|
+ key: "VideoCounts",
|
|
|
+ widthsty: 100,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataList: [],
|
|
|
+ tabActive: 1, //tabs 选中
|
|
|
+ issueTime: "", //活动时间
|
|
|
+ cactivityTypeVal: "", //活动类型
|
|
|
+ cactivityTypeList: [],
|
|
|
+ publishStatus: "", //发布状态
|
|
|
+ fileName: "", //文件名称
|
|
|
+ total: 0, //条数
|
|
|
+ PageSize: 10, //每页显示几条
|
|
|
+ page_no: 1, //页码
|
|
|
+ playDetailsVisible: false, //播放详情的弹框
|
|
|
+ playDetailsList: {}, //播放详情的数据//编辑的详情
|
|
|
+ editDetails: {}, //播放详情的数据//编辑的详情
|
|
|
+ addEditdialogVisib: false, //添加视频的弹框
|
|
|
+ sortType: "",
|
|
|
+ detailData: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ generaitondialogVisib: false, //代问的弹框
|
|
|
+ generaitonId: "",
|
|
|
+ generaitonType: "微路演",
|
|
|
+ addEditdialogReleaseAudio: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //发布状态
|
|
|
+ publishSelect() {
|
|
|
+ return PublishSelect;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {
|
|
|
+ if (sessionStorage.getItem("backRoadShowListPage")) {
|
|
|
+ let { page_no, fileName, cactivityTypeVal, issueTime, tabActive } = JSON.parse(sessionStorage.getItem("backRoadShowListPage"));
|
|
|
+ this.page_no = page_no;
|
|
|
+ this.fileName = fileName;
|
|
|
+ this.cactivityTypeVal = cactivityTypeVal;
|
|
|
+ this.issueTime = issueTime;
|
|
|
+ this.tabActive = tabActive;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.chartPermission();
|
|
|
+ this.activityType();
|
|
|
+ this.getVideoList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取行业
|
|
|
+ async chartPermission() {
|
|
|
+ const res = await raiInterface.chartPermission({
|
|
|
+ IsHideResearch: true,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.chartPermissionList = res.Data.List;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //活动类型
|
|
|
+ async activityType() {
|
|
|
+ const res = await raiInterface.getActivityType();
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.cactivityTypeList = res.Data.List;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getVideoList() {
|
|
|
+ let params = {
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ CurrentIndex: this.page_no,
|
|
|
+ KeyWord: this.fileName,
|
|
|
+ StartDate: this.issueTime ? this.issueTime[0] : "",
|
|
|
+ EndDate: this.issueTime ? this.issueTime[1] : "",
|
|
|
+ PublishStatus: this.publishStatus ? Number(this.publishStatus) : "",
|
|
|
+ ActivityTypeId: this.cactivityTypeVal,
|
|
|
+ SortType: this.sortType,
|
|
|
+ SortParam: "videoCounts",
|
|
|
+ SearchType: this.tabActive,
|
|
|
+ };
|
|
|
+ const res =
|
|
|
+ this.tabActive == 4
|
|
|
+ ? await raiVideoApi.videoList(params)
|
|
|
+ : this.tabActive == 1
|
|
|
+ ? await raiVideoApi.activityVoiceAndVideoList(params)
|
|
|
+ : this.tabActive == 3
|
|
|
+ ? await raiVideoApi.askserie_videoList(params)
|
|
|
+ : await raiVideoApi.activityVoiceAndVideoList(params);
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.dataList = res.Data.List;
|
|
|
+ this.total = res.Data.Paging.Totals;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //select 筛选条件后的事件
|
|
|
+ selectChangeHandle() {
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getVideoList();
|
|
|
+ },
|
|
|
+ //文件名称的搜索
|
|
|
+ fileNameHandle() {
|
|
|
+ this.issueTime = "";
|
|
|
+ this.publishStatus = "";
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getVideoList();
|
|
|
+ },
|
|
|
+ /* 点击表格的排序 */
|
|
|
+ sortChangeHandle({ prop, order }) {
|
|
|
+ this.sortType = order == "ascending" ? "asc" : order == "descending" ? "desc" : "";
|
|
|
+ this.getVideoList();
|
|
|
+ },
|
|
|
+ //分页
|
|
|
+ handleCurrentChange(page) {
|
|
|
+ this.page_no = page;
|
|
|
+ this.getVideoList();
|
|
|
+ },
|
|
|
+ /*
|
|
|
+ 表格三件套
|
|
|
+ */
|
|
|
+ handleRowContent(row, key) {
|
|
|
+ if (key == "PublishStatus") {
|
|
|
+ let status = row["PublishStatus"] == 1 ? "已发布" : row["PublishStatus"] == 3 ? "已取消" : "未发布";
|
|
|
+ return status;
|
|
|
+ } else if (key == "VideoDuration" || key == "VoicePlaySeconds") {
|
|
|
+ let m = parseInt(row[key] / 60);
|
|
|
+ let s = parseInt(row[key] % 60);
|
|
|
+ let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
|
|
|
+ return ms;
|
|
|
+ } else {
|
|
|
+ return row[key];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRowStyle(key) {
|
|
|
+ const style = {
|
|
|
+ VideoCounts: "color: #409eff; cursor: pointer",
|
|
|
+ VoiceCounts: "color: #409eff; cursor: pointer",
|
|
|
+ CommentNum: "color: #409eff; cursor: pointer",
|
|
|
+ };
|
|
|
+ return style[key] ? style[key] : "";
|
|
|
+ },
|
|
|
+ //
|
|
|
+ handleRowClick(row, key) {
|
|
|
+ if (key == "VideoCounts" || key == "VoiceCounts") {
|
|
|
+ this.playDetailsVisible = true;
|
|
|
+ this.playDetailsList = row;
|
|
|
+ } else if (key == "CommentNum") {
|
|
|
+ this.generaitondialogVisib = true;
|
|
|
+ this.generaitonId = this.tabActive == 1 || this.tabActive == 2 ? row.ActivityId : this.tabActive == 3 ? row.AskserieVideoId : row.VideoId;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /*
|
|
|
+ 表格三件套
|
|
|
+ */
|
|
|
+ //点击标题的弹框
|
|
|
+ titleBtnClick(id) {
|
|
|
+ raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
|
|
|
+ if (res.Ret == 200) {
|
|
|
+ this.detailData = res.Data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ //发布或者取消发布
|
|
|
+ handlePublish(item) {
|
|
|
+ let str = this.tabActive == 3 ? "音频" : "视频";
|
|
|
+ this.$confirm(item.PublishStatus == 1 ? `确认取消发布该${str}吗？` : `确认发布该${str}吗？`, "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ const res =
|
|
|
+ this.tabActive == 3
|
|
|
+ ? await raiVideoApi.askseriePublishAndcancel({
|
|
|
+ AskserieVideoId: item.AskserieVideoId,
|
|
|
+ PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
|
|
|
+ })
|
|
|
+ : await raiVideoApi.videoPublish({
|
|
|
+ VideoId: item.VideoId,
|
|
|
+ PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.$message.success("操作成功！");
|
|
|
+ this.getVideoList();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ handleEditVideo(item, type) {
|
|
|
+ if (type == "活动") {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/editActivity",
|
|
|
+ query: {
|
|
|
+ id: item.ActivityId,
|
|
|
+ isShow: 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.editDetails = item;
|
|
|
+ if (this.tabActive == 3) {
|
|
|
+ this.addEditdialogReleaseAudio = true;
|
|
|
+ } else {
|
|
|
+ this.addEditdialogVisib = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 进入
|
|
|
+ beforeRouteEnter(to, from, next) {
|
|
|
+ console.log(from);
|
|
|
+ if (from.path !== "/editActivity") {
|
|
|
+ sessionStorage.removeItem("backRoadShowListPage");
|
|
|
+ }
|
|
|
+ next();
|
|
|
+ },
|
|
|
+ // 离开
|
|
|
+ beforeRouteLeave(to, from, next) {
|
|
|
+ let backData = {
|
|
|
+ page_no: this.page_no,
|
|
|
+ fileName: this.fileName,
|
|
|
+ cactivityTypeVal: this.cactivityTypeVal,
|
|
|
+ issueTime: this.issueTime,
|
|
|
+ tabActive: this.tabActive,
|
|
|
+ };
|
|
|
+ sessionStorage.setItem("backRoadShowListPage", JSON.stringify(backData));
|
|
|
+ next();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.container-road-show {
|
|
|
+ .top-wrap {
|
|
|
+ margin-bottom: 28px;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ background: #ecf5ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #b3d8ff;
|
|
|
+ color: #3385ff;
|
|
|
+ font-size: 16px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ border: none;
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .el-select {
|
|
|
+ width: 220px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .mx-datepicker {
|
|
|
+ width: 220px !important;
|
|
|
+ margin-right: 20px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
bding