Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加排序功能

Browse Source
This commit is contained in:
huangdeliang 2021-06-22 15:03:20 +08:00
parent bc3440d52f
commit 19e961cdbc
6 changed files with 976 additions and 751 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
stdiet-admin/src/main/filters/dev/application.yml
View File

@ -138,7 +138,7 @@ token:
# 令牌密钥
secret: shengtangdiet
# 令牌有效期（默认30分钟）
expireTime: 120
expireTime: 360
# MyBatis配置
mybatis:

2
stdiet-admin/src/main/filters/local/application.yml
View File

@ -139,7 +139,7 @@ token:
# 令牌密钥
secret: shengtangdiet
# 令牌有效期（默认30分钟）
expireTime: 120
expireTime: 360
# MyBatis配置
mybatis:

2
stdiet-admin/src/main/filters/prod/application.yml
View File

@ -138,7 +138,7 @@ token:
# 令牌密钥
secret: shengtangdiet
# 令牌有效期（默认30分钟）
expireTime: 120
expireTime: 360
# MyBatis配置
mybatis:

2
stdiet-custom/src/main/resources/mapper/custom/SysVideoClassifyMapper.xml
View File

@ -156,7 +156,7 @@
, 0 as playLevel
</if>
from sys_nutritional_video snv where cate_id = #{id} and del_flag = 0 and show_flag = 1
order by priority_level desc,id asc
order by priority_level asc
</select>
</mapper>

296
stdiet-ui/src/components/UploadVideo/index.vue
View File

