42 管理后台上传照片，活动非必填 （ 55 图片可以删除）

src/components/MultUpload.vue

@@ -2,6 +2,7 @@
   <div>
     <el-row>
       <el-upload
+        :file-list="imgList"
         v-loading.fullscreen.lock="mark"
         ref="upload"
         action=""
@@ -17,16 +18,32 @@
         <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 class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+            >
               <i class="el-icon-zoom-in" />
             </span>
+            <span
+              class="el-upload-list__item-preview"
+              @click="handleDeleteItem(file)"
+            >
+              <i class="el-icon-delete" />
+            </span>
           </span>
         </div>
       </el-upload>
     </el-row>
 
     <el-row style="text-align: right;">
-      <el-button class="mt-40" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
+      <el-button
+        class="mt-40"
+        style="margin-left: 10px;"
+        size="small"
+        type="success"
+        @click="submitUpload"
+        >上传到服务器</el-button
+      >
     </el-row>
 
     <el-dialog :visible.sync="dialogVisible" :modal="false">
@@ -112,35 +129,43 @@ export default {
       this.imgList.push(fileList);
     },
     submitUpload() {
-      this.mark = true;
-      let form = new FormData();
-      for (let key in this.paramsData) {
-        form.append(key, this.paramsData[key]);
-      }
-      console.log(this.imgList);
-      this.imgList.forEach(file => {
-        form.append('file', file.raw);
-      });
-      // this.mark = false;
-      this.api(form)
-        .then(({ success }) => {
-          if (success) {
-            this.mark = false;
-            this.$emit('finish');
-          } else {
+      if (this.imgList > 0) {
+        this.mark = true;
+        let form = new FormData();
+        for (let key in this.paramsData) {
+          form.append(key, this.paramsData[key]);
+        }
+        console.log(this.imgList);
+        this.imgList.forEach(file => {
+          form.append('file', file.raw);
+        });
+        // this.mark = false;
+        this.api(form)
+          .then(({ success }) => {
+            if (success) {
+              this.mark = false;
+              this.$emit('finish');
+            } else {
+              this.$error('上传失败，请稍后重试...');
+              this.mark = false;
+            }
+          })
+          .catch(err => {
+            console.error(err);
             this.$error('上传失败，请稍后重试...');
             this.mark = false;
-          }
-        })
-        .catch(err => {
-          console.error(err);
-          this.$error('上传失败，请稍后重试...');
-          this.mark = false;
-        });
+          });
+      } else {
+        this.$error('未选择图片,请先选择图片');
+      }
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
+    },
+    handleDeleteItem(file) {
+      const index = this.imgList.findIndex(x => x.uid === file.uid);
+      this.imgList.splice(index, 1);
     }
   }
 };

src/views/photographerManagement/photoVerify/modal/MultItemModal.vue

@@ -28,6 +28,15 @@
             :disabled="form.kindergartenId === null"
           />
         </el-form-item>
+        <div class="f-fe-fs" :style="{ width: '50%' }">
+          <el-button
+            type="primary"
+            round
+            :disabled="!form.kindergartenId"
+            @click="step++"
+            >下一步</el-button
+          >
+        </div>
       </div>
       <el-form-item v-show="step === 1" label="图片" prop="urls" required>
         <mult-upload
@@ -54,27 +63,33 @@ export default {
       modal: true,
       multUpload: multUpload,
       form: {
-        kindergartenId: '',
+        kindergartenId: null,
         activityId: '',
         urls: []
       },
       rules: {
-        kindergartenId: [{ required: true, message: '请选择关联场景', trigger: 'blur' }],
+        kindergartenId: [
+          { required: true, message: '请选择关联场景', trigger: 'blur' }
+        ],
         urls: [{ required: true, message: '请上传图片', trigger: 'change' }]
-      }
+      },
+
+      step: 0
     };
   },
 
+  watch: {
+    'form.activityId': {
+      handler(str) {
+        if (str) {
+          this.step = 1;
+        }
+      },
+      immediate: true
+    }
+  },
+
   computed: {
-    step() {
-      // todo add by 梁展鹏 20210726 活动非必填。
-      const { kindergartenId, activityId } = this.form;
-      let result = 1;
-      if (!kindergartenId || !activityId) {
-        result = 0;
-      }
-      return result;
-    },
     uploadParams() {
       const { kindergartenId, activityId } = this.form;
       return { kindergartenId, activityId };