add

src/views/sce/sceInfo/index.vue

@@ -131,7 +131,15 @@
         </el-form-item>
         <h3 class="form-title">剧本图片</h3>
         <el-form-item label="封面" prop="cover">
+          <el-image
+            v-if="type == 'view'"
+            style="width: 146px; height: 146px"
+            :src="ruleForm.cover"
+            fit="fill"
+          >
+          </el-image>
           <el-upload
+            v-if="type == 'add' || type == 'edit'"
             class="avatar-uploader"
             action
             :show-file-list="false"
@@ -145,7 +153,36 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="其它图片" style="width:100%">
+          <div v-for="(item, l) in dataImg" :key="l" class="imgdata" style="margin-left:10px;">
+            <el-image
+              style="width: 146px; height: 146px"
+              :src="item"
+              fit="fill"
+            >
+            </el-image>
+            <div class="imgdialog" v-if="type == 'add' || type == 'edit'">
+              <p>
+                <i
+                  class="el-icon-delete"
+                  @click="delDataImg(item, l)"
+                  style="font-size: 20px;"
+                ></i>
+              </p>
+            </div>
+          </div>
           <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            class="avatar-uploader"
+            style="float:left;margin-left: 10px;"
+            action
+            list-type="picture-card"
+            :show-file-list="false"
+            :http-request="changeImgs"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- <el-upload
+            v-if="type == 'add' || type == 'edit'"
             action
             class="avatar-uploader"
             list-type="picture-card"
@@ -153,22 +190,44 @@
             :on-change="changeImgs"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
+            :file-list="dataImgs"
           >
             <i class="el-icon-plus" />
-          </el-upload>
-          <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="" />
-          </el-dialog>
+            <div slot="file" slot-scope="{ file }">
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                alt=""
+              />
+              <span class="el-upload-list__item-actions">
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleRemove(file)"
+                >
+                  <i class="el-icon-delete"></i>
+                </span>
+              </span>
+            </div>
+          </el-upload> -->
         </el-form-item>
         <h3 class="form-title">剧本简介</h3>
-        <el-form-item label="简介" style="width:100%">
+        <el-form-item label="简介" prop="introduction" style="width:100%">
           <!-- <el-input
-            v-model="ruleForm.desc"
-            style="width:500px"
+            v-if="type == 'view'"
+            :disabled="disabled"
+            v-model="ruleForm.introduction"
+            style="width:700px"
             rows="10"
             type="textarea"
           /> -->
+          <div
+            v-if="type == 'view'"
+            style="width:700px;height:400px;border:1px solid #ddd;padding:10px;"
+            v-html="ruleForm.introduction"
+          ></div>
           <Tinymce
+            v-if="type == 'add' || type == 'edit'"
             ref="editor"
             v-model="ruleForm.introduction"
             :height="400"
@@ -351,7 +410,7 @@
                   placeholder="请选择流程"
                 >
                   <el-option
-                    v-for="(item,o) in ruleForm.processesList"
+                    v-for="(item, o) in ruleForm.processesList"
                     :key="o"
                     :label="item.title"
                     :value="item.code"
@@ -662,7 +721,7 @@
                   placeholder="请选择流程"
                 >
                   <el-option
-                    v-for="(item,u) in ruleForm.processesList"
+                    v-for="(item, u) in ruleForm.processesList"
                     :key="u"
                     :label="item.title"
                     :value="item.code"
@@ -746,7 +805,7 @@
             placeholder="请选择流程"
           >
             <el-option
-              v-for="(item,y) in ruleForm.processesList"
+              v-for="(item, y) in ruleForm.processesList"
               :key="y"
               :label="item.title"
               :value="item.code"
@@ -795,7 +854,10 @@ export default {
         labelName: [
           { required: true, message: "请输入标签名称", trigger: "blur" }
         ],
-        cover: [{ required: true, message: "请选择封面", trigger: "blur" }]
+        cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
+        introduction: [
+          { required: true, message: "请输入简介", trigger: "blur" }
+        ]
       },
       dialog: {
         title: "新增剧本",
@@ -817,6 +879,7 @@ export default {
       dialogVisible: false,
       dialogImageUrl: "",
       dataImg: [],
+      dataImgs: [],
       lcData: [],
       radioImg: "1",
       radioMusic: "1",
@@ -965,9 +1028,13 @@ export default {
         let res = await queryJbDetail(id);
         console.log(res, "详情");
         this.ruleForm = res.data;
+        if (this.ruleForm.imgUrl != null) {
+          this.dataImg = this.ruleForm.imgUrl.split(",");
+        }
+
         var img = [];
         var music = [];
-        var video = []
+        var video = [];
         for (var i in res.data.resourcesList) {
           if (
             res.data.resourcesList[i].mediaType == 1 &&
@@ -1125,6 +1192,7 @@ export default {
         radioVideo: [],
         resourcesList: []
       };
+      this.dataImg = []
       this.imgData = [];
       this.musicData = [];
       this.videoData = [];
@@ -1342,18 +1410,13 @@ export default {
         console.log(err);
       }
     },
-    async changeImgs(file, fileList) {
-      try {
-        let formData = new FormData();
-        let type = file.raw.type;
-        formData.append("file", file.raw);
-        formData.append("type", type);
-        let res = await uploadFile(formData);
-        console.log(res, 142131);
+    changeImgs({file}) {
+      let formData = new FormData();
+      formData.append("file", file);
+      formData.append("type", "product");
+      uploadFile(formData).then(res => {
         this.dataImg.push(res.data.wjUrl);
-      } catch (err) {
-        console.log(err);
-      }
+      });
     },
     beforeAvatarUpload(file) {
       console.log(file, 41231);
@@ -1393,6 +1456,14 @@ export default {
     DelVideo(index) {
       this.ruleForm.radioVideo.splice(index, 1);
     },
+    handleRemove(file) {
+      console.log(file);
+      // delFile({ wjUrl: item.url }).then(res => {
+      //   if (res.code == 200) {
+      //     this.$message.success("删除成功");
+      //   }
+      // });
+    },
     // 图片删除
     deldialogimg(index) {
       this.ruleForm.imgUrls.splice(index, 1);
@@ -1506,6 +1577,14 @@ export default {
         this.radioType = true;
       });
     },
+    delDataImg(item,index){
+      this.dataImg.splice(index,1)
+      delFile({ wjUrl: item }).then(res => {
+        if (res.code == 200) {
+          this.$message.success("删除成功");
+        }
+      });
+    },
     // 图片删除
     deldialogimg(item, index, type) {
       console.log(index, type);