Просмотр исходного кода

refactor(photography): 优化模板数据传递方式

- 将路由参数传递改为sessionStorage存储,避免URL长度限制
- 添加时间戳标识数据,确保数据唯一性
- 修复新增模板页面组件导入路径错误
- 清理sessionStorage避免数据残留
- 优化模板编辑页面数据解析逻辑
- 统一模板创建和编辑的数据传递格式
panqiuyao 1 день назад
Родитель
Сommit
0ee2ac94e9
2 измененных файлов с 70 добавлено и 49 удалено
  1. 23 16
      frontend/src/views/Photography/detail.vue
  2. 47 33
      frontend/src/views/Tpl/Edit/index.vue

+ 23 - 16
frontend/src/views/Photography/detail.vue

@@ -66,7 +66,7 @@
 
         <!-- 未开发的功能 -->
         <div class="service-tab " title="新增自定义详情页模板" @click="addCustomTemplate"
-          v-log="{ describe: { action: '点击新增自定义详情页模板', service: '新增自定义详情页模板' } }">
+             v-log="{ describe: { action: '点击新增自定义详情页模板', service: '新增自定义详情页模板' } }">
           <div class="tab-content">
             <div class="tab-img flex">
               <img src="@/assets/images/detail/xqmb.svg" alt="详情页模板自定义" class="tab-icon" />
@@ -726,14 +726,17 @@ const confirmGoodsSelection = async () => {
       })
     }
 
