添加排序功能
This commit is contained in:
huangdeliang
@ -138,7 +138,7 @@ token:
|
|||||||
# 令牌密钥
|
# 令牌密钥
|
||||||
secret: shengtangdiet
|
secret: shengtangdiet
|
||||||
# 令牌有效期（默认30分钟）
|
# 令牌有效期（默认30分钟）
|
||||||
expireTime: 120
|
expireTime: 360
|
||||||
|
|
||||||
# MyBatis配置
|
# MyBatis配置
|
||||||
mybatis:
|
mybatis:
|
||||||
|
|||||||
@ -139,7 +139,7 @@ token:
|
|||||||
# 令牌密钥
|
# 令牌密钥
|
||||||
secret: shengtangdiet
|
secret: shengtangdiet
|
||||||
# 令牌有效期（默认30分钟）
|
# 令牌有效期（默认30分钟）
|
||||||
expireTime: 120
|
expireTime: 360
|
||||||
|
|
||||||
# MyBatis配置
|
# MyBatis配置
|
||||||
mybatis:
|
mybatis:
|
||||||
|
|||||||
@ -138,7 +138,7 @@ token:
|
|||||||
# 令牌密钥
|
# 令牌密钥
|
||||||
secret: shengtangdiet
|
secret: shengtangdiet
|
||||||
# 令牌有效期（默认30分钟）
|
# 令牌有效期（默认30分钟）
|
||||||
expireTime: 120
|
expireTime: 360
|
||||||
|
|
||||||
# MyBatis配置
|
# MyBatis配置
|
||||||
mybatis:
|
mybatis:
|
||||||
|
|||||||
@ -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>
|
||||||
@ -1,136 +1,197 @@
|
|||||||
<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="视频上传"
|
||||||
<el-form-item label="视频标题" prop="title">
|
v-if="open"
|
||||||
<el-input
|
:visible.sync="open"
|
||||||
type="textarea"
|
width="700px"
|
||||||
placeholder="请输入视频标题"
|
:close-on-click-modal="false"
|
||||||
v-model.trim="videoFrom.title"
|
:show-close="false"
|
||||||
maxlength="50"
|
append-to-body
|
||||||
rows="1"
|
>
|
||||||
show-word-limit
|
<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"
|
||||||
|
placeholder="请输入视频标题"
|
||||||
|
v-model.trim="videoFrom.title"
|
||||||
|
maxlength="50"
|
||||||
|
rows="1"
|
||||||
|
show-word-limit
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="视频描述" prop="description">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入视频描述"
|
||||||
|
v-model.trim="videoFrom.description"
|
||||||
|
maxlength="1000"
|
||||||
|
rows="2"
|
||||||
|
show-word-limit
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item label="视频类别" prop="cateId" style="width: 300px">
|
||||||
|
<treeselect
|
||||||
|
v-model="videoFrom.cateId"
|
||||||
|
:options="classifyList"
|
||||||
|
:normalizer="normalizer"
|
||||||
|
:show-count="true"
|
||||||
|
placeholder="选择分类"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<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"
|
||||||
|
:label="dict.dictLabel"
|
||||||
|
:value="parseInt(dict.dictValue)"
|
||||||
/>
|
/>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="视频描述" prop="description">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
placeholder="请输入视频描述"
|
|
||||||
v-model.trim="videoFrom.description"
|
|
||||||
maxlength="1000"
|
|
||||||
rows="2"
|
|
||||||
show-word-limit
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<div style="display:flex">
|
|
||||||
<el-form-item label="视频类别" prop="cateId" style="width:300px">
|
|
||||||
<treeselect
|
|
||||||
v-model="videoFrom.cateId"
|
|
||||||
:options="classifyList"
|
|
||||||
:normalizer="normalizer"
|
|
||||||
:show-count="true"
|
|
||||||
placeholder="选择分类"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<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"
|
|
||||||
:label="dict.dictLabel"
|
|
||||||
:value="parseInt(dict.dictValue)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="展示状态" prop="wxShow">
|
|
||||||
<el-switch
|
|
||||||
v-model="videoFrom.wxShow"
|
|
||||||
active-text="展示"
|
|
||||||
inactive-text="不展示">
|
|
||||||
</el-switch>
|
|
||||||
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitVideoForm">保存</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 手动选择封面 -->
|
<el-form-item label="视频文件" prop="file">
|
||||||
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
|
<div>
|
||||||
</el-dialog>
|
<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
|
||||||
|
>
|
||||||
|
</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="不展示"
|
||||||
|
>
|
||||||
|
</el-switch>
|
||||||
|
<div style="color: red">
|
||||||
|
提示：开启展示之后客户可看到该视频，请保证内容正确再展示
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitVideoForm">保存</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
<!-- 手动选择封面 -->
|
||||||
|
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios'
|
import {
|
||||||
import {getUploadVideoAuth,addNutritionalVideo,getVideoSnapshot,submitVideoSnapshot } from "@/api/custom/nutritionalVideo";
|
getUploadVideoAuth,
|
||||||
import {getAllClassify } from "@/api/custom/videoClassify";
|
addNutritionalVideo,
|
||||||
import UploadFile from "@/components/FileUpload/UploadFile";
|
getVideoSnapshot,
|
||||||
import Treeselect from "@riophae/vue-treeselect";
|
submitVideoSnapshot,
|
||||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
} from "@/api/custom/nutritionalVideo";
|
||||||
import IconSelect from "@/components/IconSelect";
|
import { getAllClassify } from "@/api/custom/videoClassify";
|
||||||
import VideoSelectCover from "@/components/VideoSelectCover";
|
import UploadFile from "@/components/FileUpload/UploadFile";
|
||||||
export default {
|
import Treeselect from "@riophae/vue-treeselect";
|
||||||
name: "UploadVideo",
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||||
data () {
|
import IconSelect from "@/components/IconSelect";
|
||||||
return {
|
import VideoSelectCover from "@/components/VideoSelectCover";
|
||||||
open: false,
|
export default {
|
||||||
videoFrom:{},
|
name: "UploadVideo",
|
||||||
videoRules:{
|
data() {
|
||||||
title: [
|
return {
|
||||||
{ required: true, message: "标题不能为空", trigger: "blur" },
|
open: false,
|
||||||
],
|
videoFrom: {},
|
||||||
cateId:[
|
videoRules: {
|
||||||
{ required: true, message: "视频类别不能为空", trigger: "blur" },
|
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
|
||||||
],
|
cateId: [
|
||||||
payLevel:[
|
{ required: true, message: "视频类别不能为空", trigger: "blur" },
|
||||||
{ required: true, message: "视频权限不能为空", trigger: "blur" },
|
],
|
||||||
]
|
payLevel: [
|
||||||
},
|
{ required: true, message: "视频权限不能为空", trigger: "blur" },
|
||||||
callback: null,
|
],
|
||||||
classifyList: [],
|
},
|
||||||
defaultClassify: null,
|
callback: null,
|
||||||
payVideoLevelList:[],
|
classifyList: [],
|
||||||
defaultPayLevel: null,
|
defaultClassify: null,
|
||||||
uploadAuth:{
|
payVideoLevelList: [],
|
||||||
|
defaultPayLevel: null,
|
||||||
},
|
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 => {
|
||||||
if(response.code == 200){
|
if(response.code == 200){
|
||||||
this.classifyList = response.data;
|
this.classifyList = response.data;
|
||||||
if(response.data != null && response.data.length > 0){
|
if(response.data != null && response.data.length > 0){
|
||||||
@ -138,294 +199,345 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});*/
|
});*/
|
||||||
this.getDicts("video_pay_level").then((response) => {
|
this.getDicts("video_pay_level").then((response) => {
|
||||||
this.payVideoLevelList = response.data;
|
this.payVideoLevelList = response.data;
|
||||||
if(response.data != null && response.data.length > 0){
|
if (response.data != null && response.data.length > 0) {
|
||||||
this.defaultPayLevel = response.data[0].dictValue;
|
this.defaultPayLevel = response.data[0].dictValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
UploadFile,
|
||||||
|
Treeselect,
|
||||||
|
IconSelect,
|
||||||
|
VideoSelectCover,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDialog(classifyList, callback) {
|
||||||
|
if (classifyList != null && classifyList.length > 0) {
|
||||||
|
this.defaultClassify = classifyList[0].id;
|
||||||
|
}
|
||||||
|
this.resetVideoFrom();
|
||||||
|
this.open = true;
|
||||||
|
this.callback = callback;
|
||||||
|
this.dealClassify(classifyList);
|
||||||
|
//this.classifyList = classifyList;
|
||||||
|
},
|
||||||
|
handleCoverUrl(url) {
|
||||||
|
this.videoFrom.coverUrl = url;
|
||||||
|
},
|
||||||
|
resetVideoFrom() {
|
||||||
|
this.videoFrom = {
|
||||||
|
cateId: this.defaultClassify ? this.defaultClassify : null,
|
||||||
|
coverUrl: null,
|
||||||
|
title: null,
|
||||||
|
description: null,
|
||||||
|
priorityLevel: 0,
|
||||||
|
tags: null,
|
||||||
|
payLevel: this.defaultPayLevel ? parseInt(this.defaultPayLevel) : null,
|
||||||
|
videoId: null,
|
||||||
|
wxShow: false,
|
||||||
|
previewUrl: null,
|
||||||
|
};
|
||||||
|
if (this.$refs.uploadFile) {
|
||||||
|
this.$refs.uploadFile.resetUpload();
|
||||||
|
}
|
||||||
|
this.authProgress = 0;
|
||||||
|
this.file = null;
|
||||||
|
this.videoFileList = [];
|
||||||
|
this.uploadAuth = {};
|
||||||
|
this.uploadDisabled = true;
|
||||||
|
this.uploader = null;
|
||||||
|
this.statusText = "";
|
||||||
|
this.uploading = false;
|
||||||
|
this.uploadVideoFlag = false;
|
||||||
|
this.resetForm("videoFrom");
|
||||||
|
},
|
||||||
|
submitVideoForm() {
|
||||||
|
this.$refs["videoFrom"].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
//视频分类不能选择主分类
|
||||||
|
if (this.videoFrom.cateId == 0) {
|
||||||
|
this.$message({
|
||||||
|
message: "视频分类不能选择主分类",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.uploading) {
|
||||||
|
this.$message({
|
||||||
|
message: "视频正在上传，请勿取消",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.uploadVideoFlag) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先上传视频再保存",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.videoFrom.showFlag = this.videoFrom.wxShow ? 1 : 0;
|
||||||
|
addNutritionalVideo(this.videoFrom).then((response) => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.msgSuccess("视频保存成功");
|
||||||
|
this.open = false;
|
||||||
|
this.callback && this.callback();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
components: {
|
selectVideoCover() {
|
||||||
UploadFile,Treeselect, IconSelect,VideoSelectCover
|
this.$refs.videoSelectCoverRef.showDialog(this.videoFrom, (url) => {
|
||||||
|
//console.log(url);
|
||||||
|
this.videoFrom.previewUrl = url;
|
||||||
|
this.videoFrom.coverUrl = url;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 转换菜单数据结构 */
|
||||||
|
normalizer(node) {
|
||||||
|
if (node.children && !node.children.length) {
|
||||||
|
delete node.children;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: node.id,
|
||||||
|
label: node.cateName,
|
||||||
|
children: node.children,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
dealClassify(data) {
|
||||||
|
this.classifyList = [];
|
||||||
|
const classify = { id: 0, cateName: "主分类", children: [] };
|
||||||
|
classify.children = this.handleTree(data, "id");
|
||||||
|
this.classifyList.push(classify);
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
if (this.uploading) {
|
||||||
|
this.$message({
|
||||||
|
message: "视频正在上传，请勿取消",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.open = false;
|
||||||
|
this.resetVideoFrom();
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
showDialog(classifyList, callback){
|
|
||||||
if(classifyList != null && classifyList.length > 0){
|
|
||||||
this.defaultClassify = classifyList[0].id;
|
|
||||||
}
|
|
||||||
this.resetVideoFrom();
|
|
||||||
this.open = true;
|
|
||||||
this.callback = callback;
|
|
||||||
this.dealClassify(classifyList);
|
|
||||||
//this.classifyList = classifyList;
|
|
||||||
},
|
|
||||||
handleCoverUrl(url){
|
|
||||||
this.videoFrom.coverUrl = url;
|
|
||||||
},
|
|
||||||
resetVideoFrom(){
|
|
||||||
this.videoFrom = {
|
|
||||||
cateId: this.defaultClassify ? this.defaultClassify : null,
|
|
||||||
coverUrl: null,
|
|
||||||
title: null,
|
|
||||||
description: null,
|
|
||||||
tags: null,
|
|
||||||
payLevel: this.defaultPayLevel ? parseInt(this.defaultPayLevel) : null,
|
|
||||||
videoId: null,
|
|
||||||
wxShow: false,
|
|
||||||
previewUrl: null
|
|
||||||
};
|
|
||||||
if(this.$refs.uploadFile){
|
|
||||||
this.$refs.uploadFile.resetUpload();
|
|
||||||
}
|
|
||||||
this.authProgress = 0;
|
|
||||||
this.file = null;
|
|
||||||
this.videoFileList = [];
|
|
||||||
this.uploadAuth = {};
|
|
||||||
this.uploadDisabled = true;
|
|
||||||
this.uploader = null;
|
|
||||||
this.statusText = '';
|
|
||||||
this.uploading = false;
|
|
||||||
this.uploadVideoFlag = false;
|
|
||||||
this.resetForm("videoFrom");
|
|
||||||
},
|
|
||||||
submitVideoForm(){
|
|
||||||
this.$refs["videoFrom"].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
//视频分类不能选择主分类
|
|
||||||
if(this.videoFrom.cateId == 0){
|
|
||||||
this.$message({
|
|
||||||
message: "视频分类不能选择主分类",
|
|
||||||
type: "warning",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.uploading){
|
|
||||||
this.$message({
|
|
||||||
message: "视频正在上传，请勿取消",
|
|
||||||
type: "warning",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.uploadVideoFlag){
|
|
||||||
this.$message({
|
|
||||||
message: "请先上传视频再保存",
|
|
||||||
type: "warning",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.videoFrom.showFlag = this.videoFrom.wxShow ? 1 : 0;
|
|
||||||
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)=>{
|
|
||||||
//console.log(url);
|
|
||||||
this.videoFrom.previewUrl = url;
|
|
||||||
this.videoFrom.coverUrl = url;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 转换菜单数据结构 */
|
|
||||||
normalizer(node) {
|
|
||||||
if (node.children && !node.children.length) {
|
|
||||||
delete node.children;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
id: node.id,
|
|
||||||
label: node.cateName,
|
|
||||||
children: node.children
|
|
||||||
};
|
|
||||||
},
|
|
||||||
dealClassify(data){
|
|
||||||
this.classifyList = [];
|
|
||||||
const classify = { id: 0, cateName: '主分类', children: [] };
|
|
||||||
classify.children = this.handleTree(data, "id");
|
|
||||||
this.classifyList.push(classify);
|
|
||||||
},
|
|
||||||
cancel(){
|
|
||||||
if(this.uploading){
|
|
||||||
this.$message({
|
|
||||||
message: "视频正在上传，请勿取消",
|
|
||||||
type: "warning",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.open = false;
|
|
||||||
this.resetVideoFrom();
|
|
||||||
},
|
|
||||||
|
|
||||||
fileChange (e) {
|
fileChange(e) {
|
||||||
this.$refs["videoFrom"].validate((valid) => {
|
this.$refs["videoFrom"].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if(this.uploading){
|
if (this.uploading) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: "视频正在上传，请勿取消",
|
message: "视频正在上传，请勿取消",
|
||||||
type: "warning",
|
type: "warning",
|
||||||
});
|
});
|
||||||
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
|
||||||
this.statusText = ""
|
this.statusText = ""
|
||||||
}**/
|
}**/
|
||||||
//视频分类不能选择主分类
|
//视频分类不能选择主分类
|
||||||
if(this.videoFrom.cateId == 0){
|
if (this.videoFrom.cateId == 0) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: "视频分类不能选择主分类",
|
message: "视频分类不能选择主分类",
|
||||||
type: "warning",
|
type: "warning",
|
||||||
});
|
});
|
||||||
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.$message({
|
this.videoFrom.fileName == null ||
|
||||||
message: "当前视频名称错误",
|
this.videoFrom.fileName.length == 0 ||
|
||||||
type: "warning",
|
this.videoFrom.fileName.lastIndexOf(".") == -1
|
||||||
});
|
) {
|
||||||
return;
|
this.$message({
|
||||||
}
|
message: "当前视频名称错误",
|
||||||
let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
|
type: "warning",
|
||||||
if(this.fileType.indexOf(fileType) == -1){
|
});
|
||||||
this.$message({
|
return;
|
||||||
message: "当前视频格式错误",
|
}
|
||||||
type: "warning",
|
let fileType = this.videoFrom.fileName.substring(
|
||||||
});
|
this.videoFrom.fileName.lastIndexOf(".") + 1
|
||||||
return;
|
);
|
||||||
}
|
if (this.fileType.indexOf(fileType) == -1) {
|
||||||
|
this.$message({
|
||||||
getUploadVideoAuth(this.videoFrom).then(response => {
|
message: "当前视频格式错误",
|
||||||
if(response.code == 200){
|
type: "warning",
|
||||||
this.uploadAuth = response.uploadAuth;
|
});
|
||||||
console.log(this.uploadAuth);
|
return;
|
||||||
this.videoFrom.videoId = this.uploadAuth.videoId;
|
}
|
||||||
this.uploader = this.createUploader()
|
|
||||||
this.uploader.addFile(this.file, null, null, null, userData)
|
getUploadVideoAuth(this.videoFrom).then((response) => {
|
||||||
this.uploadDisabled = false
|
if (response.code == 200) {
|
||||||
this.pauseDisabled = true
|
this.uploadAuth = response.uploadAuth;
|
||||||
this.resumeDisabled = true
|
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;
|
||||||
authUpload () {
|
this.resumeDisabled = true;
|
||||||
// 然后调用 startUpload 方法, 开始上传
|
}
|
||||||
if (this.uploader !== null) {
|
});
|
||||||
this.uploader.startUpload()
|
|
||||||
this.uploadDisabled = true
|
|
||||||
this.pauseDisabled = false
|
|
||||||
}
|
}
|
||||||
},
|
});
|
||||||
// 暂停上传
|
},
|
||||||
pauseUpload () {
|
authUpload() {
|
||||||
if (this.uploader !== null) {
|
// 然后调用 startUpload 方法, 开始上传
|
||||||
this.uploader.stopUpload()
|
if (this.uploader !== null) {
|
||||||
this.resumeDisabled = false
|
this.uploader.startUpload();
|
||||||
this.pauseDisabled = true
|
this.uploadDisabled = true;
|
||||||
}
|
this.pauseDisabled = false;
|
||||||
},
|
}
|
||||||
// 恢复上传
|
},
|
||||||
resumeUpload () {
|
// 暂停上传
|
||||||
if (this.uploader !== null) {
|
pauseUpload() {
|
||||||
this.uploader.startUpload()
|
if (this.uploader !== null) {
|
||||||
this.resumeDisabled = true
|
this.uploader.stopUpload();
|
||||||
this.pauseDisabled = false
|
this.resumeDisabled = false;
|
||||||
}
|
this.pauseDisabled = true;
|
||||||
},
|
}
|
||||||
createUploader (type) {
|
},
|
||||||
let self = this
|
// 恢复上传
|
||||||
let uploader = new AliyunUpload.Vod({
|
resumeUpload() {
|
||||||
timeout: self.timeout || 60000,
|
if (this.uploader !== null) {
|
||||||
partSize: self.partSize || 1048576,
|
this.uploader.startUpload();
|
||||||
parallel: self.parallel || 5,
|
this.resumeDisabled = true;
|
||||||
retryCount: self.retryCount || 1,
|
this.pauseDisabled = false;
|
||||||
retryDuration: self.retryDuration || 2,
|
}
|
||||||
region: self.region,
|
},
|
||||||
userId: self.userId,
|
createUploader(type) {
|
||||||
// 添加文件成功
|
let self = this;
|
||||||
addFileSuccess: function (uploadInfo) {
|
let uploader = new AliyunUpload.Vod({
|
||||||
self.uploadDisabled = false
|
timeout: self.timeout || 60000,
|
||||||
self.resumeDisabled = false
|
partSize: self.partSize || 1048576,
|
||||||
self.statusText = '添加视频成功, 等待上传...'
|
parallel: self.parallel || 5,
|
||||||
console.log("addFileSuccess: " + uploadInfo.file.name)
|
retryCount: self.retryCount || 1,
|
||||||
},
|
retryDuration: self.retryDuration || 2,
|
||||||
// 开始上传
|
region: self.region,
|
||||||
onUploadstarted: function (uploadInfo) {
|
userId: self.userId,
|
||||||
self.uploading = true;
|
// 添加文件成功
|
||||||
// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
|
addFileSuccess: function (uploadInfo) {
|
||||||
// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
|
self.uploadDisabled = false;
|
||||||
// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
|
self.resumeDisabled = false;
|
||||||
// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
|
self.statusText = "添加视频成功, 等待上传...";
|
||||||
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
|
console.log("addFileSuccess: " + uploadInfo.file.name);
|
||||||
// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
|
},
|
||||||
uploader.setUploadAuthAndAddress(uploadInfo, self.uploadAuth.uploadAuth, self.uploadAuth.uploadAddress, self.uploadAuth.videoId)
|
// 开始上传
|
||||||
self.statusText = '视频开始上传...'
|
onUploadstarted: function (uploadInfo) {
|
||||||
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
|
self.uploading = true;
|
||||||
},
|
// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
|
||||||
// 文件上传成功
|
// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
|
||||||
onUploadSucceed: function (uploadInfo) {
|
// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
|
||||||
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
|
// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
|
||||||
self.statusText = '视频上传成功!'
|
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
|
||||||
|
// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
|
||||||
},
|
uploader.setUploadAuthAndAddress(
|
||||||
// 文件上传失败
|
uploadInfo,
|
||||||
onUploadFailed: function (uploadInfo, code, message) {
|
self.uploadAuth.uploadAuth,
|
||||||
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
|
self.uploadAuth.uploadAddress,
|
||||||
self.uploading = false;
|
self.uploadAuth.videoId
|
||||||
self.statusText = '视频上传失败!'
|
);
|
||||||
},
|
self.statusText = "视频开始上传...";
|
||||||
// 取消文件上传
|
console.log(
|
||||||
onUploadCanceled: function (uploadInfo, code, message) {
|
"onUploadStarted:" +
|
||||||
console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
|
uploadInfo.file.name +
|
||||||
self.statusText = '视频已暂停上传'
|
", endpoint:" +
|
||||||
},
|
uploadInfo.endpoint +
|
||||||
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
|
", bucket:" +
|
||||||
onUploadProgress: function (uploadInfo, totalSize, progress) {
|
uploadInfo.bucket +
|
||||||
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
|
", object:" +
|
||||||
let progressPercent = Math.ceil(progress * 100)
|
uploadInfo.object
|
||||||
self.authProgress = progressPercent
|
);
|
||||||
self.statusText = '视频上传中...'
|
},
|
||||||
},
|
// 文件上传成功
|
||||||
// 上传凭证超时
|
onUploadSucceed: function (uploadInfo) {
|
||||||
onUploadTokenExpired: function (uploadInfo) {
|
console.log(
|
||||||
// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
|
"onUploadSucceed: " +
|
||||||
// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
|
uploadInfo.file.name +
|
||||||
// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
|
", endpoint:" +
|
||||||
/*let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
|
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
|
||||||
|
);
|
||||||
|
self.uploading = false;
|
||||||
|
self.statusText = "视频上传失败!";
|
||||||
|
},
|
||||||
|
// 取消文件上传
|
||||||
|
onUploadCanceled: function (uploadInfo, code, message) {
|
||||||
|
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 = "视频上传中...";
|
||||||
|
},
|
||||||
|
// 上传凭证超时
|
||||||
|
onUploadTokenExpired: function (uploadInfo) {
|
||||||
|
// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
|
||||||
|
// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
|
||||||
|
// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
|
||||||
|
/*let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
|
||||||
axios.get(refreshUrl).then(({data}) => {
|
axios.get(refreshUrl).then(({data}) => {
|
||||||
let uploadAuth = data.UploadAuth
|
let uploadAuth = data.UploadAuth
|
||||||
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>
|
|
||||||
|
|||||||
@ -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"
|
||||||
@ -16,12 +22,12 @@
|
|||||||
clearable
|
clearable
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<el-option key="0" label="不展示" value="0"/>
|
<el-option key="0" label="不展示" value="0" />
|
||||||
<el-option key="1" label="展示" value="1"/>
|
<el-option key="1" label="展示" value="1" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="视频类别" prop="cateId">
|
<el-form-item label="视频类别" prop="cateId">
|
||||||
<!-- <el-select v-model="queryParams.cateId" clearable filterable placeholder="请选择类别">
|
<!-- <el-select v-model="queryParams.cateId" clearable filterable placeholder="请选择类别">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="classify in classifyList"
|
v-for="classify in classifyList"
|
||||||
:key="classify.id"
|
:key="classify.id"
|
||||||
@ -29,28 +35,41 @@
|
|||||||
:value="classify.id"
|
:value="classify.id"
|
||||||
/>
|
/>
|
||||||
</el-select>-->
|
</el-select>-->
|
||||||
<treeselect
|
<treeselect
|
||||||
v-model="queryParams.cateId"
|
v-model="queryParams.cateId"
|
||||||
:options="classifyList"
|
:options="classifyList"
|
||||||
:normalizer="normalizer"
|
:normalizer="normalizer"
|
||||||
:show-count="true"
|
:show-count="true"
|
||||||
placeholder="选择分类"
|
placeholder="选择分类"
|
||||||
style="width:200px"
|
style="width: 200px"
|
||||||
/>
|
/>
|
||||||
</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
|
||||||
<el-option
|
v-model="queryParams.payLevel"
|
||||||
v-for="dict in payVideoLevelList"
|
clearable
|
||||||
:key="dict.dictValue"
|
filterable
|
||||||
:label="dict.dictLabel"
|
placeholder="请选择权限"
|
||||||
:value="parseInt(dict.dictValue)"
|
>
|
||||||
/>
|
<el-option
|
||||||
</el-select>
|
v-for="dict in payVideoLevelList"
|
||||||
</el-form-item>
|
:key="dict.dictValue"
|
||||||
|
:label="dict.dictLabel"
|
||||||
|
:value="parseInt(dict.dictValue)"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</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,48 +126,80 @@
|
|||||||
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">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<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"
|
||||||
<template slot-scope="scope" >
|
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
|
<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,33 +210,34 @@
|
|||||||
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"
|
||||||
:page.sync="queryParams.pageNum"
|
:page.sync="queryParams.pageNum"
|
||||||
:limit.sync="queryParams.pageSize"
|
:limit.sync="queryParams.pageSize"
|
||||||
:pageSizes="[5,10,15,20]"
|
:pageSizes="[5, 10, 15, 20]"
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -189,27 +245,27 @@
|
|||||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
<el-form-item label="视频标题" prop="title">
|
<el-form-item label="视频标题" prop="title">
|
||||||
<el-input
|
<el-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="请输入视频标题"
|
placeholder="请输入视频标题"
|
||||||
v-model="form.title"
|
v-model="form.title"
|
||||||
maxlength="50"
|
maxlength="50"
|
||||||
rows="1"
|
rows="1"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="视频描述" prop="description">
|
<el-form-item label="视频描述" prop="description">
|
||||||
<el-input
|
<el-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="请输入视频描述"
|
placeholder="请输入视频描述"
|
||||||
v-model="form.description"
|
v-model="form.description"
|
||||||
maxlength="1000"
|
maxlength="1000"
|
||||||
rows="2"
|
rows="2"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div style="display:flex">
|
<div style="display: flex">
|
||||||
<el-form-item label="视频类别" prop="cateId" style="width:300px">
|
<el-form-item label="视频类别" prop="cateId" style="width: 300px">
|
||||||
<!--<el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
|
<!--<el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="classify in classifyList"
|
v-for="classify in classifyList"
|
||||||
@ -219,16 +275,25 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>-->
|
</el-select>-->
|
||||||
<treeselect
|
<treeselect
|
||||||
v-model="form.cateId"
|
v-model="form.cateId"
|
||||||
:options="classifyList"
|
:options="classifyList"
|
||||||
:normalizer="normalizer"
|
:normalizer="normalizer"
|
||||||
:show-count="true"
|
:show-count="true"
|
||||||
placeholder="选择分类"
|
placeholder="选择分类"
|
||||||
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"
|
||||||
@ -237,21 +302,41 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</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"
|
||||||
</el-form-item>
|
v-if="open"
|
||||||
<el-form-item label="展示状态" prop="wxShow">
|
:prefix="'videoCover'"
|
||||||
<el-switch
|
:coverUrl="form.previewUrl"
|
||||||
v-model="form.wxShow"
|
@callbackMethod="handleCoverUrl"
|
||||||
active-text="展示"
|
:tips="''"
|
||||||
inactive-text="不展示">
|
></UploadFile>
|
||||||
</el-switch>
|
<el-button
|
||||||
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
|
type="primary"
|
||||||
</el-form-item>
|
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="不展示"
|
||||||
|
>
|
||||||
|
</el-switch>
|
||||||
|
<div style="color: red">
|
||||||
|
提示：开启展示之后客户可看到该视频，请保证内容正确再展示
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
<el-button @click="cancel">取 消</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
||||||
@ -261,281 +346,309 @@
|
|||||||
<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>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 手动选择封面 -->
|
<!-- 手动选择封面 -->
|
||||||
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
|
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listNutritionalVideo, getNutritionalVideo, delNutritionalVideo, addNutritionalVideo, updateNutritionalVideo, exportNutritionalVideo, updateWxShow,getVideoPlayUrlById } from "@/api/custom/nutritionalVideo";
|
import {
|
||||||
import {getAllClassify } from "@/api/custom/videoClassify";
|
listNutritionalVideo,
|
||||||
import UploadVideo from "@/components/UploadVideo";
|
getNutritionalVideo,
|
||||||
import UploadFile from "@/components/FileUpload/UploadFile";
|
delNutritionalVideo,
|
||||||
import VideoClassify from "../videoClassify";
|
addNutritionalVideo,
|
||||||
import AutoHideMessage from "@/components/AutoHideMessage";
|
updateNutritionalVideo,
|
||||||
import Treeselect from "@riophae/vue-treeselect";
|
exportNutritionalVideo,
|
||||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
updateWxShow,
|
||||||
import IconSelect from "@/components/IconSelect";
|
getVideoPlayUrlById,
|
||||||
import VideoSelectCover from "@/components/VideoSelectCover";
|
} from "@/api/custom/nutritionalVideo";
|
||||||
export default {
|
import { getAllClassify } from "@/api/custom/videoClassify";
|
||||||
name: "NutritionalVideo",
|
import UploadVideo from "@/components/UploadVideo";
|
||||||
data() {
|
import UploadFile from "@/components/FileUpload/UploadFile";
|
||||||
|
import VideoClassify from "../videoClassify";
|
||||||
|
import AutoHideMessage from "@/components/AutoHideMessage";
|
||||||
|
import Treeselect from "@riophae/vue-treeselect";
|
||||||
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||||
|
import IconSelect from "@/components/IconSelect";
|
||||||
|
import VideoSelectCover from "@/components/VideoSelectCover";
|
||||||
|
export default {
|
||||||
|
name: "NutritionalVideo",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 营养视频表格数据
|
||||||
|
nutritionalVideoList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
key: null,
|
||||||
|
showFlag: null,
|
||||||
|
cateId: null,
|
||||||
|
payLevel: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
|
||||||
|
cateId: [
|
||||||
|
{ required: true, message: "视频类别不能为空", trigger: "blur" },
|
||||||
|
],
|
||||||
|
payLevel: [
|
||||||
|
{ required: true, message: "视频权限不能为空", trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
coverImageList: [],
|
||||||
|
//分类列表
|
||||||
|
classifyList: [],
|
||||||
|
//所有分类
|
||||||
|
allClassifyList: [],
|
||||||
|
//权限等级列表
|
||||||
|
payVideoLevelList: [],
|
||||||
|
//视频分类弹窗显示标识
|
||||||
|
videoClassifyOpen: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
this.getAllVideoClassify();
|
||||||
|
this.getDicts("video_pay_level").then((response) => {
|
||||||
|
this.payVideoLevelList = response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
UploadVideo,
|
||||||
|
UploadFile,
|
||||||
|
VideoClassify,
|
||||||
|
AutoHideMessage,
|
||||||
|
Treeselect,
|
||||||
|
IconSelect,
|
||||||
|
VideoSelectCover,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询营养视频列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listNutritionalVideo(this.queryParams).then((response) => {
|
||||||
|
response.rows.forEach((element) => {
|
||||||
|
element.wxShow = element.showFlag == 1 ? true : false;
|
||||||
|
});
|
||||||
|
this.nutritionalVideoList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取所有分类
|
||||||
|
getAllVideoClassify() {
|
||||||
|
getAllClassify().then((response) => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.allClassifyList = response.data;
|
||||||
|
this.classifyList = [];
|
||||||
|
const classify = { id: 0, cateName: "主分类", children: [] };
|
||||||
|
classify.children = this.handleTree(response.data, "id");
|
||||||
|
this.classifyList.push(classify);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: null,
|
||||||
|
videoId: null,
|
||||||
|
cateId: null,
|
||||||
|
coverUrl: null,
|
||||||
|
title: null,
|
||||||
|
description: null,
|
||||||
|
tags: null,
|
||||||
|
payLevel: null,
|
||||||
|
showFlag: null,
|
||||||
|
wxShow: false,
|
||||||
|
previewUrl: null,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
selectVideoCover() {
|
||||||
|
this.$refs.videoSelectCoverRef.showDialog(this.form, (url) => {
|
||||||
|
//console.log(url);
|
||||||
|
this.form.previewUrl = url;
|
||||||
|
this.form.coverUrl = url;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map((item) => item.id);
|
||||||
|
this.single = selection.length !== 1;
|
||||||
|
this.multiple = !selection.length;
|
||||||
|
},
|
||||||
|
clickUploadVideo() {
|
||||||
|
this.$refs.uploadVideoRef.showDialog(this.allClassifyList, () => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleVideoClassify() {
|
||||||
|
this.videoClassifyOpen = true;
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加营养视频";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
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;
|
||||||
|
this.title = "修改营养视频";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取播放地址
|
||||||
|
getVideoPlayUrl(id) {
|
||||||
|
getVideoPlayUrlById(id).then((response) => {
|
||||||
|
let url = response.data.playUrl;
|
||||||
|
if (url != undefined && url != null) {
|
||||||
|
window.open(url, "_blank");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 转换菜单数据结构 */
|
||||||
|
normalizer(node) {
|
||||||
|
if (node.children && !node.children.length) {
|
||||||
|
delete node.children;
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
// 遮罩层
|
id: node.id,
|
||||||
loading: true,
|
label: node.cateName,
|
||||||
// 选中数组
|
children: node.children,
|
||||||
ids: [],
|
|
||||||
// 非单个禁用
|
|
||||||
single: true,
|
|
||||||
// 非多个禁用
|
|
||||||
multiple: true,
|
|
||||||
// 显示搜索条件
|
|
||||||
showSearch: true,
|
|
||||||
// 总条数
|
|
||||||
total: 0,
|
|
||||||
// 营养视频表格数据
|
|
||||||
nutritionalVideoList: [],
|
|
||||||
// 弹出层标题
|
|
||||||
title: "",
|
|
||||||
// 是否显示弹出层
|
|
||||||
open: false,
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 5,
|
|
||||||
key: null,
|
|
||||||
showFlag: null,
|
|
||||||
cateId: null,
|
|
||||||
payLevel: null
|
|
||||||
},
|
|
||||||
// 表单参数
|
|
||||||
form: {},
|
|
||||||
// 表单校验
|
|
||||||
rules: {
|
|
||||||
title: [
|
|
||||||
{ required: true, message: "标题不能为空", trigger: "blur" },
|
|
||||||
],
|
|
||||||
cateId:[
|
|
||||||
{ required: true, message: "视频类别不能为空", trigger: "blur" },
|
|
||||||
],
|
|
||||||
payLevel:[
|
|
||||||
{ required: true, message: "视频权限不能为空", trigger: "blur" },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
coverImageList:[],
|
|
||||||
//分类列表
|
|
||||||
classifyList:[],
|
|
||||||
//所有分类
|
|
||||||
allClassifyList:[],
|
|
||||||
//权限等级列表
|
|
||||||
payVideoLevelList:[],
|
|
||||||
//视频分类弹窗显示标识
|
|
||||||
videoClassifyOpen:false
|
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
/** 提交按钮 */
|
||||||
this.getList();
|
submitForm() {
|
||||||
this.getAllVideoClassify();
|
this.$refs["form"].validate((valid) => {
|
||||||
this.getDicts("video_pay_level").then((response) => {
|
if (valid) {
|
||||||
this.payVideoLevelList = response.data;
|
this.form.showFlag = this.form.wxShow ? 1 : 0;
|
||||||
});
|
//视频分类不能选择主分类
|
||||||
},
|
if (this.form.cateId == 0) {
|
||||||
components: {
|
this.$message({
|
||||||
UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect,VideoSelectCover
|
message: "视频分类不能选择主分类",
|
||||||
},
|
type: "warning",
|
||||||
methods: {
|
|
||||||
/** 查询营养视频列表 */
|
|
||||||
getList() {
|
|
||||||
this.loading = true;
|
|
||||||
listNutritionalVideo(this.queryParams).then(response => {
|
|
||||||
response.rows.forEach(element => {
|
|
||||||
element.wxShow = element.showFlag == 1 ? true : false;
|
|
||||||
});
|
|
||||||
this.nutritionalVideoList = response.rows;
|
|
||||||
this.total = response.total;
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//获取所有分类
|
|
||||||
getAllVideoClassify(){
|
|
||||||
getAllClassify().then(response => {
|
|
||||||
if(response.code == 200){
|
|
||||||
this.allClassifyList = response.data;
|
|
||||||
this.classifyList = [];
|
|
||||||
const classify = { id: 0, cateName: '主分类', children: [] };
|
|
||||||
classify.children = this.handleTree(response.data, "id");
|
|
||||||
this.classifyList.push(classify);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 取消按钮
|
|
||||||
cancel() {
|
|
||||||
this.open = false;
|
|
||||||
this.reset();
|
|
||||||
},
|
|
||||||
// 表单重置
|
|
||||||
reset() {
|
|
||||||
this.form = {
|
|
||||||
id: null,
|
|
||||||
videoId:null,
|
|
||||||
cateId: null,
|
|
||||||
coverUrl: null,
|
|
||||||
title: null,
|
|
||||||
description: null,
|
|
||||||
tags: null,
|
|
||||||
payLevel:null,
|
|
||||||
showFlag: null,
|
|
||||||
wxShow: false,
|
|
||||||
previewUrl: null
|
|
||||||
};
|
|
||||||
this.resetForm("form");
|
|
||||||
},
|
|
||||||
selectVideoCover(){
|
|
||||||
this.$refs.videoSelectCoverRef.showDialog(this.form,(url)=>{
|
|
||||||
//console.log(url);
|
|
||||||
this.form.previewUrl = url;
|
|
||||||
this.form.coverUrl = url;
|
|
||||||
});
|
});
|
||||||
},
|
return;
|
||||||
/** 搜索按钮操作 */
|
}
|
||||||
handleQuery() {
|
if (this.form.id != null) {
|
||||||
this.queryParams.pageNum = 1;
|
updateNutritionalVideo(this.form).then((response) => {
|
||||||
this.getList();
|
if (response.code === 200) {
|
||||||
},
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
resetQuery() {
|
|
||||||
this.resetForm("queryForm");
|
|
||||||
this.handleQuery();
|
|
||||||
},
|
|
||||||
// 多选框选中数据
|
|
||||||
handleSelectionChange(selection) {
|
|
||||||
this.ids = selection.map(item => item.id)
|
|
||||||
this.single = selection.length!==1
|
|
||||||
this.multiple = !selection.length
|
|
||||||
},
|
|
||||||
clickUploadVideo(){
|
|
||||||
this.$refs.uploadVideoRef.showDialog(this.allClassifyList, ()=>{
|
|
||||||
this.getList();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleVideoClassify(){
|
|
||||||
this.videoClassifyOpen = true;
|
|
||||||
},
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
handleAdd() {
|
|
||||||
this.reset();
|
|
||||||
this.open = true;
|
|
||||||
this.title = "添加营养视频";
|
|
||||||
},
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
handleUpdate(row) {
|
|
||||||
this.reset();
|
|
||||||
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;
|
|
||||||
this.title = "修改营养视频";
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//获取播放地址
|
|
||||||
getVideoPlayUrl(id){
|
|
||||||
getVideoPlayUrlById(id).then(response => {
|
|
||||||
let url = response.data.playUrl;
|
|
||||||
if(url != undefined && url != null){
|
|
||||||
window.open(url, '_blank');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 转换菜单数据结构 */
|
|
||||||
normalizer(node) {
|
|
||||||
if (node.children && !node.children.length) {
|
|
||||||
delete node.children;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
id: node.id,
|
|
||||||
label: node.cateName,
|
|
||||||
children: node.children
|
|
||||||
};
|
|
||||||
},
|
|
||||||
/** 提交按钮 */
|
|
||||||
submitForm() {
|
|
||||||
this.$refs["form"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
this.form.showFlag = this.form.wxShow ? 1 : 0;
|
|
||||||
//视频分类不能选择主分类
|
|
||||||
if(this.form.cateId == 0){
|
|
||||||
this.$message({
|
|
||||||
message: "视频分类不能选择主分类",
|
|
||||||
type: "warning",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.form.id != null) {
|
|
||||||
updateNutritionalVideo(this.form).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} 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;
|
||||||
this.getList();
|
this.getList();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
},
|
});
|
||||||
handleWxShow(newWxshow, row){
|
},
|
||||||
let param = {
|
handleWxShow(newWxshow, row) {
|
||||||
id: row.id,
|
let param = {
|
||||||
showFlag: newWxshow ? 1 : 0
|
id: row.id,
|
||||||
};
|
showFlag: newWxshow ? 1 : 0,
|
||||||
updateWxShow(param);
|
};
|
||||||
},
|
updateWxShow(param);
|
||||||
handleCoverUrl(url){
|
},
|
||||||
this.form.coverUrl = url;
|
handleCoverUrl(url) {
|
||||||
console.log(this.form.coverUrl);
|
this.form.coverUrl = url;
|
||||||
},
|
console.log(this.form.coverUrl);
|
||||||
/** 删除按钮操作 */
|
},
|
||||||
handleDelete(row) {
|
/** 删除按钮操作 */
|
||||||
const ids = row.id || this.ids;
|
handleDelete(row) {
|
||||||
this.$confirm('是否确认删除营养视频编号为"' + ids + '"的数据项?', "警告", {
|
const ids = row.id || this.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() {
|
/** 导出按钮操作 */
|
||||||
const queryParams = this.queryParams;
|
handleExport() {
|
||||||
this.$confirm('是否确认导出所有营养视频数据项?', "警告", {
|
const queryParams = this.queryParams;
|
||||||
confirmButtonText: "确定",
|
this.$confirm("是否确认导出所有营养视频数据项?", "警告", {
|
||||||
cancelButtonText: "取消",
|
confirmButtonText: "确定",
|
||||||
type: "warning"
|
cancelButtonText: "取消",
|
||||||
}).then(function() {
|
type: "warning",
|
||||||
|
})
|
||||||
|
.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>
|
||||||
|
|||||||
Reference in New Issue
Block a user