fe / yoho-shop-manage · Commits

Go to a project

Authored by 陈峰
Commit 97ef8d68dc21a1abeadd8ca79e7569999703b982 1 parent 76ac79ec

render

Inline Side-by-side
Showing 14 changed files with 109 additions and 151 deletions
  1 +<template>
  2 +<div class="action-btn-row">
  3 + <slot></slot>
  4 +</div>
  5 +</template>
  6 +<script>
  7 +export default {
  8 + name: 'action-group'
  9 +};
  10 +</script>
  11 +<style lang="scss">
  12 +.action-btn-row {
  13 + button {
  14 + margin-top: 10px;
  15 + margin-right: 10px;
  16 + margin-bottom: 10px;
  17 + }
  18 +}
  19 +</style>
@@ -8,6 +8,7 @@ import LayoutList from './layout-list'; @@ -8,6 +8,7 @@ import LayoutList from './layout-list';
8 import LayoutTab from './layout-tab'; 8 import LayoutTab from './layout-tab';
9 import LayoutFilter from './layout-filter'; 9 import LayoutFilter from './layout-filter';
10 import LayoutPrint from './layout-print'; 10 import LayoutPrint from './layout-print';
  11 +import ActionGroup from './action-group';
11 12
12 export default { 13 export default {
13 UserInfo, 14 UserInfo,
@@ -19,5 +20,6 @@ export default { @@ -19,5 +20,6 @@ export default {
19 LayoutList, 20 LayoutList,
20 LayoutTab, 21 LayoutTab,
21 LayoutFilter, 22 LayoutFilter,
22 - LayoutPrint 23 + LayoutPrint,
  24 + ActionGroup
23 }; 25 };
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 6
7 <script> 7 <script>
8 export default { 8 export default {
9 - name: 'LayoutBody', 9 + name: 'layout-body',
10 data() { 10 data() {
11 return { 11 return {
12 }; 12 };
@@ -192,4 +192,5 @@ div[contenteditable] { @@ -192,4 +192,5 @@ div[contenteditable] {
192 text-align: center; 192 text-align: center;
193 } 193 }
194 } 194 }
  195 +
195 </style> 196 </style>
@@ -145,17 +145,3 @@ @@ -145,17 +145,3 @@
145 } 145 }
146 }; 146 };
147 </script> 147 </script>
148 -  
149 -<style lang="scss">  
150 - .action-btn-row {  
151 - display: inline-block;  
152 -  
153 - button {  
154 - margin-top: 10px;  
155 -  
156 - &:last-child {  
157 - margin-bottom: 10px;  
158 - }  
159 - }  
160 - }  
161 -</style>  
@@ -106,13 +106,3 @@ @@ -106,13 +106,3 @@
106 } 106 }
107 }; 107 };
108 </script> 108 </script>
109 -  
110 -<style lang="scss">  
111 - .action-btn-row {  
112 - button {  
113 - margin-top: 10px;  
114 - margin-right: 10px;  
115 - margin-bottom: 10px;  
116 - }  
117 - }  
118 -</style>  
@@ -332,13 +332,3 @@ @@ -332,13 +332,3 @@
332 } 332 }
333 }; 333 };
334 </script> 334 </script>
335 -  
336 -<style lang="scss">  
337 - .action-btn-row {  
338 - button {  
339 - margin-top: 10px;  
340 - margin-right: 10px;  
341 - margin-bottom: 10px;  
342 - }  
343 - }  
344 -</style>  
@@ -41,8 +41,10 @@ export default { @@ -41,8 +41,10 @@ export default {
41 key: 'sizeName', 41 key: 'sizeName',
42 align: 'center', 42 align: 'center',
43 width: 250, 43 width: 250,
44 - render(row) {  
45 - return `${row.factoryGoodsName}/${row.sizeName}`; 44 + render: (h, params) => {
  45 + return (
  46 + <span>{params.row.factoryGoodsName}/{params.row.sizeName}</span>
  47 + );
46 } 48 }
47 }, 49 },
48 { 50 {
@@ -50,8 +52,13 @@ export default { @@ -50,8 +52,13 @@ export default {
50 key: 'number', 52 key: 'number',
51 align: 'center', 53 align: 'center',
52 width: 250, 54 width: 250,
53 - render() {  
54 - return '<i-input v-model="row.number" :maxlength="5"></i-input>'; 55 + render: (h, params) => {
  56 + return (
  57 + <i-input
  58 + value={params.row.number}
  59 + maxlength={5}
  60 + onInput={val => (params.row.number = val)}></i-input>
  61 + );
55 } 62 }
56 } 63 }
57 ], 64 ],
@@ -37,15 +37,17 @@ @@ -37,15 +37,17 @@
37 import {SelectBrand, SelectCategory} from 'components/select'; 37 import {SelectBrand, SelectCategory} from 'components/select';
38 import EditStore from './components/edit-store'; 38 import EditStore from './components/edit-store';
39 import ImportStore from './components/import-store'; 39 import ImportStore from './components/import-store';
40 - import {tableCols, tableData, pageData} from './store'; 40 + import store from './store';
41 41
42 export default { 42 export default {
43 data() { 43 data() {
  44 + let storeData = store.apply(this);
  45 +
44 return { 46 return {
45 self: this, 47 self: this,
46 - tableCols,  
47 - tableData,  
48 - pageData, 48 + tableCols: storeData.tableCols,
  49 + tableData: storeData.tableData,
  50 + pageData: storeData.pageData,
49 categoryValue: [], 51 categoryValue: [],
50 filters: { 52 filters: {
51 sknCode: { 53 sknCode: {
@@ -3,9 +3,9 @@ @@ -3,9 +3,9 @@
3 * @author: qi.li <qi.li@yoho.cn> 3 * @author: qi.li <qi.li@yoho.cn>
4 * @date: 2017/04/13 4 * @date: 2017/04/13
5 */ 5 */
6 -  
7 -let tableCols = [  
8 - { 6 +export default function() {
  7 + return {
  8 + tableCols: [{
9 title: 'SKN', 9 title: 'SKN',
10 key: 'productSkn', 10 key: 'productSkn',
11 align: 'center' 11 align: 'center'
@@ -14,8 +14,10 @@ let tableCols = [ @@ -14,8 +14,10 @@ let tableCols = [
14 title: '图片', 14 title: '图片',
15 key: 'image', 15 key: 'image',
16 align: 'center', 16 align: 'center',
17 - render() {  
18 - return '<div> <img v-prod-img="row.productSkn"> </div>'; 17 + render: (h, params) => {
  18 + return (
  19 + <img v-prod-img={params.row.productSkn}/>
  20 + );
19 } 21 }
20 }, 22 },
21 { 23 {
@@ -32,48 +34,49 @@ let tableCols = [ @@ -32,48 +34,49 @@ let tableCols = [
32 title: '库存', 34 title: '库存',
33 key: 'storage', 35 key: 'storage',
34 align: 'center', 36 align: 'center',
35 - render(row) {  
36 - return row.storage ? row.storage : 0; 37 + render: (h, params) => {
  38 + return (
  39 + <span>{params.row.storage || 0}</span>
  40 + );
37 } 41 }
38 }, 42 },
39 { 43 {
40 title: '销售价', 44 title: '销售价',
41 key: 'salePrice', 45 key: 'salePrice',
42 align: 'center', 46 align: 'center',
43 - render(row) {  
44 - return row.salePrice || 0; 47 + render: (h, params) => {
  48 + return (
  49 + <span>{params.row.salePrice || 0}</span>
  50 + );
45 } 51 }
46 }, 52 },
47 { 53 {
48 title: '更新时间', 54 title: '更新时间',
49 key: 'editTime', 55 key: 'editTime',
50 align: 'center', 56 align: 'center',
51 - render(row) {  
52 - return row.editTime || '-'; 57 + render: (h, params) => {
  58 + return (
  59 + <span>{params.row.editTime || '-'}</span>
  60 + );
53 } 61 }
54 }, 62 },
55 { 63 {
56 title: '操作', 64 title: '操作',
57 key: 'action', 65 key: 'action',
58 align: 'center', 66 align: 'center',
59 - render: function() {  
60 - return `<div class="action-btn-row">  
61 - <i-button type="primary" size="small" @click="editStore(row)">库存编辑</i-button>  
62 - </div> `;  
63 - } 67 + render: (h, params) => {
  68 + return (
  69 + <action-group>
  70 + <i-button type="primary" size="small" onClick={() => this.editStore(params.row)}>库存编辑</i-button>
  71 + </action-group>
  72 + );
64 } 73 }
65 -];  
66 -  
67 -let tableData = [];  
68 -  
69 -let pageData = { 74 + }],
  75 + tableData: [],
  76 + pageData: {
70 total: 0, 77 total: 0,
71 current: 1, 78 current: 1,
72 pageSize: 20 79 pageSize: 20
73 -};  
74 -  
75 -export {  
76 - tableCols,  
77 - tableData,  
78 - pageData  
79 -}; 80 + }
  81 + };
  82 +}
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 promise(this.categoryId, this.product.productSKN).then(result => { 19 promise(this.categoryId, this.product.productSKN).then(result => {
20 if (result.code === 200) { 20 if (result.code === 200) {
21 this.product.checked = isSelected; 21 this.product.checked = isSelected;
22 - this.$emit('on-change-status', this.product, isSelected); 22 + this.$emit('change', this.product, isSelected);
23 } 23 }
24 }); 24 });
25 } 25 }
@@ -65,8 +65,13 @@ @@ -65,8 +65,13 @@
65 { 65 {
66 title: '商品图片', 66 title: '商品图片',
67 key: 'productPic', 67 key: 'productPic',
68 - render: function() {  
69 - return '<div><img :src="row.productPic" style="max-width: 80px;" alt=""></div>'; 68 + align: 'center',
  69 + render: (h, params) => {
  70 + return (
  71 + <div>
  72 + <img src={params.row.productPic} style={{'max-width': '80px'}} />
  73 + </div>
  74 + );
70 } 75 }
71 }, 76 },
72 { 77 {
@@ -88,8 +93,10 @@ @@ -88,8 +93,10 @@
88 { 93 {
89 title: '上下架状态', 94 title: '上下架状态',
90 key: 'status', 95 key: 'status',
91 - render: function() {  
92 - return '{{sellStatus(row.status)}}'; 96 + render: (h, params) => {
  97 + return (
  98 + <span>{this.sellStatus(params.row.status)}</span>
  99 + );
93 } 100 }
94 }, 101 },
95 { 102 {
@@ -99,16 +106,28 @@ @@ -99,16 +106,28 @@
99 { 106 {
100 title: '商品分类', 107 title: '商品分类',
101 key: 'saleCategory', 108 key: 'saleCategory',
102 - render: function() {  
103 - return '<div v-for="i in row.saleCategory">{{i}}</div>'; 109 + render: (h, params) => {
  110 + return (
  111 + <div>
  112 + {params.row.saleCategory.map(cate => {
  113 + return (
  114 + <div>{cate}</div>
  115 + );
  116 + })}
  117 + </div>
  118 + );
104 } 119 }
105 }, 120 },
106 { 121 {
107 title: '操作', 122 title: '操作',
108 key: 'checked', 123 key: 'checked',
109 - render: function() {  
110 - return `<Operator :category-id="categoryId" :product="row"  
111 - @on-change-status="onChangeStatus"> </Operator>`; 124 + render: (h, params) => {
  125 + return (
  126 + <Operator
  127 + category-id={this.categoryId}
  128 + product={params.row}
  129 + onChange={this.onChangeStatus}></Operator>
  130 + );
112 } 131 }
113 } 132 }
114 ], 133 ],
@@ -49,12 +49,14 @@ @@ -49,12 +49,14 @@
49 key: 'action', 49 key: 'action',
50 width: 250, 50 width: 250,
51 align: 'center', 51 align: 'center',
52 - render: function() {  
53 - return `<div class="action-btn-row">  
54 - <i-button type="info" size="small" @click="clickEditName(row)">编辑名称</i-button>  
55 - <i-button type="primary" size="small" @click="clickEditRelation(row)">关联商品</i-button>  
56 - <i-button type="error" size="small" @click="clickDelete(row)">删除</i-button>  
57 - </div>`; 52 + render: (h, params) => {
  53 + return (
  54 + <action-group>
  55 + <i-button type="info" size="small" onClick={() => this.clickEditName(params.row)}>编辑名称</i-button>
  56 + <i-button type="primary" size="small" onClick={() => this.clickEditRelation(params.row)}>关联商品</i-button>
  57 + <i-button type="error" size="small" onClick={() => this.clickDelete(params.row)}>删除</i-button>
  58 + </action-group>
  59 + );
58 } 60 }
59 } 61 }
60 ], 62 ],
1 -<template>  
2 -<LayoutBody>  
3 - <LayoutFilter>  
4 - <FilterItem label="店铺">  
5 - </FilterItem>  
6 - <FilterItem label="品牌">  
7 - <SelectBrand v-model="query.brandId"></SelectBrand>  
8 - </FilterItem>  
9 - <FilterItem label="开店状态">  
10 -  
11 - </FilterItem>  
12 - <FilterItem label="装修状态">  
13 -  
14 - </FilterItem>  
15 - <FilterItem>  
16 - <Button type="primary" >筛选</Button>  
17 - <Button >清空条件</Button>  
18 - </FilterItem>  
19 - </LayoutFilter>  
20 - <LayoutList>  
21 - <Table border :context="self" :data="data" :columns="columns"></Table>  
22 - </LayoutList>  
23 -</LayoutBody>  
24 -</template>  
25 -  
26 -<script>  
27 -import {SelectBrand} from 'components/select';  
28 -  
29 -export default {  
30 - data() {  
31 - return {  
32 - self: this,  
33 - query: {},  
34 - data: [],  
35 - columns: [{  
36 - title: '店铺ID',  
37 - key: 'shopName',  
38 - }, {  
39 - title: '店铺名称',  
40 - key: 'shopName',  
41 - }, {  
42 - title: '品牌',  
43 - key: 'shopName',  
44 - }, {  
45 - title: '发布时间',  
46 - key: 'shopName',  
47 - }, {  
48 - title: '状态',  
49 - key: 'shopName',  
50 - }, {  
51 - title: '操作',  
52 - render() {  
53 - return `  
54 - <i-button type="primary" size="small" >尺码维护</i-button>  
55 - <i-button type="primary" size="small">内容编辑</i-button>  
56 - `;  
57 - }  
58 - }]  
59 - };  
60 - },  
61 - components: {SelectBrand}  
62 -};  
63 -</script>