1

src/components/SelectGoods/SelectGoods.vue

@@ -1,6 +1,31 @@
 <template>
   <div>
     <a-button @click="handleSelectGoods">选择商品</a-button>
+    <a-table
+      v-show="selectedItems.length"
+      class="table-goodsList"
+      rowKey="goods_id"
+      :columns="columns"
+      :dataSource="selectedItems"
+      :pagination="false"
+    >
+      <!-- 商品信息 -->
+      <template slot="item" slot-scope="item">
+        <GoodsItem
+          :data="{
+            image: item.goods_image,
+            imageAlt: '商品图片',
+            title: item.goods_name,
+            subtitle: `¥${item.goods_price_min}`,
+          }"
+          :subTitleColor="true"
+        />
+      </template>
+      <!-- 操作项 -->
+      <span slot="action" slot-scope="text, item, index">
+        <a v-action:delete @click="handleDeleteItem(index)">删除</a>
+      </span>
+    </a-table>
     <GoodsModal
       ref="GoodsModal"
       :multiple="multiple"
@@ -15,37 +40,39 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import cloneDeep from 'lodash.clonedeep'
 import { GoodsModal } from '@/components/Modal'
+import { GoodsItem } from '@/components/Table'
 
 const columns = [
   {
     title: '商品ID',
-    dataIndex: 'goods_id'
+    dataIndex: 'goods_id',
   },
   {
     title: '商品信息',
-    scopedSlots: { customRender: 'item' }
+    scopedSlots: { customRender: 'item' },
   },
   {
     title: '库存总量',
-    dataIndex: 'stock_total'
+    dataIndex: 'stock_total',
   },
   {
     title: '操作',
     width: '180px',
     dataIndex: 'action',
-    scopedSlots: { customRender: 'action' }
-  }
+    scopedSlots: { customRender: 'action' },
+  },
 ]
 
 // 商品选择器组件
 export default {
   name: 'SelectGoods',
   components: {
-    GoodsModal
+    GoodsModal,
+    GoodsItem,
   },
   model: {
     prop: 'value',
-    event: 'change'
+    event: 'change',
   },
   props: {
     // 多选模式, 如果false为单选
@@ -53,7 +80,7 @@ export default {
     // 最大选择的数量限制, multiple模式下有效
     maxNum: PropTypes.integer.def(100),
     // 默认选中的商品
-    defaultList: PropTypes.array.def([])
+    defaultList: PropTypes.array.def([]),
   },
   data() {
     return {
@@ -61,7 +88,7 @@ export default {
       // 已选择的商品列表
       selectedItems: [],
       // 已选择的商品ID集
-      selectedGoodsIds: []
+      selectedGoodsIds: [],
     }
   },
   watch: {
@@ -74,19 +101,17 @@ export default {
         if (val.length && !selectedItems.length) {
           this.onUpdate(cloneDeep(val))
         }
-      }
-    }
       },
-  created () {
     },
+  },
+  created() {},
   methods: {
-
     // 更新数据
     onUpdate(selectedItems) {
       if (this.multiple || !selectedItems.length) {
         // 多选模式
         this.selectedItems = selectedItems
-        this.selectedGoodsIds = selectedItems.map(item => item.goods_id)
+        this.selectedGoodsIds = selectedItems.map((item) => item.goods_id)
       } else {
         // 单选模式
         const single = selectedItems[selectedItems.length - 1]
@@ -117,12 +142,10 @@ export default {
     // 触发change事件
     onChange() {
       const { multiple, selectedGoodsIds } = this
-      const sGoodsIds = multiple ? selectedGoodsIds : (selectedGoodsIds.length ? selectedGoodsIds[0] : undefined)
-      this.$emit('select', multiple ? this.selectedItems : this.selectedItems[0])
+      const sGoodsIds = multiple ? selectedGoodsIds : selectedGoodsIds.length ? selectedGoodsIds[0] : undefined
       return this.$emit('change', sGoodsIds)
-    }
-
-  }
+    },
+  },
 }
 </script>
 

src/views/recovery/order/Index.vue

@@ -116,9 +116,14 @@ const columns = [
   },
   {
     title: '期待价格',
-    width: '180px',
+    width: '100px',
     dataIndex: 'expect_price',
   },
+  {
+    title: '实际回收价',
+    width: '100px',
+    dataIndex: 'real_price',
+  },
   {
     title: '添加时间',
     width: '180px',