Authored by OF1706

sellback

<template>
<Modal v-model="model"
width="660"
:mask-closable="false"
class-name="vertical-center-modal">
<div style="text-align: center; padding: 30px 30px 10px">
<template>
<Carousel v-model="carousel" v-if="showCarousel">
<Carousel-item v-for="list in items" ref="show" :key="list.id">
<div class="carousel-item">
<img :src="list.imagesPath"/>
</div>
</Carousel-item>
</Carousel>
</template>
</div>
<div slot="footer">
<Button type="primary" size="large" @click="close">关闭</Button>
</div>
</Modal>
</template>
<script>
import SellService from 'services/repository/sellback-service';
import _ from 'lodash';
export default {
name: 'edit-img',
created() {
this.sellService = new SellService();
},
data() {
return {
model: false,
modal_loading: false,
showCarousel: false,
self: this,
items: {
imgData: []
},
id: '',
shopId: '',
defectGoodsId: '',
imagesPath: '',
carousel: 0
};
},
methods: {
show(row) {
this.reset();
this.imagesPath = row.imagesPath;
this.id = row.id;
this.shopId = row.shopId;
this.model = true;
this.getData();
},
close() {
this.reset();
this.model = false;
},
reset() {
this.showCarousel = false;
this.imagesPath = null;
this.id = null;
this.shopId = null;
this.defectGoodsId = null;
this.modal_loading = false;
},
getData() {
this.sellService.imgDetail(this.shopId, this.id)
.then((result) => {
if (result.code === 200) {
this.items = result.data;
_.forEach(this.items, it => {
it.imagesPath = it.imagesPath.replace(/{width}x{height}/g, '568x400');
});
this.$nextTick(() => {
this.showCarousel = true;
});
}
});
}
}
};
</script>
<style lang="scss">
.vertical-center-modal {
display: flex;
align-items: center;
justify-content: center;
.ivu-modal {
top: 0;
}
}
.ivu-modal-close {
display: none;
}
.carousel-item {
width: 568px;
height: 400px;
background-color: #000;
display: table;
img {
display: table-cell;
vertical-align: middle;
width: 100%;
height: auto;
max-width: 568px;
max-height: 400px;
overflow: hidden;
}
}
</style>
... ...
<template>
<layout-body>
<layout-filter>
<filter-item :label="filters.id.label">
<Input v-model.trim="filters.id.model"
:placeholder="filters.id.holder" maxlength="9" ></Input>
<filter-item :label="filters.orderCode.label">
<Input v-model.trim="filters.orderCode.model"
:placeholder="filters.orderCode.holder" maxlength="9" ></Input>
</filter-item>
<filter-item :label="filters.expressNumber.label">
<Input v-model.trim="filters.expressNumber.model"
:placeholder="filters.expressNumber.holder" ></Input>
</filter-item>
<filter-item :label="filters.productSkn.label">
<Input v-model.trim="filters.productSkn.model"
:placeholder="filters.productSkn.holder" maxlength="9"></Input>
</filter-item>
<filter-item :label="filters.skuFactoryCode.label">
<Input v-model.trim="filters.skuFactoryCode.model"
:placeholder="filters.skuFactoryCode.holder"></Input>
<filter-item :label="filters.productSku.label">
<Input v-model.trim="filters.productSku.model"
:placeholder="filters.productSku.holder" maxlength="9"></Input>
</filter-item>
<filter-item>
<Button type="primary" @click="getExpress">筛选</Button>
<Button type="warning" @click="exportList">导出</Button>
<Button type="primary" @click="getSellBack">筛选</Button>
<Button @click="clearFilters">清空条件</Button>
</filter-item>
</layout-filter>
... ... @@ -34,70 +23,77 @@
@on-change="pageChange" :page-size="20" show-total></Page>
</layout-list>
<edit-img ref="showImgEdit" @on-success="editSuccess"></edit-img>
</layout-body>
</template>
<script>
import {list} from './store';
import ExpressService from 'services/repository/sellback-service';
import EditImg from './components/edit-img.vue';
import SellService from 'services/repository/sellback-service';
export default {
created() {
this.expressService = new ExpressService();
this.sellService = new SellService();
},
data() {
return list.call(this);
},
mounted() {
this.getExpress();
this.getSellBack();
},
methods: {
editImg(row) {
this.$refs.showImgEdit.show(row);
},
editSuccess() {
this.getImg();
},
clearFilters() {
this.filters.id.model = null;
this.filters.expressNumber.model = null;
this.filters.productSkn.model = null;
this.filters.skuFactoryCode.model = null;
this.filters.orderCode.model = null;
this.filters.productSku.model = null;
this.pageData.current = 1;
this.pageData.total = 0;
this.getExpress();
this.getSellBack();
},
filtersParams() {
let params = {};
let productSku = this.filters.productSku.model;
if (this.filters.id.model) {
if (this.isNumber(this.filters.id.model)) {
params.proReqFormId = this.filters.id.model;
if (this.filters.orderCode.model) {
if (this.isNumber(this.filters.orderCode.model)) {
params.proReqFormId = this.filters.orderCode.model;
} else {
return Promise.reject('入库单号必须是数字');
return Promise.reject('单号必须是数字');
}
}
if (this.filters.expressNumber.model) {
params.expressNumber = this.filters.expressNumber.model;
}
if (this.filters.productSkn.model) {
if (this.isNumber(this.filters.productSkn.model)) {
params.productSkn = this.filters.productSkn.model;
if (this.filters.productSku.model) {
if (this.isNumber(this.filters.productSku.model)) {
params.productSku = this.filters.productSku.model;
} else {
return Promise.reject('skn必须是数字');
return Promise.reject('sku必须是数字');
}
}
if (this.filters.skuFactoryCode.model) {
params.skuFactoryCode = this.filters.skuFactoryCode.model;
}
params.pageSize = this.pageData.pageSize;
params.pageNo = this.pageData.current;
return Promise.resolve(params);
return Promise.resolve({
params,
productSku
});
},
pageChange(page) {
this.pageData.current = page;
this.getSellBack();
},
getExpress() {
getSellBack() {
this.$Loading.start();
return this.filtersParams().then((params) => {
return this.expressService.list(params);
return this.sellService.list(params);
}).then((result) => {
if (result.code === 200) {
this.pageData.total = result.data.totalCount;
... ... @@ -110,27 +106,23 @@
this.$Message.error(err);
});
},
info(data) {
this.$router.push({
name: 'repository.express.info',
params: {
id: data.expressNumber
},
query: {
time: data.createTime
}
});
},
exportList() {
this.expressService.exportList().then((url) => {
window.open(url, '_blank');
});
},
isNumber(numStr) {
const isNumber = /^[0-9]+$/;
return isNumber.test(numStr);
}
},
getImg() {
return this.filterParams().then((params) => {
return this.sellService.imgDetail(params).then((result) => {
if (result.code === 200) {
this.tableData = result.data;
}
});
});
},
},
components: {
EditImg
}
};
</script>
... ...
... ... @@ -3,36 +3,51 @@
* @author: GeXuHui <qi.li@yoho.cn>
* @date: 2017/07/26
*/
import moment from 'moment';
import timeFormat from 'filters/time-format';
export default function() {
return {
tableCols: [{
title: '商品图片',
key: 'expressNumber',
width: 120,
align: 'center',
render: (h, params) => {
let directives = [{name: 'prod-img', value: params.row.productSku, modifiers: {sku: true}}];
return (
<div>
{params.row.expressNumber} ({params.row.expressName})
</div>
<img {...{directives}}/>
);
}
},
{
title: '订单号',
key: 'createTime',
key: 'orderCode',
align: 'center',
},
{
title: 'SKU',
key: 'productSku',
align: 'center'
},
{
title: '瑕疵类型',
key: 'typeName',
align: 'center'
},
{
title: '备注',
key: 'remark',
align: 'center'
},
{
title: '创建时间',
width: 150,
render: (h, params) => {
let time = moment.unix(params.row.createTime);
return (
<div>
<div> {time.format('YYYY-MM-DD')} </div>
<div> {time.format('HH:mm:ss')} </div>
</div>
<span>{timeFormat(params.row.createTime)}</span>
);
}
},
align: 'center'
},
{
title: '操作',
... ... @@ -41,7 +56,9 @@ export default function() {
render: (h, params) => {
return (
<div class="action-btn-row">
<i-button type="success" size="small" onClick={() => this.info(params.row)}>查看明细</i-button>
<i-button type="success" size="small" onClick={() => this.editImg(params.row)}>
<i class="ivu-icon ivu-icon-eye" style="margin-right: 5px;vertical-align: top;font-size: 16px;"></i>
查看明细</i-button>
</div>
);
}
... ... @@ -53,34 +70,21 @@ export default function() {
pageSize: 20
},
filters: {
id: {
orderCode: {
label: '订单号',
labelSpan: 6,
model: '',
holder: '',
fieldSpan: 18
},
expressNumber: {
label: '物流单号',
productSku: {
label: 'SKU编码',
labelSpan: 6,
model: '',
holder: '',
fieldSpan: 18
},
productSkn: {
label: 'SKN编码',
labelSpan: 6,
model: '',
holder: '',
fieldSpan: 18
},
skuFactoryCode: {
label: '商品条码',
labelSpan: 6,
model: '',
holder: '',
fieldSpan: 18
},
}
}
};
}
... ...
... ... @@ -4,12 +4,16 @@
import Service from '../service';
const apiUrl = {
listSellBack: '/erp/sellBackList',
defectGoodsList: '/erp/defectGoodsList',
defectGoodsImg: '/erp/defectGoodsImg',
};
class SellService extends Service {
list(params) {
return this.post(apiUrl.listSellBack, params);
return this.post(apiUrl.defectGoodsList, params);
}
imgDetail(shopId, id) {
return this.post(apiUrl.defectGoodsImg, {shopId, id});
}
}
... ...
... ... @@ -47,7 +47,9 @@ let domainApis = {
inventoryLedgerList: '/erp-shop-web/inventoryLedger/list',
exportBalanceList: '/erp-shop-web/export/exportBalanceList',
exportSettlementDetail: '/erp-shop-web/export/exportSettlementDetail',
exportBalanceDetail: '/erp-shop-web/export/exportBalanceDetail'
exportBalanceDetail: '/erp-shop-web/export/exportBalanceDetail',
defectGoodsList: '/erp-shop-web/defectGoods/list',
defectGoodsImg: '/erp-shop-web/defectGoods/detail'
},
platform: {
queryShopsByAdminPid: '/SellerShopController/queryShopsByAdminPid',
... ...