-    // 生成商品模板成功后,跳转到新增模板页,并携带当前选中的货号
+    // 使用sessionStorage传递数据,避免URL长度限制
+    const templateData = {
+      customer_template_images: goodsImages,
+      template_image_order: data?.template_image_order || '',
+      timestamp: Date.now() // 添加时间戳用于标识数据
+    }
+    sessionStorage.setItem('addTpl_template_data', JSON.stringify(templateData))
+
+    // 生成商品模板成功后,跳转到新增模板页
     router.push({
-      name: 'addTpl',
-      query: {
-        // 统一用 JSON 字符串传递图片与顺序信息
-        customer_template_images: encodeURIComponent(JSON.stringify(goodsImages)),
-        template_image_order: data?.template_image_order || '',
-      },
+      name: 'addTpl'
     })
   } finally {
     // 无论成功或失败,都关闭弹窗,保留当前选择
@@ -1094,7 +1097,7 @@ const viewTemplate = (template) => {
 const editTemplate = async (template: any) => {
   if (!template) return
 
-  // 将画布 JSON、名称、商品图片等信息通过 query 传给编辑页
+  // 将画布 JSON、名称、商品图片等信息通过 sessionStorage 传给编辑页
   // const customerTemplateJson = template.template_local_classes|| []
   const resp = await fetch(template.template_local_classes)
   const json = await resp.json()
@@ -1103,15 +1106,19 @@ const editTemplate = async (template: any) => {
   const templateImageOrder = template.template_image_order || ''
   const templateName = template.template_name || ''
 
+  // 使用sessionStorage传递数据,避免URL长度限制
+  const templateData = {
+    customer_template_json: customerTemplateJson,
+    template_name: templateName,
+    customer_template_images: customerTemplateImages,
+    template_image_order: templateImageOrder,
+    timestamp: Date.now() // 添加时间戳用于标识数据
+  }
+  sessionStorage.setItem('editTpl_template_data', JSON.stringify(templateData))
+
   router.push({
     name: 'editTpl',
-    params: { id: template.id },
-    query: {
-      customer_template_json: encodeURIComponent(JSON.stringify(customerTemplateJson)),
-      template_name: templateName,
-      customer_template_images: encodeURIComponent(JSON.stringify(customerTemplateImages)),
-      template_image_order: templateImageOrder,
-    },
+    params: { id: template.id }
   })
 };
 

+ 47 - 33
frontend/src/views/Tpl/Edit/index.vue

@@ -35,7 +35,7 @@ import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import headerBar from "@/components/header-bar/index.vue";
-import marketingEdit from '@/views/components/marketingEdit'
+import marketingEdit from '@/views/components/marketingEdit/index.vue'
 import useClientStore from '@/stores/modules/client'
 
 import { saveCustomerTemplate } from '@/apis/other'
@@ -52,28 +52,26 @@ const templateName = ref('')
 const showNameDialog = ref(false) // 由"保存"触发,而不是进入页面就弹
 const pendingPayload = ref<any | null>(null)
 
-// 编辑模式:从路由 query 中还原模板数据和名称
+// 编辑模式:从sessionStorage中还原模板数据和名称
 if (isEdit) {
-  const query: any = route.query || {}
-
-  // 还原画布 JSON
-  const rawJson = query.customer_template_json as string | undefined
-  if (rawJson) {
+  const templateDataStr = sessionStorage.getItem('editTpl_template_data')
+  if (templateDataStr) {
     try {
-      const decoded = decodeURIComponent(rawJson)
-      const parsed = JSON.parse(decoded)
-      if (Array.isArray(parsed)) {
-        data.value = parsed
-      } else {
-        data.value = parsed
+      const templateData = JSON.parse(templateDataStr)
+      // 还原画布 JSON
+      if (templateData.customer_template_json && Array.isArray(templateData.customer_template_json)) {
+        data.value = templateData.customer_template_json
       }
+
+      // 名称直接取 template_name,取不到则为空
+      templateName.value = (templateData.template_name || '') as string
+
+      // 清理sessionStorage,避免数据残留
+      sessionStorage.removeItem('editTpl_template_data')
     } catch (e) {
-      console.error('解析 customer_template_json 失败:', e)
+      console.error('解析 editTpl_template_data 失败:', e)
     }
   }
-
-  // 名称直接取 template_name,取不到则为空
-  templateName.value = (query.template_name || '') as string
 }
 
 // 默认商品文案
@@ -100,25 +98,41 @@ const defaultGoodsText = [
   }
 ]
 
-// 从路由 query 中解析 goods_images,如果没有就使用默认示例
-const defaultGoodsImages = [
-]
+// 从sessionStorage中解析 goods_images,如果没有就使用默认示例
+const defaultGoodsImages = []
 
 const goodsImages = computed(() => {
-  const raw = route.query.customer_template_images as string | undefined
-  if (!raw) return defaultGoodsImages
+  // 新增模式:从sessionStorage获取数据
+  const templateDataStr = sessionStorage.getItem('addTpl_template_data')
+  if (templateDataStr) {
+    try {
+      const templateData = JSON.parse(templateDataStr)
+      if (templateData.customer_template_images && Array.isArray(templateData.customer_template_images)) {
+        // 清理sessionStorage,避免数据残留
+        sessionStorage.removeItem('addTpl_template_data')
+        return templateData.customer_template_images
+      }
+    } catch (e) {
+      console.error('解析 addTpl_template_data 失败:', e)
+    }
+  }
 
-  try {
-    const decoded = decodeURIComponent(raw)
-    const parsed = JSON.parse(decoded)
-    if (Array.isArray(parsed) && parsed.length > 0) {
-      return parsed
+  // 编辑模式或其他情况返回默认值
+  return defaultGoodsImages
+})
+
+// 新增模式:从sessionStorage中获取template_image_order
+const templateImageOrder = computed(() => {
+  const templateDataStr = sessionStorage.getItem('addTpl_template_data')
+  if (templateDataStr) {
+    try {
+      const templateData = JSON.parse(templateDataStr)
+      return templateData.template_image_order || ''
+    } catch (e) {
+      console.error('解析 addTpl_template_data 失败:', e)
     }
-    return defaultGoodsImages
-  } catch (e) {
-    console.error('解析 customer_template_images 失败:', e)
-    return defaultGoodsImages
   }
+  return ''
 })
 
 
@@ -144,9 +158,9 @@ const doSave = async (payload: any) => {
       requestData.template_cover_image = payload[0].preview
     }
     requestData.customer_template_images = goodsImages.value
-    requestData.template_image_order =  route.query.template_image_order as string | undefined
+    requestData.template_image_order = templateImageOrder.value || undefined
     // 直接从 goodsText 中获取所有商品文字的 key
-    requestData.template_excel_headers = goodsText.map(item => item.key)
+    requestData.template_excel_headers = defaultGoodsText
     await saveCustomerTemplate(requestData)
     ElMessage.success(isEdit ? '模板保存成功' : '模板创建成功')
     router.back()