删除提示,视频,音频加载动画

src/views/sce/sceInfo/index.vue

@@ -233,13 +233,14 @@
             style="width:700px;height:400px;border:1px solid #ddd;padding:10px;"
             v-html="ruleForm.introduction"
           ></div>
-          <Tinymce
+          <!-- <Tinymce
             v-if="type == 'add' || type == 'edit'"
             ref="editor"
             v-model="ruleForm.introduction"
             :height="400"
             :width="700"
-          />
+          /> -->
+          <el-input type="textarea" v-if="type == 'add' || type == 'edit'"  style="width:700px" rows="10" placeholder="请输入内容"  v-model="ruleForm.introduction"></el-input>
         </el-form-item>
         <h3 class="form-title">开本流程</h3>
         <div v-if="type == 'add' || type == 'edit'">
@@ -516,15 +517,27 @@
             <el-radio :label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item style="margin-left: 100px;" v-if="radioMusic == 1">
+        <el-form-item style="margin-left: 100px;" class="audioUpload" v-if="radioMusic == 1">
           <div v-for="(item, i) in musicData" :key="i" class="imgdata">
-            <el-image
+            <!-- <el-image
               style="width: 146px; height: 146px"
               :src="item.url"
               fit="fill"
             >
-            </el-image>
-            <div class="imgdialog">
+            </el-image> -->
+             <audio
+                :src="item.url"
+                width="178px"
+                height="178px"
+                controls="controls"
+                v-if="musicData.length > 0 "
+              ></audio>
+            <!-- <audio
+              style="width: 146px; height: 146px"
+              :src="item.url"
+              v-if="musicData.length > 0 "
+            ></audio> -->
+            <!-- <div class="imgdialog">
               <p>
                 <i class="el-icon-zoom-in" style="font-size: 20px"></i>
                 <i
@@ -533,14 +546,14 @@
                   style="font-size: 20px; padding-left: 30px"
                 ></i>
               </p>
-            </div>
+            </div> -->
             <div class="sz_container" style="text-align:center">
               <span>{{ item.processNames }}</span>
             </div>
             <div
               v-if="type == 'add' || type == 'edit'"
               class="sz_container"
-              style="text-align:center"
+              style="display: flex;justify-content: space-around;"
             >
               <el-button
                 size="mini"
@@ -548,6 +561,12 @@
                 @click="setLc(item, i, 'music')"
                 >关联流程</el-button
               >
+              <el-button
+                size="mini"
+                type="text"
+                @click="deldialogimg(item, i, 'music')"
+                >删除音频</el-button
+              >
             </div>
           </div>
           <el-upload
@@ -557,7 +576,10 @@
             action
             list-type="picture-card"
             :show-file-list="false"
+            :before-upload="uploadAudio"
             :http-request="labeluploadmusic"
+            element-loading-text="正在上传..."
+            v-loading="loadingAudio"
           >
             <i class="el-icon-plus"></i>
           </el-upload>
@@ -676,15 +698,22 @@
             <el-radio :label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item> -->
-        <el-form-item label="视频" prop="imgUrls" style="width: 100%;" v-if="radioVideo == 1">
+        <el-form-item label="视频" prop="imgUrls" style="width: 100%;" class="videoUpload" v-if="radioVideo == 1">
           <div v-for="(item, idx) in videoData" :key="idx" class="imgdata">
-            <el-image
+            <!-- <el-image
               style="width: 146px; height: 146px"
               :src="item.url"
               fit="fill"
             >
-            </el-image>
-            <div class="imgdialog">
+            </el-image> -->
+            <video
+                :src="item.url"
+                width="178px"
+                height="178px"
+                controls="controls"
+                v-if="videoData.length > 0 "
+              ></video>
+            <!-- <div class="imgdialog">
               <p>
                 <i class="el-icon-zoom-in" @click="handleView(item,idx)" style="font-size: 20px"></i>
                 <i
@@ -693,21 +722,23 @@
                   style="font-size: 20px; padding-left: 30px"
                 ></i>
               </p>
-            </div>
-            <div class="sz_container" style="text-align:center">
+            </div> -->
+            <div class="sz_container" style="width:178px; text-align:center;margin-right:20px;">
               <span>{{ item.processNames }}</span>
             </div>
             <div
               v-if="type == 'add' || type == 'edit'"
               class="sz_container"
-              style="text-align:center"
+              style="width:178px"
             >
               <el-button
+              style="margin-right:60px;"
                 size="mini"
                 type="text"
                 @click="setLc(item, idx, 'video')"
                 >关联流程</el-button
               >
+              <el-button size="mini" type="text" @click="deldialogimg(item, idx, 'video')">删除视频</el-button>
             </div>
           </div>
           <el-upload
@@ -717,7 +748,10 @@
             action
             list-type="picture-card"
             :show-file-list="false"
+            :before-upload="uploadVideo"
             :http-request="labeluploadvideo"
+            element-loading-text="正在上传..."
+            v-loading="loading"
           >
             <i class="el-icon-plus"></i>
           </el-upload>
