修改裁切功能图片数组排序以及删除旧图片

src/views/design/main/index.vue

@@ -7,6 +7,8 @@ import PrintDialog from "@/views/design/head/printDialog.vue";
 import { mmToPx } from "@/utils";
 import { raw } from "express";
 const path = require("path");
+const fs = require("fs");
+const uuid = require("uuid");
 
 import { mapState } from "vuex";
 const img = require("../../../assets/bg_tshirt_shadow.png");
@@ -388,6 +390,8 @@ export default {
     },
     selectItem(index) {
       let dom = document.getElementsByClassName("drr");
+      console.log("dom", dom);
+
       for (let i = 0; i < dom.length; i++) {
         if (index !== i) {
           dom[i].classList.remove("active");
@@ -587,32 +591,19 @@ export default {
     },
 
     async cutImgFn() {
-      // 临时存储处理结果
-
-      const processedDesignIds = new Set();
-      console.log(593, this.checkList);
       try {
-        // 预处理所有待处理项
         const processQueue = await Promise.all(
           this.checkList.map(async (el) => {
             try {
-              // 使用path模块处理跨平台路径
-              const fileName = path.basename(
-                el.productionFile,
-                path.extname(el.productionFile)
-              );
               const outputDir = path.dirname(el.productionFile);
-              const timeBasedId = Date.now().toString(36);
-              const outputFileName = `${fileName}_${timeBasedId}.png`;
+              const outputFileName = `${uuid.v4()}.png`;
               const outputPath = path.join(outputDir, outputFileName);
               const params = {
                 inputPath: el.productionFile,
-                outputPath: outputPath, // 统一使用正斜杠
+                outputPath: outputPath,
               };
               const res = await this.$api.post("/processImage", params);
-
-              // 处理成功结果
-              processedDesignIds.add(el.designId);
+              fs.unlinkSync(el.productionFile);
               return {
                 fileName: outputFileName,
                 productionFile: res.msg[0]?.outputPath,
@@ -626,26 +617,30 @@ export default {
 
         // 等待所有异步操作完成
         await new Promise((resolve) => setTimeout(resolve, 100));
-
-        // 更新选中列表（排除已处理的项）
-        const remainingItems = this.selectImgList.filter(
-          (item) => !processedDesignIds.has(item.designId)
-        );
+        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
+        this.selectImgList.forEach((el) => {
+          if (newMap.has(el.designId)) {
+            el.fileName = newMap.get(el.designId).fileName;
+            el.productionFile = newMap.get(el.designId).productionFile;
+          }
+        });
         console.log("selectImgList", this.selectImgList);
-        console.log("imgList", this.imgList);
-        this.$set(this, "selectImgList", [...remainingItems, ...processQueue]);
 
         if (this.imgList.length) {
           const fileNameExists = this.checkList.some(
             (el) => el.fileName === this.imgList[0].fileName
           );
-          this.imgList = fileNameExists ? [] : this.imgList;
+          if (fileNameExists) {
+            this.imgList = [];
+            this.selectIndex = -1;
+          }
         }
+
         this.checkList = [];
-        if (this.selectIndex >= 0) this.selectIndex = -1;
+
+        this.selectImg(this.selectImgList[0]);
       } catch (error) {
-        console.error("[全局处理错误]", error);
-        // 可在此处添加全局错误提示
+        console.error("错误", error);
       }
     },
   },
@@ -1007,6 +1002,11 @@ img {
     font-size: 14px;
     margin: 5px 0;
     color: black;
+    display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */
+    max-width: 270px; /* 限制宽度 */
+    word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
+    white-space: normal; /* 确保正常换行 */
+    text-align: center;
   }
 }