feat(marketingEdit): 新增画布多货号模式支持

- 调整画布尺寸弹窗宽度从400px增加到700px
- 修改画布表单标签宽度从80px增加到100px
- 修复画布名称输入框类型错误，由number改为text
- 新增多货号模式选项：默认(单货号)、一个货号多角度、多个货号同角度
- 在画布数据模型中添加multi_goods_mode字段
- 新增setTpl方法用于模板加载后的初始化处理
- 优化画布对象控件可见性和交互性设置
- 完善画布尺寸设置和图层列表更新逻辑
- 在新增和编辑画布时正确处理multi_goods_mode字段
- 在保存画布数据时包含multi_goods_mode信息

frontend/src/views/components/marketingEdit/index.vue

@@ -62,6 +62,7 @@ export default {
         color:"#fff",
         bg_color:'#fff',
         visible:false,
+        multi_goods_mode: '', // 多货号模式：''(默认单货号), 'single'(一个货号多角度), 'multiple'(多个货号同角度)
       }
 
     }
@@ -128,6 +129,50 @@ export default {
       this.$emit('update:index', 0)
       this.hasLoadedTpl = true
     },
+    // 加载模板后的初始化处理
+    setTpl(){
+      if(!this.fcanvas) return
+      try {
+        // 确保所有对象都是可选的，并且控件可见
+        this.fcanvas.getObjects().forEach(obj => {
+          // 确保对象可选中和可交互
+          obj.set({
+            selectable: true,
+            evented: true
+          })
+          // 根据对象类型设置控件可见性（与原有逻辑保持一致）
+          if(obj.type === 'image' || obj.type === 'textbox' || obj.type === 'group'){
+            obj.setControlsVisibility({
+              'mtr': false
+            })
+          }
+          // 特殊对象处理（参考原有逻辑）
+          if(obj.name === 'scene'){
+            obj.set({
+              selectable: false,
+              delable: false
+            })
+          }
+          if(obj.name === 'subject'){
+            obj.set({
+              delable: false
+            })
+          }
+        })
+        // 确保画布尺寸正确
+        if(this.this_canvas){
+          this.fcanvas.setWidth(this.this_canvas.width)
+          this.fcanvas.setHeight(this.this_canvas.height)
+        }
+        // 更新图层列表
+        this.getLayers()
+        // 恢复选中状态
+        this.undoAfterSelectLayers()
+        this.fcanvas.renderAll()
+      } catch (e) {
+        console.warn('[marketingEdit] setTpl failed', e)
+      }
+    },
     // 初始化
     async init() {
 
@@ -182,6 +227,10 @@ export default {
           ? this.this_canvas.canvas_json
           : JSON.stringify(this.this_canvas.canvas_json)
         this.fcanvas.loadFromJSON(jsonData, () => {
+          // 如果是加载模板，调用专门的初始化函数
+          if(this.hasLoadedTpl){
+            this.setTpl()
+          }
           this.fcanvas.renderAll()
           hydrateCanvas()
         })
@@ -197,6 +246,7 @@ export default {
       this.canvasForm.width = FIXED_CANVAS_WIDTH
       this.canvasForm.height = 1024
       this.canvasForm.bg_color = '#fff'
+      this.canvasForm.multi_goods_mode = ''
       this.canvasForm.visible = true;
     },
     handleAdjustCanvas() {
@@ -206,6 +256,7 @@ export default {
       this.canvasForm.width = FIXED_CANVAS_WIDTH
       this.canvasForm.height = this.this_canvas.height
       this.canvasForm.bg_color = this.this_canvas.bg_color
+      this.canvasForm.multi_goods_mode = this.this_canvas.multi_goods_mode || ''
       this.canvasForm.visible = true;
     },
     submitCanvasInfo() {
@@ -221,7 +272,8 @@ export default {
                height:this.canvasForm.height,
                bg_color:this.canvasForm.bg_color,
                canvas_json:'',
-               preview:''
+               preview:'',
+               multi_goods_mode: this.canvasForm.multi_goods_mode || ''
         })
         const nextIndex = this.data.length - 1
         this.$emit('update:index',nextIndex)
@@ -257,6 +309,7 @@ export default {
         this.data[this.index].width = FIXED_CANVAS_WIDTH
         this.data[this.index].height = this.canvasForm.height
         this.data[this.index].bg_color = this.canvasForm.bg_color
+        this.data[this.index].multi_goods_mode = this.canvasForm.multi_goods_mode || ''
         this.canvasForm.visible = false;
       }
 
@@ -308,7 +361,8 @@ export default {
           bg_color: item.bg_color,
           name: item.name || '',
           tpl_url: item.tpl_url || '',
-          image_path: item.image_path || ''
+          image_path: item.image_path || '',
+          multi_goods_mode: item.multi_goods_mode || ''
         }
       }))
       this.$emit('save', payload)

frontend/src/views/components/marketingEdit/tpl/header.js

@@ -33,10 +33,10 @@ export  default function tpl(){
            </div>
            
             <!-- 新增：调整画布尺寸弹窗 -->
-            <el-dialog :title="canvasForm.type === 'add' ? '新增画布' : '编辑画布'" v-model="canvasForm.visible" append-to-body width="400px">
-              <el-form :model="canvasForm" label-width="80px">
+            <el-dialog :title="canvasForm.type === 'add' ? '新增画布' : '编辑画布'" v-model="canvasForm.visible" append-to-body width="700px">
+              <el-form :model="canvasForm" label-width="100px">
                 <el-form-item label="画布名称">
-                  <el-input v-model.number="canvasForm.name" placeholder="请输入宽度"></el-input>
+                  <el-input v-model="canvasForm.name" placeholder="请输入画布名称"></el-input>
                 </el-form-item>
           <!--      <el-form-item label="宽度">
                   <div class="fixed-width-tip">800（固定）</div>
@@ -47,6 +47,18 @@ export  default function tpl(){
                 <el-form-item label="背景颜色">
                     <el-color-picker v-model="canvasForm.bg_color" />
                 </el-form-item>
+                <el-form-item label="多货号模式">
+                  <el-radio-group v-model="canvasForm.multi_goods_mode">
+                    <el-radio label="">默认（单货号）</el-radio>
+                    <el-radio label="single">一个货号多角度</el-radio>
+                    <el-radio label="multiple">多个货号同角度</el-radio>
+                  </el-radio-group>
+                  <div style="font-size: 12px; color: #999; margin-top: 8px; line-height: 1.6;">
+                    <div v-if="canvasForm.multi_goods_mode === ''">默认模式，画布对应单个货号</div>
+                    <div v-else-if="canvasForm.multi_goods_mode === 'single'">一个画布对应一个货号，画布中包含该货号不同角度的图片</div>
+                    <div v-else-if="canvasForm.multi_goods_mode === 'multiple'">画布中含有多个货号，画布中包含多个货号同一角度的图片</div>
+                  </div>
+                </el-form-item>
               </el-form>
               <div slot="footer" class="dialog-footer flex right">
                 <el-button @click="canvasForm.visible = false">取 消</el-button>