Prechádzať zdrojové kódy

fix: 新建商品时显示SKU维护入口

- ProductEdit: 移除 SKU 组件的 v-if=isEdit,始终渲染
- ProductSkuEditor: 支持新建时暂存 SKU,商品创建后自动提交
- handleSave: 创建后更新 form.id,触发 SKU 编辑器 watch
Xiaogang Liao 1 mesiac pred
rodič
commit
d04f2f5f77

+ 3 - 3
cfc-web/src/views/admin/ProductEdit.vue

@@ -159,8 +159,8 @@
           <dimension-weight-picker v-model="form.dimensionWeights" :show-presets="true" />
         </el-form-item>
 
-        <el-form-item v-if="isEdit" label="SKU规格">
-          <ProductSkuEditor :productId="form.id" />
+        <el-form-item label="SKU规格">
+          <ProductSkuEditor ref="skuEditor" :productId="form.id" />
         </el-form-item>
 
         <!-- 购买信息采集 -->
@@ -532,9 +532,9 @@ export default {
             productId = this.form.id
           } else {
             res = await createProduct(requestPayload)
-            // Get the created product id
             if (res.code === 200 && res.data) {
               productId = res.data.id || res.data
+              this.form.id = productId
             }
           }
           if (res.code === 200) {

+ 36 - 2
cfc-web/src/views/admin/components/ProductSkuEditor.vue

@@ -5,7 +5,7 @@
       <el-button type="primary" size="mini" icon="el-icon-plus" @click="showDialog(null)">添加SKU</el-button>
     </div>
 
-    <el-table :data="skus" border stripe size="small" :max-height="tableHeight">
+    <el-table :data="effectiveSkus" border stripe size="small" :max-height="tableHeight">
       <el-table-column prop="id" label="ID" width="60" />
       <el-table-column label="规格" min-width="120">
         <template slot-scope="{ row }">
@@ -99,6 +99,7 @@ export default {
   data() {
     return {
       skus: [],
+      pendingSkus: [],
       loading: false,
       dialogVisible: false,
       saving: false,
@@ -122,6 +123,9 @@ export default {
     tableHeight() {
       return window.innerHeight - 300
     },
+    effectiveSkus() {
+      return this.productId ? this.skus : this.pendingSkus
+    },
     dialogTitle() {
       return this.editingId ? '编辑SKU' : '添加SKU'
     },
@@ -137,8 +141,12 @@ const baseURL = process.env.VUE_APP_BASE_API || ''
   watch: {
     productId: {
       immediate: true,
-      handler(val) {
+      async handler(val) {
         if (val) {
+          // 新建商品时:先用暂存 SKU 创建
+          if (this.pendingSkus.length > 0) {
+            await this.flushPendingSkus()
+          }
           this.loadSkus()
         }
       }
@@ -271,6 +279,16 @@ const baseURL = process.env.VUE_APP_BASE_API || ''
             image: this.skuForm.image,
             enabled: this.skuForm.enabled
           }
+          // 新建商品时productId为空,暂存到本地
+          if (!this.productId) {
+            payload.id = Date.now()
+            delete payload.productId
+            this.pendingSkus.push(payload)
+            this.dialogVisible = false
+            this.$message.success('添加成功,保存商品时将自动创建SKU')
+            this.saving = false
+            return
+          }
           let res
           if (this.editingId) {
             payload.id = this.editingId
@@ -293,7 +311,23 @@ const baseURL = process.env.VUE_APP_BASE_API || ''
         }
       })
     },
+    async flushPendingSkus() {
+      if (!this.productId || this.pendingSkus.length === 0) return
+      const results = await Promise.allSettled(
+        this.pendingSkus.map(sku => createProductSku({ ...sku, productId: this.productId }))
+      )
+      this.pendingSkus = []
+      results.forEach((r, i) => {
+        if (r.status === 'rejected') {
+          console.error('创建SKU失败', i + 1, r.reason)
+        }
+      })
+    },
     async handleDelete(id) {
+      if (!this.productId) {
+        this.pendingSkus = this.pendingSkus.filter(s => s.id !== id)
+        return
+      }
       try {
         await this.$confirm('确认删除该SKU?', '提示')
         const res = await deleteProductSku(id)