Authored by 李奇

打印功能提交

1 <template> 1 <template>
2 <LayoutBody> 2 <LayoutBody>
3 - <div class="detail-header">  
4 - <span class="no">物流单号 - {{expressNo}}</span>  
5 - <span class="time">发货时间:{{expressTime}}</span>  
6 - <p class="address"></p> 3 + <div class="print-detail">
  4 + <div class="detail-header">
  5 + <p class="exp-no">物流单号 - {{expressNo}}</p>
  6 + <p class="supply">数量:{{totalNum}}</p>
  7 + <p class="address high-light">{{destAddress}}</p>
  8 + </div>
  9 + <div class="detail-list">
  10 + <table>
  11 + <thead>
  12 + <tr>
  13 + <th>SKN</th>
  14 + <th>SKU</th>
  15 + <th>条码</th>
  16 + <th>吊牌价</th>
  17 + <th>销售价</th>
  18 + <th>商品名称</th>
  19 + <th>数量</th>
  20 + <th>单号</th>
  21 + </tr>
  22 + </thead>
  23 + <tbody>
  24 + <tr v-for="item in dataList">
  25 + <td>{{item.skn}}</td>
  26 + <td>{{item.sku}}</td>
  27 + <td>{{item.skuFactoryCode}}</td>
  28 + <td>{{item.retailPrice}}</td>
  29 + <td>{{item.salesPrice}}</td>
  30 + <td>{{item.productName}}</td>
  31 + <td>{{item.num}}</td>
  32 + <td>{{item.proRequisitionFormId}}</td>
  33 + </tr>
  34 + </tbody>
  35 + </table>
  36 + </div>
