CameraMachine/frontend/src/views/Tpl/Edit/index.vue

<template>
  <headerBar title="编辑模板" />

  <marketingEdit
    v-model:data="data"
    v-model:index="index"
    :goods_text="defaultGoodsText"
    :goods_images="goodsImages"
    @save="save"
  />

  <el-dialog
      v-model="showNameDialog"
      title="输入模板名称"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="400px"
  >
    <el-input
        v-model="templateName"
        placeholder="请输入模板名称"
        maxlength="50"
        show-word-limit
    />
    <template #footer>
      <el-button @click="showNameDialog = false">取消</el-button>
      <el-button type="primary" @click="confirmName">确定</el-button>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
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/index.vue'
import useClientStore from '@/stores/modules/client'

import { saveCustomerTemplate } from '@/apis/other'


const route = useRoute();
const router = useRouter();
const clientStore = useClientStore();
const isEdit = !!route.params.id;

const data  = ref([])
const index = ref(0)
const templateName = ref('')
const showNameDialog = ref(false) // 由"保存"触发，而不是进入页面就弹
const pendingPayload = ref<any | null>(null)

// 编辑模式：从sessionStorage中还原模板数据和名称
if (isEdit) {
  const templateDataStr = sessionStorage.getItem('editTpl_template_data')
  if (templateDataStr) {
    try {
      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('解析 editTpl_template_data 失败:', e)
    }
  }
}

// 默认商品文案
const defaultGoodsText = [
  {
    key: '设计理念',
    value: '经典凹出兼具动感同时带来轻盈\n步调轻软，松弛自在蔓延\n立体质感让朝气肆意绽放'
  },
  {
    key: '标题',
    value: '休闲运动'
  },
  {
    key: '帮面',
    value: '网布+合成革'
  },
  {
    key: '鞋底',
    value: '橡胶底'
  },
  {
    key: '颜色',
    value: '黑色'
  }
]

// 从sessionStorage中解析 goods_images，如果没有就使用默认示例
const defaultGoodsImages = []

const goodsImages = computed(() => {
  // 新增模式：从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)
    }
  }

  // 编辑模式或其他情况返回默认值
  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 ''
})



const doSave = async (payload: any) => {
  try {
    // 组装请求参数
    const requestData: any = {
      customer_template_json: payload, // 所有画布的 JSON
    }
    // 编辑时必填 id
    if (isEdit) {
      requestData.id = route.params.id
      requestData.template_name = templateName.value?.trim() || ''

      // 编辑时使用原来的模板名称（不传 template_name，让后端保持原值）
    } else {
      // 新增时必填模板名称
      requestData.template_name = templateName.value?.trim() || ''
    }
    // 封面图：取第一张画布的 preview
    if (payload && payload.length > 0 && payload[0].preview) {
      requestData.template_cover_image = payload[0].preview
    }
    requestData.customer_template_images = goodsImages.value
    requestData.template_image_order = templateImageOrder.value || undefined
    // 直接从 goodsText 中获取所有商品文字的 key
    requestData.template_excel_headers = defaultGoodsText
    await saveCustomerTemplate(requestData)
    ElMessage.success(isEdit ? '模板保存成功' : '模板创建成功')
    router.back()
  } catch (error: any) {
    console.error('保存模板失败:', error)
  }
}

const confirmName = () => {
  if (!templateName.value || !templateName.value.trim()) {
    // 简单校验，保持弹窗打开
    return
  }
  showNameDialog.value = false
  if (!isEdit && pendingPayload.value) {
    doSave(pendingPayload.value)
    pendingPayload.value = null
  }
}

const save = (payload: any) => {
  if (isEdit) {
    // 编辑模式直接保存，不弹名称框
    doSave(payload)
    return
  }

  // 新增模式下，第一次点击“保存”且没填名称时，先弹输入名称框
  if (!templateName.value || !templateName.value.trim()) {
    pendingPayload.value = payload
    showNameDialog.value = true
    return
  }

  doSave(payload)
}
</script>

<style lang="scss" scoped>
</style>