修复加载问题

.gitignore

@@ -28,4 +28,4 @@ yarn-error.log*
 /print/Input/*.png
 
 print/Profile/*
-/logs
\ No newline at end of file
+/logs!/vue.config.js

src/views/design/main/index.vue

@@ -21,7 +21,7 @@ export default {
     PrintDialog,
     VueDragResizeRotate,
     ImgSetting,
-    PicScrollbarBox,
+    PicScrollbarBox
   },
   destroyed() {
     document.removeEventListener("keyup", this.keyup);
@@ -57,7 +57,7 @@ export default {
       return {
         w: this.grid[this.systemSetting.gridValue].w,
         v: this.grid[this.systemSetting.gridValue].value,
-        h: this.grid[this.systemSetting.gridValue].h,
+        h: this.grid[this.systemSetting.gridValue].h
       };
     },
     gridSpacing() {
@@ -67,7 +67,7 @@ export default {
       if (unit === "mm") {
         return {
           w: gridSpacing + "px",
-          h: gridSpacing + "px",
+          h: gridSpacing + "px"
         };
       } else if (unit === "inch") {
         let w = this.grid[this.systemSetting.gridValue].w;
@@ -77,7 +77,7 @@ export default {
         return {
           // w: gridSpacing * ((w - row + 1) / row) + "px",
           w: gridSpacing * (w / row) + "px",
-          h: gridSpacing * (h / col) + "px",
+          h: gridSpacing * (h / col) + "px"
         };
       }
       return { w: "480px", h: "540px" };
@@ -89,7 +89,7 @@ export default {
       if (unit === "mm") {
         return {
           w: gridSpacing + "px",
-          h: gridSpacing + "px",
+          h: gridSpacing + "px"
         };
       } else if (unit === "inch") {
         let w = 480;
@@ -98,7 +98,7 @@ export default {
         let h = 540;
         return {
           w: gridSpacing * (w / row) + "px",
-          h: gridSpacing * (h / col) + "px",
+          h: gridSpacing * (h / col) + "px"
         };
       }
       return { w: "480px", h: "540px" };
@@ -125,7 +125,7 @@ export default {
       return null;
     },
 
-    ...mapState(["desktopDevice", "productDetail", "WHproportion"]),
+    ...mapState(["desktopDevice", "productDetail", "WHproportion"])
   },
   data() {
     return {
@@ -164,7 +164,7 @@ export default {
         row: 16,
         col: 18,
         h: 540,
-        w: 480,
+        w: 480
       },
       showImgSetting: true,
       printDialogShow: true,
@@ -182,7 +182,7 @@ export default {
       imgHistoryIndex: 0,
       row: 8,
       img,
-      col: 7,
+      col: 7
     };
   },
   watch: {
@@ -201,7 +201,7 @@ export default {
                 dom_i.style.zIndex === "" || !dom_i.style.zIndex
                   ? 0
                   : dom_i.style.zIndex;
-              dom[i].addEventListener("click", (e) => {
+              dom[i].addEventListener("click", e => {
                 this.selectIndex = i;
                 this.selectItem(i);
               });
@@ -211,7 +211,7 @@ export default {
         this.$store.commit("changeImgList", this.imgList);
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     selectIndex() {
       if (this.selectIndex >= 0) {
@@ -238,7 +238,7 @@ export default {
     },
     changeCheckFn(value) {
       console.log("check", value);
-    },
+    }
   },
   methods: {
     changePrintDialogShow() {
@@ -260,11 +260,11 @@ export default {
         formData.append("file", files[i]);
         let { data } = await that.$api.post("/uploadImage", formData, {
           headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-          },
+            "Content-Type": "application/x-www-form-urlencoded"
+          }
         });
         that.selectImgIndex = 0;
-        that.addFile(data, (file) => {
+        that.addFile(data, file => {
           that.imgHistoryList.push(JSON.parse(JSON.stringify(that.imgList)));
         });
       }
@@ -364,36 +364,40 @@ export default {
       return mm1.width;
     },
     setDesignImg(title) {
-      let img = this.selectImgList.find((it) => it.title === title);
+      let img = this.selectImgList.find(it => it.title === title);
       if (img) {
         console.log(this.detail.designImageSize, "this.detail.size");
         this.getBackFile(
           { files: [img], size: this.detail.designImageSize },
-          (file) => {
+          file => {
             this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
           }
         );
       }
     },
-    selectImg(it, i) {
+    selectImg(it) {
       if (this.isView) {
-        this.isView = false
+        this.isView = false;
       }
 
       // this.selectImgIndexList.push(i)
-      let item = this.imgList.find((img) => img.fileName === it.fileName);
+      let item = this.imgList.find(img => img.fileName === it.fileName);
       if (item) return;
       console.log(this.detail.designImageSize);
       let size = null;
-      if (this.detail.mssWidth && this.detail.mssHeight) {
+      if (
+        this.detail.mssWidth &&
+        this.detail.adjustable &&
+        this.detail.mssHeight
+      ) {
         size = {
           width: this.detail.mssWidth,
-          height: this.detail.mssHeight,
+          height: this.detail.mssHeight
         };
       }
-      this.getBackFile({files:[it],size:this.detail.adjustable}, (file) => {
+      this.getBackFile({ files: [it], size }, file => {
         this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
-      })
+      });
       // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
       // this.getBackFile({ files: [it], size });
     },
@@ -550,14 +554,14 @@ export default {
     },
     getComputedName(title) {
       let img = this.selectImgList.find(
-        (it) => it.title === title || it.title.includes(title)
+        it => it.title === title || it.title.includes(title)
       );
       return img?.designId;
     },
     getComputedTitle(title) {
       console.log(this.selectImgList, "this.selectImgList");
       let img = this.selectImgList.find(
-        (it) => it.title === title || it.title.includes(title)
+        it => it.title === title || it.title.includes(title)
       );
       return img?.productionFile;
     },
@@ -565,7 +569,7 @@ export default {
       let that = this;
       let bw = document.getElementById("line");
       bw = bw.clientWidth;
-      this.isView =false
+      this.isView = false;
       // bw = Number(bw.replsace("px", ""));
       for (let i = 0; i < files.length; i++) {
         files[i].url = files[i].productionFile || files[i].url;
@@ -597,16 +601,16 @@ export default {
             x,
             y,
             h: height_px,
-            r: 0,
+            r: 0
           });
           that.selectIndex = that.imgList.length - 1;
           that.showImgSetting = true;
           that.$nextTick(() => {
             that.ev("center");
           });
-          setTimeout(()=>{
+          setTimeout(() => {
             that.ev("center");
-          },10000)
+          }, 1000);
           if (i === files.length - 1) {
             callback && callback();
           }
@@ -618,7 +622,7 @@ export default {
       let bw = document.getElementById("line").clientWidth;
       let bh = document.getElementById("line").clientHeight;
       that.$nextTick(() => {
-        that.getImageSize(file.url).then((data) => {
+        that.getImageSize(file.url).then(data => {
           let w = document.getElementById("line").clientWidth / 2;
           let rate = data.height / data.width;
           that.imgList = [];
@@ -631,7 +635,7 @@ export default {
             x: w,
             y: (bw * (2 / 3) * rate) / 2,
             h: bw * (2 / 3) * rate,
-            r: 0,
+            r: 0
           });
           console.log(570, that.imgList);
           that.selectIndex = that.imgList.length - 1;
@@ -657,7 +661,7 @@ export default {
         image.onload = function() {
           resolve({
             width: image.width,
-            height: image.height,
+            height: image.height
           });
         };
         image.onerror = function() {
@@ -724,24 +728,24 @@ export default {
     },
 
     async cutImgFn() {
-      this.checkList = JSON.parse(JSON.stringify(this.selectImgList))
+      this.checkList = JSON.parse(JSON.stringify(this.selectImgList));
       try {
         const processQueue = await Promise.all(
-          this.checkList.map(async (el) => {
+          this.checkList.map(async el => {
             try {
               const outputDir = path.dirname(el.productionFile);
               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);
               fs.unlinkSync(el.productionFile);
               return {
                 fileName: outputFileName,
                 productionFile: res.msg[0]?.outputPath,
-                designId: el.designId,
+                designId: el.designId
               };
             } catch (error) {
               console.error(`处理失败: ${el.productionFile}`, error);
@@ -750,13 +754,13 @@ export default {
         );
 
         // 等待所有异步操作完成
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
-        this.selectImgList.forEach((el) => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        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.url = newMap.get(el.designId).productionFile;
-            el.isCut = true
+            el.isCut = true;
             el.productionFile = newMap.get(el.designId).productionFile;
           }
         });
@@ -764,7 +768,7 @@ export default {
 
         if (this.imgList.length) {
           const fileNameExists = this.checkList.some(
-            (el) => el.fileName === this.imgList[0].fileName
+            el => el.fileName === this.imgList[0].fileName
           );
           if (fileNameExists) {
             this.imgList = [];
@@ -773,7 +777,7 @@ export default {
         }
 
         this.checkList = [];
-        this.getBackFile({files:[this.selectImgList[0]]})
+        this.getBackFile({ files: [this.selectImgList[0]] });
       } catch (error) {
         console.error("错误", error);
       }
@@ -797,13 +801,13 @@ export default {
         this.isView = false;
       }
       this.$store.commit("setIsPreView", this.isView);
-    },
+    }
   },
   mounted() {
     this.imgHeight = window.screen.height + "px";
     this.systemSetting = this.$dataStore.get("setting");
 
-    bus.$on("busEmit", (v) => {
+    bus.$on("busEmit", v => {
       let { type, value, size } = v;
 
       switch (type) {
@@ -815,7 +819,7 @@ export default {
           this.indexChange(value);
           break;
         case "bg":
-          this.changeImageColor(value, (res) => {
+          this.changeImageColor(value, res => {
             this.img = res;
           });
           break;
@@ -845,7 +849,7 @@ export default {
             this.selectImgIndex = 0;
             this.getBackFile(
               { files: [value[0]], size: this.detail.designImageSize || null },
-              (file) => {
+              file => {
                 this.imgHistoryList.push(
                   JSON.parse(JSON.stringify(this.imgList))
                 );
@@ -868,7 +872,7 @@ export default {
   beforeDestroy() {
     // 销毁组件时移除事件监听器
     document.removeEventListener("click", this.handleClick);
-  },
+  }
 };
 </script>
 
@@ -1005,7 +1009,6 @@ export default {
                 >
                   <img width="150px" :src="img.url" />
                 </div>
-
               </div>
             </template>
           </PicScrollbarBox>
@@ -1014,13 +1017,18 @@ export default {
               <el-button
                 type="primary"
                 size="small"
+                v-if="selectImgList.length"
                 style="margin: 10px;"
                 @click="cutImgFn"
                 >裁切</el-button
               >
             </template>
             <template #mainContent>
-              <div v-for="(img,i) in selectImgList" class="img-item" @click.stop.prevent="selectImg(img)">
+              <div
+                v-for="(img, i) in selectImgList"
+                class="img-item"
+                @click.stop.prevent="selectImg(img)"
+              >
                 <img :key="i" style="width:100%" :src="img.productionFile" />
                 <!-- <span>{{ img.designId }}</span> -->
               </div>
@@ -1076,7 +1084,7 @@ export default {
                   style="margin-left: 5px"
                   v-if="detail.podProductionNo"
                   :style="{
-                    color: detail.customizedQuantity > 1 ? 'red' : '#67C23A',
+                    color: detail.customizedQuantity > 1 ? 'red' : '#67C23A'
                   }"
                 >
                   {{ detail.customizedQuantity > 1 ? "多" : "单" }}
@@ -1190,7 +1198,6 @@ export default {
                   :angle="item.r / WHproportion"
                   style="pointer-events: auto;cursor: default"
                 >
-
                   <div
                     ref="sucaitu-img"
                     :style="{ zIndex: item.zIndex }"
@@ -1212,7 +1219,7 @@ export default {
                 :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
                 :style="{
                   width: 480 + 'px',
-                  height: 540 + 'px',
+                  height: 540 + 'px'
                 }"
                 class="grid"
                 style="border-style:dashed"
@@ -1225,7 +1232,7 @@ export default {
             v-else
             style="width: 100%;height: 100%;background-color:#77797a "
           >
-            <div :style="{background:gridBg}" id="line" class="boxShaow">
+            <div :style="{ background: gridBg }" id="line" class="boxShaow">
               <!-- <div
             class="sucaitu"
             :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
@@ -1233,7 +1240,10 @@ export default {
               <div class="left-bg-color">
                 <el-color-picker
                   color-format="hex"
-                                  :predefine="predefineColors" size="small" v-model="gridBg"></el-color-picker>
+                  :predefine="predefineColors"
+                  size="small"
+                  v-model="gridBg"
+                ></el-color-picker>
               </div>
               <div class="sucaitu" :style="{ width: '100%', height: '100%' }">
                 <vue-drag-resize-rotate
@@ -1251,9 +1261,9 @@ export default {
                   :draggable="true"
                   :resizable="true"
                   :rotatable="true"
-                  @dragstop="(a) => dragStop(a, item)"
-                  @resizestop="(a) => resizeStop(a, item)"
-                  @rotatestop="(a) => rotating(a, item)"
+                  @dragstop="a => dragStop(a, item)"
+                  @resizestop="a => resizeStop(a, item)"
+                  @rotatestop="a => rotating(a, item)"
                   :angle="item.r"
                 >
                   <div
@@ -1286,7 +1296,7 @@ export default {
                 :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
                 :style="{
                   width: gridWH.w + 'px',
-                  height: gridWH.h + 'px',
+                  height: gridWH.h + 'px'
                 }"
                 class="grid"
               >
@@ -1526,7 +1536,7 @@ img {
   margin-right: 5px;
 
   box-sizing: border-box;
-  img{
+  img {
     width: 100%;
     height: auto;
   }
@@ -1676,7 +1686,7 @@ img {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
     0 0 20px rgba(0, 0, 0, 0.12);
   position: relative;
-  .left-bg-color{
+  .left-bg-color {
     position: absolute;
     left: -57px;
   }
@@ -1692,9 +1702,8 @@ img {
 // ::v-deep.el-table thead {
 //   color: black;
 // }
-.fixed-border{
+.fixed-border {
   position: fixed;
   z-index: 69;
 }
-
 </style>