fe / yoho-shop-manage · Commits

Go to a project

Authored by OF1706
Commit 31e075e8c45a1924e9054aa30def7990afd9fdd2 1 parent 5d15afe2

sellback

Inline Side-by-side
Showing 5 changed files with 223 additions and 96 deletions
  1 +<template>
  2 + <Modal v-model="model"
  3 + width="660"
  4 + :mask-closable="false"
  5 + class-name="vertical-center-modal">
  6 +
  7 + <div style="text-align: center; padding: 30px 30px 10px">
  8 + <template>
  9 + <Carousel v-model="carousel" v-if="showCarousel">
  10 + <Carousel-item v-for="list in items" ref="show" :key="list.id">
  11 + <div class="carousel-item">
  12 + <img :src="list.imagesPath"/>
  13 + </div>
  14 + </Carousel-item>
  15 + </Carousel>
  16 + </template>
  17 + </div>
  18 +
  19 + <div slot="footer">
  20 + <Button type="primary" size="large" @click="close">关闭</Button>
  21 + </div>
  22 + </Modal>
  23 +</template>
  24 +
  25 +<script>
  26 +
  27 +import SellService from 'services/repository/sellback-service';
  28 +import _ from 'lodash';
  29 +
  30 +export default {
  31 + name: 'edit-img',
  32 + created() {
  33 + this.sellService = new SellService();
  34 + },
  35 + data() {
  36 + return {
  37 + model: false,
  38 + modal_loading: false,
  39 + showCarousel: false,
  40 + self: this,
  41 + items: {
  42 + imgData: []
  43 + },
  44 + id: '',
  45 + shopId: '',
  46 + defectGoodsId: '',
  47 + imagesPath: '',
  48 + carousel: 0
  49 + };
  50 + },
  51 + methods: {
  52 + show(row) {
  53 + this.reset();
  54 + this.imagesPath = row.imagesPath;
  55 + this.id = row.id;
  56 + this.shopId = row.shopId;
  57 + this.model = true;
  58 +
  59 + this.getData();
  60 + },
  61 + close() {
  62 + this.reset();
  63 + this.model = false;
  64 + },
  65 + reset() {
  66 + this.showCarousel = false;
  67 + this.imagesPath = null;
  68 + this.id = null;
  69 + this.shopId = null;
  70 + this.defectGoodsId = null;
  71 + this.modal_loading = false;
  72 + },
  73 + getData() {
  74 + this.sellService.imgDetail(this.shopId, this.id)
  75 + .then((result) => {
  76 + if (result.code === 200) {
  77 + this.items = result.data;
  78 + _.forEach(this.items, it => {
  79 + it.imagesPath = it.imagesPath.replace(/{width}x{height}/g, '568x400');
  80 + });
  81 + this.$nextTick(() => {
  82 + this.showCarousel = true;
  83 + });
  84 + }
  85 + });
  86 +
  87 + }
  88 + }
  89 +};
  90 +
  91 +</script>
  92 +
  93 +<style lang="scss">
  94 +.vertical-center-modal {
  95 + display: flex;
  96 + align-items: center;
  97 + justify-content: center;
  98 +
  99 + .ivu-modal {
  100 + top: 0;
  101 + }
  102 +}
  103 +
  104 +.ivu-modal-close {
  105 + display: none;
  106 +}
  107 +
  108 +.carousel-item {
  109 + width: 568px;
  110 + height: 400px;
  111 + background-color: #000;
  112 + display: table;
  113 +
  114 + img {
  115 + display: table-cell;
  116 + vertical-align: middle;
  117 + width: 100%;
  118 + height: auto;
  119 + max-width: 568px;
  120 + max-height: 400px;
  121 + overflow: hidden;
  122 + }
  123 +}
  124 +
  125 +</style>
1 <template> 1 <template>
2 <layout-body> 2 <layout-body>
3 <layout-filter> 3 <layout-filter>
4 - <filter-item :label="filters.id.label">  
5 - <Input v-model.trim="filters.id.model"  
6 - :placeholder="filters.id.holder" maxlength="9" ></Input> 4 + <filter-item :label="filters.orderCode.label">
  5 + <Input v-model.trim="filters.orderCode.model"
  6 + :placeholder="filters.orderCode.holder" maxlength="9" ></Input>
