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'
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)

// 编辑模式：从路由 query 中还原模板数据和名称
if (isEdit) {
  const query: any = route.query || {}

  // 还原画布 JSON
  const rawJson = query.customer_template_json as string | undefined
  if (rawJson) {
    try {
      const decoded = decodeURIComponent(rawJson)
      const parsed = JSON.parse(decoded)
      if (Array.isArray(parsed)) {
        data.value = parsed
      } else {
        data.value = parsed
      }
    } catch (e) {
      console.error('解析 customer_template_json 失败:', e)
    }
  }

  // 名称直接取 template_name，取不到则为空
  templateName.value = (query.template_name || '') as string
}

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

// 从路由 query 中解析 goods_images，如果没有就使用默认示例
const defaultGoodsImages = [
  {
    key: '俯视',
    value: 'C:\\Users\\Administrator\\Desktop\\img\\A596351\\1.png'
  },
  {
    key: '侧视',
    value: 'C:\\Users\\Administrator\\Desktop\\img\\A596351\\2.png'
  },
  {
    key: '后跟',
    value: 'C:\\Users\\Administrator\\Desktop\\img\\A596351\\3.png'
  },
  {
    key: '鞋底',
    value: 'C:\\Users\\Administrator\\Desktop\\img\\A596351\\4.png'
  },
  {
    key: '内里',
    value: 'C:\\Users\\Administrator\\Desktop\\img\\A596351\\5.png'
  }
]

const goodsImages = computed(() => {
  const raw = route.query.customer_template_images as string | undefined
  if (!raw) return defaultGoodsImages

  try {
    const decoded = decodeURIComponent(raw)
    const parsed = JSON.parse(decoded)
    if (Array.isArray(parsed) && parsed.length > 0) {
      return parsed
    }
    return defaultGoodsImages
  } catch (e) {
    console.error('解析 customer_template_images 失败:', e)
    return defaultGoodsImages
  }
})



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 =  route.query.template_image_order as string | undefined
    let template_excel_headers = []
    requestData.customer_template_json.map(item =>  {
      const canvas_json =  JSON.parse( item.canvas_json )
      canvas_json.objects.map(itm => {
        if(itm.type =="textbox" && itm.text) 
        template_excel_headers.push(itm.text)
      })
    })
    requestData.template_excel_headers = template_excel_headers
    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>