上传缺货修改

 <template>
     <Modal
         v-model="showModal"
-        @on-ok="clickOk"
-        @on-cancel="clickCancel"
+        @on-ok="uploadLackNum"
         width="auto"
         class-name="upload-stock-modal"
         cancel-text="取消"
@@ -23,11 +22,83 @@
 <script>
 import tradeService from 'trade-service';
 import _ from 'lodash';
+import Vue from 'vue';
 
-export default {
-    name: 'UploadStockOut',
+
+const ModalCellSkuImage = {
+    name: 'ModalCellSkuImage',
+    props: ['productSku'],
+    template:
+        `<div>
+            <a :href="productUrl" target="_blank">
+                <img class="cell-img"
+                     :src="skuImageSrc">
+            </a>
+        </div>`,
+    data() {
+        return {
+            productUrl: '',
+            skuImageSrc: ''
+        }
+    },
+    created() {
+        this.skuImageSrc =
+            `http://shops.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=${this.productSku}&size=80x80`;
+    }
+}
+
+const ModalCellPrdInfo = {
+    name: 'ModalCellPrdInfo',
     props: {
+        sku: {
+            type: [String, Number]
+        },
+        skn: {
+            type: [String, Number]
+        },
+        color: {
+            type: String
+        },
+        size: {
+            type: String
+        },
+        brand: {
+            type: String
+        },
+        price: {
+            type: [String, Number]
+        },
+        name: {
+            type: String
+        }
     },
+    template:
+        `<div class="cell-info">
+            <div class="img">
+                <img src=""></img>
+            </div>
+            <div class="detail">
+                <p>SKU：{{sku}}</p>
+                <p>规格：{{color}}/{{size}}</p>
+                <p>名称：{{name}}</p>
+                <p>品牌：{{brand}}</p>
+                <p>销售价：{{price}}</p>
+            </div>
+        </div>`,
+    data() {
+        return {
+        }
+    }
+}
+
+// modal table 中的自定义组件无法识别
+Vue.component('modal-cell-sku-image', ModalCellSkuImage);
+Vue.component('modal-cell-prd-info', ModalCellPrdInfo);
+
+import service from 'trade-service';
+
+export default {
+    name: 'UploadStockOut',
     data() {
         return {
             showModal: false,
@@ -36,40 +107,46 @@ export default {
                 {
                     title: '商品图片',
                     key: 'image',
-                    render() {
+                    render(row) {
+                        return `<modal-cell-sku-image
+                            :product-sku="row.productSku"
+                        ></modal-cell-sku-image>`
                     }
                 },
                 {
                     title: '商品信息',
                     key: 'info',
                     render() {
-                        return `测试信息`
                     }
                 },
                 {
                     title: '缺货数',
-                    key: 'newLackNum'
+                    key: 'inputLackNum'
                 }
             ],
-            tableData: []
+            tableData: [],
+            rowData: {}
         };
     },
     created() {
     },
-    watch: {
-    },
     methods: {
         show(row) {
-            console.log(row)
+            this.rowData = row;
+            this.tableData = [row];
             this.showModal = true;
         },
-        clickOk(){
-            this.$emit('ok-click');
-        },
-        clickCancel(){
+        uploadLackNum(){
+            const params = {
+                num: this.rowData.inputLackNum,
+                productSku: this.rowData.productSku,
+                proReqFormId: this.rowData.proRequisitionFormId
+            };
+            service.allotStockOut(params)
+                .then(res => {
+                    console.log(res)
+                });
         }
-    },
-    components: {
     }
 };
 </script>

@@ -38,10 +38,6 @@
             name: {
                 type: String
             }
-        },
-        data() {
-            return {
-            }
         }
     }
 </script>

@@ -21,11 +21,9 @@
                 skuImageSrc: ''
             }
         },
-        computed: {
-            skuImageSrc() {
-                return
-                `http://shops.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=${this.productSku}&size=80x80`
-            }
+        created() {
+            this.skuImageSrc =
+            `http://shops.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=${this.productSku}&size=80x80`;
         }
     }
 </script>

@@ -41,17 +41,6 @@
         methods: {
             showModal(){
                 this.$emit('click-upload', this.rowIndex);
-            },
-            uploadSubmit(){
-                const params = {
-                    proReqFormId:195481,
-                    productSku:1275146,
-                    num:1
-                };
-                service.allotStockOut(params)
-                    .then(res => {
-                        console.log(res)
-                    });
             }
         }
     }

@@ -68,6 +68,15 @@ export default () => {
                     align: 'center'
                 },
                 {
+                    title: '商品图片',
+                    align: 'center',
+                    render(row){
+                        return `<cell-sku-image
+                            :product-sku="row.productSku"
+                        ></cell-sku-image>`
+                    }
+                },
+                {
                     title: '商品信息',
                     align: 'center',
                     render(row){

@@ -61,7 +61,7 @@
     import service from 'trade-service';
     import Store from '../store/undone';
     import { DeliverProduct, UploadStockOut } from 'components/modal' ;
-    import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut } from '../components';
+    import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut, CellSkuImage } from '../components';
 
     export default {
         name: 'TabUndone',
@@ -194,7 +194,6 @@
                 return '';
             },
             lackNumChange(data) {
-                console.log(data)
                 const i = data.index;
                 const v = data.value;
                 this.table.list[i].inputLackNum = +v;
@@ -209,6 +208,7 @@
             CellDispatch,
             CellDeliver,
             CellStockOut,
+            CellSkuImage,
             DeliverProduct,
             UploadStockOut
         }