7 </filter-item> 7 </filter-item>
8 8
9 - <filter-item :label="filters.expressNumber.label">  
10 - <Input v-model.trim="filters.expressNumber.model"  
11 - :placeholder="filters.expressNumber.holder" ></Input>  
12 - </filter-item>  
13 -  
14 - <filter-item :label="filters.productSkn.label">  
15 - <Input v-model.trim="filters.productSkn.model"  
16 - :placeholder="filters.productSkn.holder" maxlength="9"></Input>  
17 - </filter-item>  
18 -  
19 - <filter-item :label="filters.skuFactoryCode.label">  
20 - <Input v-model.trim="filters.skuFactoryCode.model"  
21 - :placeholder="filters.skuFactoryCode.holder"></Input> 9 + <filter-item :label="filters.productSku.label">
  10 + <Input v-model.trim="filters.productSku.model"
  11 + :placeholder="filters.productSku.holder" maxlength="9"></Input>
22 </filter-item> 12 </filter-item>
23 13
24 <filter-item> 14 <filter-item>
25 - <Button type="primary" @click="getExpress">筛选</Button>  
26 - <Button type="warning" @click="exportList">导出</Button> 15 + <Button type="primary" @click="getSellBack">筛选</Button>
27 <Button @click="clearFilters">清空条件</Button> 16 <Button @click="clearFilters">清空条件</Button>
28 </filter-item> 17 </filter-item>
29 </layout-filter> 18 </layout-filter>
@@ -34,70 +23,77 @@ @@ -34,70 +23,77 @@
34 @on-change="pageChange" :page-size="20" show-total></Page> 23 @on-change="pageChange" :page-size="20" show-total></Page>
35 </layout-list> 24 </layout-list>
36 25
  26 + <edit-img ref="showImgEdit" @on-success="editSuccess"></edit-img>
  27 +
37 </layout-body> 28 </layout-body>
38 </template> 29 </template>
39 30
40 <script> 31 <script>
41 import {list} from './store'; 32 import {list} from './store';
42 - import ExpressService from 'services/repository/sellback-service'; 33 + import EditImg from './components/edit-img.vue';
  34 + import SellService from 'services/repository/sellback-service';
