更新 sku 匹配逻辑

src/common/model/goods/MultiSpec.js

@@ -4,11 +4,23 @@ import { debounce, isEmpty } from '@/utils/util'
 
 // 默认的sku字段属性
 const defaultColumns = [
-  {
+  /* {
     title: '预览图',
     dataIndex: 'image',
     width: 90,
     scopedSlots: { customRender: 'image' }
+  }, */
+  {
+    title: '选择商品',
+    dataIndex: 'select_goods',
+    width: 120,
+    scopedSlots: { customRender: 'select_goods' }
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'goods_name',
+    width: 120,
+    scopedSlots: { customRender: 'goods_name' }
   },
   {
     title: '商品价格',
@@ -45,6 +57,13 @@ const defaultColumns = [
     dataIndex: 'goods_sku_no',
     width: 140,
     scopedSlots: { customRender: 'goods_sku_no' }
+  },
+
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 140,
+    scopedSlots: { customRender: 'action' }
   }
 ]
 
@@ -53,6 +72,8 @@ const defaultSkuItemData = {
   image_id: 0,
   image: {},
   // imageList: [],
+  goods_id: '',
+  goods_name: '',
   goods_price: '',
   line_price: '',
   cost_price: '',

src/views/dataCenter/goods/modules/MultiSpec.vue

@@ -90,10 +90,6 @@
         <a-input v-model="multiSpecData.skuBatchForm.goods_sku_no" placeholder="sku编码" />
         <a-button @click="handleSkuBatch">立即设置</a-button>
       </div>
-      <div style="margin-bottom: 15px;display: flex;">
-        <span class="title" style="margin-right: 8px">选择商品Id:</span>
-        <SelectGoods :defaultList="checkList" :multiple="true" />
-      </div>
 
       <!-- sku列表table -->
       <a-table
@@ -104,37 +100,42 @@
         :pagination="false"
         bordered
       >
-        <!-- 预览图 -->
-        <template slot="image" slot-scope="text, item">
-          <SelectImage
-            v-model="item.image_id"
-            :defaultList="item.image_id > 0 && item.image ? [item.image] : []"
-            :width="50"
-          />
+        <template slot="select_goods" slot-scope="text, item">
+          <SelectGoods :multiple="false" @change="handleSelectGoods($event, item)" />
+        </template>
+        <!-- 商品名称 -->
+        <template slot="goods_name" slot-scope="text, item">
+          {{ item.goods_name }}
         </template>
         <!-- 商品价格 -->
         <template slot="goods_price" slot-scope="text, item">
-          <a-input-number v-model="item.goods_price" size="small" :min="0.01" :precision="2" />
+          {{ item.goods_price }}
         </template>
         <!-- 成本价 -->
         <template slot="cost_price" slot-scope="text, item">
-          <a-input-number v-model="item.cost_price" size="small" :min="0" :precision="2" />
+          {{ item.cost_price }}
         </template>
-        <!-- 划线价格 -->
-        <!-- <template slot="line_price" slot-scope="text, item">
-          <a-input-number v-model="item.line_price" size="small" :min="0" :precision="2" />
-        </template> -->
         <!-- 库存数量 -->
         <template slot="stock_num" slot-scope="text, item">
-          <a-input-number v-model="item.stock_num" size="small" :min="0" :precision="0" />
+          {{ item.stock_num }}
         </template>
         <!-- 商品重量 -->
         <template slot="goods_weight" slot-scope="text, item">
-          <a-input-number v-model="item.goods_weight" size="small" :min="0" :precision="2" />
+          <!-- <a-input-number v-model="item.goods_weight" size="small" :min="0" :precision="2" /> -->
+          {{ item.goods_weight }}
         </template>
         <!-- sku编码 -->
         <template slot="goods_sku_no" slot-scope="text, item">
-          <a-input v-model="item.goods_sku_no" size="small" />
+          <!-- <a-input v-model="item.goods_sku_no" size="small" /> -->
+          {{ item.goods_sku_no }}
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text, item">
+          <router-link
+            v-if="item.goods_id"
+            :to="{ path: '/goods/update', query: { goodsId: item.goods_id } }"
+          >去修改</router-link
+          >
         </template>
       </a-table>
     </a-form-item>
@@ -146,6 +147,7 @@ import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import MultiSpecModel from '@/common/model/goods/MultiSpec'
 import { SelectImage } from '@/components'
 import SelectGoods from '@/components/SelectGoods/SelectGoods.vue'
+import * as GoodsApi from '@/api/goods'
 
 export default {
   components: {
@@ -284,6 +286,31 @@ export default {
     },
     showModal () {
       this.visible = true
+    },
+
+    async handleSelectGoods (goodsId, item) {
+      console.log(goodsId, item)
+      this.getGoodsDetail(goodsId).then(res => {
+        const sku = res.skuList[0]
+        item.goods_price = sku.goods_price
+        item.cost_price = sku.cost_price
+        item.stock_num = sku.stock_num
+        item.goods_weight = sku.goods_weight
+        item.goods_sku_no = sku.goods_sku_no
+        item.goods_name = res.goods_name
+        item.goods_id = res.goods_id
+      })
+    },
+
+    // 获取商品详情
+    getGoodsDetail (goodsId = null) {
+      if (!goodsId) return false
+      return new Promise((resolve, reject) => {
+        GoodsApi.detail({ goodsId })
+          .then(result => {
+            resolve(result.data.goodsInfo)
+          })
+      })
     }
   }
 }