7 </div> 37 </div>
8 - <LayoutList>  
9 - <Table border :columns="table.cols" :data="table.list"></Table>  
10 - </LayoutList>  
11 </LayoutBody> 38 </LayoutBody>
12 </template> 39 </template>
13 40
14 <script> 41 <script>
15 import _ from 'lodash'; 42 import _ from 'lodash';
16 - import moment from 'moment';  
17 import service from 'trade-service'; 43 import service from 'trade-service';
18 44
19 export default { 45 export default {
20 data() { 46 data() {
21 return { 47 return {
22 - table: {  
23 - cols: [  
24 - {  
25 - title: 'SKN',  
26 - key: 'skn',  
27 - align: 'center'  
28 - },  
29 - {  
30 - title: 'sku',  
31 - key: 'sku',  
32 - align: 'center'  
33 - }, {  
34 - title: '条码',  
35 - key: 'skuFactoryCode',  
36 - align: 'center'  
37 - }, {  
38 - title: '商品图片',  
39 - align: 'center',  
40 - render() {  
41 - return `<div>  
42 - <img v-prod-img.sku="row.sku">  
43 - </div>`;  
44 - }  
45 - }, {  
46 - title: '商品名称',  
47 - key: 'productName',  
48 - align: 'center'  
49 - }, {  
50 - title: '规格',  
51 - align: 'center',  
52 - render(row) {  
53 - return `${row.colorName || ''}/${row.size}`;  
54 - }  
55 - }, {  
56 - title: '调拨单号/已发数',  
57 - align: 'center',  
58 - render(row) {  
59 - let $html = '';  
60 -  
61 - _.each(row.boList, i => {  
62 - $html += `<p>${i.proRequisitionFormId}/${i.num}</p>`;  
63 - });  
64 -  
65 - return $html;  
66 - }  
67 - }  
68 - ],  
69 - list: []  
70 - },  
71 expressNo: 0, 48 expressNo: 0,
72 - expressTime: '' 49 + destAddress: '',
  50 + totalNum: 0,
  51 + dataList: []
73 }; 52 };
74 }, 53 },
75 created() { 54 created() {
76 this.$root.$emit('print-page'); 55 this.$root.$emit('print-page');
77 this.expressNo = this.$route.query.expressNo; 56 this.expressNo = this.$route.query.expressNo;
78 - this.expressDetail(); 57 + this.allotPrintExpressDetail();
79 }, 58 },
80 methods: { 59 methods: {
81 - backExpList() {  
82 - this.$router.push({  
83 - name: 'trade.allot.express'  
84 - });  
85 - },  
86 - expressDetail() {  
87 - service.allotExpressDetail(this.expressNo) 60 + allotPrintExpressDetail() {
  61 + service.allotPrintExpressDetail(this.expressNo)
88 .then(res => { 62 .then(res => {
89 this.resolveData(res.data); 63 this.resolveData(res.data);
90 }); 64 });
91 65
  66 + service.allotWarehouseInfo()
  67 + .then(res => {
  68 + const data = res.data;
  69 +
  70 + this.destAddress = `发往:${data.address} ${data.adminName} ${data.phone}`;
  71 + });
  72 +
92 }, 73 },
93 resolveData(data) { 74 resolveData(data) {
94 - const fmt = 'YYYY-MM-DD HH:mm:ss';  
95 -  
96 - this.table.list = data;  
97 - this.expressTime = moment.unix(data[0].createTime).format(fmt); 75 + _.each(data, item => {
  76 + this.totalNum += item.num || 0;
  77 + });
  78 + this.dataList = data;
98 } 79 }
99 }, 80 },
100 components: { 81 components: {
@@ -103,13 +84,46 @@ @@ -103,13 +84,46 @@
103 </script> 84 </script>
104 85
105 <style lang="scss" scoped> 86 <style lang="scss" scoped>
106 - .detail-header { 87 + .print-detail {
107 margin-bottom: 20px; 88 margin-bottom: 20px;
108 89
109 - .no,  
110 - .time {  
111 - margin-left: 10px; 90 + .exp-no {
  91 + font-size: 25px;
  92 + color: #333;
  93 + }
  94 +
  95 + .supply {
  96 + font-size: 15px;
112 } 97 }
  98 +
  99 + .address {
  100 + font-size: 15px;
  101 +
  102 + &.high-light {
  103 + color: #ff0000;
  104 + }
  105 + }
  106 +
  107 + .detail-list {
  108 + margin-top: 20px;
  109 +
  110 + table, th, td{
  111 + padding: 5px;
  112 + border: 1px solid black;
  113 + padding: 5px 30px;
  114 + }
  115 +
  116 + table {
  117 + border-spacing: 0px;
  118 + border-collapse: collapse;
  119 +
  120 + th {
  121 + color: #333;
  122 + }
  123 + }
  124 +
  125 + }
  126 +
113 } 127 }
114 </style> 128 </style>
115 129
1 -<template>  
2 - <div>  
3 - <a :href="productUrl" target="_blank">  
4 - <img class="cell-img"  
5 - :src="skuImageSrc">  
6 - </a>  
7 - </div>  
8 -</template>  
9 -  
10 -<script>  
11 - export default {  
12 - name: 'CellSkuImage',  
13 - props: {  
14 - productSku: {  
15 - type: [String, Number]  
16 - }  
17 - },  
18 - data() {  
19 - return {  
20 - productUrl: '',  
21 - skuImageSrc: ''  
22 - };  
23 - },  
24 - created() {  
25 - this.skuImageSrc =  
26 - `http://shops.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=${this.productSku}&size=80x80`;  
27 - }  
28 - };  
29 -</script>  
30 -  
31 -<style lang="scss" scoped>  
32 - .cell-img {  
33 - max-width: 200px;  
34 - }  
35 -</style>  
@@ -2,12 +2,10 @@ import CellDeliver from './cell-deliver'; @@ -2,12 +2,10 @@ import CellDeliver from './cell-deliver';
2 import CellDispatch from './cell-dispatch'; 2 import CellDispatch from './cell-dispatch';
3 import CellPrdInfo from './cell-prd-info'; 3 import CellPrdInfo from './cell-prd-info';
4 import CellStockOut from './cell-stock-out'; 4 import CellStockOut from './cell-stock-out';
5 -import CellSkuImage from './cell-sku-image';  
6 5
7 export { 6 export {
8 CellDeliver, 7 CellDeliver,
9 CellDispatch, 8 CellDispatch,
10 CellPrdInfo, 9 CellPrdInfo,
11 - CellStockOut,  
12 - CellSkuImage 10 + CellStockOut
13 }; 11 };
@@ -67,7 +67,7 @@ @@ -67,7 +67,7 @@
67 import service from 'trade-service'; 67 import service from 'trade-service';
68 import dataStore from '../store/undone'; 68 import dataStore from '../store/undone';
69 import { ModalDeliver, ModalStockOut } from 'components/modal'; 69 import { ModalDeliver, ModalStockOut } from 'components/modal';
70 - import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut, CellSkuImage } from '../components'; 70 + import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut } from '../components';
71 71
72 export default { 72 export default {
73 name: 'TabUndone', 73 name: 'TabUndone',
@@ -317,7 +317,6 @@ @@ -317,7 +317,6 @@
317 CellDispatch, 317 CellDispatch,
318 CellDeliver, 318 CellDeliver,
319 CellStockOut, 319 CellStockOut,
320 - CellSkuImage,  
321 ModalStockOut, 320 ModalStockOut,
322 ModalDeliver 321 ModalDeliver
323 } 322 }
@@ -13,7 +13,8 @@ const apiUrl = { @@ -13,7 +13,8 @@ const apiUrl = {
13 allotWarehouseInfo: '/erp/allotWarehouseInfo', 13 allotWarehouseInfo: '/erp/allotWarehouseInfo',
14 allotStockOut: '/erp/allotStockOut', 14 allotStockOut: '/erp/allotStockOut',
15 allotExpressNumList: '/erp/allotExpressNumList', 15 allotExpressNumList: '/erp/allotExpressNumList',
16 - allotExpressCompList: '/erp/allotExpressCompList' 16 + allotExpressCompList: '/erp/allotExpressCompList',
  17 + allotPrintExpressDetail: '/erp/allotPrintExpressDetail'
17 }; 18 };
18 19
19 const tradeService = { 20 const tradeService = {
@@ -97,6 +98,17 @@ const tradeService = { @@ -97,6 +98,17 @@ const tradeService = {
97 98
98 return {}; 99 return {};
99 }); 100 });
  101 + },
  102 + allotPrintExpressDetail(no) {
  103 + return axios.post(apiUrl.allotPrintExpressDetail, {
  104 + expressNumber: no
  105 + })
  106 + .then(res => {
  107 + if (res.status === 200) {
  108 + return res.data;
  109 + }
  110 + return {};
  111 + });
100 } 112 }
101 }; 113 };
102 114
@@ -14,6 +14,7 @@ let domainApis = { @@ -14,6 +14,7 @@ let domainApis = {
14 allotExpressNumList: '/erp-shop-web/purchase/queryExpressListByExpressNumber', 14 allotExpressNumList: '/erp-shop-web/purchase/queryExpressListByExpressNumber',
15 allotExpressCompList: '/erp-shop-web/express/getExpressList', 15 allotExpressCompList: '/erp-shop-web/express/getExpressList',
16 allotExportList: '/erp-shop-web/export/exportForPurchaseForm', 16 allotExportList: '/erp-shop-web/export/exportForPurchaseForm',
  17 + allotPrintExpressDetail: '/erp-shop-web/purchase/queryExpressListByExpressNumber',
17 jitProductList: '/erp-shop-web/product/jitProductList', 18 jitProductList: '/erp-shop-web/product/jitProductList',
18 getJitStorageListBySkn: '/erp-shop-web/product/getJitStorageListBySkn', 19 getJitStorageListBySkn: '/erp-shop-web/product/getJitStorageListBySkn',
19 importJitStorage: '/erp-shop-web/product/importJitStorage' 20 importJitStorage: '/erp-shop-web/product/importJitStorage'