稿件设计同步前台项目

2024-09-17 14:05:44 +08:00 · 2024-09-17 14:05:44 +08:00 · c20846faf3
parent 457c955a19
commit c20846faf3
9 changed files with 110 additions and 80 deletions
--- a/hangtag-ui/hangtag-ui-front/src/components/Dialog/src/Dialog.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/Dialog/src/Dialog.vue
@ -8,7 +8,7 @@ const slots = useSlots()
 const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
-  fullscreen: propTypes.bool.def(true),
+  fullscreen: propTypes.bool.def(false),
  width: propTypes.oneOfType([String, Number]).def('40%'),
  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
@ -78,7 +78,6 @@ const dialogStyle = computed(() => {
          class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between"
        >
          <Icon
-            v-if="fullscreen"
            class="is-hover mr-10px cursor-pointer"
            :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
            color="var(--el-color-info)"
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
@ -1,6 +1,6 @@
 <!-- eslint-disable vue/this-in-template -->
 <template>
-  <div style="max-height: 90vh; overflow:auto;">
+  <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
     <span>
         仅供参考(for reference only),绿色边框属于边界
       </span>
@ -63,7 +63,6 @@
          <el-form label-width="180px">
            <el-form-item label="风格主题" v-show="that.draftDesignList.length > 1">
              <div class="flex ml-3">
-                <div style="margin-right: 8px">主题风格:</div>
                <div>
                  <el-select class="min-w-100" v-model="that.draftDesignId" @change="changeType">
                    <el-option
@ -241,6 +240,7 @@ const that = reactive({
  propOrderByList: [],
  draftDesignList: [],
  draftDesignId: '',
+  reView: false,
  currentZoom: 6,
  changeCount: 0,
  previewUrl: "",
@ -395,6 +395,7 @@ const formData = ref({
 // 预览 图稿id
 const previewByDraftDesignId = async (id: string | number, propData = {}) => {
  if (id) {
+    loading.value = true
    that.draftDesignId = +id;
    const res = await DraftDesignDataApi.getDraftDesignData(id)
    if (res) {
@ -432,8 +433,12 @@ const loadConfig = (config: object, propData = {}) => {
  that.sizeInfo = that.pageConfig.editArea
  // true, conf.pageConfig, conf.data, test
  draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo)
-  showPng();
  queryUseLabel();
+
+  setTimeout(()=>{
+    showPng();
+  },100)
+
 }
 const queryUseLabel = (label) => {
  FileApi.getDomain().then(domain => {
@ -448,6 +453,7 @@ const queryUseLabel = (label) => {
    }).then((data) => {
      that.ingredientInfoList = [];
      if (data.list) {
+
        that.ingredientInfoList = data.list.map((item) => {
          return {
            value: item.value,
@ -470,6 +476,7 @@ const queryUseLabel = (label) => {
      type: '2'
    }).then((data) => {
      that.washingInfoList = [];
+
      if (data.list) {
        that.washingInfoList = data.list.map((item) => {
          return {
@ -491,17 +498,15 @@ const showPng = () => {
    loading.value = true
    setTimeout(() => {
      draftDesignEditRef.value.toPngUrl((url) => {
+        console.log("url",url)
        that.previewUrl = url
        const info = draftDesignEditRef.value.getPropInfo();
-
        that.propInfo = {
          ...info.propDefault,
          ...that.propInfo || {}
        };
        that.propOrderByList = info.propOrderByList;
-        setTimeout(() => {
-          submit();
-        }, 300)
+        submit();
        loading.value = false;
      }, {
        widthScale: that.currentZoom,
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
@ -18,7 +18,7 @@
        "位置信息配置为节点的位置信息。如：添加了3个配置数据这时会依次添加到对应位置上。从而实现动态属性配置。"
      </el-alert>
      <el-form>
-        <el-row>
+        <el-row style="min-width: 900px">
          <el-col :span="6" :xs="12">
            <el-form-item label="组名称">
              <el-input v-model="that.configInfo.groupName" placeholder="请输入组名称"/>
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/layout/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/layout/index.vue
@ -365,10 +365,14 @@
                          <div :title="item.value">
                            <svg width="120" height="20">
                              <!-- 使用路径绘制一条虚线 -->
-                              <line x1="10" y1="10" x2="190" y2="10"
-                                    stroke="black"
-                                    stroke-width="2"
-                                    :stroke-dasharray="item.value"/>
+                              <line
+                                x1="10"
+                                y1="10"
+                                x2="190"
+                                y2="10"
+                                stroke="black"
+                                stroke-width="2"
+                                :stroke-dasharray="item.value"/>
                            </svg>
                          </div>
                        </template>
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
@ -14,7 +14,7 @@
      :style="svgStyle"
    >
      <image
-        :href="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
+        :href="this.hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
        style="width: 100%;height: 100%;"
        :stroke="cellInfo.style.shape.strokeColor"
        :stroke-width="cellInfo.style.shape.strokeWidth"
@ -110,6 +110,7 @@ export default defineComponent({
            fillColor: '#000000', // 填充颜色
            fillOpacity: '', // 填充颜色的不透明度
            href: '',
+            hrefBase64: null,
            opacity: '', // 元素的不透明度
            strokeDashoffset: '', // 虚线起始偏移量
            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
@ -255,10 +256,12 @@ export default defineComponent({
          text: {}
        }
      }, info)
+
      if(this.cellInfo.style.shape.href){
        convertImageToBase64(this.cellInfo.style.shape.href).then((res)=>{
          // @ts-ignore
          this.hrefBase64 = res
+          // this.cellInfo.style.shape.hrefBase64 = res
        })
      }
      setTimeout(() => {
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
@ -59,7 +59,7 @@ import {
  mergeDeepObject, objectHasKey,
 } from "@/components/DraftDesign/utils/FuncUtil";

-import {register, getTeleport} from '@antv/x6-vue-shape'
+import {register} from '@antv/x6-vue-shape'

 import './icons/style.css'

@ -169,8 +169,6 @@ const regNode = () => {
    })
  }
 }
-const TeleportContainer = defineComponent(getTeleport());
-
 // @ts-nocheck
 const emit = defineEmits(["save"])
 const {t} = useI18n() // 国际化
@ -699,9 +697,9 @@ const toPngUrl = (callback: (url: string) => void, options?: {
    bottom: number
  }
 }) => {
+
  let widthScale = options && options.widthScale ? options.widthScale : 5
  let heightScale = options && options.heightScale ? options.heightScale : 5
-
  graph.toPNG((dataUri) => {
    that.previewUrl = dataUri;
    callback(that.previewUrl)
@ -1489,6 +1487,7 @@ const submitProp = (data) => {
    newNode.attr('body/scaling', 'none')
    data.cellIds.push(newNode.id)
    graph.addNode(newNode)
+
  }
  removeGroup(data.groupId);
  data.maxSize = Math.min(data.pointList.length, data.maxSize)
@ -1510,14 +1509,24 @@ const removeEmptyGroup = () => {
  }

  let delIndex = []
+  let allKey = []
  for (let i = 0; i < that.pageConfig.propList.length; i++) {
    if(!propGroupIdList.includes(that.pageConfig.propList[i].groupId)){
      delIndex.push(i)
+      continue;
    }
+    allKey.push(that.pageConfig.propList[i].groupId)
  }
  for (let i = 0; i < delIndex.length; i++) {
    that.pageConfig.propList.splice(delIndex[i], 1)
  }
+  let newArr = []
+  for (let i = 0; i < that.pageConfig.propOrderByList.length; i++) {
+    if(allKey.includes(that.pageConfig.propOrderByList[i].key)){
+      newArr.push(that.pageConfig.propOrderByList[i])
+    }
+  }
+  that.pageConfig.propOrderByList = newArr
 }
 const orderByPropList = () => {

--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/utils/Dpi.ts
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/utils/Dpi.ts
@ -37,26 +37,22 @@ export function calcDpiFromSize( screenSize=16,opt = 'd'){
  return calcDpi(widthValue, heightValue, screenSize, opt);
 }
 const tmpImage = {}
-export function convertImageToBase64(url) {
-  return new Promise(async (resolve, reject)=>{
-    FileApi.getDomain().then(async (domain) => {
-      url =  replaceDomain(domain, url)
-      if(tmpImage[url]){
-        resolve(tmpImage[url]);
-        console.log('缓存')
-        return;
-      }
-      try {
-        const response = await fetch(url);
-        const blob = await response.blob();
-        const base = `data:${response.headers.get('content-type')};base64,${btoa(String.fromCharCode(...new Uint8Array(await blob.arrayBuffer())))}`
-        tmpImage[url] = base
-        resolve(base)
-      }catch (e) {
-        resolve(url);
-      }
-    })
-
+export function convertImageToBase64(url:string) {
+  return new Promise(async (resolve)=>{
+    if(tmpImage[url]){
+      resolve(tmpImage[url]);
+      console.log('缓存')
+      return;
+    }
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const base = `data:${response.headers.get('content-type')};base64,${btoa(String.fromCharCode(...new Uint8Array(await blob.arrayBuffer())))}`
+      tmpImage[url] = base
+      resolve(base)
+    }catch (e) {
+      resolve(url);
+    }
  })

 }
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/draftdesigndata/detials/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/draftdesigndata/detials/index.vue
@ -6,9 +6,6 @@
      label-width="100px"
      v-loading="formLoading"
    >
-      <div>
-        <DraftDesign ref="draftDesignRef" @save="submitForm"/>
-      </div>
      <el-row>
        <el-col :span="8" :xs="24">
          <el-form-item label="编码" prop="code">
@ -26,8 +23,12 @@
          </el-form-item>
        </el-col>
      </el-row>
+      <div>
+        <DraftDesign ref="draftDesignRef" @save="submitForm"/>
+      </div>
+
      <el-row>
-        <el-col :span="6" :xs="24">
+        <el-col :span="6" :xs="24" v-if="false">
          <el-form-item label="语言标识" prop="locale">
            <el-select v-model="formData.locale" placeholder="请选择语言标识">
              <el-option
@ -64,6 +65,7 @@
 import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { DraftDesignDataApi, DraftDesignDataVO } from '@/api/oms/draftdesigndata'
 import DraftDesign from "@/components/DraftDesign/index.vue";
+import router from "@/router";

 /** 稿件模板数据  表单 */
 defineOptions({ name: 'DraftDesignDataForm' })
@ -158,9 +160,17 @@ const submitForm = async (detailsData) => {
    data.details = JSON.stringify(detailsData)
    console.log("data",data)
    if (formType.value === 'create') {
-      await DraftDesignDataApi.createDraftDesignData(data)
+     const resId = await DraftDesignDataApi.createDraftDesignData(data)
      message.success(t('common.createSuccess'))
-      resetForm()
+      if(copyData.value){
+        console.log("resId",resId)
+        await router.push({path: '/base/oms/draftdesigndata/detials',query: {
+            id: resId
+          }})
+      }else {
+        resetForm()
+      }
+
    } else {
      await DraftDesignDataApi.updateDraftDesignData(data)
      message.success(t('common.updateSuccess'))
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/productcareitem/ProductCareItemForm.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/productcareitem/ProductCareItemForm.vue
@ -21,7 +21,7 @@
              clearable
              placeholder="请输入名称"/>
          </el-form-item>
-          <el-form-item label="类型" prop="value">
+          <el-form-item label="类型" prop="type">
            <el-select v-model="formData.type">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.OMS_PRODUCT_CARE_ITEM_TYPE)"
@ -255,44 +255,48 @@ defineExpose({open}) // 提供 open 方法，用于打开弹窗

 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
+const submitForm = () => {
  // 校验表单
-  await formRef.value.validate()
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as ProductCareItemVO
-    let countInfo = {};
-    for (let i = 0; i < that.langList.length; i++) {
-      const l = that.langList[i].locale
-      if (!l) {
-        message.error(`第${i + 1}行语言不能为空`)
-        return;
+  formRef.value.validate().then(async ()=>{
+    // 提交请求
+    formLoading.value = true
+    try {
+      const data = formData.value as unknown as ProductCareItemVO
+      let countInfo = {};
+      for (let i = 0; i < that.langList.length; i++) {
+        const l = that.langList[i].locale
+        if (!l) {
+          message.error(`第${i + 1}行语言不能为空`)
+          return;
+        }
+        if (!that.langList[i].value) {
+          message.error(`第${i + 1}行翻译内容不能为空`)
+          return;
+        }
+        if (countInfo[l]) {
+          message.error(`${l} 翻译内容重复`)
+          return;
+        }
+        countInfo[l] = 1;
      }
-      if (!that.langList[i].value) {
-        message.error(`第${i + 1}行翻译内容不能为空`)
-        return;
+      data.langMapping = JSON.stringify(that.langList)
+      if (formType.value === 'create') {
+        await ProductCareItemApi.createProductCareItem(data)
+        message.success(t('common.createSuccess'))
+      } else {
+        await ProductCareItemApi.updateProductCareItem(data)
+        message.success(t('common.updateSuccess'))
      }
-      if (countInfo[l]) {
-        message.error(`${l} 翻译内容重复`)
-        return;
-      }
-      countInfo[l] = 1;
+      dialogVisible.value = false
+      // 发送操作成功的事件
+      emit('success')
+    } finally {
+      formLoading.value = false
    }
-    data.langMapping = JSON.stringify(that.langList)
-    if (formType.value === 'create') {
-      await ProductCareItemApi.createProductCareItem(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await ProductCareItemApi.updateProductCareItem(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
+  }).catch(()=>{
+    message.error('请填写必填项')
+  })
+
 }

 /** 重置表单 */