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

Merge branch 'master' of gitee.com:darlk/ShengTangManage into develop

Browse Source
This commit is contained in:
huangdeliang 2021-04-29 20:59:54 +08:00
commit a7238b5b88
12 changed files with 763 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysNutritionalVideoController.java
View File

@ -1,24 +1,20 @@
package com.stdiet.web.controller.custom;
import java.util.ArrayList;
import java.util.List;
import com.aliyun.vod20170321.models.CreateUploadVideoResponse;
import com.aliyun.vod20170321.models.GetVideoListResponseBody;
import com.stdiet.common.utils.AliyunVideoUtils;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.*;
import com.stdiet.common.annotation.Log;
import com.stdiet.common.core.controller.BaseController;
import com.stdiet.common.core.domain.AjaxResult;
import com.stdiet.common.enums.BusinessType;
import com.stdiet.custom.domain.SysNutritionalVideo;
import com.stdiet.custom.service.ISysNutritionalVideoService;
import com.stdiet.common.utils.poi.ExcelUtil;
import com.stdiet.common.core.page.TableDataInfo;
/**
* 营养视频Controller
@ -38,24 +34,32 @@ public class SysNutritionalVideoController extends BaseController
*/
@PreAuthorize("@ss.hasPermi('custom:nutritionalVideo:list')")
@GetMapping("/list")
public TableDataInfo list(SysNutritionalVideo sysNutritionalVideo)
public AjaxResult list(SysNutritionalVideo sysNutritionalVideo, @RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "5")int pageSize)
{
startPage();
List<SysNutritionalVideo> list = sysNutritionalVideoService.selectSysNutritionalVideoList(sysNutritionalVideo);
return getDataTable(list);
AjaxResult result = AjaxResult.success();
int total = 0;
List<SysNutritionalVideo> nutritionalVideoList = new ArrayList<>();
try{
GetVideoListResponseBody videoListResponseBody = AliyunVideoUtils.getVideoListByPage(null, "Normal,Blocked", pageNum, pageSize);
if(videoListResponseBody != null){
total = videoListResponseBody.total;
for (GetVideoListResponseBody.GetVideoListResponseBodyVideoListVideo video : videoListResponseBody.videoList.video) {
SysNutritionalVideo nutritionalVideo = new SysNutritionalVideo();
nutritionalVideo.setCoverUrl(video.getCoverURL());
nutritionalVideo.setTitle(video.getTitle());
nutritionalVideo.setVideoId(video.getVideoId());
nutritionalVideo.setDescription(video.getDescription());
nutritionalVideo.setTags(video.getTags());
nutritionalVideoList.add(nutritionalVideo);
nutritionalVideo.setShowFlag("Normal".equals(video.getStatus()) ? 1 : 0);
}
/**
* 导出营养视频列表
*/
@PreAuthorize("@ss.hasPermi('custom:nutritionalVideo:export')")
@Log(title = "营养视频", businessType = BusinessType.EXPORT)
@GetMapping("/export")
public AjaxResult export(SysNutritionalVideo sysNutritionalVideo)
{
List<SysNutritionalVideo> list = sysNutritionalVideoService.selectSysNutritionalVideoList(sysNutritionalVideo);
ExcelUtil<SysNutritionalVideo> util = new ExcelUtil<SysNutritionalVideo>(SysNutritionalVideo.class);
return util.exportExcel(list, "nutritionalVideo");
}
}catch (Exception e){
e.printStackTrace();
}
result.put("total",total);
result.put("rows", nutritionalVideoList);
return result;
}
/**
@ -79,6 +83,27 @@ public class SysNutritionalVideoController extends BaseController
return toAjax(sysNutritionalVideoService.insertSysNutritionalVideo(sysNutritionalVideo));
}
/**
* 获取视频上传凭证
*/
@PreAuthorize("@ss.hasPermi('custom:nutritionalVideo:add')")
@Log(title = "获取视频上传凭证", businessType = BusinessType.INSERT)
@PostMapping("/getUploadVideoAuth")
public AjaxResult getUploadVideoAuth(@RequestBody SysNutritionalVideo sysNutritionalVideo)
{
AjaxResult result = AjaxResult.error();
try {
CreateUploadVideoResponse response = AliyunVideoUtils.createUploadVideoRequest(sysNutritionalVideo.getCateId(), sysNutritionalVideo.getFileName(), sysNutritionalVideo.getTitle(), sysNutritionalVideo.getCoverUrl(), sysNutritionalVideo.getTags(), sysNutritionalVideo.getDescription());
if(response != null){
result = AjaxResult.success();
result.put("uploadAuth", response.body);
}
}catch (Exception e){
e.printStackTrace();
}
return result;
}
/**
* 修改营养视频
*/

46
stdiet-admin/src/main/java/com/stdiet/web/controller/custom/WechatAppletController.java
View File

@ -355,40 +355,33 @@ public class WechatAppletController extends BaseController {
}
/**
* 更新用户通知消息已读状态
* 获取视频列表
*/
@GetMapping(value = "/getVideoList")
public TableDataInfo getVideoList(SysNutritionalVideo sysNutritionalVideo) {
public AjaxResult getVideoList(SysNutritionalVideo sysNutritionalVideo, @RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "5")int pageSize) {
AjaxResult result = AjaxResult.success();
startPage();
//int total = 0;
//List<NutritionalVideoResponse> nutritionalVideoList = new ArrayList<>();
try {
/**GetVideoListResponseBody videoListResponseBody = AliyunVideoUtils.getVideoListByPage(null, "Normal", 1, 10);
int total = 0;
List<NutritionalVideoResponse> nutritionalVideoList = new ArrayList<>();
try{
GetVideoListResponseBody videoListResponseBody = AliyunVideoUtils.getVideoListByPage(null, "Normal", pageNum, pageSize);
if(videoListResponseBody != null){
total = videoListResponseBody.total;
for (GetVideoListResponseBody.GetVideoListResponseBodyVideoListVideo video : videoListResponseBody.videoList.video) {
NutritionalVideoResponse nutritionalVideoResponse = new NutritionalVideoResponse();
nutritionalVideoResponse.setCoverURL(video.getCoverURL());
nutritionalVideoResponse.setCoverUrl(video.getCoverURL());
nutritionalVideoResponse.setTitle(video.getTitle());
nutritionalVideoResponse.setVideoId(video.getVideoId());
nutritionalVideoResponse.setDescription(video.getDescription());
nutritionalVideoResponse.setTags(video.getTags());
nutritionalVideoList.add(nutritionalVideoResponse);
System.out.println(video.getVideoId());
System.out.println(video.getCoverURL());
System.out.println(video.getTitle());
System.out.println(video.getDescription());
}
}
System.out.println();**/
sysNutritionalVideo.setShowFlag(1);
List<SysNutritionalVideo> list = sysNutritionalVideoService.selectSysNutritionalVideoList(sysNutritionalVideo);
return getDataTable(list);
} catch (Exception e) {
}catch (Exception e){
e.printStackTrace();
}
return null;
result.put("total",total);
result.put("rows", nutritionalVideoList);
return result;
}
@ -399,21 +392,18 @@ public class WechatAppletController extends BaseController {
public AjaxResult getVideoDetailById(@RequestParam(value = "videoId") String videoId) {
AjaxResult result = AjaxResult.success();
NutritionalVideoResponse nutritionalVideoResponse = new NutritionalVideoResponse();
try {
SysNutritionalVideo sysNutritionalVideo = sysNutritionalVideoService.selectSysNutritionalVideByVideoId(videoId);
if (sysNutritionalVideo != null) {
try{
GetPlayInfoResponseBody playInfoResponseBody = AliyunVideoUtils.getVideoVisitDetail(videoId);
//GetVideoInfoResponseBody videoInfoResponseBody = AliyunVideoUtils.getVideoById(videoId);
GetVideoInfoResponseBody videoInfoResponseBody = AliyunVideoUtils.getVideoById(videoId);
List<GetPlayInfoResponseBody.GetPlayInfoResponseBodyPlayInfoListPlayInfo> playList = playInfoResponseBody.playInfoList.playInfo;
if (playList != null && playList.size() > 0) {
nutritionalVideoResponse.setPlayUrl(playList.get(0).getPlayURL());
}
nutritionalVideoResponse.setDescription(sysNutritionalVideo.getDescription());
nutritionalVideoResponse.setTags(sysNutritionalVideo.getTags());
nutritionalVideoResponse.setTitle(sysNutritionalVideo.getTitle());
nutritionalVideoResponse.setCreateTime(DateUtils.dateTime(sysNutritionalVideo.getCreateTime()));
}
} catch (Exception e) {
nutritionalVideoResponse.setDescription(videoInfoResponseBody.video.getDescription());
nutritionalVideoResponse.setTags(videoInfoResponseBody.video.getTags());
nutritionalVideoResponse.setTitle(videoInfoResponseBody.video.getTitle());
//nutritionalVideoResponse.setCreateTime(sysNutritionalVideo.getCreateTime() == null ? "" : DateUtils.dateTime(sysNutritionalVideo.getCreateTime()));
}catch (Exception e){
e.printStackTrace();
}
result.put("videoDetail", nutritionalVideoResponse);

5
stdiet-common/src/main/java/com/stdiet/common/utils/AliyunVideoUtils.java
View File

@ -3,7 +3,6 @@ package com.stdiet.common.utils;
import com.aliyun.vod20170321.models.*;
import com.aliyun.teaopenapi.models.*;
import com.stdiet.common.config.AliyunOSSConfig;
import org.apache.commons.collections4.Get;
public class AliyunVideoUtils {
@ -17,6 +16,9 @@ public class AliyunVideoUtils {
public static final String default_formats = "mp4";
//播放地址日期，30天
public static final Long default_authTimeout = 2592000L;
/**
* 初始化视频点播Client
* @return
@ -70,6 +72,7 @@ public class AliyunVideoUtils {
com.aliyun.vod20170321.Client client = AliyunVideoUtils.createClient();
GetPlayInfoRequest getPlayInfoRequest = new GetPlayInfoRequest()
.setVideoId(videoId)
.setAuthTimeout(default_authTimeout)
.setStreamType(default_stream_type)
.setOutputType(default_output_type)
.setFormats(default_formats);

3
stdiet-custom/src/main/java/com/stdiet/custom/domain/SysNutritionalVideo.java
View File

@ -52,4 +52,7 @@ public class SysNutritionalVideo extends BaseEntity
/** 删除标识，0未删除 1已删除，默认0 */
private Integer delFlag;
//文件名称
private String fileName;
}

2
stdiet-custom/src/main/java/com/stdiet/custom/dto/response/NutritionalVideoResponse.java
View File

@ -25,7 +25,7 @@ public class NutritionalVideoResponse implements Serializable {
public String videoId;
//封面URL
public String coverURL;
public String coverUrl;
//视频描述
public String description;

20
stdiet-ui/lib/aliyunVideo/aliyun-oss-sdk-6.13.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
stdiet-ui/lib/aliyunVideo/aliyun-upload-sdk-1.5.2.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
stdiet-ui/lib/aliyunVideo/es6-promise.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
stdiet-ui/public/index.html
View File

@ -13,6 +13,10 @@
rel="stylesheet"
href="//at.alicdn.com/t/font_2343184_w0runuauamq.css"
/>
<script src="/lib/aliyunVideo/es6-promise.min.js"></script>
<script src="/lib/aliyunVideo/aliyun-oss-sdk-6.13.0.min.js"></script>
<script src="/lib/aliyunVideo/aliyun-upload-sdk-1.5.2.min.js"></script>
<title><%= webpackConfig.name %></title>
<style>
html,

62
stdiet-ui/src/api/custom/nutritionalVideo.js Normal file
View File

@ -0,0 +1,62 @@
import request from '@/utils/request'
// 查询营养视频列表
export function listNutritionalVideo(query) {
return request({
url: '/custom/nutritionalVideo/list',
method: 'get',
params: query
})
}
// 查询营养视频详细
export function getNutritionalVideo(id) {
return request({
url: '/custom/nutritionalVideo/' + id,
method: 'get'
})
}
// 新增营养视频
export function addNutritionalVideo(data) {
return request({
url: '/custom/nutritionalVideo',
method: 'post',
data: data
})
}
// 修改营养视频
export function updateNutritionalVideo(data) {
return request({
url: '/custom/nutritionalVideo',
method: 'put',
data: data
})
}
// 删除营养视频
export function delNutritionalVideo(id) {
return request({
url: '/custom/nutritionalVideo/' + id,
method: 'delete'
})
}
// 导出营养视频
export function exportNutritionalVideo(query) {
return request({
url: '/custom/nutritionalVideo/export',
method: 'get',
params: query
})
}
// 获取上传凭证
export function getUploadVideoAuth(data) {
return request({
url: '/custom/nutritionalVideo/getUploadVideoAuth',
method: 'post',
data: data
})
}

271
stdiet-ui/src/components/UploadVideo/index.vue Normal file
View File

@ -0,0 +1,271 @@
<template>
<el-dialog title="视频上传" v-if="open" :visible.sync="open" width="700px" :close-on-click-modal="false" :show-close="false" append-to-body>
<el-form ref="videoFrom" :model="videoFrom" :rules="videoRules" label-width="80px">
<el-form-item label="视频标题" prop="title">
<el-input
type="textarea"
placeholder="请输入视频标题"
v-model="videoFrom.title"
maxlength="50"
rows="3"
show-word-limit
/>
</el-form-item>
<el-form-item label="视频描述" prop="description">
<el-input
type="textarea"
placeholder="请输入视频描述"
v-model="videoFrom.description"
maxlength="2000"
rows="10"
show-word-limit
/>
</el-form-item>
<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 > 1、只能上传mp4文件，上传大文件时请使用客户端上传，防止上传超时</div>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="authUpload" :disabled="uploadDisabled">开始上传</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import axios from 'axios'
import {getUploadVideoAuth } from "@/api/custom/nutritionalVideo";
export default {
name: "UploadVideo",
data () {
return {
open: false,
videoFrom:{},
videoRules:{},
callback: null,
uploadAuth:{
},
videoFileList:[],
timeout: '',
partSize: '',
parallel: '',
retryCount: '',
retryDuration: '',
region: 'cn-shenzhen',
userId: '1808303706021362',
file: null,
authProgress: 0,
uploadDisabled: true,
resumeDisabled: true,
pauseDisabled: true,
uploader: null,
statusText: '',
fileType:['mp4'],
uploading: false
}
},
methods: {
showDialog(callback){
this.resetVideoFrom();
this.open = true;
this.callback = callback;
},
resetVideoFrom(){
this.videoFrom = {
cateId: null,
coverUrl: null,
title: null,
description: null,
tags: null,
};
this.authProgress = 0;
this.file = null;
this.videoFileList = [];
this.uploadAuth = {};
this.uploadDisabled = true;
this.uploader = null;
this.statusText = '';
this.uploading = false;
this.resetForm("videoFrom");
},
submitVideoForm(){
},
cancel(){
if(this.uploading){
this.$message({
message: "文件正在上传，请勿取消",
type: "warning",
});
return;
}
this.open = false;
this.resetVideoFrom();
},
fileChange (e) {
if(this.videoFrom.title == null || this.videoFrom.title.trim().length == 0){
this.$message({
message: "标题不能为空",
type: "warning",
});
return;
}
if(this.uploading){
this.$message({
message: "文件正在上传，请勿取消",
type: "warning",
});
return;
}
this.file = e.target.files[0];
var userData = '{"Vod":{}}'
/**if (this.uploader) {
this.uploader.stopUpload()
this.authProgress = 0
this.statusText = ""
}**/
this.videoFrom.fileName = this.file.name;
if(this.videoFrom.fileName == null || this.videoFrom.fileName.length == 0 || this.videoFrom.fileName.lastIndexOf(".") == -1){
this.$message({
message: "当前文件名称错误",
type: "warning",
});
return;
}
let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
if(this.fileType.indexOf(fileType) == -1){
this.$message({
message: "当前文件格式错误",
type: "warning",
});
return;
}
getUploadVideoAuth(this.videoFrom).then(response => {
if(response.code == 200){
this.uploadAuth = response.uploadAuth;
this.uploader = this.createUploader()
this.uploader.addFile(this.file, null, null, null, userData)
this.uploadDisabled = false
this.pauseDisabled = true
this.resumeDisabled = true
}
})
},
authUpload () {
// 然后调用 startUpload 方法, 开始上传
if (this.uploader !== null) {
this.uploader.startUpload()
this.uploadDisabled = true
this.pauseDisabled = false
}
},
// 暂停上传
pauseUpload () {
if (this.uploader !== null) {
this.uploader.stopUpload()
this.resumeDisabled = false
this.pauseDisabled = true
}
},
// 恢复上传
resumeUpload () {
if (this.uploader !== null) {
this.uploader.startUpload()
this.resumeDisabled = true
this.pauseDisabled = false
}
},
createUploader (type) {
let self = this
let uploader = new AliyunUpload.Vod({
timeout: self.timeout || 60000,
partSize: self.partSize || 1048576,
parallel: self.parallel || 5,
retryCount: self.retryCount || 1,
retryDuration: self.retryDuration || 2,
region: self.region,
userId: self.userId,
// 添加文件成功
addFileSuccess: function (uploadInfo) {
self.uploadDisabled = false
self.resumeDisabled = false
self.statusText = '添加文件成功, 等待上传...'
console.log("addFileSuccess: " + uploadInfo.file.name)
},
// 开始上传
onUploadstarted: function (uploadInfo) {
self.uploading = true;
// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
uploader.setUploadAuthAndAddress(uploadInfo, self.uploadAuth.uploadAuth, self.uploadAuth.uploadAddress, self.uploadAuth.videoId)
self.statusText = '文件开始上传...'
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
self.statusText = '文件上传成功!'
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
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}) => {
let uploadAuth = data.UploadAuth
uploader.resumeUploadWithAuth(uploadAuth)
console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
})*/
self.statusText = '文件上传超时...';
self.uploading = false;
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
self.statusText = '文件上传完毕'
self.uploading = false;
self.msgSuccess("上传成功");
self.open = false;
self.callback && self.callback();
}
})
return uploader
}
}
}
</script>

309
stdiet-ui/src/views/custom/nutritionalVideo/index.vue Normal file
View File

@ -0,0 +1,309 @@
<template>
<div class="app-container">
<!--<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>-->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="clickUploadVideo"
v-hasPermi="['custom:nutritionalVideo:add']"
>视频上传</el-button>
</el-col>
<!--<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['custom:nutritionalVideo:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['custom:nutritionalVideo:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['custom:nutritionalVideo:export']"
>导出</el-button>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="nutritionalVideoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!--<el-table-column label="视频分类ID" align="center" prop="cateId" />-->
<el-table-column label="封面" align="center" prop="coverUrl">
<template slot-scope="scope">
<el-image title="点击大图预览"
style="width: 200px; height: 200px"
:src="scope.row.coverUrl"
:preview-src-list="coverImageList">
</el-image>
</template>
</el-table-column>
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="描述" align="center" prop="description" />
<el-table-column label="标签" align="center" prop="tags" />
<el-table-column label="显示状态" align="center" prop="showFlag">
<template slot-scope="scope">
{{scope.row.showFlag == 1 ? '正常' : '屏蔽'}}
</template>
</el-table-column>
<!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['custom:nutritionalVideo:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['custom:nutritionalVideo:remove']"
>删除</el-button>
</template>
</el-table-column>-->
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:pageSizes="[5,10,15,20]"
@pagination="getList"
/>
<!-- 添加或修改营养视频对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="视频分类ID" prop="cateId">
<el-input v-model="form.cateId" placeholder="请输入视频分类ID" />
</el-form-item>
<el-form-item label="阿里云视频ID" prop="videoId">
<el-input v-model="form.videoId" placeholder="请输入阿里云视频ID" />
</el-form-item>
<el-form-item label="视频封面URL" prop="coverUrl">
<el-input v-model="form.coverUrl" placeholder="请输入视频封面URL" />
</el-form-item>
<el-form-item label="视频标题" prop="title">
<el-input v-model="form.title" placeholder="请输入视频标题" />
</el-form-item>
<el-form-item label="视频描述" prop="description">
<el-input v-model="form.description" placeholder="请输入视频描述" />
</el-form-item>
<el-form-item label="视频大小，单位：字节" prop="videoSize">
<el-input v-model="form.videoSize" placeholder="请输入视频大小，单位：字节" />
</el-form-item>
<el-form-item label="标签，使用 , 隔开" prop="tags">
<el-input v-model="form.tags" placeholder="请输入标签，使用 , 隔开" />
</el-form-item>
<el-form-item label="是否显示，0不显示 1显示，默认0" prop="showFlag">
<el-input v-model="form.showFlag" placeholder="请输入是否显示，0不显示 1显示，默认0" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<UploadVideo ref="uploadVideoRef"></UploadVideo>
</div>
</template>
<script>
import { listNutritionalVideo, getNutritionalVideo, delNutritionalVideo, addNutritionalVideo, updateNutritionalVideo, exportNutritionalVideo,getUploadVideoAuth } from "@/api/custom/nutritionalVideo";
import UploadVideo from "@/components/UploadVideo";
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,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
coverImageList:[]
};
},
created() {
this.getList();
},
components: {
UploadVideo
},
methods: {
/** 查询营养视频列表 */
getList() {
this.loading = true;
listNutritionalVideo(this.queryParams).then(response => {
this.nutritionalVideoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
cateId: null,
videoId: null,
coverUrl: null,
title: null,
description: null,
videoSize: null,
tags: null,
showFlag: null,
createTime: null,
createBy: null,
updateTime: null,
updateBy: null,
delFlag: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
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.getList();
});
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加营养视频";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getNutritionalVideo(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改营养视频";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateNutritionalVideo(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addNutritionalVideo(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除营养视频编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delNutritionalVideo(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function() {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有营养视频数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportNutritionalVideo(queryParams);
}).then(response => {
this.download(response.msg);
}).catch(function() {});
}
}
};
</script>