|
@@ -0,0 +1,297 @@
|
|
|
+<template>
|
|
|
+ <div class="container add-edit-release-audio">
|
|
|
+ <el-dialog
|
|
|
+ v-dialogDrag
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ center
|
|
|
+ width="568px"
|
|
|
+ :title="dlgTitle"
|
|
|
+ :visible.sync="addEditdialogReleaseAudio"
|
|
|
+ customClass="add-edit-video-dlg"
|
|
|
+ :before-close="cancelHandle"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form :model="addEditAudio" :rules="rules" ref="ruleFormAudio" class="demo-ruleForm">
|
|
|
+ <el-form-item prop="audioName">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <el-input style="width: 75%" clearable placeholder="请上传音频" v-model="addEditAudio.audioName"></el-input>
|
|
|
+ <el-upload class="upload-demo" action="" :show-file-list="false" :http-request="handleUploadAudio" accept="audio/*" :file-list="fileListAudio">
|
|
|
+ <el-button type="primary" :loading="startUpload">上传音频</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-progress type="circle" :percentage="percentage" width="40" style="margin-left: 10px" v-if="startUpload"></el-progress>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="industryId">
|
|
|
+ <el-select style="width: 100%" placeholder="请选择行业" v-model="addEditAudio.industryId" clearable @change="selectChangeHandle">
|
|
|
+ <el-option
|
|
|
+ v-for="item in chartPermissionList.filter((item) => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '买方研选')"
|
|
|
+ :label="item.PermissionName"
|
|
|
+ :key="item.ChartPermissionId"
|
|
|
+ :value="item.ChartPermissionId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="addEditAudio.property" multiple placeholder="请选择产业(可多选)" clearable filterable style="width: 100%" @focus="industrySelectFocus">
|
|
|
+ <el-option :label="item.PermissionName" :value="item.ChartPermissionId" v-for="item in selectedIndustryArr" :key="item.ChartPermissionId"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="cover-content" style="margin: 10px 0" v-if="this.addEditAudio.industryId && defaultImage">
|
|
|
+ <span class="text" style="width: 46px; text-align: right">封面:</span>
|
|
|
+ <div class="img-content">
|
|
|
+ <img :src="defaultImage" alt="" />
|
|
|
+ <div class="modify" @click="modifyImgHandler">修改</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="confirmSubmit(1)">确定</el-button>
|
|
|
+ <el-button @click="cancelHandle">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <modify-img-dlg :modifyImgVisible.sync="modifyImgVisible" :videoAndVoiceList.sync="videoAndVoiceList" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { raiInterface, resourceVoiceupload, raiVideoApi } from "@/api/api.js";
|
|
|
+import ModifyImgDlg from "../../components/addComopnents/modifyImgDlg.vue";
|
|
|
+export default {
|
|
|
+ name: "",
|
|
|
+ components: { ModifyImgDlg },
|
|
|
+ props: {
|
|
|
+ addEditdialogReleaseAudio: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ chartPermissionList: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ playDetailsList: {
|
|
|
+ default: {},
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "playDetailsList.AskserieVideoId": {
|
|
|
+ handler(newVal) {
|
|
|
+ newVal && newVal > 0 && this.askserieVideoDetail();
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ addEditAudio: {
|
|
|
+ audioName: "", //音频名称
|
|
|
+ industryId: "", //行业id
|
|
|
+ property: "", //产业名称
|
|
|
+ audioUrl: "", //视频链接
|
|
|
+ AudioSeconds: "", //时长
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ // audioName: [{ required: true, message: "请上传音频", trigger: "blur" }],
|
|
|
+ industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
|
|
|
+ },
|
|
|
+ industryArr: [],
|
|
|
+ selectedIndustryArr: [],
|
|
|
+ percentage: 0,
|
|
|
+ startUpload: false, //开始上传
|
|
|
+ fileListAudio: [],
|
|
|
+ videoAndVoiceList: [],
|
|
|
+ defaultImage: [],
|
|
|
+ modifyImgVisible: false,
|
|
|
+ defaultImage: "",
|
|
|
+ shareImg: "",
|
|
|
+ dlgTitle: "发布问答",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ /* 获取全部的行业 前的判断 */
|
|
|
+ industrySelectFocus() {
|
|
|
+ if (!this.addEditAudio.industryId) {
|
|
|
+ this.$message.error("请先选择行业");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 行业更改
|
|
|
+ selectChangeHandle(value) {
|
|
|
+ this.addEditAudio.property = "";
|
|
|
+ value ? this.getIndustry(value) : (this.selectedIndustryArr = []);
|
|
|
+ value && this.getVideoAndImg();
|
|
|
+ },
|
|
|
+ /* 获取选择的行业 */
|
|
|
+ getIndustry(industryId) {
|
|
|
+ if (this.industryArr.length) {
|
|
|
+ this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ raiInterface.getListIndustrial().then((res) => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.industryArr = res.Data.List || [];
|
|
|
+ this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //保存或发布
|
|
|
+ confirmSubmit(type) {
|
|
|
+ this.$refs.ruleFormAudio.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (!this.fileListAudio[0].url) return this.$message.error("请上传音频");
|
|
|
+ if (!this.addEditAudio.audioName) return this.$message.error("请输入音频名称");
|
|
|
+ let ChartPermissionName = "";
|
|
|
+ this.chartPermissionList.forEach((item) => {
|
|
|
+ if (item.ChartPermissionId == this.addEditAudio.industryId) {
|
|
|
+ ChartPermissionName = item.PermissionName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const res = await raiVideoApi.askseriePreserveAndEdit({
|
|
|
+ AskserieVideoId: this.playDetailsList.AskserieVideoId ? this.playDetailsList.AskserieVideoId : 0,
|
|
|
+ VideoName: this.addEditAudio.audioName,
|
|
|
+ ChartPermissionId: this.addEditAudio.industryId,
|
|
|
+ ChartPermissionName,
|
|
|
+ IndustrialManagementIds: this.addEditAudio.property ? this.addEditAudio.property.join(",") : "",
|
|
|
+ VideoUrl: this.addEditAudio.audioUrl,
|
|
|
+ VideoDuration: this.addEditAudio.AudioSeconds + "",
|
|
|
+ BackgroundImg: this.defaultImage,
|
|
|
+ ShareImg: this.shareImg,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.$message.success("添加成功");
|
|
|
+ this.cancelHandle();
|
|
|
+ this.$parent.getVideoList();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传音频
|
|
|
+ async handleUploadAudio(e) {
|
|
|
+ this.startUpload = true;
|
|
|
+ let form = new FormData();
|
|
|
+ form.append("file", e.file);
|
|
|
+ const res = await resourceVoiceupload(form);
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ let obj = {
|
|
|
+ name: res.Data.ResourceName,
|
|
|
+ url: res.Data.ResourceUrl,
|
|
|
+ PlaySeconds: res.Data.PlaySeconds,
|
|
|
+ };
|
|
|
+ this.addEditAudio.audioName = res.Data.ResourceName; //音频名称
|
|
|
+ this.addEditAudio.audioUrl = res.Data.ResourceUrl; //视频链接
|
|
|
+ this.addEditAudio.AudioSeconds = res.Data.PlaySeconds; //时长
|
|
|
+ this.fileListAudio = [obj];
|
|
|
+ }
|
|
|
+ this.startUpload = false;
|
|
|
+ },
|
|
|
+ // 封面图
|
|
|
+ async getVideoAndImg(isOne = "") {
|
|
|
+ const res = await raiInterface.video_and_voiceImgActivityVideo({
|
|
|
+ ChartPermissionId: this.addEditAudio.industryId,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ isOne == "修改" ? "" : ((this.defaultImage = res.Data.List[0].ImgUrl), (this.shareImg = res.Data.List[0].ShareImg));
|
|
|
+ this.videoAndVoiceList = res.Data.List;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击修改图片的弹框
|
|
|
+ modifyImgHandler() {
|
|
|
+ this.getVideoAndImg("修改");
|
|
|
+ this.modifyImgVisible = true;
|
|
|
+ },
|
|
|
+ cancelHandle() {
|
|
|
+ this.$refs.ruleFormAudio.resetFields();
|
|
|
+ this.addEditAudio = {
|
|
|
+ audioName: "", //音频名称
|
|
|
+ industryId: "", //行业id
|
|
|
+ property: "", //产业名称
|
|
|
+ audioUrl: "", //视频链接
|
|
|
+ AudioSeconds: "", //时长
|
|
|
+ };
|
|
|
+ this.fileListAudio = [];
|
|
|
+ this.defaultImage = "";
|
|
|
+ this.shareImg = "";
|
|
|
+ this.dlgTitle = "发布问答";
|
|
|
+ this.$emit("update:addEditdialogReleaseAudio", false);
|
|
|
+ this.$emit("update:playDetailsList", {});
|
|
|
+ },
|
|
|
+ // 获取详情
|
|
|
+ async askserieVideoDetail() {
|
|
|
+ const res = await raiVideoApi.askserieVideoDetail({
|
|
|
+ AskserieVideoId: this.playDetailsList.AskserieVideoId,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.dlgTitle = "编辑";
|
|
|
+ let { Detail } = res.Data;
|
|
|
+ this.getIndustry(Detail.ChartPermissionId);
|
|
|
+ let str = [];
|
|
|
+ Detail.ListIndustrial &&
|
|
|
+ Detail.ListIndustrial.forEach((item) => {
|
|
|
+ str.push(item.IndustrialManagementId);
|
|
|
+ });
|
|
|
+ this.addEditAudio = {
|
|
|
+ audioName: Detail.VideoName, //音频名称
|
|
|
+ industryId: Detail.ChartPermissionId, //行业id
|
|
|
+ property: str, //产业名称
|
|
|
+ audioUrl: Detail.VideoUrl, //视频链接
|
|
|
+ AudioSeconds: Detail.VideoDuration, //时长
|
|
|
+ };
|
|
|
+ this.defaultImage = Detail.BackgroundImg;
|
|
|
+ this.shareImg = Detail.ShareImg;
|
|
|
+ let obj = {
|
|
|
+ name: Detail.VideoName,
|
|
|
+ url: Detail.VideoUrl,
|
|
|
+ PlaySeconds: Detail.VideoDuration,
|
|
|
+ };
|
|
|
+ this.fileListAudio = [obj];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.add-edit-release-audio {
|
|
|
+ .add-edit-video-dlg {
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.add-edit-release-audio {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .cover-content {
|
|
|
+ display: flex;
|
|
|
+ // align-items: stretch;
|
|
|
+ // vertical-align: bottom;
|
|
|
+ .img-content {
|
|
|
+ position: relative;
|
|
|
+ height: 200px;
|
|
|
+ width: 200px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .modify {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -50px;
|
|
|
+ height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|