43 35
44 export default { 36 export default {
45 created() { 37 created() {
46 - this.expressService = new ExpressService(); 38 + this.sellService = new SellService();
47 }, 39 },
48 data() { 40 data() {
49 return list.call(this); 41 return list.call(this);
50 }, 42 },
51 mounted() { 43 mounted() {
52 - this.getExpress(); 44 + this.getSellBack();
53 }, 45 },
54 methods: { 46 methods: {
  47 + editImg(row) {
  48 + this.$refs.showImgEdit.show(row);
  49 + },
  50 + editSuccess() {
  51 + this.getImg();
  52 + },
55 clearFilters() { 53 clearFilters() {
56 - this.filters.id.model = null;  
57 - this.filters.expressNumber.model = null;  
58 - this.filters.productSkn.model = null;  
59 - this.filters.skuFactoryCode.model = null; 54 + this.filters.orderCode.model = null;
  55 + this.filters.productSku.model = null;
60 this.pageData.current = 1; 56 this.pageData.current = 1;
61 this.pageData.total = 0; 57 this.pageData.total = 0;
62 58
63 - this.getExpress(); 59 + this.getSellBack();
64 }, 60 },
65 filtersParams() { 61 filtersParams() {
66 let params = {}; 62 let params = {};
  63 + let productSku = this.filters.productSku.model;
67 64
68 - if (this.filters.id.model) {  
69 - if (this.isNumber(this.filters.id.model)) {  
70 - params.proReqFormId = this.filters.id.model; 65 + if (this.filters.orderCode.model) {
  66 + if (this.isNumber(this.filters.orderCode.model)) {
  67 + params.proReqFormId = this.filters.orderCode.model;
71 } else { 68 } else {
72 - return Promise.reject('入库单号必须是数字'); 69 + return Promise.reject('订单号必须是数字');
73 } 70 }
74 } 71 }
75 72
76 - if (this.filters.expressNumber.model) {  
77 - params.expressNumber = this.filters.expressNumber.model;  
78 - }  
79 -  
80 - if (this.filters.productSkn.model) {  
81 - if (this.isNumber(this.filters.productSkn.model)) {  
82 - params.productSkn = this.filters.productSkn.model; 73 + if (this.filters.productSku.model) {
  74 + if (this.isNumber(this.filters.productSku.model)) {
  75 + params.productSku = this.filters.productSku.model;
83 } else { 76 } else {
84 - return Promise.reject('skn必须是数字');  
85 - } 77 + return Promise.reject('sku必须是数字');
86 } 78 }
87 -  
88 - if (this.filters.skuFactoryCode.model) {  
89 - params.skuFactoryCode = this.filters.skuFactoryCode.model;  
90 } 79 }
91 80
92 params.pageSize = this.pageData.pageSize; 81 params.pageSize = this.pageData.pageSize;
93 params.pageNo = this.pageData.current; 82 params.pageNo = this.pageData.current;
94 83
95 - return Promise.resolve(params); 84 + return Promise.resolve({
  85 + params,
  86 + productSku
  87 + });
  88 + },
  89 + pageChange(page) {
  90 + this.pageData.current = page;
  91 + this.getSellBack();
96 }, 92 },
97 - getExpress() { 93 + getSellBack() {
98 this.$Loading.start(); 94 this.$Loading.start();
99 return this.filtersParams().then((params) => { 95 return this.filtersParams().then((params) => {
100 - return this.expressService.list(params); 96 + return this.sellService.list(params);
101 }).then((result) => { 97 }).then((result) => {
102 if (result.code === 200) { 98 if (result.code === 200) {
103 this.pageData.total = result.data.totalCount; 99 this.pageData.total = result.data.totalCount;
@@ -110,27 +106,23 @@ @@ -110,27 +106,23 @@
110 this.$Message.error(err); 106 this.$Message.error(err);
111 }); 107 });
112 }, 108 },
113 - info(data) {  
114 - this.$router.push({  
115 - name: 'repository.express.info',  
116 - params: {  
117 - id: data.expressNumber  
118 - },  
119 - query: {  
120 - time: data.createTime  
121 - }  
122 - });  
123 - },  
124 - exportList() {  
125 - this.expressService.exportList().then((url) => {  
126 - window.open(url, '_blank');  
127 - });  
128 - },  
129 isNumber(numStr) { 109 isNumber(numStr) {
130 const isNumber = /^[0-9]+$/; 110 const isNumber = /^[0-9]+$/;
131 111
132 return isNumber.test(numStr); 112 return isNumber.test(numStr);
  113 + },
  114 + getImg() {
  115 + return this.filterParams().then((params) => {
  116 + return this.sellService.imgDetail(params).then((result) => {
  117 + if (result.code === 200) {
  118 + this.tableData = result.data;
133 } 119 }
  120 + });
  121 + });
  122 + },
  123 + },
  124 + components: {
  125 + EditImg
134 } 126 }
135 }; 127 };
136 </script> 128 </script>
@@ -3,36 +3,51 @@ @@ -3,36 +3,51 @@
3 * @author: GeXuHui <qi.li@yoho.cn> 3 * @author: GeXuHui <qi.li@yoho.cn>
4 * @date: 2017/07/26 4 * @date: 2017/07/26
5 */ 5 */
6 -import moment from 'moment'; 6 +import timeFormat from 'filters/time-format';
7 7
8 export default function() { 8 export default function() {
9 return { 9 return {
10 tableCols: [{ 10 tableCols: [{
11 title: '商品图片', 11 title: '商品图片',
12 - key: 'expressNumber', 12 + width: 120,
13 align: 'center', 13 align: 'center',
14 render: (h, params) => { 14 render: (h, params) => {
  15 + let directives = [{name: 'prod-img', value: params.row.productSku, modifiers: {sku: true}}];
  16 +
15 return ( 17 return (
16 - <div>  
17 - {params.row.expressNumber} ({params.row.expressName})  
18 - </div> 18 + <img {...{directives}}/>
19 ); 19 );
20 } 20 }
21 }, 21 },
22 { 22 {
23 title: '订单号', 23 title: '订单号',
24 - key: 'createTime', 24 + key: 'orderCode',
25 align: 'center', 25 align: 'center',
  26 + },
  27 + {
  28 + title: 'SKU',
  29 + key: 'productSku',
  30 + align: 'center'
  31 + },
  32 + {
  33 + title: '瑕疵类型',
  34 + key: 'typeName',
  35 + align: 'center'
  36 + },
  37 + {
  38 + title: '备注',
  39 + key: 'remark',
  40 + align: 'center'
  41 + },
  42 + {
  43 + title: '创建时间',
  44 + width: 150,
26 render: (h, params) => { 45 render: (h, params) => {
27 - let time = moment.unix(params.row.createTime);  
28 -  
29 return ( 46 return (
30 - <div>  
31 - <div> {time.format('YYYY-MM-DD')} </div>  
32 - <div> {time.format('HH:mm:ss')} </div>  
33 - </div> 47 + <span>{timeFormat(params.row.createTime)}</span>
34 ); 48 );
35 - } 49 + },
  50 + align: 'center'
36 }, 51 },
37 { 52 {
38 title: '操作', 53 title: '操作',
@@ -41,7 +56,9 @@ export default function() { @@ -41,7 +56,9 @@ export default function() {
41 render: (h, params) => { 56 render: (h, params) => {
42 return ( 57 return (
43 <div class="action-btn-row"> 58 <div class="action-btn-row">
44 - <i-button type="success" size="small" onClick={() => this.info(params.row)}>查看明细</i-button> 59 + <i-button type="success" size="small" onClick={() => this.editImg(params.row)}>
  60 + <i class="ivu-icon ivu-icon-eye" style="margin-right: 5px;vertical-align: top;font-size: 16px;"></i>
  61 + 查看明细</i-button>
45 </div> 62 </div>
46 ); 63 );
47 } 64 }
@@ -53,34 +70,21 @@ export default function() { @@ -53,34 +70,21 @@ export default function() {
53 pageSize: 20 70 pageSize: 20
54 }, 71 },
55 filters: { 72 filters: {
56 - id: { 73 + orderCode: {
57 label: '订单号', 74 label: '订单号',
58 labelSpan: 6, 75 labelSpan: 6,
59 model: '', 76 model: '',
60 holder: '', 77 holder: '',
61 fieldSpan: 18 78 fieldSpan: 18
62 }, 79 },
63 - expressNumber: {  
64 - label: '物流单号', 80 + productSku: {
  81 + label: 'SKU编码',
65 labelSpan: 6, 82 labelSpan: 6,
66 model: '', 83 model: '',
67 holder: '', 84 holder: '',
68 fieldSpan: 18 85 fieldSpan: 18
69 - },  
70 - productSkn: {  
71 - label: 'SKN编码',  
72 - labelSpan: 6,  
73 - model: '',  
74 - holder: '',  
75 - fieldSpan: 18  
76 - },  
77 - skuFactoryCode: {  
78 - label: '商品条码',  
79 - labelSpan: 6,  
80 - model: '',  
81 - holder: '',  
82 - fieldSpan: 18  
83 - }, 86 + }
  87 +
84 } 88 }
85 }; 89 };
86 } 90 }
@@ -4,12 +4,16 @@ @@ -4,12 +4,16 @@
4 4
5 import Service from '../service'; 5 import Service from '../service';
6 const apiUrl = { 6 const apiUrl = {
7 - listSellBack: '/erp/sellBackList', 7 + defectGoodsList: '/erp/defectGoodsList',
  8 + defectGoodsImg: '/erp/defectGoodsImg',
8 }; 9 };
9 10
10 class SellService extends Service { 11 class SellService extends Service {
11 list(params) { 12 list(params) {
12 - return this.post(apiUrl.listSellBack, params); 13 + return this.post(apiUrl.defectGoodsList, params);
  14 + }
  15 + imgDetail(shopId, id) {
  16 + return this.post(apiUrl.defectGoodsImg, {shopId, id});
13 } 17 }
14 } 18 }
15 19
@@ -47,7 +47,9 @@ let domainApis = { @@ -47,7 +47,9 @@ let domainApis = {
47 inventoryLedgerList: '/erp-shop-web/inventoryLedger/list', 47 inventoryLedgerList: '/erp-shop-web/inventoryLedger/list',
48 exportBalanceList: '/erp-shop-web/export/exportBalanceList', 48 exportBalanceList: '/erp-shop-web/export/exportBalanceList',
49 exportSettlementDetail: '/erp-shop-web/export/exportSettlementDetail', 49 exportSettlementDetail: '/erp-shop-web/export/exportSettlementDetail',
50 - exportBalanceDetail: '/erp-shop-web/export/exportBalanceDetail' 50 + exportBalanceDetail: '/erp-shop-web/export/exportBalanceDetail',
  51 + defectGoodsList: '/erp-shop-web/defectGoods/list',
  52 + defectGoodsImg: '/erp-shop-web/defectGoods/detail'
51 }, 53 },
52 platform: { 54 platform: {
53 queryShopsByAdminPid: '/SellerShopController/queryShopsByAdminPid', 55 queryShopsByAdminPid: '/SellerShopController/queryShopsByAdminPid',