@ -1,6 +1,20 @@
<template>
<el-dialog title="视频上传" v-if="open" :visible.sync="open" width="700px" :close-on-click-modal="false" :show-close="false" append-to-body>
<el-form ref="videoFrom" :model="videoFrom" :rules="videoRules" label-width="80px" style="height: 650px; overflow: auto">
<el-dialog
title="视频上传"
v-if="open"
:visible.sync="open"
width="700px"
:close-on-click-modal="false"
:show-close="false"
append-to-body
>
<el-form
ref="videoFrom"
:model="videoFrom"
:rules="videoRules"
label-width="80px"
style="height: 650px; overflow: auto"
>
<el-form-item label="视频标题" prop="title">
<el-input
type="textarea"
@ -31,8 +45,17 @@
placeholder="选择分类"
/>
</el-form-item>
<el-form-item label="视频权限" prop="payLevel" style="margin-left:40px">
<el-select v-model="videoFrom.payLevel" clearable filterable placeholder="请选择权限">
<el-form-item
label="视频权限"
prop="payLevel"
style="margin-left: 40px"
>
<el-select
v-model="videoFrom.payLevel"
clearable
filterable
placeholder="请选择权限"
>
<el-option
v-for="dict in payVideoLevelList"
:key="dict.dictValue"
@ -44,25 +67,64 @@
</div>
<el-form-item label="视频文件" prop="file">
<div>
<input type="file" accept=".mp4" ref="videoFile" id="videoFile" @change="fileChange($event)">
<div > <span>上传状态：{{statusText}}</span><span style="margin-left:100px">进度：{{authProgress}}%</span></div>
<div style="color:#1890ff">
<el-button type="primary" @click="authUpload" :disabled="uploadDisabled" size="small" icon="el-icon-upload2">上传视频</el-button><span style="margin-left:20px">1、只能上传mp4格式视频</span>
<input
type="file"
accept=".mp4"
ref="videoFile"
id="videoFile"
@change="fileChange($event)"
/>
<div>
<span>上传状态：{{ statusText }}</span
><span style="margin-left: 100px">进度：{{ authProgress }}%</span>
</div>
<div style="color: #1890ff">
<el-button
type="primary"
@click="authUpload"
:disabled="uploadDisabled"
size="small"
icon="el-icon-upload2"
>上传视频</el-button
><span style="margin-left: 20px">1、只能上传mp4格式视频</span>
</div>
</div>
</el-form-item>
<el-form-item label="视频封面" prop="coverUrl">
<UploadFile ref="uploadFile" :prefix="'videoCover'" :coverUrl="videoFrom.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
<el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" :disabled="!uploadVideoFlag" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
<UploadFile
ref="uploadFile"
:prefix="'videoCover'"
:coverUrl="videoFrom.previewUrl"
@callbackMethod="handleCoverUrl"
:tips="''"
></UploadFile>
<el-button
type="primary"
size="small"
icon="el-icon-film"
@click="selectVideoCover"
:disabled="!uploadVideoFlag"
title="上传视频之后选择视频截图作为封面"
>选择封面</el-button
>
</el-form-item>
<el-form-item label="排序" prop="priorityLevel">
<el-input-number
v-model="videoFrom.priorityLevel"
size="small"
:step="1"
></el-input-number>
</el-form-item>
<el-form-item label="展示状态" prop="wxShow">
<el-switch
v-model="videoFrom.wxShow"
active-text="展示"
inactive-text="不展示">
inactive-text="不展示"
>
</el-switch>
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
<div style="color: red">
提示：开启展示之后客户可看到该视频，请保证内容正确再展示
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -72,11 +134,14 @@
<!-- 手动选择封面 -->
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
</el-dialog>
</template>
<script>
import axios from 'axios'
import {getUploadVideoAuth,addNutritionalVideo,getVideoSnapshot,submitVideoSnapshot } from "@/api/custom/nutritionalVideo";
import {
getUploadVideoAuth,
addNutritionalVideo,
getVideoSnapshot,
submitVideoSnapshot,
} from "@/api/custom/nutritionalVideo";
import { getAllClassify } from "@/api/custom/videoClassify";
import UploadFile from "@/components/FileUpload/UploadFile";
import Treeselect from "@riophae/vue-treeselect";
@ -90,44 +155,40 @@
open: false,
videoFrom: {},
videoRules: {
title: [
{ required: true, message: "标题不能为空", trigger: "blur" },
],
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
cateId: [
{ required: true, message: "视频类别不能为空", trigger: "blur" },
],
payLevel: [
{ required: true, message: "视频权限不能为空", trigger: "blur" },
]
],
},
callback: null,
classifyList: [],
defaultClassify: null,
payVideoLevelList: [],
defaultPayLevel: null,
uploadAuth:{
},
uploadAuth: {},
videoFileList: [],
timeout: '',
partSize: '',
parallel: '',
retryCount: '',
retryDuration: '',
region: 'cn-shenzhen',
userId: '1808303706021362',
timeout: "",
partSize: "",
parallel: "",
retryCount: "",
retryDuration: "",
region: "cn-shenzhen",
userId: "1808303706021362",
file: null,
authProgress: 0,
uploadDisabled: true,
resumeDisabled: true,
pauseDisabled: true,
uploader: null,
statusText: '',
fileType:['mp4','MP4'],
statusText: "",
fileType: ["mp4", "MP4"],
uploading: false,
//视频是否上传成功标识
uploadVideoFlag: false
}
uploadVideoFlag: false,
};
},
created() {
/*getAllClassify().then(response => {
@ -144,10 +205,12 @@
this.defaultPayLevel = response.data[0].dictValue;
}
});
},
components: {
UploadFile,Treeselect, IconSelect,VideoSelectCover
UploadFile,
Treeselect,
IconSelect,
VideoSelectCover,
},
methods: {
showDialog(classifyList, callback) {
@ -169,11 +232,12 @@
coverUrl: null,
title: null,
description: null,
priorityLevel: 0,
tags: null,
payLevel: this.defaultPayLevel ? parseInt(this.defaultPayLevel) : null,
videoId: null,
wxShow: false,
previewUrl: null
previewUrl: null,
};
if (this.$refs.uploadFile) {
this.$refs.uploadFile.resetUpload();
@ -184,7 +248,7 @@
this.uploadAuth = {};
this.uploadDisabled = true;
this.uploader = null;
this.statusText = '';
this.statusText = "";
this.uploading = false;
this.uploadVideoFlag = false;
this.resetForm("videoFrom");
@ -215,16 +279,15 @@
return;
}
this.videoFrom.showFlag = this.videoFrom.wxShow ? 1 : 0;
addNutritionalVideo(this.videoFrom).then(response => {
addNutritionalVideo(this.videoFrom).then((response) => {
if (response.code === 200) {
this.msgSuccess("视频保存成功");
this.open = false;
this.callback && this.callback();
}
})
});
}
});
},
selectVideoCover() {
this.$refs.videoSelectCoverRef.showDialog(this.videoFrom, (url) => {
@ -241,12 +304,12 @@
return {
id: node.id,
label: node.cateName,
children: node.children
children: node.children,
};
},
dealClassify(data) {
this.classifyList = [];
const classify = { id: 0, cateName: '主分类', children: [] };
const classify = { id: 0, cateName: "主分类", children: [] };
classify.children = this.handleTree(data, "id");
this.classifyList.push(classify);
},
@ -273,7 +336,7 @@
return;
}
this.file = e.target.files[0];
var userData = '{"Vod":{}}'
var userData = '{"Vod":{}}';
/**if (this.uploader) {
this.uploader.stopUpload()
this.authProgress = 0
@ -288,14 +351,20 @@
return;
}
this.videoFrom.fileName = this.file.name;
if(this.videoFrom.fileName == null || this.videoFrom.fileName.length == 0 || this.videoFrom.fileName.lastIndexOf(".") == -1){
if (
this.videoFrom.fileName == null ||
this.videoFrom.fileName.length == 0 ||
this.videoFrom.fileName.lastIndexOf(".") == -1
) {
this.$message({
message: "当前视频名称错误",
type: "warning",
});
return;
}
let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
let fileType = this.videoFrom.fileName.substring(
this.videoFrom.fileName.lastIndexOf(".") + 1
);
if (this.fileType.indexOf(fileType) == -1) {
this.$message({
message: "当前视频格式错误",
@ -304,47 +373,47 @@
return;
}
getUploadVideoAuth(this.videoFrom).then(response => {
getUploadVideoAuth(this.videoFrom).then((response) => {
if (response.code == 200) {
this.uploadAuth = response.uploadAuth;
console.log(this.uploadAuth);
this.videoFrom.videoId = this.uploadAuth.videoId;
this.uploader = this.createUploader()
this.uploader.addFile(this.file, null, null, null, userData)
this.uploadDisabled = false
this.pauseDisabled = true
this.resumeDisabled = true
this.uploader = this.createUploader();
this.uploader.addFile(this.file, null, null, null, userData);
this.uploadDisabled = false;
this.pauseDisabled = true;
this.resumeDisabled = true;
}
})
});
}
});
},
authUpload() {
// 然后调用 startUpload 方法, 开始上传
if (this.uploader !== null) {
this.uploader.startUpload()
this.uploadDisabled = true
this.pauseDisabled = false
this.uploader.startUpload();
this.uploadDisabled = true;
this.pauseDisabled = false;
}
},
// 暂停上传
pauseUpload() {
if (this.uploader !== null) {
this.uploader.stopUpload()
this.resumeDisabled = false
this.pauseDisabled = true
this.uploader.stopUpload();
this.resumeDisabled = false;
this.pauseDisabled = true;
}
},
// 恢复上传
resumeUpload() {
if (this.uploader !== null) {
this.uploader.startUpload()
this.resumeDisabled = true
this.pauseDisabled = false
this.uploader.startUpload();
this.resumeDisabled = true;
this.pauseDisabled = false;
}
},
createUploader(type) {
let self = this
let self = this;
let uploader = new AliyunUpload.Vod({
timeout: self.timeout || 60000,
partSize: self.partSize || 1048576,
@ -355,10 +424,10 @@
userId: self.userId,
// 添加文件成功
addFileSuccess: function (uploadInfo) {
self.uploadDisabled = false
self.resumeDisabled = false
self.statusText = '添加视频成功, 等待上传...'
console.log("addFileSuccess: " + uploadInfo.file.name)
self.uploadDisabled = false;
self.resumeDisabled = false;
self.statusText = "添加视频成功, 等待上传...";
console.log("addFileSuccess: " + uploadInfo.file.name);
},
// 开始上传
onUploadstarted: function (uploadInfo) {
@ -369,33 +438,77 @@
// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
uploader.setUploadAuthAndAddress(uploadInfo, self.uploadAuth.uploadAuth, self.uploadAuth.uploadAddress, self.uploadAuth.videoId)
self.statusText = '视频开始上传...'
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
uploader.setUploadAuthAndAddress(
uploadInfo,
self.uploadAuth.uploadAuth,
self.uploadAuth.uploadAddress,
self.uploadAuth.videoId
);
self.statusText = "视频开始上传...";
console.log(
"onUploadStarted:" +
uploadInfo.file.name +
", endpoint:" +
uploadInfo.endpoint +
", bucket:" +
uploadInfo.bucket +
", object:" +
uploadInfo.object
);
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
self.statusText = '视频上传成功!'
console.log(
"onUploadSucceed: " +
uploadInfo.file.name +
", endpoint:" +
uploadInfo.endpoint +
", bucket:" +
uploadInfo.bucket +
", object:" +
uploadInfo.object
);
self.statusText = "视频上传成功!";
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
console.log(
"onUploadFailed: file:" +
uploadInfo.file.name +
",code:" +
code +
", message:" +
message
);
self.uploading = false;
self.statusText = '视频上传失败!'
self.statusText = "视频上传失败!";
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
self.statusText = '视频已暂停上传'
console.log(
"Canceled file: " +
uploadInfo.file.name +
", code: " +
code +
", message:" +
message
);
self.statusText = "视频已暂停上传";
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
let progressPercent = Math.ceil(progress * 100)
self.authProgress = progressPercent
self.statusText = '视频上传中...'
console.log(
"onUploadProgress:file:" +
uploadInfo.file.name +
", fileSize:" +
totalSize +
", percent:" +
Math.ceil(progress * 100) +
"%"
);
let progressPercent = Math.ceil(progress * 100);
self.authProgress = progressPercent;
self.statusText = "视频上传中...";
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
@ -408,24 +521,23 @@
uploader.resumeUploadWithAuth(uploadAuth)
console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
})*/
self.statusText = '视频上传超时...';
self.statusText = "视频上传超时...";
self.uploading = false;
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
self.statusText = '视频上传完毕'
self.statusText = "视频上传完毕";
self.uploading = false;
self.uploadVideoFlag = true;
submitVideoSnapshot(self.videoFrom.videoId).then(response => {
submitVideoSnapshot(self.videoFrom.videoId).then((response) => {
if (response.code == 200) {
console.log("-- 截图成功 --");
}
})
}
})
return uploader
}
}
}
});
},
});
return uploader;
},
},
};
</script>