@@ -883,6 +917,7 @@ export default {
   components: { Tinymce },
   data() {
     return {
+      loadingAudio:false,
       baseUrl,
       loading: true,
       queryParams: {
@@ -987,37 +1022,88 @@ export default {
     // this.queryFindList();
   },
   methods: {
+    //音频校验
+    uploadAudio(file){
+      console.log(file);
+      if (
+        [
+          "audio/mpeg",
+          // "video/ogg",
+          // "video/flv",
+          // "video/avi",
+          // "video/rmvb",
+          // "video/mkv",
+          // "video/x-matroska"
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error(
+          "上传视频只能是 mp3格式!"
+        );
+        return false;
+      }
+      const isLt2G = file.size / 1024 / 1024 < 2000000;
+      if (!isLt2G) {
+        this.$message.error("上传文件大小不能超过 2GB!");
+      }
+      return isLt2G;
+    },
+    //视频上传格式校验
+    uploadVideo(file) {
+      if (
+        [
+          "video/mp4",
+          "video/ogg",
+          "video/flv",
+          "video/avi",
+          "video/rmvb",
+          "video/mkv",
+          "video/x-matroska"
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error(
+          "上传视频只能是 mp4、ogg、flv、avi、rmvb 、x-matroska格式!"
+        );
+        return false;
+      }
+      const isLt2G = file.size / 1024 / 1024 < 2000000;
+      if (!isLt2G) {
+        this.$message.error("上传文件大小不能超过 2GB!");
+      }
+      return isLt2G;
+    },
   //新增剧本流程数据
     openDialog(){
-      //随机生成4位数函数
-      function rand(min,max) {
-          return Math.floor(Math.random()*(max-min))+min;
+      if(this.dialog.title ==  "新增剧本"){
+        //随机生成4位数函数
+        function rand(min,max) {
+            return Math.floor(Math.random()*(max-min))+min;
+        }
+        this.queryFindList();
+        this.ruleForm.processesList.push(
+          {
+            title: "开场", //标题
+            // code: 1233, //随机4位数
+            code: rand(1000,9999), //随机4位数
+            introduction: "开场", //介绍
+            sort: "1", //排序
+            type: '1', //类型
+          },
+          {
+            title: "选角",
+            code: rand(1000,9999),
+            introduction: "选角",
+            sort: "2",
+            type: '2',
+          },
+          {
+            title: "复盘",
+            code: rand(1000,9999),
+            introduction: "复盘",
+            sort: "3",
+            type: '9',
+          },
+        )
       }
-    this.queryFindList();
-    this.ruleForm.processesList.push(
-      {
-        title: "开场", //标题
-        // code: 1233, //随机4位数
-        code: rand(1000,9999), //随机4位数
-        introduction: "开场", //介绍
-        sort: "1", //排序
-        type: '1', //类型
-      },
-      {
-        title: "选角",
-        code: rand(1000,9999),
-        introduction: "选角",
-        sort: "2",
-        type: '2',
-      },
-      {
-        title: "复盘",
-        code: rand(1000,9999),
-        introduction: "复盘",
-        sort: "3",
-        type: '9',
-      },
-    )
     },
     mapForChannel(e) {
       for (var i = 0; i < this.lcData.length; i++) {
@@ -1693,6 +1779,7 @@ export default {
       });
     },
     labeluploadmusic({ file }) {
+      this.loadingAudio = true;
       const formdata = new FormData();
       formdata.append("file", file);
       formdata.append("type", "product");
@@ -1704,10 +1791,12 @@ export default {
           mediaType: 1,
           sourceType: 2
         });
+        this.loadingAudio = false;
         this.musicType = true;
       });
     },
     labeluploadvideo({ file }) {
+      this.loading = true;  
       const formdata = new FormData();
       formdata.append("file", file);
       formdata.append("type", "product");
@@ -1719,33 +1808,64 @@ export default {
           mediaType: 1,
           sourceType: 3
         });
+        this.loading = false; //取消加载
         this.radioType = true;
         this.findvideocover(res.data.wjUrl,file)
       });
     },
     delDataImg(item, index) {
-      this.dataImg.splice(index, 1);
-      delFile({ wjUrl: item }).then(res => {
-        if (res.code == 200) {
-          this.$message.success("删除成功");
-        }
-      });
+      this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.dataImg.splice(index, 1);
+          delFile({ wjUrl: item }).then(res => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+            }
+          });
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '已取消删除'
+          });          
+        });
     },
     // 图片删除
     deldialogimg(item, index, type) {
-      if (type == "img") {
-        this.imgData.splice(index, 1);
-      }
-      if (type == "music") {
-        this.musicData.splice(index, 1);
-      }
-      if (type == "video") {
-        this.videoData.splice(index, 1);
-      }
-      delFile({ wjUrl: item.url }).then(res => {
-        if (res.code == 200) {
-          this.$message.success("删除成功");
-        }
+      this.$confirm("此您确定要删除吗,是否继续?", "提示", {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          switch (type) {
+            case 'img':
+              this.imgData.splice(index, 1);
+              break;
+            case 'music':
+              this.musicData.splice(index, 1);
+              break;
+            case 'video':
+               this.videoData.splice(index, 1);
+              break;
+            default:
+              break;
+          }
+          delFile({ wjUrl: item.url }).then(res => {
+          if (res.code == 200) {
+            this.$message.success("删除成功");
+            }
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '已取消删除'
+          });          
       });
     },
     //关联流程
@@ -1916,5 +2036,30 @@ export default {
 
 .imgdata:hover .imgdialog {
   display: flex !important;
+}
+
+.audioUpload{
+   .el-form-item__content{
+    display: flex; 
+    flex-direction: column-reverse;
+    .imgdata{
+      margin-top: 20px;
+    }
+  }
+}
+
+
+.videoUpload{
+  .el-form-item__content{
+    margin-left: 100px;
+    display: flex; 
+    flex-direction: column-reverse;
+    .imgdata{
+    margin-top: 20px;
+    display: block !important;
+  }
+}
+
+  
 }
 </style>