细节

src/common/model/goods/MultiSpec.js

@@ -5,24 +5,22 @@ import { log } from '@/api/market/presale'
 
 // 默认的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: '商品ID',
+    dataIndex: 'goods_id',
+    width: 90,
+  },
+ {
+    title: '商品信息',
+    scopedSlots: { customRender: 'item' },
+    width: 180,
+  },
   {
     title: '商品价格',
     dataIndex: 'goods_price',
@@ -79,7 +77,9 @@ const defaultSkuItemData = {
   cost_price: '',
   stock_num: '',
   goods_weight: '',
-  goods_sku_no: ''
+  goods_sku_no: '',
+  goods_image :'',
+goods_name :''
 }
 
 // const demoSpecList = [

src/components/SelectGoods/SelectGoods.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <a-button @click="handleSelectGoods">选择商品</a-button>
-    <a-table
+    <!-- <a-table
       v-show="selectedItems.length"
       class="table-goodsList"
       rowKey="goods_id"
@@ -9,7 +9,6 @@
       :dataSource="selectedItems"
       :pagination="false"
     >
-      <!-- 商品信息 -->
       <template slot="item" slot-scope="item">
         <GoodsItem
           :data="{
@@ -21,11 +20,10 @@
           :subTitleColor="true"
         />
       </template>
-      <!-- 操作项 -->
       <span slot="action" slot-scope="text, item, index">
         <a v-action:delete @click="handleDeleteItem(index)">删除</a>
       </span>
-    </a-table>
+    </a-table> -->
     <GoodsModal
       ref="GoodsModal"
       :multiple="multiple"
@@ -147,7 +145,8 @@ export default {
     onChange () {
       const { multiple, selectedGoodsIds } = this
       const sGoodsIds = multiple ? selectedGoodsIds : (selectedGoodsIds.length ? selectedGoodsIds[0] : undefined)
-      return this.$emit('change', sGoodsIds)
+    console.log(sGoodsIds)
+    return this.$emit('change', sGoodsIds)
     }
 
   }

src/views/goods/modules/MultiSpec.vue

@@ -90,13 +90,23 @@
         :pagination="false"
         bordered
       >
-        <template slot="select_goods" slot-scope="text, item">
-          <SelectGoods :multiple="false" :source="source" @change="handleSelectGoods($event, item)" />
+        <template slot="select_goods" slot-scope="text, item, index">
+          <SelectGoods :multiple="false" :source="source" @change="handleSelectGoods($event, item, index)" />
         </template>
         <!-- 商品名称 -->
-        <!-- <template slot="goods_name" slot-scope="text, item">
-          {{ item.goods_name }}
-        </template> -->
+        <template slot="item" slot-scope="item" v-if="item.goods_id">
+          <GoodsItem
+            :data="{
+              image: item.goods_image,
+              imageAlt: '商品图片',
+              title: item.goods_name,
+            }"
+            :subTitleColor="true"
+          />
+        </template>
+        <template slot="goods_name" slot-scope="text, item">
+          {{ item.goods_id }}
+        </template>
         <!-- 商品价格 -->
         <template slot="goods_price" slot-scope="text, item">
           {{ item.goods_price }}
@@ -125,7 +135,7 @@
             >去修改</router-link
           > -->
           <a @click="handleEdit(index, item)" v-if="item.goods_id" style="margin-left: 10px">去修改</a>
-          <a @click="handleCancel(index, item)" v-if="item.goods_id" style="margin-left: 10px">取消选择</a>
+          <a @click="handleCancel(index)" v-if="item.goods_id" style="margin-left: 10px">取消选择</a>
         </template>
       </a-table>
     </a-form-item>
@@ -138,11 +148,12 @@ import MultiSpecModel from '@/common/model/goods/MultiSpec'
 import { SelectImage } from '@/components'
 import SelectGoods from '@/components/SelectGoods/SelectGoods.vue'
 import * as GoodsApi from '@/api/goods'
-
+import { GoodsItem } from '@/components/Table'
 export default {
   components: {
     SelectImage,
     SelectGoods,
+    GoodsItem,
   },
   props: {
     // 默认的规格列表
@@ -183,6 +194,7 @@ export default {
   created() {
     // 获取规格及SKU信息
     this.getData()
+    console.log(this.multiSpecData)
   },
   methods: {
     handleEdit(item) {
@@ -194,15 +206,17 @@ export default {
       })
       window.open(routeData.href, '_blank')
     },
-    handleCancel(index, item) {
-      for (let key in this.multiSpecData.skuList[index]) {
-        if (this.multiSpecData.skuList[index].hasOwnProperty(key)) {
-          this.multiSpecData.skuList[index][key] = ''
-        }
-      }
-      this.multiSpecData.skuList[index].spec_value_0 = item.spec_value_0
-      this.multiSpecData.skuList[index].tempId = item.tempId
-      this.multiSpecData.skuList[index].skuKeys = item.skuKeys
+    handleCancel(index) {
+      this.multiSpecData.skuList[index].cost_price = ''
+      this.multiSpecData.skuList[index].goods_id = ''
+      this.multiSpecData.skuList[index].goods_image = ''
+      this.multiSpecData.skuList[index].goods_name = ''
+      this.multiSpecData.skuList[index].goods_price = ''
+      this.multiSpecData.skuList[index].goods_price_min = ''
+      this.multiSpecData.skuList[index].goods_sku_no = ''
+      this.multiSpecData.skuList[index].goods_weight = ''
+      this.multiSpecData.skuList[index].line_price = ''
+      this.multiSpecData.skuList[index].stock_num = ''
     },
     // 获取规格及SKU信息(展示)
     getData() {
@@ -298,7 +312,8 @@ export default {
       this.visible = true
     },
 
-    async handleSelectGoods(goodsId, item) {
+    async handleSelectGoods(goodsId, item, index) {
+      console.log(index)
       const skuList = this.multiSpecData.skuList
       const skuItem = skuList.find((sku) => sku.goods_id === goodsId)
       if (skuItem) {
@@ -309,17 +324,19 @@ export default {
         const queryGoodsId = this.$route.query.goodsId
         if (res.spec_type === 20 && queryGoodsId !== goodsId) {
           this.$message.error('您选择的商品是多规格商品', 2)
-          return 
+          return
         }
 
-        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
+        const sku = res.skuList[index]
+        this.multiSpecData.skuList[index].goods_price = sku.goods_price
+        this.multiSpecData.skuList[index].cost_price = sku.cost_price
+        this.multiSpecData.skuList[index].stock_num = sku.stock_num
+        this.multiSpecData.skuList[index].goods_weight = sku.goods_weight
+        this.multiSpecData.skuList[index].goods_sku_no = sku.goods_sku_no
+        this.multiSpecData.skuList[index].goods_name = res.goods_name
+        this.multiSpecData.skuList[index].goods_id = res.goods_id
+        this.multiSpecData.skuList[index].goods_image = res.goods_image
+        this.multiSpecData.skuList[index].goods_price_min = res.goods_price_min
       })
     },