修改

src/api/system/motionPrescriptionLibrary.js

@@ -45,9 +45,9 @@ export function delMotionPrescriptionLibrary(id) {
 
 //点击视频上传
 
-export function prescriptionVideoUpload(id) {
+export function getPrescriptionVideoInfo(id) {
     return request({
-        url: `/system/motionPrescriptionLibrary/prescriptionVideoUpload?id=${id}`,
+        url: `/system/motionPrescriptionLibrary/getPrescriptionVideoInfo?motionPrescriptionId=${id}`,
         method: 'get',
     })
 }
@@ -56,9 +56,10 @@ export function prescriptionVideoUpload(id) {
 
 //上传视频
 
-export function confirmUploadVideo(motionPrescriptionId, prescriptionVideoUrl) {
+export function confirmUploadVideo(data) {
     return request({
-        url: `/system/motionPrescriptionLibrary/confirmUploadVideo?motionPrescriptionId=${motionPrescriptionId}&&prescriptionVideoUrl=${prescriptionVideoUrl}`,
+        url: `/system/motionPrescriptionLibrary/confirmUploadVideo`,
         method: 'post',
+        data
     })
 }

src/views/system/motionPrescriptionLibrary/index.vue

@@ -39,7 +39,6 @@
         <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
@@ -85,7 +84,6 @@
       </el-col>-->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
     <el-table
       v-loading="loading"
       :data="motionPrescriptionLibraryList"
@@ -102,16 +100,20 @@
       <el-table-column label="运动量" align="center" prop="motionCapacity" />
       <el-table-column label="进阶时间" align="center" prop="advancedTime" />
       <el-table-column label="进阶方案" align="center" prop="advancedScheme" show-overflow-tooltip />
-      <el-table-column label="处方视频" align="center" prop="prescriptionVideoUrl" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="处方视频" align="center" prop="prescriptionVideoUrl">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-upload2"
+            icon="el-icon-view"
             @click="uploadhandle(scope.row)"
-            v-hasPermi="['system:motionPrescriptionLibrary:prescriptionVideoUpload']"
-          >上传视频</el-button>
+            v-hasPermi="['system:motionPrescriptionLibrary:getPrescriptionVideoInfo']"
+          >查看</el-button>
+        </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-upload2" @click="uploadopentrue">上传视频</el-button>
           <el-button
             size="mini"
             type="text"
@@ -129,7 +131,6 @@
         </template>
       </el-table-column>
     </el-table>
-
     <pagination
       v-show="total>0"
       :total="total"
@@ -137,7 +138,6 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
     <!-- 添加或修改运动处方库数据对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px" :inline="true">
@@ -190,15 +190,14 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-
     <!-- //上传视频 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <video
+      <!-- <video
         v-if="videourl"
         :src="baseurl+videourl"
         style="width:350px;height:200px"
         controls="controls"
-      ></video>
+      ></video>-->
       <el-upload
         ref="upload"
         :headers="upload.headers"
@@ -207,6 +206,9 @@
         :on-progress="handleFileUploadProgress"
         :on-success="handleFileSuccess"
         :data="upload.data"
+        :file-list="fileList"
+        :on-change="handleChange"
+        :limit="5"
         drag
       >
         <i class="el-icon-upload"></i>
@@ -220,9 +222,26 @@
         <el-button @click="upload.open = false">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 查看视频 -->
+    <el-dialog title="查看" :visible.sync="lookvideoshow" width="1200px" append-to-body>
+      <div
+        v-for="(item,index) in lookvideolist"
+        :key="index"
+        style="display: inline-block;margin:0 30px 30px 0"
+      >
+        <video
+          :src="item"
+          style="width:350px;height:200px;display: inline-block;"
+          controls="controls"
+        ></video>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="lookvideoshow = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
-
 <script>
 import {
   listMotionPrescriptionLibrary,
@@ -230,7 +249,7 @@ import {
   delMotionPrescriptionLibrary,
   addMotionPrescriptionLibrary,
   updateMotionPrescriptionLibrary,
-  prescriptionVideoUpload,
+  getPrescriptionVideoInfo,
   confirmUploadVideo
 } from "@/api/system/motionPrescriptionLibrary";
 import { getToken } from "@/utils/auth";
@@ -258,6 +277,10 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      //查看视频
+      lookvideoshow: false,
+      //查看视频数组
+      lookvideolist: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -278,7 +301,7 @@ export default {
       form: {},
       //上传视频
       // 用户导入参数
-      videourl: null,
+      videourl: [],
       upload: {
         // 是否显示弹出层（用户导入）
         open: false,
@@ -371,7 +394,8 @@ export default {
             trigger: "blur"
           }
         ]
-      }
+      },
+      fileList: []
     };
   },
   created() {
@@ -492,13 +516,23 @@ export default {
       );
     },
     uploadhandle(e) {
-      this.upload.data.motionPrescriptionId = e.id;
-      prescriptionVideoUpload(e.id).then(res => {
-        console.log(res);
-        this.videourl = res.data.prescriptionVideoUrl;
-        this.upload.open = true;
+      this.lookvideolist = [];
+      getPrescriptionVideoInfo(e.id).then(res => {
+        res.data.forEach(e => {
+          e.prescriptionVideoUrl = baseurl + e.prescriptionVideoUrl;
+          this.lookvideolist.push(e.prescriptionVideoUrl);
+        });
+        this.lookvideoshow = true;
       });
     },
+    //打开视频上传窗口
+    uploadopentrue() {
+      this.upload.open = true;
+      this.videourl = [];
+      this.fileList = [];
+    },
+    //文件上传
+    handleChange(file, fileList) {},
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
@@ -506,6 +540,7 @@ export default {
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
       this.upload.isUploading = false;
+      this.fileList = fileList.slice();
       this.$refs.upload.clearFiles();
       // this.$alert(
       //   "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
@@ -514,18 +549,22 @@ export default {
       //   "上传结果",
       //   { dangerouslyUseHTMLString: true }
       // );
-      this.videourl = response.prescriptionVideoUrl;
+      this.videourl.push(response.prescriptionVideoUrl);
     },
     // 提交上传文件
     submitFileForm() {
-      confirmUploadVideo(
-        this.upload.data.motionPrescriptionId,
-        this.videourl
-      ).then(res => {
+      var obj = {
+        motionPrescriptionId: this.upload.data.motionPrescriptionId,
+        prescriptionVideoUrlList: this.videourl
+      };
+      confirmUploadVideo(obj).then(res => {
         this.upload.open = false;
+        this.$modal.msgSuccess("上传视频成功");
         this.getList();
       });
     }
   }
 };
 </script>
+<style scoped>
+</style>