add

src/views/sce/sceInfo/index.vue

@@ -95,7 +95,7 @@
     </div>
     <!-- 新增表单 -->
     <el-dialog
-      @open='openDialog'
+      @open="openDialog"
       :title="dialog.title"
       :visible.sync="dialog.Visible"
       width="1000px"
@@ -240,7 +240,14 @@
             :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-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'">
@@ -370,7 +377,12 @@
             <el-radio :label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item> -->
-        <el-form-item label="图片" prop="imgUrls" style="width: 100%;" v-if="radioImg == 1">
+        <el-form-item
+          label="图片"
+          prop="imgUrls"
+          style="width: 100%;"
+          v-if="radioImg == 1"
+        >
           <div v-for="(item, s) in imgData" :key="s" class="imgdata">
             <el-image
               style="width: 146px; height: 146px"
@@ -517,7 +529,11 @@
             <el-radio :label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item style="margin-left: 100px;" class="audioUpload" 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
               style="width: 146px; height: 146px"
@@ -525,13 +541,13 @@
               fit="fill"
             >
             </el-image> -->
-             <audio
-                :src="item.url"
-                width="178px"
-                height="178px"
-                controls="controls"
-                v-if="musicData.length > 0 "
-              ></audio>
+            <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"
@@ -698,7 +714,13 @@
             <el-radio :label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item> -->
-        <el-form-item label="视频" prop="imgUrls" style="width: 100%;" class="videoUpload" 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
               style="width: 146px; height: 146px"
@@ -707,12 +729,12 @@
             >
             </el-image> -->
             <video
-                :src="item.url"
-                width="178px"
-                height="178px"
-                controls="controls"
-                v-if="videoData.length > 0 "
-              ></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>
@@ -723,7 +745,10 @@
                 ></i>
               </p>
             </div> -->
-            <div class="sz_container" style="width:178px; text-align:center;margin-right:20px;">
+            <div
+              class="sz_container"
+              style="width:178px; text-align:center;margin-right:20px;"
+            >
               <span>{{ item.processNames }}</span>
             </div>
             <div
@@ -732,13 +757,18 @@
               style="width:178px"
             >
               <el-button
-              style="margin-right:60px;"
+                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>
+              <el-button
+                size="mini"
+                type="text"
+                @click="deldialogimg(item, idx, 'video')"
+                >删除视频</el-button
+              >
             </div>
           </div>
           <el-upload
@@ -755,9 +785,7 @@
           >
             <i class="el-icon-plus"></i>
           </el-upload>
-          <el-dialog :visible.sync="dialogVideo">
-             
-          </el-dialog>
+          <el-dialog :visible.sync="dialogVideo"> </el-dialog>
         </el-form-item>
         <el-form-item
           v-if="radioVideo == 2"
