From b41184a5deec40313c5e7e27991802e11ec85dd2 Mon Sep 17 00:00:00 2001
From: yf <770153798@qq.com>
Date: Tue, 7 Jan 2025 01:47:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DraftDesign/components/DesignPropEdit.vue |   7 +-
 .../components/node/ShapeBarCodeNode.vue      | 308 ++++++++++++++++++
 .../components/DraftDesign/config/index.ts    |  55 ++++
 .../DraftDesign/components/DesignPropEdit.vue |   7 +-
 .../components/DraftDesign/config/index.ts    |  55 ++++
 5 files changed, 426 insertions(+), 6 deletions(-)
 create mode 100644 hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeBarCodeNode.vue

diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
index 52e3fcd..0dc938f 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -310,7 +310,7 @@ import {reactive, watch} from 'vue'
 import {useMessage} from "@/hooks/web/useMessage";
 import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
 import DraftDesign from "@/components/DraftDesign/index.vue";
-import {ShapeType} from "@/components/DraftDesign/config";
+import {getHtml, ShapeType} from "@/components/DraftDesign/config";
 import {ProductCareItemApi} from "@/api/oms/productcareitem";
 import {replaceDomain} from "@/utils";
 import * as FileApi from "@/api/infra/file";
@@ -632,8 +632,9 @@ const uploadFile = async (fileName) => {
 }
 
 const  saveMaxSvg = (svgElement,fileName)=>{
-  const blob = new Blob([svgElement?.parentElement?.innerHTML], { type: 'text/html' });
-  const file = new File([blob], fileName+".html", {type: 'image/png'});
+  const htmlStr = getHtml(`${svgElement?.parentElement?.innerHTML}`);
+  const blob = new Blob([htmlStr], { type: 'text/html' });
+  const file = new File([blob], fileName+".html", {type: 'text/html'});
   FileApi.updateFile({file: file})
     .then((res) => {
       console.log("res"+res)
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeBarCodeNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeBarCodeNode.vue
new file mode 100644
index 0000000..a05f495
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeBarCodeNode.vue
@@ -0,0 +1,308 @@
+<!-- eslint-disable vue/this-in-template -->
+<template>
+  <div
+    :id="cellInfo.id"
+    class="node-content"
+    :class="{
+      'node-content-group' : cellInfo.editMode && cellInfo.propGroupId,
+      'node-content-tips' :  cellInfo.editMode && !cellInfo.style.shape.href
+    }"
+    :title="cellInfo.propGroupName"
+    v-reSize="changSize">
+
+    <div v-html="svgContent" style=" width: 100%;height: 100%;"></div>
+
+  </div>
+</template>
+
+<script lang="ts">
+//  图片
+import {defineComponent} from 'vue'
+import {
+  filterUnsafeHtml,
+  mergeDeepObject,
+  nextId,
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {
+  configInfo,
+  getBarCodeType,
+  getDraftDesignState,
+  VueCellShapeType
+} from "@/components/DraftDesign/config";
+import bwipjs from 'bwip-js';
+
+
+export default defineComponent({
+  name: 'ShapeBarcodeNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+        backgroundColor: this.cellInfo.style.shape.fillColor || "",
+        width: `1000px`,
+        height: `1000px`,
+        transform: ''
+      }
+      // const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
+      res.transform = `scaleX(${w}) scaleY(${h})`
+      return res;
+    },
+
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      textElId: nextId(),
+      svgContent: '',
+      cellInfo: {
+        id: '',
+        label: '文字说明',
+        editMode: false,
+        showInput: false,
+        propGroupName: "",
+        propGroupId: null,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            href: '',
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            fontSize: 12,
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      hrefBase64: null,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    safeHtml(val) {
+      if (val) {
+        val = val.replace(/[\n\r]/g, "<br/>")
+      }
+      return filterUnsafeHtml(val)
+    },
+    inputBlur() {
+      // this.cellInfo.showInput = false
+    },
+    inputChange() {
+      if (this.nodeInfo.store && this.nodeInfo.store.data) {
+        // this.nodeInfo.store.data.data.label = this.cellInfo.label
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    // @ts-ignore
+    setInput(val: boolean) {
+    },
+    changSize(size: any) {
+      if (!size) {
+        return;
+      }
+      this.sizeWInfo.width = size.width;
+      this.sizeWInfo.height = size.height;
+      this.minSize = Math.min(size.height, size.width)
+      let s = size.height + 12;
+      if (s > 60) {
+        s = s + s / 3
+      }
+      if (s < 6) {
+        s = 6
+      } else if (s >= 1000) {
+        s = 1000
+      }
+      this.changeBarcode();
+      console.log("生成");
+      // this.nodeInfo.store.data.size.width = size.width;
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeBarcode(){
+
+      console.log(" this.minSize", this.minSize)
+      this.svgContent = bwipjs.toSVG(this.getBarCodeType("code128"));
+    },
+    getBarCodeType(type){
+
+      return getBarCodeType(type, this.sizeWInfo.height / (2+(this.minSize/30)))
+    },
+    changeFontSize() {
+      // @ts-ignore
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      // @ts-ignore
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Barcode,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: 'rgba(0,0,0,0)', // 填充颜色
+            href: '',
+            label: '图片',
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+
+      // if(!this.hrefBase64 && this.cellInfo.style.shape.href && this.cellInfo.style.shape.href.indexOf("data:image") < 0){
+      //   // DataUri.imageToDataUri(this.cellInfo.style.shape.href,
+      //   //   function (nu, url) {
+      //   //     console.log("base64 完成")
+      //   //     // 第一个参数无效，用的只是第二个参数，但是第一个参数不写不行
+      //   //     // @ts-ignore
+      //   //     this.hrefBase64 = url; // 给图片标签赋值
+      //   //   }
+      //
+      //   // );
+      //   convertImageToBase64(this.cellInfo.style.shape.href).then((res)=>{
+      //     // @ts-ignore 待优化
+      //     this.hrefBase64 = res
+      //     console.log("base64 完成")
+      //     // this.cellInfo.style.shape.href = res
+      //   })
+      // }
+      setTimeout(() => {
+        if (this.nodeInfo.store && this.nodeInfo.store.data) {
+          this.nodeInfo.store.data.data = this.cellInfo
+        }
+      }, 300)
+      this.cellInfo.editMode = getDraftDesignState();
+      if (this.cellInfo.editMode && this.cellInfo.propGroupId) {
+        const showRandomGroupColor = configInfo.LK_SHOW_RANDOM_GROUP_COLOR()
+        if (!showRandomGroupColor) {
+          setTimeout(() => {
+            const [type, id] = this.cellInfo.propGroupId.split("_")
+            if (id) {
+              document.getElementById(this.cellInfo.id)?.style.setProperty(
+                "--lk-prop-group-color",
+                `#${id}`
+              );
+            }
+          }, 100)
+        }
+      }
+      this.changeFontSize();
+
+      // bwipjs.toSVG({
+      //     bcid: 'code128', // 条形码类型
+      //     text: 'Hello, World!', // 显示文本
+      //     width: 200, // 宽度
+      //     height: 50, // 高度
+      //   }, function(err, svg) {
+      //     if (err) throw err;
+      //     console.log("生成",svg);
+      //     this.svgContent = svg;
+      //   });
+
+
+
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts
index 617a2a6..7834f88 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts
@@ -521,3 +521,58 @@ export const configInfo = {
     return localStorage.setItem('lk_show_random_group_color', show ? 'true' : '')
   }
 }
+
+export const getHtml = (htmlStr:string)=>{
+  return `
+  <!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>oms稿件预览源文件</title>
+    <style>
+        #printButton {
+    padding: 3px 8px;
+    background-color: #4caf505e;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    position: fixed;
+    top: 10px;
+    z-index: 99999;
+    border-radius: 3px;
+        }
+        #printButton:hover {
+            background-color: #45a049;
+        }
+.tips{
+color: #ff0000;
+font-size: 14px;
+position: fixed;
+top: 30px;
+left: 30px;
+z-index: 99999;
+}
+    </style>
+</head>
+<body>
+  <div class="tips">
+          *仅供参考
+      </div>
+   ${htmlStr}  
+    <button id="printButton">存为PDF</button>
+    <script>
+        document.getElementById('printButton').addEventListener('click', function() {
+document.getElementById('printButton').style.top = '-10000px'
+            window.print();
+        });
+window.onafterprint = function() {
+          document.getElementById('printButton').style.top = '10px'
+        };
+    </script>
+</body>
+</html>
+
+  
+  `
+}
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
index 52e3fcd..0dc938f 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -310,7 +310,7 @@ import {reactive, watch} from 'vue'
 import {useMessage} from "@/hooks/web/useMessage";
 import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
 import DraftDesign from "@/components/DraftDesign/index.vue";
-import {ShapeType} from "@/components/DraftDesign/config";
+import {getHtml, ShapeType} from "@/components/DraftDesign/config";
 import {ProductCareItemApi} from "@/api/oms/productcareitem";
 import {replaceDomain} from "@/utils";
 import * as FileApi from "@/api/infra/file";
@@ -632,8 +632,9 @@ const uploadFile = async (fileName) => {
 }
 
 const  saveMaxSvg = (svgElement,fileName)=>{
-  const blob = new Blob([svgElement?.parentElement?.innerHTML], { type: 'text/html' });
-  const file = new File([blob], fileName+".html", {type: 'image/png'});
+  const htmlStr = getHtml(`${svgElement?.parentElement?.innerHTML}`);
+  const blob = new Blob([htmlStr], { type: 'text/html' });
+  const file = new File([blob], fileName+".html", {type: 'text/html'});
   FileApi.updateFile({file: file})
     .then((res) => {
       console.log("res"+res)
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts
index 617a2a6..7834f88 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts
@@ -521,3 +521,58 @@ export const configInfo = {
     return localStorage.setItem('lk_show_random_group_color', show ? 'true' : '')
   }
 }
+
+export const getHtml = (htmlStr:string)=>{
+  return `
+  <!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>oms稿件预览源文件</title>
+    <style>
+        #printButton {
+    padding: 3px 8px;
+    background-color: #4caf505e;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    position: fixed;
+    top: 10px;
+    z-index: 99999;
+    border-radius: 3px;
+        }
+        #printButton:hover {
+            background-color: #45a049;
+        }
+.tips{
+color: #ff0000;
+font-size: 14px;
+position: fixed;
+top: 30px;
+left: 30px;
+z-index: 99999;
+}
+    </style>
+</head>
+<body>
+  <div class="tips">
+          *仅供参考
+      </div>
+   ${htmlStr}  
+    <button id="printButton">存为PDF</button>
+    <script>
+        document.getElementById('printButton').addEventListener('click', function() {
+document.getElementById('printButton').style.top = '-10000px'
+            window.print();
+        });
+window.onafterprint = function() {
+          document.getElementById('printButton').style.top = '10px'
+        };
+    </script>
+</body>
+</html>
+
+  
+  `
+}