251
stdiet-ui/src/views/custom/nutritionalVideo/index.vue
View File

@ -1,6 +1,12 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="关键词" prop="key">
<el-input
v-model.trim="queryParams.key"
@ -39,7 +45,12 @@
/>
</el-form-item>
<el-form-item label="视频权限" prop="payLevel">
<el-select v-model="queryParams.payLevel" clearable filterable placeholder="请选择权限">
<el-select
v-model="queryParams.payLevel"
clearable
filterable
placeholder="请选择权限"
>
<el-option
v-for="dict in payVideoLevelList"
:key="dict.dictValue"
@ -49,8 +60,16 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="cyan"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
@ -62,7 +81,8 @@
size="mini"
@click="clickUploadVideo"
v-hasPermi="['custom:nutritionalVideo:add']"
>视频上传</el-button>
>视频上传</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -72,7 +92,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['custom:nutritionalVideo:edit']"
>修改</el-button>
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -82,7 +103,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['custom:nutritionalVideo:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -91,7 +113,8 @@
icon="el-icon-menu"
@click="handleVideoClassify"
v-hasPermi="['custom:videoClassify:list']"
>视频分类管理</el-button>
>视频分类管理</el-button
>
</el-col>
<!--
<el-col :span="1.5">
@ -103,10 +126,17 @@
v-hasPermi="['custom:nutritionalVideo:export']"
>导出</el-button>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="nutritionalVideoList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="nutritionalVideoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!--<el-table-column label="视频分类ID" align="center" prop="cateId" />-->
<el-table-column label="封面" align="center" prop="coverUrl" width="300">
@ -114,37 +144,62 @@
<el-image
style="width: 300px; height: 200px"
:src="scope.row.coverUrl"
:preview-src-list="coverImageList">
:preview-src-list="coverImageList"
>
</el-image>
</template>
</el-table-column>
<el-table-column label="标题" align="center" prop="title" width="200">
<template slot-scope="scope">
<AutoHideMessage :data="scope.row.title == null ? '' : (scope.row.title+'')" :maxLength="20"></AutoHideMessage>
<AutoHideMessage
:data="scope.row.title == null ? '' : scope.row.title + ''"
:maxLength="20"
></AutoHideMessage>
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="description">
<template slot-scope="scope">
<AutoHideMessage :data="scope.row.description == null ? '' : (scope.row.description+'')" :maxLength="100"></AutoHideMessage>
<AutoHideMessage
:data="
scope.row.description == null ? '' : scope.row.description + ''
"
:maxLength="100"
></AutoHideMessage>
</template>
</el-table-column>
<!--<el-table-column label="标签" align="center" prop="tags" width="100"/>-->
<el-table-column label="分类" align="center" prop="cateName" width="100"/>
<el-table-column label="权限等级" align="center" prop="payLevelName" width="100"/>
<el-table-column label="展示状态" align="center" prop="showFlag" width="200">
<el-table-column
label="分类"
align="center"
prop="cateName"
width="100"
/>
<el-table-column
label="权限等级"
align="center"
prop="payLevelName"
width="100"
/>
<el-table-column
label="展示状态"
align="center"
prop="showFlag"
width="200"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.wxShow"
active-text="展示"
inactive-text="不展示"
@change="handleWxShow($event, scope.row)"
>
</el-switch>
/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}</span>
<span>{{
parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200">
@ -155,27 +210,28 @@
icon="el-icon-edit"
@click="getVideoPlayUrl(scope.row.id)"
v-hasPermi="['custom:nutritionalVideo:query']"
>播放</el-button>
>播放</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['custom:nutritionalVideo:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['custom:nutritionalVideo:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
@ -227,8 +283,17 @@
style="width: 200px"
/>
</el-form-item>
<el-form-item label="视频权限" prop="payLevel" style="margin-left:40px">
<el-select v-model="form.payLevel" clearable filterable placeholder="请选择权限">
<el-form-item
label="视频权限"
prop="payLevel"
style="margin-left: 40px"
>
<el-select
v-model="form.payLevel"
clearable
filterable
placeholder="请选择权限"
>
<el-option
v-for="dict in payVideoLevelList"
:key="dict.dictValue"
@ -239,16 +304,36 @@
</el-form-item>
</div>
<el-form-item label="视频封面" prop="coverUrl">
<UploadFile ref="uploadFile" v-if="open" :prefix="'videoCover'" :coverUrl="form.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
<el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
<UploadFile
ref="uploadFile"
v-if="open"
:prefix="'videoCover'"
:coverUrl="form.previewUrl"
@callbackMethod="handleCoverUrl"
:tips="''"
></UploadFile>
<el-button
type="primary"
size="small"
icon="el-icon-film"
@click="selectVideoCover"
title="上传视频之后选择视频截图作为封面"
>选择封面</el-button
>
</el-form-item>
<el-form-item label="排序" prop="priorityLevel">
<el-input-number v-model="form.priorityLevel" :step="1" size="small" />
</el-form-item>
<el-form-item label="展示状态" prop="wxShow">
<el-switch
v-model="form.wxShow"
active-text="展示"
inactive-text="不展示">
inactive-text="不展示"
>
</el-switch>
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
<div style="color: red">
提示：开启展示之后客户可看到该视频，请保证内容正确再展示
</div>
</el-form-item>
</el-form>
@ -261,7 +346,13 @@
<UploadVideo ref="uploadVideoRef"></UploadVideo>
<!-- 视频分类管理 -->
<el-dialog title="视频分类列表" :visible.sync="videoClassifyOpen" width="800px" append-to-body @closed="getAllVideoClassify();">
<el-dialog
title="视频分类列表"
:visible.sync="videoClassifyOpen"
width="800px"
append-to-body
@closed="getAllVideoClassify()"
>
<div style="height: 500px; overflow: auto">
<VideoClassify ref="videoClassifyRef"></VideoClassify>
</div>
@ -273,7 +364,16 @@
</template>
<script>
import { listNutritionalVideo, getNutritionalVideo, delNutritionalVideo, addNutritionalVideo, updateNutritionalVideo, exportNutritionalVideo, updateWxShow,getVideoPlayUrlById } from "@/api/custom/nutritionalVideo";
import {
listNutritionalVideo,
getNutritionalVideo,
delNutritionalVideo,
addNutritionalVideo,
updateNutritionalVideo,
exportNutritionalVideo,
updateWxShow,
getVideoPlayUrlById,
} from "@/api/custom/nutritionalVideo";
import { getAllClassify } from "@/api/custom/videoClassify";
import UploadVideo from "@/components/UploadVideo";
import UploadFile from "@/components/FileUpload/UploadFile";
@ -312,21 +412,19 @@
key: null,
showFlag: null,
cateId: null,
payLevel: null
payLevel: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
title: [
{ required: true, message: "标题不能为空", trigger: "blur" },
],
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
cateId: [
{ required: true, message: "视频类别不能为空", trigger: "blur" },
],
payLevel: [
{ required: true, message: "视频权限不能为空", trigger: "blur" },
]
],
},
coverImageList: [],
//分类列表
@ -336,8 +434,7 @@
//权限等级列表
payVideoLevelList: [],
//视频分类弹窗显示标识
videoClassifyOpen:false
videoClassifyOpen: false,
};
},
created() {
@ -348,14 +445,20 @@
});
},
components: {
UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect,VideoSelectCover
UploadVideo,
UploadFile,
VideoClassify,
AutoHideMessage,
Treeselect,
IconSelect,
VideoSelectCover,
},
methods: {
/** 查询营养视频列表 */
getList() {
this.loading = true;
listNutritionalVideo(this.queryParams).then(response => {
response.rows.forEach(element => {
listNutritionalVideo(this.queryParams).then((response) => {
response.rows.forEach((element) => {
element.wxShow = element.showFlag == 1 ? true : false;
});
this.nutritionalVideoList = response.rows;
@ -365,11 +468,11 @@
},
//获取所有分类
getAllVideoClassify() {
getAllClassify().then(response => {
getAllClassify().then((response) => {
if (response.code == 200) {
this.allClassifyList = response.data;
this.classifyList = [];
const classify = { id: 0, cateName: '主分类', children: [] };
const classify = { id: 0, cateName: "主分类", children: [] };
classify.children = this.handleTree(response.data, "id");
this.classifyList.push(classify);
}
@ -393,7 +496,7 @@
payLevel: null,
showFlag: null,
wxShow: false,
previewUrl: null
previewUrl: null,
};
this.resetForm("form");
},
@ -416,9 +519,9 @@
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
clickUploadVideo() {
this.$refs.uploadVideoRef.showDialog(this.allClassifyList, () => {
@ -437,8 +540,8 @@
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getNutritionalVideo(id).then(response => {
const id = row.id || this.ids;
getNutritionalVideo(id).then((response) => {
response.data.wxShow = response.data.showFlag == 1 ? true : false;
this.form = response.data;
this.open = true;
@ -447,10 +550,10 @@
},
//获取播放地址
getVideoPlayUrl(id) {
getVideoPlayUrlById(id).then(response => {
getVideoPlayUrlById(id).then((response) => {
let url = response.data.playUrl;
if (url != undefined && url != null) {
window.open(url, '_blank');
window.open(url, "_blank");
}
});
},
@ -462,12 +565,12 @@
return {
id: node.id,
label: node.cateName,
children: node.children
children: node.children,
};
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
this.form.showFlag = this.form.wxShow ? 1 : 0;
//视频分类不能选择主分类
@ -479,7 +582,7 @@
return;
}
if (this.form.id != null) {
updateNutritionalVideo(this.form).then(response => {
updateNutritionalVideo(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
@ -487,7 +590,7 @@
}
});
} else {
addNutritionalVideo(this.form).then(response => {
addNutritionalVideo(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
@ -501,7 +604,7 @@
handleWxShow(newWxshow, row) {
let param = {
id: row.id,
showFlag: newWxshow ? 1 : 0
showFlag: newWxshow ? 1 : 0,
};
updateWxShow(param);
},
@ -512,30 +615,40 @@
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除营养视频编号为"' + ids + '"的数据项?', "警告", {
this.$confirm(
'是否确认删除营养视频编号为"' + ids + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
type: "warning",
}
)
.then(function () {
return delNutritionalVideo(ids);
}).then(() => {
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function() {});
})
.catch(function () {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有营养视频数据项?', "警告", {
this.$confirm("是否确认导出所有营养视频数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
type: "warning",
})
.then(function () {
return exportNutritionalVideo(queryParams);
}).then(response => {
})
.then((response) => {
this.download(response.msg);
}).catch(function() {});
}
}
})
.catch(function () {});
},
},
};
</script>