添加裁切功能

src/server/entity/function.js

@@ -86,6 +86,7 @@ export default {
         files = files.map((el) => {
           return { url: `${fileEnv}${el}` };
         });
+        console.log(89, files);
 
         if (req.body[1] === 1) {
           downloadImage(files)
@@ -324,13 +325,37 @@ export default {
       res.json({ code: 500, msg: err.message });
     }
   },
-  cropImageTransparentEdges: async (req, res) => {
-    res.json({ code: 200, msg: 1 });
+  //裁切单个图片的透明白边
+  imageTransparentEdges: async (req, res) => {
+    const { inputPath, outputPath } = req.body;
+    try {
+      const data = await cropImageTransparentEdges(inputPath, outputPath);
+
+      res.json({ code: 200, msg: data });
+    } catch (err) {
+      res.json({ code: 500, msg: err.message });
+    }
   },
-  cropTransparentEdges: async (req, res) => {
-    res.json({ code: 200, msg: 1 });
+  //裁切图片目录中的所有图片的透明白边
+  imageListTransparentEdges: async (req, res) => {
+    const { inputDir, outputDir } = req.body;
+    try {
+      const data = await cropTransparentEdges(inputDir, outputDir);
+
+      res.json({ code: 200, msg: data });
+    } catch (err) {
+      res.json({ code: 500, msg: err.message });
+    }
   },
-  processImages: async (req, res) => {
-    res.json({ code: 200, msg: 1 });
+  //输入图片路径或目录
+  processImage: async (req, res) => {
+    const { inputPath, outputPath } = req.body;
+    try {
+      const data = await processImages(inputPath, outputPath);
+
+      res.json({ code: 200, msg: data });
+    } catch (err) {
+      res.json({ code: 500, msg: err.message });
+    }
   },
 };

src/server/routes/index.js

@@ -31,10 +31,10 @@ router.get("/checkUpdate", fn.checkUpdate);
 // 增量更新
 router.post("/incrementalUpdates", fn.incrementalUpdates);
 // 裁切单个图片的透明白边
-router.post("/cropImageTransparentEdges", fn.cropImageTransparentEdges);
+router.post("/imageTransparentEdges", fn.imageTransparentEdges);
 // 裁切图片目录中的所有图片的透明白边
-router.post("/cropTransparentEdges", fn.cropTransparentEdges);
+router.post("/imageListTransparentEdges", fn.imageListTransparentEdges);
 // 处理图片并输出结果
-router.post("/processImages", fn.processImages);
+router.post("/processImage", fn.processImage);
 
 export { router as default };

src/server/utils/index.js

@@ -97,6 +97,8 @@ export const downloadImage = (list) => {
                 const filename = list[i].url.split("/")[
                   list[i].url.split("/").length - 1
                 ];
+                console.log(filename);
+
                 list[i].list.push({
                   fileName,
                   productionFile: p,

src/server/utils/setImage.js

@@ -18,6 +18,7 @@ async function cropImageTransparentEdges(inputPath, outputPath, options = {}) {
   if (!fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }
+  console.log(21, outputDir);
 
   try {
     // 读取图片信息
@@ -192,7 +193,3 @@ module.exports = {
   cropImageTransparentEdges,
   processImages,
 };
-processImages(
-  "C:\\Users\\lm121\\Desktop\\text\\1744786196514f6f7a856378.png",
-  "C:\\Users\\lm121\\Desktop\\text\\1744786196514f6f7a856378_1.png"
-);

src/views/design/head/index.vue

@@ -216,13 +216,14 @@ export default {
           }
         );
         this.detail = findByPodProductionNo.data;
-        console.log(findByPodProductionNo.data, "findByPodProductionNo.data");
+
         ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
         // 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
         let res = await this.$api.post("/downloadBySubOrderNumber", [
           this.detail.id,
           this.$store.state.desktopDevice,
         ]);
+        console.log("res111", res);
         this.imgList = [];
         res.data.forEach((el) => {
           this.imgList = this.imgList.concat(el.list || []);

src/views/design/head/printDialog.vue

@@ -287,10 +287,7 @@ export default {
     },
     return_data() {
       let dom_id = `${this.imgList[0].fileName}_0`;
-      const data = cropImageTransparentEdges(this.imgList[0].url);
-      console.log(290, data);
 
-      return;
       const image = document.getElementById(dom_id);
       const line = document.getElementById("line");
 

src/views/design/main/index.vue

@@ -6,6 +6,8 @@ import bus from "@/bus";
 import PrintDialog from "@/views/design/head/printDialog.vue";
 import { mmToPx } from "@/utils";
 import { raw } from "express";
+const path = require("path");
+
 import { mapState } from "vuex";
 const img = require("../../../assets/bg_tshirt_shadow.png");
 export default {
@@ -81,6 +83,8 @@ export default {
   data() {
     return {
       actionList: [],
+      checkList: [],
+      oldImgList: [],
       parentWidth: 0,
       systemSetting: {},
       imgHeight: 0,
@@ -581,6 +585,69 @@ export default {
       };
       return img;
     },
+
+    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 outputPath = path.join(outputDir, outputFileName);
+              const params = {
+                inputPath: el.productionFile,
+                outputPath: outputPath, // 统一使用正斜杠
+              };
+              const res = await this.$api.post("/processImage", params);
+
+              // 处理成功结果
+              processedDesignIds.add(el.designId);
+              return {
+                fileName: outputFileName,
+                productionFile: res.msg[0]?.outputPath,
+                designId: el.designId,
+              };
+            } catch (error) {
+              console.error(`处理失败: ${el.productionFile}`, error);
+            }
+          })
+        );
+
+        // 等待所有异步操作完成
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        // 更新选中列表（排除已处理的项）
+        const remainingItems = this.selectImgList.filter(
+          (item) => !processedDesignIds.has(item.designId)
+        );
+        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;
+        }
+        this.checkList = [];
+        if (this.selectIndex >= 0) this.selectIndex = -1;
+      } catch (error) {
+        console.error("[全局处理错误]", error);
+        // 可在此处添加全局错误提示
+      }
+    },
   },
   mounted() {
     this.imgHeight = window.screen.height + "px";
@@ -743,7 +810,27 @@ export default {
         class="select-img"
         v-if="selectImgList.length && $store.state.desktopDevice === 1"
       >
-        <div
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-bottom: 10px;"
+          @click="cutImgFn"
+          >裁切</el-button
+        >
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox
+            v-for="(it, i) in selectImgList"
+            :key="i"
+            :label="it"
+            :class="{ imgchecked: checkList.includes(it) }"
+          >
+            <div class="img-item" @click.stop.prevent="selectImg(it, i)">
+              <img style="width: 140px" :src="it.productionFile" />
+              <span>{{ it.designId }}</span>
+            </div>
+          </el-checkbox>
+        </el-checkbox-group>
+        <!-- <div
           @click="selectImg(it, i)"
           v-for="(it, i) in selectImgList"
           :key="i"
@@ -751,7 +838,7 @@ export default {
         >
           <img style="width: 140px;height: auto;" :src="it.productionFile" />
           <span>{{ it.designId }}</span>
-        </div>
+        </div> -->
       </div>
     </img-setting>
   </div>
@@ -934,6 +1021,35 @@ img {
     border-color: transparent !important;
   }
 }
+
+.el-checkbox {
+  border: 1px solid transparent;
+
+  width: 100%;
+  margin: 0;
+  margin-bottom: 5px;
+  ::v-deep .el-checkbox__input {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+  }
+  ::v-deep .el-checkbox__label {
+    width: 100%;
+    padding: 0;
+  }
+
+  // .img-item {
+  //   width: 100%;
+  //   height: 100%;
+  //   .img {
+  //     width: 100%;
+  //     height: 100%;
+  //   }
+  // }
+}
+.imgchecked {
+  border: 1px solid #409eff;
+}
 </style>
 <style>
 .el-upload {