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
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 secret: shengtangdiet
# 令牌有效期（默认30分钟） # 令牌有效期（默认30分钟）
expireTime: 120 expireTime: 360
# MyBatis配置 # MyBatis配置
mybatis: mybatis:

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

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

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

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

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

@ -156,7 +156,7 @@
, 0 as playLevel , 0 as playLevel
</if> </if>
from sys_nutritional_video snv where cate_id = #{id} and del_flag = 0 and show_flag = 1 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> </select>
</mapper> </mapper>

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

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

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

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