安全培训管理：完成视频上传

src/assets/i18n/langs/cn/laborManage/laborDev.js

@@ -62,6 +62,7 @@ export default {
         '每日交底（大工程交底）',
     ],
     signInInfo:'签到信息',
+    trainVideo:'教学视频上传',
     photo:'培训照片',
     trainDateTime:'培训时间',
     selectWorker: '选择工人',

src/views/projectFront/laborManage/safetyTrainManage.vue

@@ -253,23 +253,35 @@
           <el-form-item :label="$t('message.laborDev.trainPersonNum')">
             <el-input :value="cardForm.list.length" disabled></el-input>
           </el-form-item>
+          <!-- 签到信息 -->
           <el-form-item :label="$t('message.laborDev.signInInfo')" prop="list">
-            <el-button type="primary" @click="selectWorkerDialog = true">
+            <el-button type="primary" @click="selectWorkerDialog = true" style="margin-right: 200px">
               {{ $t("message.laborDev.selectWorker") }}
             </el-button>
-             <!-- 添加上传相关材料 -->
+          </el-form-item>
+          <!-- 教学视频上传 -->
+          <el-form-item :label="$t('message.laborDev.trainVideo')" prop="uploadAttachments" >
+            <div class="videoUpload">
               <el-upload
                 name="files"
-              class="upload-demo uploadBtn"
                 :action="$store.state.UPLOADURL"
                 multiple
                 :file-list="fileList"
-              :on-preview="handlePreview"
                 :on-success="handleSuccess"
+                :before-upload="beforeUpload"
                 :show-file-list="false"
               >
-              <el-button type="primary">材料上传</el-button>
+                <el-button type="primary">教学视频上传</el-button>
               </el-upload>
+              <template v-if="cardForm.uploadAttachments"> 
+                <video width="120" height="80" controls autoplay style="margin-left: 10px">
+                  <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/mp4">
+                  <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/ogg">
+                  <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/x-ms-wmv">
+                  您的浏览器不支持 video 标签。
+                </video>
+              </template>
+            </div>
           </el-form-item>
           <!-- 培训照片 -->
           <el-form-item :label="$t('message.laborDev.photo')" prop="photo" >
@@ -281,7 +293,7 @@
                 :action="$store.state.UPLOADURL"
                 :show-file-list="false"
                 :on-success="file => handleUpload(file, i)"
-                :before-upload="beforeAvatarUpload">
+                >
                 <img v-if="cardForm[`edu${i === 1 ? 'Before': i === 2 ? 'In' : 'After'}Photo`]" 
                   :src="$store.state.FILEURL + cardForm[`edu${i === 1 ? 'Before': i === 2 ? 'In' : 'After'}Photo`]" 
                   class="photo">
@@ -435,6 +447,12 @@ import {
 export default {
   components: { selectWorker },
   data() {
+    const validateConfig = {
+      required: true,
+      message: this.$t("message.personnelPosition.mandatory"),
+      trigger: "blur",
+    }
+
     return {
       uploadaurl:'',
       fileList:[],
@@ -468,27 +486,10 @@ export default {
         projectSn: this.$store.state.projectSn,
       },
       cardFormRules: {
-        eduCourseName: [
-          {
-            required: true,
-            message: this.$t("message.personnelPosition.mandatory"),
-            trigger: "blur",
-          },
-        ],
-        eduTime: [
-          {
-            required: true,
-            message: this.$t("message.personnelPosition.mandatory"),
-            trigger: "blur",
-          },
-        ],
-        list: [
-          {
-            required: true,
-            message: this.$t("message.personnelPosition.mandatory"),
-            trigger: "blur",
-          },
-        ],
+        eduCourseName: [validateConfig],
+        eduTime: [validateConfig],
+        list: [validateConfig],
+        uploadAttachments: [validateConfig],
       },
       isAdd: false,
       allPersonList: [],
@@ -508,25 +509,24 @@ export default {
       this.cardForm[`edu${num === 1 ? 'Before': num === 2 ? 'In' : 'After'}Photo`] = imageUrl
       console.log(this.eduPhoto1,this.eduPhoto2,this.eduPhoto3, num);
     },
-    handlePreview(file,type){
-      //  console.log('file',file)
-      // console.log('fileList',type)
-    },
     handleSuccess(file,fileList){
       console.log('成功的file',file)
       this.cardForm.uploadAttachments = file.data[0].filename
       if(file.status == "SUCCESS"){
-        this.$message({
-          message: '相关材料上传成功！',
-          type: 'success'
-        });
+        this.$message({  message: '视频上传成功', type: 'success' });
       }else{
-        this.$message({
-          message: '上传失败，请重新上传！',
-          type: 'error'
-        });
+        this.$message({  message: '上传失败，请重新上传！',  type: 'error' });
       }
     },
+    beforeUpload(file){
+      const videoTypes = ['video/mp4','application/x-mpegURL','video/x-ms-wmv','video/x-msvideo','video/x-flv','video/x-ms-wmv']
+      const type = file.type
+      const flag = videoTypes.includes(type)
+      if (!flag) {
+        this.$message({ message: '只能上传视频', type: 'error' });
+      }
+      return flag
+    },
     changeScore(index, value) {
       console.log("changeScore", value, index);
       var json = this.cardForm.list[index];
@@ -800,4 +800,12 @@ export default {
 /deep/.el-date-editor{
   width: 120px;
 }
+.videoUpload{
+  width: 320px;
+  display: flex;
+  // align-items: center;
+  >div{
+    margin-left: 10px;
+  }
+}
 </style>