晨健视频

src/views/kitchen/staffManage/morningCheck/index.vue

@@ -68,6 +68,12 @@
               <span v-if="scope.row.checkStatus==2">异常</span>
           </template>
       </el-table-column>
+      <el-table-column label="晨检视频" align="center" prop="checkVideoUrl" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span v-if="scope.row.checkVideoUrl" style="color: #409EFF; cursor: pointer;" @click="openVideo(scope.row)">查看</span>
+          <span v-else>无</span>
+        </template>
+      </el-table-column>
       <el-table-column label="晨检时间" align="center" prop="recordTime" :show-overflow-tooltip="true" width="160" />
     </el-table>
     <pagination
@@ -78,8 +84,11 @@
       @pagination="getList"
     />
 
-    <el-dialog :visible.sync="dialogVisible" width="700px">
+    <el-dialog :visible.sync="dialogVisible" width="1000px" title="晨检视频">
-      <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
+      <video v-if="dialogVideoUrl" style="width: 100%; height: 600px; object-fit: contain;" controls>
+        <source :src="dialogVideoUrl" type="video/mp4">
+        您的浏览器不支持视频播放。
+      </video>
     </el-dialog>
   </div>
 </template>
@@ -116,8 +125,8 @@ export default {
         postName:undefined,
         checkStatus:undefined
       },
-      dialogVisible:false,//图片弹窗
+      dialogVisible:false,//视频弹窗
-      dialogImageUrl:"",//图片弹窗  
+      dialogVideoUrl:"",//视频弹窗URL
     };
   },
   created() {
@@ -178,7 +187,7 @@ export default {
           });
       },
       openVideo(row){
-        this.dialogImageUrl = row.checkVideoUrl;
+        this.dialogVideoUrl = row.checkVideoUrl;
         this.dialogVisible = true;
       },
       defaultDateRange() {