添加排序功能

stdiet-admin/src/main/filters/dev/application.yml

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

stdiet-admin/src/main/filters/local/application.yml

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

stdiet-admin/src/main/filters/prod/application.yml

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

stdiet-custom/src/main/resources/mapper/custom/SysVideoClassifyMapper.xml

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

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

@@ -1,136 +1,197 @@
 <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 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>
-      <!-- 手动选择封面 -->
+      <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>
 <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){
               this.classifyList = response.data;
               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();
-                        }
-                    })
-              }
-          });
 
-        },
+    fileChange(e) {
-        selectVideoCover(){
+      this.$refs["videoFrom"].validate((valid) => {
-            this.$refs.videoSelectCoverRef.showDialog(this.videoFrom,(url)=>{
+        if (valid) {
-               //console.log(url);
+          if (this.uploading) {
-               this.videoFrom.previewUrl = url;
+            this.$message({
-               this.videoFrom.coverUrl = url;
+              message: "视频正在上传，请勿取消",
+              type: "warning",
             });
-        },
+            return;
-        /** 转换菜单数据结构 */
-        normalizer(node) {
-          if (node.children && !node.children.length) {
-            delete node.children;
           }
-          return {
+          this.file = e.target.files[0];
-            id: node.id,
+          var userData = '{"Vod":{}}';
-            label: node.cateName,
+          /**if (this.uploader) {
-            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) {
-            this.$refs["videoFrom"].validate((valid) => {
-              if (valid) {
-                 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 = ""
                   }**/
-                  //视频分类不能选择主分类
+          //视频分类不能选择主分类
-                  if(this.videoFrom.cateId == 0){
+          if (this.videoFrom.cateId == 0) {
-                     this.$message({
+            this.$message({
-                          message: "视频分类不能选择主分类",
+              message: "视频分类不能选择主分类",
-                          type: "warning",
+              type: "warning",
-                      });
-                      return;
-                  }
-                  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;
-                          console.log(this.uploadAuth);
-                          this.videoFrom.videoId = this.uploadAuth.videoId;
-                          this.uploader = this.createUploader()
-                          this.uploader.addFile(this.file, null, null, null, userData)
-                          this.uploadDisabled = false
-                          this.pauseDisabled = true
-                          this.resumeDisabled = true
-                      }
-                  })
-              }
             });
-      },
+            return;
-      authUpload () {
+          }
-        // 然后调用 startUpload 方法, 开始上传
+          this.videoFrom.fileName = this.file.name;
-        if (this.uploader !== null) {
+          if (
-          this.uploader.startUpload()
+            this.videoFrom.fileName == null ||
-          this.uploadDisabled = true
+            this.videoFrom.fileName.length == 0 ||
-          this.pauseDisabled = false
+            this.videoFrom.fileName.lastIndexOf(".") == -1
-        }
+          ) {
-      },
+            this.$message({
-      // 暂停上传
+              message: "当前视频名称错误",
-      pauseUpload () {
+              type: "warning",
-        if (this.uploader !== null) {
+            });
-          this.uploader.stopUpload()
+            return;
-          this.resumeDisabled = false
+          }
-          this.pauseDisabled = true
+          let fileType = this.videoFrom.fileName.substring(
-        }
+            this.videoFrom.fileName.lastIndexOf(".") + 1
-      },
+          );
-      // 恢复上传
+          if (this.fileType.indexOf(fileType) == -1) {
-      resumeUpload () {
+            this.$message({
-        if (this.uploader !== null) {
+              message: "当前视频格式错误",
-          this.uploader.startUpload()
+              type: "warning",
-          this.resumeDisabled = true
+            });
-          this.pauseDisabled = false
+            return;
-        }
+          }
-      },
-      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 = '视频上传成功!'
 
-          },
+          getUploadVideoAuth(this.videoFrom).then((response) => {
-          // 文件上传失败
+            if (response.code == 200) {
-          onUploadFailed: function (uploadInfo, code, message) {
+              this.uploadAuth = response.uploadAuth;
-            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
+              console.log(this.uploadAuth);
-            self.uploading = false;
+              this.videoFrom.videoId = this.uploadAuth.videoId;
-            self.statusText = '视频上传失败!'
+              this.uploader = this.createUploader();
-          },
+              this.uploader.addFile(this.file, null, null, null, userData);
-          // 取消文件上传
+              this.uploadDisabled = false;
-          onUploadCanceled: function (uploadInfo, code, message) {
+              this.pauseDisabled = true;
-            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
+              this.resumeDisabled = true;
-            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)
+    authUpload() {
-            self.authProgress = progressPercent
+      // 然后调用 startUpload 方法, 开始上传
-            self.statusText = '视频上传中...'
+      if (this.uploader !== null) {
-          },
+        this.uploader.startUpload();
-          // 上传凭证超时
+        this.uploadDisabled = true;
-          onUploadTokenExpired: function (uploadInfo) {
+        this.pauseDisabled = false;
-            // 上传大文件超时, 如果是上传方式一即根据 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
+    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.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>

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

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="关键词" prop="key">
         <el-input
           v-model.trim="queryParams.key"
@@ -16,12 +22,12 @@
           clearable
           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-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
                 v-for="classify in classifyList"
                 :key="classify.id"
@@ -29,28 +35,41 @@
                 :value="classify.id"
               />
             </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 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-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>
 
@@ -62,7 +81,8 @@
           size="mini"
           @click="clickUploadVideo"
           v-hasPermi="['custom:nutritionalVideo:add']"
-        >视频上传</el-button>
+          >视频上传</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -72,7 +92,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['custom:nutritionalVideo:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -82,7 +103,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['custom:nutritionalVideo:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -91,7 +113,8 @@
           icon="el-icon-menu"
           @click="handleVideoClassify"
           v-hasPermi="['custom:videoClassify:list']"
-        >视频分类管理</el-button>
+          >视频分类管理</el-button
+        >
       </el-col>
       <!--
       <el-col :span="1.5">
@@ -103,48 +126,80 @@
           v-hasPermi="['custom:nutritionalVideo:export']"
         >导出</el-button>
       </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="nutritionalVideoList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="nutritionalVideoList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <!--<el-table-column label="视频分类ID" align="center" prop="cateId" />-->
       <el-table-column label="封面" align="center" prop="coverUrl" width="300">
         <template slot-scope="scope">
           <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>
         </template>
       </el-table-column>
       <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>
       </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>
       </el-table-column>
       <!--<el-table-column label="标签" align="center" prop="tags" width="100"/>-->
-       <el-table-column label="分类" align="center" prop="cateName" width="100"/>
+      <el-table-column
-       <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
-                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>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" >
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}</span>
+          <span>{{
+            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="200">
@@ -155,33 +210,34 @@
             icon="el-icon-edit"
             @click="getVideoPlayUrl(scope.row.id)"
             v-hasPermi="['custom:nutritionalVideo:query']"
-          >播放</el-button>
+            >播放</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['custom:nutritionalVideo:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['custom:nutritionalVideo:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
-
-
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
-      :pageSizes="[5,10,15,20]"
+      :pageSizes="[5, 10, 15, 20]"
       @pagination="getList"
     />
 
@@ -189,27 +245,27 @@
     <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-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 label="视频描述" prop="description">
           <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>
-         <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-option
                 v-for="classify in classifyList"
@@ -219,16 +275,25 @@
               />
             </el-select>-->
             <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 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
                 v-for="dict in payVideoLevelList"
                 :key="dict.dictValue"
@@ -237,19 +302,39 @@
               />
             </el-select>
           </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>
 
       <div slot="footer" class="dialog-footer">
@@ -261,281 +346,309 @@
     <UploadVideo ref="uploadVideoRef"></UploadVideo>
 
     <!-- 视频分类管理 -->
-    <el-dialog title="视频分类列表" :visible.sync="videoClassifyOpen" width="800px" append-to-body @closed="getAllVideoClassify();">
+    <el-dialog
+      title="视频分类列表"
+      :visible.sync="videoClassifyOpen"
+      width="800px"
+      append-to-body
+      @closed="getAllVideoClassify()"
+    >
       <div style="height: 500px; overflow: auto">
-           <VideoClassify ref="videoClassifyRef"></VideoClassify>
+        <VideoClassify ref="videoClassifyRef"></VideoClassify>
       </div>
     </el-dialog>
 
     <!-- 手动选择封面 -->
-      <VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
+    <VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
   </div>
 </template>
 
 <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 {
-        // 遮罩层
+        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.open = false;
                 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.open = false;
                 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: "确定",
           cancelButtonText: "取消",
-          type: "warning"
+          type: "warning",
-        }).then(function() {
+        }
+      )
+        .then(function () {
           return delNutritionalVideo(ids);
-        }).then(() => {
+        })
+        .then(() => {
           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);
-        }).then(response => {
+        })
+        .then((response) => {
           this.download(response.msg);
-      }).catch(function() {});
+        })
-      }
+        .catch(function () {});
-    }
+    },
-  };
+  },
+};
 </script>