提交商品选择

src/components/SelectGoods/SelectGoods.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <a-button @click="handleSelectGoods">选择商品</a-button>
+    <GoodsModal
+      ref="GoodsModal"
+      :multiple="multiple"
+      :maxNum="maxNum"
+      :defaultList="selectedItems"
+      @handleSubmit="handleSelectGoodsSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import cloneDeep from 'lodash.clonedeep'
+import { GoodsModal } from '@/components/Modal'
+
+const columns = [
+  {
+    title: '商品ID',
+    dataIndex: 'goods_id'
+  },
+  {
+    title: '商品信息',
+    scopedSlots: { customRender: 'item' }
+  },
+  {
+    title: '库存总量',
+    dataIndex: 'stock_total'
+  },
+  {
+    title: '操作',
+    width: '180px',
+    dataIndex: 'action',
+    scopedSlots: { customRender: 'action' }
+  }
+]
+
+// 商品选择器组件
+export default {
+  name: 'SelectGoods',
+  components: {
+    GoodsModal
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    // 多选模式, 如果false为单选
+    multiple: PropTypes.bool.def(true),
+    // 最大选择的数量限制, multiple模式下有效
+    maxNum: PropTypes.integer.def(100),
+    // 默认选中的商品
+    defaultList: PropTypes.array.def([])
+  },
+  data () {
+    return {
+      columns,
+      // 已选择的商品列表
+      selectedItems: [],
+      // 已选择的商品ID集
+      selectedGoodsIds: []
+    }
+  },
+  watch: {
+    // 设置默认数据
+    defaultList: {
+      // 首次加载的时候执行函数
+      immediate: true,
+      handler (val) {
+        const { selectedItems } = this
+        if (val.length && !selectedItems.length) {
+          this.onUpdate(cloneDeep(val))
+        }
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+
+    // 更新数据
+    onUpdate (selectedItems) {
+      if (this.multiple || !selectedItems.length) {
+        // 多选模式
+        this.selectedItems = selectedItems
+        this.selectedGoodsIds = selectedItems.map(item => item.goods_id)
+      } else {
+        // 单选模式
+        const single = selectedItems[selectedItems.length - 1]
+        this.selectedItems = [single]
+        this.selectedGoodsIds = [single.goods_id]
+      }
+      this.onChange()
+    },
+
+    // 打开商品选择器
+    handleSelectGoods () {
+      this.$refs.GoodsModal.handle()
+    },
+
+    // 商品库modal确认回调
+    handleSelectGoodsSubmit (result) {
+      const { selectedItems } = result
+      this.onUpdate(cloneDeep(selectedItems))
+    },
+
+    // 删除商品
+    handleDeleteItem (index) {
+      const { selectedItems } = this
+      selectedItems.splice(index, 1)
+      this.onUpdate(selectedItems)
+    },
+
+    // 触发change事件
+    onChange () {
+      const { multiple, selectedGoodsIds } = this
+      const sGoodsIds = multiple ? selectedGoodsIds : (selectedGoodsIds.length ? selectedGoodsIds[0] : undefined)
+      return this.$emit('change', sGoodsIds)
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 商品信息
+.table-goodsList {
+  margin-top: 10px;
+  min-width: 620px;
+}
+</style>

src/components/SelectGoods/index.js

@@ -0,0 +1,2 @@
+import SelectGoods from './SelectGoods'
+export default SelectGoods

src/views/dataCenter/goods/Update.vue

@@ -472,7 +472,7 @@
 
 <script>
 import * as GoodsApi from '@/api/goods'
-import { SelectImage, SelectVideo, Ueditor, InputNumberGroup } from '@/components'
+import { SelectImage, SelectGoods,SelectVideo, Ueditor, InputNumberGroup } from '@/components'
 import GoodsModel from '@/common/model/goods/Index'
 import { GoodsType, MultiSpec } from './modules'
 import { isEmptyObject } from '@/utils/util'
@@ -480,6 +480,7 @@ export default {
   components: {
     GoodsType,
     SelectImage,
+    SelectGoods,
     SelectVideo,
     Ueditor,
     InputNumberGroup,

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

@@ -75,16 +75,9 @@
         <a-input v-model="multiSpecData.skuBatchForm.goods_sku_no" placeholder="sku编码" />
         <a-button @click="handleSkuBatch">立即设置</a-button>
       </div>
-      <div style="margin-bottom: 15px;">
-        <span class="title">选择商品Id:</span>
-        <a-select style="width: 400px;margin-left: 5px;"
-          v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]"
-        >
-          <a-select-option :value="0">选择商品Id</a-select-option>
-          <a-select-option v-for="(item, index) in checkList" :key="index" :value="item.goods_id"
-            >{{ item.goods_id }}---{{ item.goods_name }}</a-select-option
-          >
-        </a-select>
+      <div style="margin-bottom: 15px;display: flex;">
+        <span class="title" style="margin-right: 8px">选择商品Id:</span>
+         <SelectGoods :defaultList="checkList" :multiple="true" />
       </div>
 
       <!-- sku列表table -->
@@ -133,10 +126,13 @@
 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'
+
 
 export default {
   components: {
     SelectImage,
+    SelectGoods
   },
   props: {
     // 默认的规格列表
@@ -162,6 +158,7 @@ export default {
         // SKU列表
         skuList: [],
       },
+      visible: false,
     }
   },
   watch: {
@@ -267,7 +264,9 @@ export default {
       }
       return true
     },
-    handleGoodsId() {},
+    showModal() {
+      this.visible = true
+    },
   },
 }
 </script>