1

.env.development

@@ -13,3 +13,5 @@ VITE_APP_WS_API = ':10000/test-api'
 VITE_REFRESH = false
 
 VITE_APP_IP = '121.37.194.75'
+
+VITE_APP_IPS = 'http://121.37.194.75:10004'

.env.staging

@@ -15,4 +15,6 @@ VITE_BUILD_COMPRESS = gzip
 # 是否强制刷新
 VITE_REFRESH = true
 
-VITE_APP_IP = '121.37.194.75'
+VITE_APP_IP = '121.37.194.75'
+
+VITE_APP_IPS = 'http://121.37.194.75:10004'

src/router/index.js

@@ -258,6 +258,20 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: "/draft-design-drawing",
+    component: Layout,
+    redirect: "/draft-design-drawing",
+    children: [
+      {
+        path: "/draft-design-drawing",
+        name: "draft-design-drawing",
+        component: () => import(/* webpackChunkName: "page" */ "@/views/sell/draft-design/drawing/index.vue"),
+        props: true,
+        meta: { title: "图稿制作" },
+      },
+    ],
+  },
 ];
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [

src/views/sell/draft-design/drawing/index.vue

@@ -0,0 +1,541 @@
+<template>
+  <el-card class="box-card">
+    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
+      <template #detail>
+        <div style="width: 100%; padding: 0 20px">
+          <el-table :data="[formData.data]" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" border>
+            <el-table-column label="产品基础信息" width="320">
+              <template #default="{ row }">
+                <div style="line-height: 35px">
+                  <span style="color: black; font-weight: 700">商品名称: </span>
+                  <span>{{ row.skuSpecName }}</span>
+                </div>
+                <div style="line-height: 35px">
+                  <span style="color: black; font-weight: 700">产品尺寸: </span>
+                  <span>{{ row.length }} * {{ row.width }} * {{ row.height }}</span>
+                </div>
+                <div style="line-height: 35px">
+                  <span style="color: black; font-weight: 700">SKU品号: </span>
+                  <span>{{ row.skuSpecCode }}</span>
+                </div>
+                <div style="line-height: 35px">
+                  <span style="color: black; font-weight: 700">BOM品号: </span>
+                  <span>{{ row.bomSpecCode }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="客户定制图样" width="260">
+              <template #default="{ row }">
+                <div style="display: flex; width: 100%">
+                  <div style="width: 60px; height: 32px; line-height: 32px">设计图:</div>
+                  <div style="width: calc(100% - 60px)">
+                    <el-image fit="fill" style="width: 160px; height: 160px; cursor: pointer" :src="row.blueprint" @click="openFile(row.blueprint)">
+                      <template #error>
+                        <div class="image-slot">
+                          <el-icon><Picture /></el-icon>
+                        </div>
+                      </template>
+                    </el-image>
+                    <el-button type="primary" @click="clickToView()" text>查看定制图样</el-button>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="设计样图" width="280">
+              <template #default="{ row }">
+                <div style="display: flex; width: 100%">
+                  <div style="width: 70px; height: 32px; line-height: 32px">设计样图:</div>
+                  <div style="width: calc(100% - 70px)">
+                    <el-image
+                      fit="fill"
+                      style="width: 160px; height: 160px; cursor: pointer"
+                      v-if="row.proofingImg"
+                      :src="row.proofingImg"
+                      @click="openFile(row.proofingImg)">
+                    </el-image>
+                    <el-upload
+                      :show-file-list="false"
+                      action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+                      :data="uploadImgData"
+                      :before-upload="uploadImgFile"
+                      :on-success="handleImgSuccess"
+                      style="width: 100%"
+                      accept=".jpg,.jpeg,.png,.GIF,.JPG,.PNG">
+                      <el-button type="primary" text>上传图片</el-button>
+                    </el-upload>
+                  </div>
+                </div>
+                <div style="display: flex; margin-top: 20px; width: 100%">
+                  <div style="width: 70px; height: 32px; line-height: 32px">图稿文件:</div>
+                  <div style="width: calc(100% - 70px); line-height: 32px">
+                    <a
+                      style="color: #409eff; cursor: pointer; word-break: break-all; margin-right: 10px"
+                      @click="openFile(row.proofingDocument)"
+                      v-if="row.proofingDocument">
+                      {{ row.proofingDocument }}
+                    </a>
+                    <el-upload
+                      :show-file-list="false"
+                      action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+                      :data="uploadData"
+                      :before-upload="uploadFile"
+                      :on-success="handleSuccess"
+                      style="width: 100%">
+                      <el-button type="primary" text>上传EZ3文件</el-button>
+                    </el-upload>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="图稿确认历史" min-width="500">
+              <template #default="{}">
+                <div style="width: 100%">
+                  <el-table :data="logList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
+                    <el-table-column label="时间" prop="createTime" width="160" />
+                    <el-table-column label="操作人" prop="userName" width="100" />
+                    <el-table-column label="类型" width="120">
+                      <template #default="{ row }">
+                        <div>{{ dictKeyValue(row.type, logType) }}</div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="备注" prop="remark" />
+                  </el-table>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </byForm>
+    <div style="padding: 10px 0; text-align: center">
+      <el-button style="width: 120px" @click="clickCancel()" v-preReClick>取 消</el-button>
+      <el-button type="primary" style="width: 120px" @click="clickSubmit()" v-preReClick>提交图稿</el-button>
+    </div>
+
+    <el-dialog title="定制图样" v-if="openDrawing" v-model="openDrawing" width="70%">
+      <div style="height: calc(100vh - 166px); overflow-y: auto; overflow-x: hidden; position: relative; display: flex; justify-content: center">
+        <div style="position: absolute; left: 10px; top: 10px">
+          <div style="font-size: 20; font-weight: 700">裸垫参数:</div>
+          <div style="margin: 4px 8px 4px">长: {{ formData.data.length }}mm</div>
+          <div style="margin: 4px 8px 4px">宽: {{ formData.data.width }}mm</div>
+          <div style="margin-top: 16px; font-size: 20; font-weight: 700">元素参数:</div>
+          <div style="margin: 4px 8px 4px">长: {{ elLength }}mm</div>
+          <div style="margin: 4px 8px 4px">宽: {{ elWidth }}mm</div>
+          <div style="margin: 4px 8px 4px">旋转角度: {{ elAngle }}</div>
+        </div>
+        <div style="position: absolute">
+          <canvas ref="canvas" :width="width" :height="height" style="border: 1px solid #ccc"></canvas>
+        </div>
+      </div>
+      <div style="text-align: center; padding-top: 10px">
+        <el-button @click="openDrawing = false" size="large">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+import useTagsViewStore from "/src/store/modules/tagsView.js";
+import byForm from "/src/components/byForm/index";
+import { nextTick } from "vue";
+// import { ElMessage } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+const router = useRouter();
+const formOption = reactive({
+  inline: true,
+  labelWidth: "100px",
+  itemWidth: 100,
+  rules: [],
+  labelPosition: "right",
+});
+const formConfig = computed(() => {
+  return [
+    {
+      type: "title",
+      title: "产品",
+      label: "",
+    },
+    {
+      type: "slot",
+      slotName: "detail",
+    },
+  ];
+});
+const formData = reactive({
+  data: {},
+});
+const rules = ref({
+  isProofing: [{ required: true, message: "请选择是否打样", trigger: "change" }],
+  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
+  consignee: [{ required: true, message: "请输入联系人", trigger: "blur" }],
+  consigneeNumber: [{ required: true, message: "请输入联系人电话", trigger: "blur" }],
+  province: [{ required: true, message: "请输入省", trigger: "blur" }],
+  city: [{ required: true, message: "请输入市", trigger: "blur" }],
+  county: [{ required: true, message: "请输入区/县", trigger: "blur" }],
+  streetCode: [{ required: true, message: "请输入街道", trigger: "blur" }],
+  detailedAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
+  skuCode: [{ required: true, message: "请输入SKU品号", trigger: "blur" }],
+});
+const logList = ref([]);
+const logType = ref([
+  { dictKey: 10, dictValue: "上传设计图" },
+  { dictKey: 20, dictValue: "上传打样图" },
+  { dictKey: 21, dictValue: "上传打样图稿" },
+  { dictKey: 22, dictValue: "驳回打样图稿" },
+  { dictKey: 30, dictValue: "确认打样图" },
+  { dictKey: 40, dictValue: "上传设计图稿" },
+]);
+const submit = ref(null);
+onMounted(() => {
+  if (route.query && route.query.id) {
+    proxy.post("/orderSkuArtworkMake/detail", { id: route.query.id }).then((res) => {
+      formData.data = res;
+    });
+    proxy.post("/orderSkuArtworkLog/list", { orderSkuId: route.query.id }).then((res) => {
+      logList.value = res;
+    });
+  }
+});
+const openFile = (path) => {
+  window.open(path, "_blank");
+};
+const uploadImgData = ref({});
+const uploadImgFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadImgData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+const handleImgSuccess = (response, UploadFile) => {
+  formData.data.proofingImg = UploadFile.raw.fileUrl;
+};
+const uploadData = ref({});
+const uploadFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+const handleSuccess = (response, UploadFile) => {
+  formData.data.proofingDocument = UploadFile.raw.fileUrl;
+};
+const openDrawing = ref(false);
+const width = ref(0);
+const height = ref(0);
+const canvas = ref(null);
+const ctx = ref("");
+const clickCoordinate = { x: 0, y: 0 };
+/** 图片数据 名字 位置等 */
+const imagesData = ref([]);
+const elLength = ref("");
+const elWidth = ref("");
+const elAngle = ref("");
+const elCoordinates = ref([]);
+const init = () => {
+  ctx.value = canvas.value.getContext("2d");
+  canvas.value.addEventListener("mousedown", mousedownFn, false);
+  let list = JSON.parse(formData.data.blueprintDetails)[0].imagesData;
+  if (list && list.length > 0) {
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].imgStatus) {
+        let img = new Image();
+        img.setAttribute("crossOrigin", "anonymous");
+        img.src = list[i].imgUrl.replace("https://os.winfaster.cn/sd_sell", import.meta.env.VITE_APP_IPS + "/sd_sell");
+        img.onload = function () {
+          const obj = { ...list[i], img };
+          imagesData.value.push(obj);
+          drawByObj(obj);
+        };
+      } else {
+        imagesData.value.push(list[i]);
+        drawText(list[i]);
+      }
+    }
+  }
+};
+const drawByObj = (obj) => {
+  if (obj.selectStatus) {
+    drawGuideByObj(obj);
+  }
+  ctx.value.save(); // 保存旧的坐标系状态
+  ctx.value.translate(obj.x + obj.w / 2, obj.y + obj.h / 2); // 坐标原点移动到旋转中心
+  ctx.value.rotate((obj.angle * Math.PI) / 180); // 旋转坐标系
+  if (obj.verticalMirrorStatus) {
+    ctx.value.scale(1, -1); //上下镜像翻转
+  }
+  if (obj.horizontalMirrorStatus) {
+    ctx.value.scale(-1, 1); //左右镜像翻转
+  }
+  ctx.value.translate(-(obj.x + obj.w / 2), -(obj.y + obj.h / 2)); // 坐标原点还原
+  ctx.value.drawImage(obj.img, obj.x, obj.y, obj.w, obj.h);
+  ctx.value.restore(); // 还原之前的坐标系状态
+};
+const drawGuideByObj = (obj) => {
+  if (obj.imgStatus) {
+    ctx.value.save(); // 保存旧的坐标系状态
+    ctx.value.beginPath();
+    ctx.value.lineWidth = 4;
+    ctx.value.strokeStyle = "green";
+    ctx.value.translate(obj.x + obj.w / 2, obj.y + obj.h / 2); // 坐标原点移动到旋转中心
+    ctx.value.rotate((obj.angle * Math.PI) / 180); // 旋转坐标系
+    ctx.value.translate(-(obj.x + obj.w / 2), -(obj.y + obj.h / 2)); // 坐标原点还原
+    ctx.value.rect(obj.x, obj.y, obj.w, obj.h); // 以新坐标系为参照，画出矩形。
+    ctx.value.stroke();
+    ctx.value.restore(); // 还原之前的坐标系状态
+  } else {
+    let textPixel = getStringPixel(obj.text, obj.size + "px 宋体");
+    let textWidth = textPixel.width;
+    let fontHeight = textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent;
+    ctx.value.save(); // 保存旧的坐标系状态
+    ctx.value.beginPath();
+    ctx.value.lineWidth = 2;
+    ctx.value.strokeStyle = "green";
+    ctx.value.translate(obj.x + textWidth / 2, obj.y - fontHeight / 2); // 坐标原点移动到旋转中心
+    ctx.value.rotate((obj.angle * Math.PI) / 180); // 旋转坐标系
+    ctx.value.translate(-(obj.x + textWidth / 2), -(obj.y - fontHeight / 2)); // 坐标原点还原
+    ctx.value.rect(obj.x, obj.y - fontHeight, textWidth, fontHeight); // 以新坐标系为参照，画出矩形。
+    ctx.value.stroke();
+    ctx.value.restore(); // 还原之前的坐标系状态
+  }
+};
+const mousedownFn = (e) => {
+  clickCoordinate.x = e.offsetX - canvas.value.offsetLeft;
+  clickCoordinate.y = e.offsetY - canvas.value.offsetTop;
+  checkElement();
+};
+const getStringPixel = (text, font) => {
+  ctx.value.font = font;
+  return ctx.value.measureText(text);
+};
+const drawText = (obj) => {
+  if (obj.selectStatus) {
+    drawGuideByObj(obj);
+  }
+  let textPixel = getStringPixel(obj.text, obj.size + "px 宋体");
+  let textWidth = textPixel.width;
+  let fontHeight = textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent;
+  ctx.value.save(); // 保存旧的坐标系状态
+  ctx.value.translate(obj.x + textWidth / 2, obj.y - fontHeight / 2); // 坐标原点移动到旋转中心
+  ctx.value.rotate((obj.angle * Math.PI) / 180); // 旋转坐标系
+  if (obj.verticalMirrorStatus) {
+    ctx.value.scale(1, -1); //上下镜像翻转
+  }
+  if (obj.horizontalMirrorStatus) {
+    ctx.value.scale(-1, 1); //左右镜像翻转
+  }
+  ctx.value.translate(-(obj.x + textWidth / 2), -(obj.y - fontHeight / 2)); // 坐标原点还原
+  ctx.value.beginPath();
+  ctx.value.font = obj.size + "px 宋体";
+  ctx.value.fillStyle = obj.color;
+  ctx.value.fillText(obj.text, obj.x, obj.y);
+  ctx.value.restore(); // 还原之前的坐标系状态
+};
+const repaint = () => {
+  // 清空画布
+  ctx.value.clearRect(0, 0, 2 * canvas.value.width, 2 * canvas.value.height);
+  // 清空画布以后重新绘制
+  imagesData.value.forEach((i) => {
+    if (i.imgStatus) {
+      drawByObj(i);
+    } else {
+      drawText(i);
+    }
+  });
+  nextTick(() => {
+    elCoordinates.value.forEach((i) => {
+      if (i.textStatus) {
+        ctx.value.beginPath();
+        ctx.value.font = "24px 宋体";
+        ctx.value.fillStyle = i.color;
+        ctx.value.fillText(i.text, i.x, i.y);
+      } else {
+        ctx.value.beginPath();
+        ctx.value.moveTo(i.x1, i.y1);
+        ctx.value.lineTo(i.x2, i.y2);
+        ctx.value.lineWidth = 1;
+        ctx.value.strokeStyle = "red";
+        ctx.value.stroke();
+      }
+    });
+  });
+};
+/** 判断点击的是哪个 */
+const checkElement = () => {
+  elLength.value = "";
+  elWidth.value = "";
+  elAngle.value = "";
+  elCoordinates.value = [];
+  try {
+    imagesData.value.forEach((item, index) => {
+      drawGuideByObj(item);
+      if (ctx.value.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
+        imagesData.value = imagesData.value.map((itemList, listIndex) => {
+          let selectStatusA = false;
+          if (listIndex === index) {
+            selectStatusA = true;
+          }
+          return {
+            ...itemList,
+            selectStatus: selectStatusA,
+          };
+        });
+        imagesData.value.sort((a, b) => (b.selectStatus ? -1 : 0));
+        elementMarking(item);
+        throw "选中";
+      } else {
+        item.selectStatus = false;
+        repaint();
+      }
+    });
+  } catch (e) {
+    console.log(e);
+    repaint();
+  }
+};
+const elementMarking = (item) => {
+  elAngle.value = item.angle;
+  if (item.imgStatus) {
+    let x = Number(Math.round(item.x));
+    let y = Number(Math.round(item.y));
+    let w = Number(Math.round(item.w));
+    let h = Number(Math.round(item.h));
+    elLength.value = Number(Math.round(item.w / 5));
+    elWidth.value = Number(Math.round(item.h / 5));
+    let x1 = x;
+    let y1 = y;
+    let x3 = x;
+    let y3 = y + h;
+    let cx = x + w / 2;
+    let cy = y + h / 2;
+    let x1_rotated = (x1 - cx) * Math.cos((item.angle * Math.PI) / 180) - (y1 - cy) * Math.sin((item.angle * Math.PI) / 180);
+    let y1_rotated = (x1 - cx) * Math.sin((item.angle * Math.PI) / 180) + (y1 - cy) * Math.cos((item.angle * Math.PI) / 180);
+    let x3_rotated = (x3 - cx) * Math.cos((item.angle * Math.PI) / 180) - (y3 - cy) * Math.sin((item.angle * Math.PI) / 180);
+    let y3_rotated = (x3 - cx) * Math.sin((item.angle * Math.PI) / 180) + (y3 - cy) * Math.cos((item.angle * Math.PI) / 180);
+    x1_rotated += cx;
+    y1_rotated += cy;
+    x3_rotated += cx;
+    y3_rotated += cy;
+    if (x1_rotated == x3_rotated) {
+      if (y1_rotated < y3_rotated) {
+        elCoordinates.value.push({ textStatus: false, x1: 0, y1: y1_rotated, x2: x1_rotated, y2: y1_rotated });
+        elCoordinates.value.push({ textStatus: false, x1: x1_rotated, y1: 0, x2: x1_rotated, y2: y1_rotated });
+        elCoordinates.value.push({ textStatus: true, x: x1_rotated / 2, y: y1_rotated + 30, color: "red", text: Number(Math.round(x1_rotated / 5)) + "mm" });
+        elCoordinates.value.push({ textStatus: true, x: x1_rotated + 10, y: y1_rotated / 2, color: "red", text: Number(Math.round(y1_rotated / 5)) + "mm" });
+      } else {
+        elCoordinates.value.push({ textStatus: false, x1: 0, y1: y3_rotated, x2: x3_rotated, y2: y3_rotated });
+        elCoordinates.value.push({ textStatus: false, x1: x3_rotated, y1: 0, x2: x3_rotated, y2: y3_rotated });
+        elCoordinates.value.push({ textStatus: true, x: x3_rotated / 2, y: y3_rotated + 30, color: "red", text: Number(Math.round(x3_rotated / 5)) + "mm" });
+        elCoordinates.value.push({ textStatus: true, x: x3_rotated + 10, y: y3_rotated / 2, color: "red", text: Number(Math.round(y3_rotated / 5)) + "mm" });
+      }
+    } else if (x1_rotated > x3_rotated) {
+      elCoordinates.value.push({ textStatus: false, x1: 0, y1: y3_rotated, x2: x3_rotated, y2: y3_rotated });
+      elCoordinates.value.push({ textStatus: false, x1: x3_rotated, y1: 0, x2: x3_rotated, y2: y3_rotated });
+      elCoordinates.value.push({ textStatus: true, x: x3_rotated / 2, y: y3_rotated + 30, color: "red", text: Number(Math.round(x3_rotated / 5)) + "mm" });
+      elCoordinates.value.push({ textStatus: true, x: x3_rotated + 10, y: y3_rotated / 2, color: "red", text: Number(Math.round(y3_rotated / 5)) + "mm" });
+    } else {
+      elCoordinates.value.push({ textStatus: false, x1: 0, y1: y1_rotated, x2: x1_rotated, y2: y1_rotated });
+      elCoordinates.value.push({ textStatus: false, x1: x1_rotated, y1: 0, x2: x1_rotated, y2: y1_rotated });
+      elCoordinates.value.push({ textStatus: true, x: x1_rotated / 2, y: y1_rotated + 30, color: "red", text: Number(Math.round(x1_rotated / 5)) + "mm" });
+      elCoordinates.value.push({ textStatus: true, x: x1_rotated + 10, y: y1_rotated / 2, color: "red", text: Number(Math.round(y1_rotated / 5)) + "mm" });
+    }
+  } else {
+    let textPixel = getStringPixel(item.text, item.size + "px 宋体");
+    let x = Number(Math.round(item.x));
+    let y = Number(Math.round(item.y));
+    let w = Number(Math.round(textPixel.width));
+    let h = Number(Math.round(textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent));
+    elLength.value = Number(Math.round(textPixel.width / 5));
+    elWidth.value = Number(Math.round((textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent) / 5));
+    let x1 = x;
+    let y1 = y - h;
+    let x3 = x;
+    let y3 = y;
+    let cx = x + w / 2;
+    let cy = y - h / 2;
+    let x1_rotated = (x1 - cx) * Math.cos((item.angle * Math.PI) / 180) - (y1 - cy) * Math.sin((item.angle * Math.PI) / 180);
+    let y1_rotated = (x1 - cx) * Math.sin((item.angle * Math.PI) / 180) + (y1 - cy) * Math.cos((item.angle * Math.PI) / 180);
+    let x3_rotated = (x3 - cx) * Math.cos((item.angle * Math.PI) / 180) - (y3 - cy) * Math.sin((item.angle * Math.PI) / 180);
+    let y3_rotated = (x3 - cx) * Math.sin((item.angle * Math.PI) / 180) + (y3 - cy) * Math.cos((item.angle * Math.PI) / 180);
+    x1_rotated += cx;
+    y1_rotated += cy;
+    x3_rotated += cx;
+    y3_rotated += cy;
+    if (x1_rotated == x3_rotated) {
+      if (y1_rotated < y3_rotated) {
+        elCoordinates.value.push({ textStatus: false, x1: 0, y1: y1_rotated, x2: x1_rotated, y2: y1_rotated });
+        elCoordinates.value.push({ textStatus: false, x1: x1_rotated, y1: 0, x2: x1_rotated, y2: y1_rotated });
+        elCoordinates.value.push({ textStatus: true, x: x1_rotated / 2, y: y1_rotated + 30, color: "red", text: Number(Math.round(x1_rotated / 5)) + "mm" });
+        elCoordinates.value.push({ textStatus: true, x: x1_rotated + 10, y: y1_rotated / 2, color: "red", text: Number(Math.round(y1_rotated / 5)) + "mm" });
+      } else {
+        elCoordinates.value.push({ textStatus: false, x1: 0, y1: y3_rotated, x2: x3_rotated, y2: y3_rotated });
+        elCoordinates.value.push({ textStatus: false, x1: x3_rotated, y1: 0, x2: x3_rotated, y2: y3_rotated });
+        elCoordinates.value.push({ textStatus: true, x: x3_rotated / 2, y: y3_rotated + 30, color: "red", text: Number(Math.round(x3_rotated / 5)) + "mm" });
+        elCoordinates.value.push({ textStatus: true, x: x3_rotated + 10, y: y3_rotated / 2, color: "red", text: Number(Math.round(y3_rotated / 5)) + "mm" });
+      }
+    } else if (x1_rotated > x3_rotated) {
+      elCoordinates.value.push({ textStatus: false, x1: 0, y1: y3_rotated, x2: x3_rotated, y2: y3_rotated });
+      elCoordinates.value.push({ textStatus: false, x1: x3_rotated, y1: 0, x2: x3_rotated, y2: y3_rotated });
+      elCoordinates.value.push({ textStatus: true, x: x3_rotated / 2, y: y3_rotated + 30, color: "red", text: Number(Math.round(x3_rotated / 5)) + "mm" });
+      elCoordinates.value.push({ textStatus: true, x: x3_rotated + 10, y: y3_rotated / 2, color: "red", text: Number(Math.round(y3_rotated / 5)) + "mm" });
+    } else {
+      elCoordinates.value.push({ textStatus: false, x1: 0, y1: y1_rotated, x2: x1_rotated, y2: y1_rotated });
+      elCoordinates.value.push({ textStatus: false, x1: x1_rotated, y1: 0, x2: x1_rotated, y2: y1_rotated });
+      elCoordinates.value.push({ textStatus: true, x: x1_rotated / 2, y: y1_rotated + 30, color: "red", text: Number(Math.round(x1_rotated / 5)) + "mm" });
+      elCoordinates.value.push({ textStatus: true, x: x1_rotated + 10, y: y1_rotated / 2, color: "red", text: Number(Math.round(y1_rotated / 5)) + "mm" });
+    }
+  }
+};
+const clickToView = () => {
+  width.value = Number(Math.round(formData.data.width * 5));
+  height.value = Number(Math.round(formData.data.length * 5));
+  openDrawing.value = true;
+  nextTick(() => {
+    init();
+  });
+};
+const clickCancel = () => {
+  const useTagsStore = useTagsViewStore();
+  useTagsStore.delVisitedView(router.currentRoute.value);
+  router.replace({ path: "/sell/draft-design/draft-design-management" });
+};
+const clickSubmit = () => {
+  submit.value.handleSubmit(() => {
+    console.log(formData.data);
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-table__cell) {
+  vertical-align: top;
+}
+::v-deep(.image-slot) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+::v-deep(.image-slot .el-icon) {
+  font-size: 30px;
+}
+::v-deep(.tableHeader th) {
+  .cell {
+    line-height: 35px !important;
+  }
+}
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+</style>

src/views/sell/draft-design/management/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-card class="box-card">
+    <byTable
+      :source="sourceList.data"
+      :pagination="sourceList.pagination"
+      :config="config"
+      :loading="loading"
+      :searchConfig="searchConfig"
+      highlight-current-row
+      @get-list="getList"
+      @clickReset="clickReset">
+    </byTable>
+  </el-card>
+</template>
+
+<script setup>
+import byTable from "/src/components/byTable/index";
+
+const { proxy } = getCurrentInstance();
+const statusList = ref([
+  {
+    dictKey: 0,
+    dictValue: "待制作",
+  },
+  {
+    dictKey: 1,
+    dictValue: "待确认",
+  },
+  {
+    dictKey: 2,
+    dictValue: "已驳回",
+  },
+  {
+    dictKey: 3,
+    dictValue: "已确认",
+  },
+]);
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    status: "",
+  },
+});
+const loading = ref(false);
+const searchConfig = computed(() => {
+  return [
+    {
+      type: "select",
+      prop: "status",
+      label: "图稿状态",
+      data: statusList.value,
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "订单号",
+        prop: "orderCode",
+      },
+    },
+    {
+      attrs: {
+        label: "图稿状态",
+        prop: "status",
+      },
+      render(val) {
+        return proxy.dictKeyValue(val, statusList.value);
+      },
+    },
+    {
+      attrs: {
+        label: "SKU品号",
+        prop: "skuSpecCode",
+      },
+    },
+    {
+      attrs: {
+        label: "主材品号",
+        prop: "bomSpecCode",
+      },
+    },
+    {
+      attrs: {
+        label: "下单时间",
+        prop: "orderCreateTime",
+      },
+    },
+    {
+      attrs: {
+        label: "图稿确认时间",
+        prop: "artworkConfirmTime",
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: 120,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "详情",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickDetail(row);
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+const getList = async (req, status) => {
+  if (status) {
+    sourceList.value.pagination = {
+      pageNum: sourceList.value.pagination.pageNum,
+      pageSize: sourceList.value.pagination.pageSize,
+    };
+  } else {
+    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  }
+  loading.value = true;
+  proxy.post("/orderSkuArtworkMake/page", sourceList.value.pagination).then((res) => {
+    sourceList.value.data = res.rows;
+    sourceList.value.pagination.total = res.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+getList();
+const clickReset = () => {
+  getList("", true);
+};
+const clickDetail = (row) => {
+  proxy.$router.replace({
+    path: "/draft-design-drawing",
+    query: {
+      id: row.id,
+      random: proxy.random(),
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>