fe / yoho-shop-manage · Commits

Go to a project

Authored by 李奇
Commit 7655badbc960fdeb48cdc36c031faf3328e00796 1 parent 602757b9

打印功能提交

Inline Side-by-side
Showing 6 changed files with 104 additions and 115 deletions
<template>
<LayoutBody>
<div class="detail-header">
<span class="no">物流单号 - {{expressNo}}</span>
<span class="time">发货时间：{{expressTime}}</span>
<p class="address"></p>
<div class="print-detail">
<div class="detail-header">
<p class="exp-no">物流单号 - {{expressNo}}</p>
<p class="supply">数量：{{totalNum}}</p>
<p class="address high-light">{{destAddress}}</p>
</div>
<div class="detail-list">
<table>
<thead>
<tr>
<th>SKN</th>
<th>SKU</th>
<th>条码</th>
<th>吊牌价</th>
<th>销售价</th>
<th>商品名称</th>
<th>数量</th>
<th>单号</th>
</tr>
</thead>
<tbody>
<tr v-for="item in dataList">
<td>{{item.skn}}</td>
<td>{{item.sku}}</td>
<td>{{item.skuFactoryCode}}</td>
<td>{{item.retailPrice}}</td>
<td>{{item.salesPrice}}</td>
<td>{{item.productName}}</td>
<td>{{item.num}}</td>
<td>{{item.proRequisitionFormId}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<LayoutList>
<Table border :columns="table.cols" :data="table.list"></Table>
</LayoutList>
</LayoutBody>
</template>
<script>
import _ from 'lodash';
import moment from 'moment';
import service from 'trade-service';
export default {
data() {
return {
table: {
cols: [
{
title: 'SKN',
key: 'skn',
align: 'center'
},
{
title: 'sku',
key: 'sku',
align: 'center'
}, {
title: '条码',
key: 'skuFactoryCode',
align: 'center'
}, {
title: '商品图片',
align: 'center',
render() {
return `<div>
<img v-prod-img.sku="row.sku">
</div>`;
}
}, {
title: '商品名称',
key: 'productName',
align: 'center'
}, {
title: '规格',
align: 'center',
render(row) {
return `${row.colorName || ''}/${row.size}`;
}
}, {
title: '调拨单号/已发数',
align: 'center',
render(row) {
let $html = '';
_.each(row.boList, i => {
$html += `<p>${i.proRequisitionFormId}/${i.num}</p>`;
});
return $html;
}
}
],
list: []
},
expressNo: 0,
expressTime: ''
destAddress: '',
totalNum: 0,
dataList: []
};
},
created() {
this.$root.$emit('print-page');
this.expressNo = this.$route.query.expressNo;
this.expressDetail();
this.allotPrintExpressDetail();
},
methods: {
backExpList() {
this.$router.push({
name: 'trade.allot.express'
});
},
expressDetail() {
service.allotExpressDetail(this.expressNo)
allotPrintExpressDetail() {
service.allotPrintExpressDetail(this.expressNo)
.then(res => {
this.resolveData(res.data);
});
service.allotWarehouseInfo()
.then(res => {
const data = res.data;
this.destAddress = `发往：${data.address} ${data.adminName} ${data.phone}`;
});
},
resolveData(data) {
const fmt = 'YYYY-MM-DD HH:mm:ss';
this.table.list = data;
this.expressTime = moment.unix(data[0].createTime).format(fmt);
_.each(data, item => {
this.totalNum += item.num || 0;
});
this.dataList = data;
}
},
components: {
... ... @@ -103,13 +84,46 @@
</script>
<style lang="scss" scoped>
.detail-header {
.print-detail {
margin-bottom: 20px;
.no,
.time {
margin-left: 10px;
.exp-no {
font-size: 25px;
color: #333;
}
.supply {
font-size: 15px;
}
.address {
font-size: 15px;
&.high-light {
color: #ff0000;
}
}
.detail-list {
margin-top: 20px;
table, th, td{
padding: 5px;
border: 1px solid black;
padding: 5px 30px;
}
table {
border-spacing: 0px;
border-collapse: collapse;
th {
color: #333;
}
}
}
}
</style>
... ...
<template>
<div>
<a :href="productUrl" target="_blank">
<img class="cell-img"
:src="skuImageSrc">
</a>
</div>
</template>
<script>
export default {
name: 'CellSkuImage',
props: {
productSku: {
type: [String, Number]
}
},
data() {
return {
productUrl: '',
skuImageSrc: ''
};
},
created() {
this.skuImageSrc =
`http://shops.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=${this.productSku}&size=80x80`;
}
};
</script>
<style lang="scss" scoped>
.cell-img {
max-width: 200px;
}
</style>
... ... @@ -2,12 +2,10 @@ import CellDeliver from './cell-deliver';
import CellDispatch from './cell-dispatch';
import CellPrdInfo from './cell-prd-info';
import CellStockOut from './cell-stock-out';
import CellSkuImage from './cell-sku-image';
export {
CellDeliver,
CellDispatch,
CellPrdInfo,
CellStockOut,
CellSkuImage
CellStockOut
};
... ...
... ... @@ -67,7 +67,7 @@
import service from 'trade-service';
import dataStore from '../store/undone';
import { ModalDeliver, ModalStockOut } from 'components/modal';
import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut, CellSkuImage } from '../components';
import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut } from '../components';
export default {
name: 'TabUndone',
... ... @@ -317,7 +317,6 @@
CellDispatch,
CellDeliver,
CellStockOut,
CellSkuImage,
ModalStockOut,
ModalDeliver
}
... ...
... ... @@ -13,7 +13,8 @@ const apiUrl = {
allotWarehouseInfo: '/erp/allotWarehouseInfo',
allotStockOut: '/erp/allotStockOut',
allotExpressNumList: '/erp/allotExpressNumList',
allotExpressCompList: '/erp/allotExpressCompList'
allotExpressCompList: '/erp/allotExpressCompList',
allotPrintExpressDetail: '/erp/allotPrintExpressDetail'
};
const tradeService = {
... ... @@ -97,6 +98,17 @@ const tradeService = {
return {};
});
},
allotPrintExpressDetail(no) {
return axios.post(apiUrl.allotPrintExpressDetail, {
expressNumber: no
})
.then(res => {
if (res.status === 200) {
return res.data;
}
return {};
});
}
};
... ...
... ... @@ -14,6 +14,7 @@ let domainApis = {
allotExpressNumList: '/erp-shop-web/purchase/queryExpressListByExpressNumber',
allotExpressCompList: '/erp-shop-web/express/getExpressList',
allotExportList: '/erp-shop-web/export/exportForPurchaseForm',
allotPrintExpressDetail: '/erp-shop-web/purchase/queryExpressListByExpressNumber',
jitProductList: '/erp-shop-web/product/jitProductList',
getJitStorageListBySkn: '/erp-shop-web/product/getJitStorageListBySkn',
importJitStorage: '/erp-shop-web/product/importJitStorage'
... ...