Pārlūkot izejas kodu

图文编辑优化:如果有删除图片,先收集删除的图片;最后在提交表单后,批量删除图片。而创建图文时,则还是保持立即删除图片

shizhongqi 10 mēneši atpakaļ
vecāks
revīzija
7bde869361

+ 22 - 25
hdApp/src/admin/picText/picTextAdd.vue

@@ -13,8 +13,9 @@
             ref="richEditor"
             v-model="form.imageTextVos" 
             @change="onContentChange"
-            @auto-submit="onEditorAutoSubmit"
+            @collect-delete="onCollectDelete"
             :action="getLoginInfo.imgUploadApi"
+            :deferDelete="isEdit"
           />
         </view>
 
@@ -46,7 +47,8 @@ export default {
         imageTextVos: [] // 新增图文内容数组
       },
       isEdit: false,
-      autoSubmitMode: false
+      // 编辑模式下,暂存删除的图片路径(短路径)
+      delImgQueue: []
     };
   },
   onLoad(option) {
@@ -116,6 +118,14 @@ export default {
     onContentChange(content) {
       this.form.imageTextVos = content;
     },
+    // 收集编辑模式下的删除图片
+    onCollectDelete(payload){
+      if (!this.isEdit) return;
+      if (!payload || !Array.isArray(payload.filePaths)) return;
+      payload.filePaths.forEach(p => {
+        if (p && !this.delImgQueue.includes(p)) this.delImgQueue.push(p)
+      })
+    },
     
     // 预览内容
     previewContent() {
@@ -183,38 +193,26 @@ export default {
         if(res.code == 1){
           uni.$emit('refreshListPage');
           that.$msg(this.isEdit ? '修改成功' : '添加成功');
-          if (!this.autoSubmitMode) {
-            uni.navigateBack({
-              delta: 1
-            });
+          // 编辑模式下,如存在待删图片,统一调用批量删除
+          if (this.isEdit && this.delImgQueue.length > 0) {
+            const { delImages } = require('@/api/pic-text');
+            const filePaths = Array.from(new Set(this.delImgQueue))
+            delImages({ filePaths }).then(() => {
+              this.delImgQueue = []
+            }).catch(() => {})
           }
-          that.autoSubmitMode = false;
+          uni.navigateBack({
+            delta: 1
+          });
         } else {
           that.$msg(res.message || '操作失败');
-          that.autoSubmitMode = false;
         }
       }).catch(err => {
         uni.hideLoading();
         console.error('提交失败:', err);
         that.$msg('提交失败,请稍后重试');
-        that.autoSubmitMode = false;
       });
     },
-    // 接收编辑器自动提交事件
-    onEditorAutoSubmit() {
-      // 只需要在编辑图文时,才自动提交
-      if (!this.isEdit) return;
-
-      this.autoSubmitMode = true;
-      const e = {
-        detail: {
-          value: {
-            title: this.form.title
-          }
-        }
-      };
-      this.formSubmit(e);
-    },
     formSubmit(e) {
       let rules = [
         { name: "title", rule: ["required", "notEmpty"], msg: ["请输入标题"] },
@@ -228,7 +226,6 @@ export default {
       // 检查图文内容
       if (this.form.imageTextVos.length === 0) {
         this.$msg("请添加至少一项图文内容");
-        this.autoSubmitMode = false;
         return;
       }
       

+ 49 - 26
hdApp/src/components/RichMediaEditor/index.vue

@@ -206,6 +206,11 @@ export default {
     iconColor: { //图标颜色
       type: String,
       default: '#717173'
+    },
+    // 编辑模式下延迟删除,交由父组件统一处理
+    deferDelete: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -331,24 +336,37 @@ export default {
 
             // 后继删除图片处理:首先判断是否是图片,如果是大图,则删除图片,如果是小图片,则批量删除多张图片
             if (tempList.type === 1) {
-              // 大图
-              delImage({ filePath: tempList.content }).then(() => {
-                console.log('大图删除成功');
-                this.$emit('auto-submit');
-              }).catch(err => {
-                console.error('大图删除失败:', err);
-                // 删除失败也尝试自动提交,以保证数据一致
-                this.$emit('auto-submit');
-              });
+              if (this.deferDelete) { // 编辑模式下延迟删除,交由父组件统一处理
+                const p = tempList.content
+                if (p) this.$emit('collect-delete', { filePaths: [p] })
+              } else { // 新增模式下立即删除
+                // 大图立即删除
+                delImage({ filePath: tempList.content }).then(() => {
+                  console.log('大图删除成功');
+                }).catch(err => {
+                  console.error('大图删除失败:', err);
+                });
+              }
             } else if (tempList.type === 2) {
-              // 批量删除小图
-              let imgs = [];
-              tempList.content.forEach(img => {
-                imgs.push(img);
-              });
-              delImages({ filePaths: imgs }).then(() => {
-                console.log('小图删除成功');
-              });
+              if (this.deferDelete) { // 编辑模式下延迟删除,交由父组件统一处理
+                let imgs = [];
+                tempList.content.forEach(img => {
+                  const p = img
+                  if (p) imgs.push(p)
+                });
+                if (imgs.length > 0) this.$emit('collect-delete', { filePaths: imgs })
+              } else {
+                // 批量删除小图
+                let imgs = [];
+                tempList.content.forEach(img => {
+                  imgs.push(img);
+                });
+                delImages({ filePaths: imgs }).then(() => {
+                  console.log('小图删除成功');
+                }).catch(err => {
+                  console.error('小图删除失败:', err);
+                });
+              }
             }
           }
         }
@@ -443,17 +461,22 @@ export default {
         success: (res) => {
           if (res.confirm) {
             const imageUrl = this.contentList[itemIndex].content[imgIndex];
-            // 删除服务器上的图片
-            delImage({ filePath: imageUrl }).then(() => {
+            if (this.deferDelete) {
+              const p = imageUrl
               // 从数组中移除图片
               this.contentList[itemIndex].content.splice(imgIndex, 1);
-              this.$emit('auto-submit');
-            }).catch(err => {
-              console.error('删除图片失败:', err);
-              // 即使删除失败也从数组中移除
-              this.contentList[itemIndex].content.splice(imgIndex, 1);
-              this.$emit('auto-submit');
-            });
+              if (p) this.$emit('collect-delete', { filePaths: [p] })
+            } else {
+              // 删除服务器上的图片
+              delImage({ filePath: imageUrl }).then(() => {
+                // 从数组中移除图片
+                this.contentList[itemIndex].content.splice(imgIndex, 1);
+              }).catch(err => {
+                console.error('删除图片失败:', err);
+                // 即使删除失败也从数组中移除
+                this.contentList[itemIndex].content.splice(imgIndex, 1);
+              });
+            }
           }
         }
       });