@@ -917,7 +945,7 @@ export default {
   components: { Tinymce },
   data() {
     return {
-      loadingAudio:false,
+      loadingAudio: false,
       baseUrl,
       loading: true,
       queryParams: {
@@ -948,10 +976,10 @@ export default {
         // processesList: [],
         processesList: [
           {
-            title:'测试',
+            title: "测试"
           },
           {
-            title:'测试',
+            title: "测试"
           }
           // {
           //   title: "开场", //标题
@@ -1013,21 +1041,21 @@ export default {
       dataList: {},
       disabled: false,
       disabledButton: false,
-      dialogVideo:false
+      dialogVideo: false
     };
   },
-  
+
   mounted() {
     this.queryList();
     // this.queryFindList();
   },
   methods: {
     //音频校验
-    uploadAudio(file){
+    uploadAudio(file) {
       console.log(file);
       if (
         [
-          "audio/mpeg",
+          "audio/mpeg"
           // "video/ogg",
           // "video/flv",
           // "video/avi",
@@ -1036,9 +1064,7 @@ export default {
           // "video/x-matroska"
         ].indexOf(file.type) == -1
       ) {
-        this.$message.error(
-          "上传视频只能是 mp3格式!"
-        );
+        this.$message.error("上传视频只能是 mp3格式!");
         return false;
       }
       const isLt2G = file.size / 1024 / 1024 < 2000000;
@@ -1071,38 +1097,38 @@ export default {
       }
       return isLt2G;
     },
-  //新增剧本流程数据
-    openDialog(){
-      if(this.dialog.title ==  "新增剧本"){
+    //新增剧本流程数据
+    openDialog() {
+      if (this.dialog.title == "新增剧本") {
         //随机生成4位数函数
-        function rand(min,max) {
-            return Math.floor(Math.random()*(max-min))+min;
+        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位数
+            code: rand(1000, 9999), //随机4位数
             introduction: "开场", //介绍
             sort: "1", //排序
-            type: '1', //类型
+            type: "1" //类型
           },
           {
             title: "选角",
-            code: rand(1000,9999),
+            code: rand(1000, 9999),
             introduction: "选角",
             sort: "2",
-            type: '2',
+            type: "2"
           },
           {
             title: "复盘",
-            code: rand(1000,9999),
+            code: rand(1000, 9999),
             introduction: "复盘",
             sort: "3",
-            type: '9',
-          },
-        )
+            type: "9"
+          }
+        );
       }
     },
     mapForChannel(e) {
@@ -1128,7 +1154,7 @@ export default {
       this.$confirm("确认关闭？")
         .then(_ => {
           done();
-          this.type = ''
+          this.type = "";
         })
         .catch(_ => {});
     },
@@ -1527,7 +1553,7 @@ export default {
       } catch (err) {}
     },
     subEsc() {
-      this.type = ''
+      this.type = "";
       this.ruleForm = {
         studioName: "",
         title: "",
@@ -1638,7 +1664,7 @@ export default {
     // 开本流程新增
     handleAddK() {
       //为空不能进行添加
-      if(!this.ruleForm.processesList.includes(false)){
+      if (!this.ruleForm.processesList.includes(false)) {
         this.disabledButton = true;
       }
       this.ruleForm.processesList.push({
@@ -1646,26 +1672,28 @@ export default {
         code: "",
         introduction: "",
         sort: "",
-        type: '5',
+        type: "5"
       });
     },
     // 开本流程删除
     Del(index) {
       this.$confirm("此操作将永久删除该剧本流程,是否继续?", "提示", {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
           this.ruleForm.processesList.splice(index, 1),
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+        })
+        .catch(() => {
           this.$message({
-            type: 'success',
-            message: '删除成功!'
+            type: "error",
+            message: "已取消删除"
           });
-        }).catch(() => {
-          this.$message({
-            type: 'error',
-            message: '已取消删除'
-          });          
         });
     },
     // 图片预览
@@ -1789,14 +1817,14 @@ export default {
           processNames: "",
           title: res.data.wjDx,
           mediaType: 2,
-          sourceType: 1,
+          sourceType: 1
         });
         this.loadingAudio = false;
         this.musicType = true;
       });
     },
     labeluploadvideo({ file }) {
-      this.loading = true;  
+      this.loading = true;
       const formdata = new FormData();
       formdata.append("file", file);
       formdata.append("type", "product");
@@ -1810,15 +1838,16 @@ export default {
         });
         this.loading = false; //取消加载
         this.radioType = true;
-        this.findvideocover(res.data.wjUrl,file)
+        this.findvideocover(res.data.wjUrl, file);
       });
     },
     delDataImg(item, index) {
       this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
           this.dataImg.splice(index, 1);
           delFile({ wjUrl: item }).then(res => {
             if (res.code == 200) {
@@ -1826,47 +1855,50 @@ export default {
             }
           });
           this.$message({
-            type: 'success',
-            message: '删除成功!'
+            type: "success",
+            message: "删除成功!"
           });
-        }).catch(() => {
+        })
+        .catch(() => {
           this.$message({
-            type: 'error',
-            message: '已取消删除'
-          });          
+            type: "error",
+            message: "已取消删除"
+          });
         });
     },
     // 图片删除
     deldialogimg(item, index, type) {
       this.$confirm("此您确定要删除吗,是否继续?", "提示", {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
           switch (type) {
-            case 'img':
+            case "img":
               this.imgData.splice(index, 1);
               break;
-            case 'music':
+            case "music":
               this.musicData.splice(index, 1);
               break;
-            case 'video':
-               this.videoData.splice(index, 1);
+            case "video":
+              this.videoData.splice(index, 1);
               break;
             default:
               break;
           }
           delFile({ wjUrl: item.url }).then(res => {
-          if (res.code == 200) {
-            this.$message.success("删除成功");
+            if (res.code == 200) {
+              this.$message.success("删除成功");
             }
           });
-        }).catch(() => {
+        })
+        .catch(() => {
           this.$message({
-            type: 'error',
-            message: '已取消删除'
-          });          
-      });
+            type: "error",
+            message: "已取消删除"
+          });
+        });
     },
     //关联流程
     setLc(item, i, type) {
@@ -1945,10 +1977,9 @@ export default {
       }
     },
     //查看视频
-    handleView(item){
-      console.log(item,'视频地址')
-    },
-    
+    handleView(item) {
+      console.log(item, "视频地址");
+    }
   }
 };
 </script>
@@ -2038,28 +2069,28 @@ export default {
   display: flex !important;
 }
 
-.audioUpload{
-   .el-form-item__content{
-    display: flex; 
-    flex-direction: column-reverse;
-    .imgdata{
+.audioUpload {
+  .el-form-item__content {
+    display: flex;
+    // flex-direction: column-reverse;
+    flex-wrap: wrap;
+    .imgdata {
       margin-top: 20px;
     }
   }
 }
 
-
-.videoUpload{
-  .el-form-item__content{
+.videoUpload {
+  .el-form-item__content {
     margin-left: 100px;
-    display: flex; 
-    flex-direction: column-reverse;
-    .imgdata{
-    margin-top: 20px;
-    display: block !important;
+    display: flex;
+    // flex-direction: column-reverse;
+    flex-wrap: wrap;
+    .imgdata {
+      margin-top: 20px;
+      display: block !important;
+      flex-wrap: nowrap;
+    }
   }
 }
-
-  
-}
 </style>