From 03bb6c6acb846618f52c6e5342cdec75a0810ca1 Mon Sep 17 00:00:00 2001
From: YuanFeng <770153798@qq.com>
Date: Thu, 24 Oct 2024 21:13:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E6=89=B9=E7=A8=BF?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=B8=BA=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DraftDesign/components/DesignPropEdit.vue | 89 +++++++++++--------
 .../DraftDesign/components/DesignPropEdit.vue | 89 +++++++++++--------
 2 files changed, 102 insertions(+), 76 deletions(-)

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 1d4945c..5ca75f3 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
@@ -264,7 +264,7 @@
 </template>
 
 <script lang="ts" setup name="DynamicPropConfig">
-import {ElButton, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
+import {ElButton, ElLoading, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
 import {reactive, watch} from 'vue'
 import {useMessage} from "@/hooks/web/useMessage";
 import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
@@ -277,6 +277,8 @@ import * as FileApi from "@/api/infra/file";
 import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import domtoimage from 'dom-to-image';
+import {usePageLoading} from "@/hooks/web/usePageLoading";
+const { loadStart, loadDone } = usePageLoading()
 // 动态属性配置
 const localeStore = useLocaleStore()
 const emit = defineEmits(['change', 'initSucceed'])
@@ -284,6 +286,7 @@ const draftDesignEditRef = ref()
 const that = reactive({
   svgId: "svg_"+Math.random().toString(36).substring(2),
   hideCreate: true,
+  pageLoading: {},
   propInfo: {
     reView: true,
     groupName: '', // 节点名称
@@ -443,25 +446,28 @@ const washingInfoListByType = (type) => {
 const getIngredientInfoListByType = (type) => {
   return that.ingredientInfoList.filter(item => item.type === type)
 }
+const uploadFile = async (fileName) => {
+ return new Promise((resolve, reject)=>{
 
-const toBase64 = async () =>{
-  let svgElement = document.getElementById(that.svgId);
-  console.log("svg2canvas",domtoimage)
-  domtoimage.toPng(svgElement)
-    .then((dataUrl) => {
-      that.previewData = dataUrl;
-      that.previewUrl  =""
-      // 下载
-      // const link = document.createElement('a');
-      // link.href = dataUrl;
-      // link.download = 'image.png';
-      // link.click();
-    })
-    .catch((error) => {
-      console.error('转换失败:', error);
-    });
-
-
+   let svgElement = document.getElementById(that.svgId);
+   domtoimage.toBlob(svgElement).then((blob) => {
+       FileApi.updateFile({ file: blob })
+         .then((res) => {
+           if (res.code === 0) {
+             resolve({
+               ...res,
+               filename: fileName
+             })
+           } else {
+             reject(res)
+           }
+         }) .catch((res) => {
+           reject(res)
+         })
+     }).catch(function (error) {
+       console.error('转换或上传过程中出现错误：', error);
+     });
+});
 }
 
 const deleteList = (item, index) => {
@@ -623,33 +629,40 @@ const updateDesign = () => {
 const changeType = () => {
   previewByDraftDesignId(that.draftDesignId, that.propInfo)
 }
+
 const getPropInfo = () => {
+
+  that.pageLoading = ElLoading.service({
+    lock: true,
+    text: '数据传输中...',
+    background: 'rgba(0,0,0,0.5)'
+  })
   // 预览数据 保持缩放
   return new Promise((resolve) => {
     // 成功后再获取图片
     draftDesignEditRef.value.toSVGData((url) => {
       that.previewUrl = url
       that.hideCreate = false;
-      let svgElement = document.getElementById(that.svgId);
-      domtoimage.toPng(svgElement)
-        .then((dataUrl) => {
-          that.previewData = dataUrl;
-          that.hideCreate = true;
-          that.previewUrl  =""
-          const info = draftDesignEditRef.value.getPropInfo();
-          resolve({
-            draftDesignData: draftDesignEditRef.value.getJson(),
-            propOrderByList: info.propOrderByList,
-            // 设计稿id
-            draftDesignId: that.draftDesignId,
-            previewImage: that.previewData,
-            propInfo: that.propInfo
-          })
+      // 年月日
+      const date = new Date();
+      const randChar = Math.random().toString(36).slice(-6);
+      const fileName = `${date.getFullYear()}${ (date.getMonth() + 1)}${ date.getDate()}_${that.draftDesignId }_${randChar}_稿.png`;
+      // 文件上传
+      uploadFile(fileName).then(res =>{
+        that.previewData = res.data;
+        that.hideCreate = true;
+        that.previewUrl  =""
+        const info = draftDesignEditRef.value.getPropInfo();
+        that.pageLoading.close()
+        resolve({
+          draftDesignData: draftDesignEditRef.value.getJson(),
+          propOrderByList: info.propOrderByList,
+          // 设计稿id
+          draftDesignId: that.draftDesignId,
+          previewImage: that.previewData,
+          propInfo: that.propInfo
         })
-        .catch((error) => {
-          console.error('转换失败:', error);
-        });
-
+      })
     }, {
       widthScale: 6,
       heightScale: 6
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 1d4945c..5ca75f3 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
@@ -264,7 +264,7 @@
 </template>
 
 <script lang="ts" setup name="DynamicPropConfig">
-import {ElButton, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
+import {ElButton, ElLoading, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
 import {reactive, watch} from 'vue'
 import {useMessage} from "@/hooks/web/useMessage";
 import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
@@ -277,6 +277,8 @@ import * as FileApi from "@/api/infra/file";
 import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import domtoimage from 'dom-to-image';
+import {usePageLoading} from "@/hooks/web/usePageLoading";
+const { loadStart, loadDone } = usePageLoading()
 // 动态属性配置
 const localeStore = useLocaleStore()
 const emit = defineEmits(['change', 'initSucceed'])
@@ -284,6 +286,7 @@ const draftDesignEditRef = ref()
 const that = reactive({
   svgId: "svg_"+Math.random().toString(36).substring(2),
   hideCreate: true,
+  pageLoading: {},
   propInfo: {
     reView: true,
     groupName: '', // 节点名称
@@ -443,25 +446,28 @@ const washingInfoListByType = (type) => {
 const getIngredientInfoListByType = (type) => {
   return that.ingredientInfoList.filter(item => item.type === type)
 }
+const uploadFile = async (fileName) => {
+ return new Promise((resolve, reject)=>{
 
-const toBase64 = async () =>{
-  let svgElement = document.getElementById(that.svgId);
-  console.log("svg2canvas",domtoimage)
-  domtoimage.toPng(svgElement)
-    .then((dataUrl) => {
-      that.previewData = dataUrl;
-      that.previewUrl  =""
-      // 下载
-      // const link = document.createElement('a');
-      // link.href = dataUrl;
-      // link.download = 'image.png';
-      // link.click();
-    })
-    .catch((error) => {
-      console.error('转换失败:', error);
-    });
-
-
+   let svgElement = document.getElementById(that.svgId);
+   domtoimage.toBlob(svgElement).then((blob) => {
+       FileApi.updateFile({ file: blob })
+         .then((res) => {
+           if (res.code === 0) {
+             resolve({
+               ...res,
+               filename: fileName
+             })
+           } else {
+             reject(res)
+           }
+         }) .catch((res) => {
+           reject(res)
+         })
+     }).catch(function (error) {
+       console.error('转换或上传过程中出现错误：', error);
+     });
+});
 }
 
 const deleteList = (item, index) => {
@@ -623,33 +629,40 @@ const updateDesign = () => {
 const changeType = () => {
   previewByDraftDesignId(that.draftDesignId, that.propInfo)
 }
+
 const getPropInfo = () => {
+
+  that.pageLoading = ElLoading.service({
+    lock: true,
+    text: '数据传输中...',
+    background: 'rgba(0,0,0,0.5)'
+  })
   // 预览数据 保持缩放
   return new Promise((resolve) => {
     // 成功后再获取图片
     draftDesignEditRef.value.toSVGData((url) => {
       that.previewUrl = url
       that.hideCreate = false;
-      let svgElement = document.getElementById(that.svgId);
-      domtoimage.toPng(svgElement)
-        .then((dataUrl) => {
-          that.previewData = dataUrl;
-          that.hideCreate = true;
-          that.previewUrl  =""
-          const info = draftDesignEditRef.value.getPropInfo();
-          resolve({
-            draftDesignData: draftDesignEditRef.value.getJson(),
-            propOrderByList: info.propOrderByList,
-            // 设计稿id
-            draftDesignId: that.draftDesignId,
-            previewImage: that.previewData,
-            propInfo: that.propInfo
-          })
+      // 年月日
+      const date = new Date();
+      const randChar = Math.random().toString(36).slice(-6);
+      const fileName = `${date.getFullYear()}${ (date.getMonth() + 1)}${ date.getDate()}_${that.draftDesignId }_${randChar}_稿.png`;
+      // 文件上传
+      uploadFile(fileName).then(res =>{
+        that.previewData = res.data;
+        that.hideCreate = true;
+        that.previewUrl  =""
+        const info = draftDesignEditRef.value.getPropInfo();
+        that.pageLoading.close()
+        resolve({
+          draftDesignData: draftDesignEditRef.value.getJson(),
+          propOrderByList: info.propOrderByList,
+          // 设计稿id
+          draftDesignId: that.draftDesignId,
+          previewImage: that.previewData,
+          propInfo: that.propInfo
         })
-        .catch((error) => {
-          console.error('转换失败:', error);
-        });
-
+      })
     }, {
       widthScale: 6,
       heightScale: 6