修复加载问题

1d5679ad · zhuzhequan · 43ef3d12 · 1d5679ad · 1d5679ad
Commit 1d5679ad authored May 06, 2025 by zhuzhequan
Hide whitespace changes
Inline Side-by-side

Showing with 75 additions and 67 deletions

.gitignore
+1 -2

src/views/design/main/index.vue
+74 -65

No files found.
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,4 @@ yarn-error.log*
 /print/Input/*.png
 print/Profile/*
-/logs
+/logs!/vue.config.js
\ No newline at end of file
--- a/src/views/design/main/index.vue
+++ b/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));
+        await new Promise(resolve => setTimeout(resolve, 100));
-        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
+        const newMap = new Map(processQueue.map(el => [el.designId, el]));
-        this.selectImgList.forEach((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 ? "多" : "单" }}
@@ -1161,7 +1169,7 @@ export default {
      class="main-bg"
      :style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
    >
-      <div  class="container">
+      <div class="container">
        <div style="width: 100%;height: 100%; ">
          <div v-if="isView" id="img">
            <div
@@ -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,15 +1232,18 @@ 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' }"
          > -->
              <div class="left-bg-color">
                <el-color-picker
-                                  color-format="hex"
+                  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)"
+                  @dragstop="a => dragStop(a, item)"
-                  @resizestop="(a) => resizeStop(a, item)"
+                  @resizestop="a => resizeStop(a, item)"
-                  @rotatestop="(a) => rotating(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>