视频功能

stdiet-ui/src/api/custom/nutritionalVideo.js

@@ -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
+  })
+}

stdiet-ui/src/components/UploadVideo/index.vue

@@ -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>

stdiet-ui/src/views/custom/nutritionalVideo/index.vue

@@ -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>