Skip to content

Commit ab816d1

Browse files
sendyasendya
committed
fixed: table search style
add: lodash.get
1 parent ee35797 commit ab816d1

File tree

8 files changed

+282
-260
lines changed

8 files changed

+282
-260
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"dayjs": "^1.7.5",
1515
"enquire.js": "^2.1.6",
1616
"js-cookie": "^2.2.0",
17+
"lodash.get": "^4.4.2",
1718
"md5": "^2.2.1",
1819
"nprogress": "^0.2.0",
1920
"viser-vue": "^2.3.0",

‎src/components/layout/LayoutMain.vue

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<a-layout class="layout">
33

4-
<a-drawer
4+
<a-drawer
55
v-if="device === 'mobile'"
66
wrapClassName="drawer-sider"
77
placement="left"
@@ -238,24 +238,50 @@
238238
margin-bottom: 16px;
239239
}
240240
241-
.content {
241+
.table-page-search-wrapper {
242+
243+
.ant-form-inline {
244+
245+
.ant-form-item {
246+
display: flex;
247+
margin-bottom: 24px;
248+
margin-right: 0;
249+
250+
.ant-form-item-control-wrapper {
251+
flex: 1 1;
252+
display: inline-block;
253+
vertical-align: middle;
254+
}
242255
243-
.search {
244-
margin-bottom: 54px;
256+
>.ant-form-item-label {
257+
line-height: 32px;
258+
padding-right: 8px;
259+
width: auto;
260+
}
261+
.ant-form-item-control {
262+
height: 32px;
263+
line-height: 32px;
264+
}
265+
}
245266
}
246267
247-
.fold {
248-
width: calc(100% - 216px);
249-
display: inline-block
268+
.table-page-search-submitButtons {
269+
display: block;
270+
margin-bottom: 24px;
271+
white-space: nowrap;
250272
}
251273
252-
.operator {
274+
}
275+
276+
.content {
277+
278+
279+
280+
.table-operator {
253281
margin-bottom: 18px;
254-
}
255282
256-
@media screen and (max-width: 900px) {
257-
.fold {
258-
width: 100%;
283+
button {
284+
margin-right: 8px;
259285
}
260286
}
261287
}

‎src/components/table/index.js

Lines changed: 67 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import T from "ant-design-vue/es/table/Table";
2+
import get from "lodash.get"
23
export default {
34
data() {
45
return {
@@ -13,6 +14,10 @@ export default {
1314
};
1415
},
1516
props: Object.assign({}, T.props, {
17+
rowKey: {
18+
type: String,
19+
default: 'id'
20+
},
1621
data: {
1722
type: Function,
1823
required: true
@@ -33,9 +38,12 @@ export default {
3338
type: Boolean,
3439
default: false
3540
},
41+
showPagination: {
42+
default: 'auto'
43+
}
3644
}),
3745
watch: {
38-
'localPagination.current' (val) {
46+
'localPagination.current'(val) {
3947
this.$router.push({
4048
name: this.$route.name,
4149
params: Object.assign({}, this.$route.params, {
@@ -44,41 +52,28 @@ export default {
4452
});
4553
},
4654
pageNum(val) {
47-
this.localPagination = Object.assign({}, this.localPagination, {
55+
Object.assign(this.localPagination, {
4856
current: val
4957
});
5058
},
5159
pageSize(val) {
52-
this.localPagination = Object.assign({}, this.localPagination, {
60+
Object.assign(this.localPagination, {
5361
pageSize: val
5462
});
5563
},
5664
showSizeChanger(val) {
57-
this.localPagination = Object.assign({}, this.localPagination, {
65+
Object.assign(this.localPagination, {
5866
showSizeChanger: val
5967
});
60-
},
61-
/*
62-
'selectedRows': function (selectedRows) {
63-
this.needTotalList = this.needTotalList.map(item => {
64-
return {
65-
...item,
66-
total: selectedRows.reduce( (sum, val) => {
67-
return sum + val[item.dataIndex]
68-
}, 0)
69-
}
70-
})
71-
}*/
68+
}
7269
},
7370
created() {
74-
this.localPagination = Object.assign({}, this.localPagination, {
71+
this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
7572
current: this.pageNum,
7673
pageSize: this.pageSize,
7774
showSizeChanger: this.showSizeChanger
7875
});
79-
8076
this.needTotalList = this.initTotalList(this.columns)
81-
8277
this.loadData();
8378
},
8479
methods: {
@@ -87,13 +82,11 @@ export default {
8782
},
8883
loadData(pagination, filters, sorter) {
8984
this.localLoading = true
90-
const result = this.data(
85+
var result = this.data(
9186
Object.assign({
92-
pageNo:
93-
(pagination && pagination.current) ||
87+
pageNo: (pagination && pagination.current) ||
9488
this.localPagination.current,
95-
pageSize:
96-
(pagination && pagination.pageSize) ||
89+
pageSize: (pagination && pagination.pageSize) ||
9790
this.localPagination.pageSize
9891
},
9992
(sorter && sorter.field && {
@@ -116,31 +109,35 @@ export default {
116109
pageSize: (pagination && pagination.pageSize) ||
117110
this.localPagination.pageSize
118111
});
112+
113+
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
114+
console.log(this.localPagination);
119115
this.localDataSource = r.data; // 返回结果中的数组数据
120116
this.localLoading = false
121-
}).catch(() => {
122-
this.localLoading = false
123117
});
124118
}
125119
},
126-
initTotalList (columns) {
120+
initTotalList(columns) {
127121
const totalList = []
128-
columns.forEach(column => {
122+
columns && columns instanceof Array && columns.forEach(column => {
129123
if (column.needTotal) {
130-
totalList.push({ ...column, total: 0 })
124+
totalList.push({ ...column,
125+
total: 0
126+
})
131127
}
132128
})
133129
return totalList
134130
},
135-
updateSelect (selectedRowKeys, selectedRows) {
131+
updateSelect(selectedRowKeys, selectedRows) {
136132
this.selectedRowKeys = selectedRowKeys
137133
this.selectedRows = selectedRows
138134
let list = this.needTotalList
139135
this.needTotalList = list.map(item => {
140136
return {
141137
...item,
142138
total: selectedRows.reduce((sum, val) => {
143-
return sum + val[item.dataIndex]
139+
let total = sum + get(val, item.dataIndex)
140+
return isNaN(total) ? 0 : total
144141
}, 0)
145142
}
146143
})
@@ -149,7 +146,7 @@ export default {
149146
updateEdit() {
150147
this.selectedRows = []
151148
},
152-
onClearSelected () {
149+
onClearSelected() {
153150
this.selectedRowKeys = []
154151
this.updateSelect([], [])
155152
},
@@ -158,37 +155,53 @@ export default {
158155
let d = []
159156
// 构建 已选择
160157
d.push(
161-
h('span', { style: { marginRight: '12px' } }, ['已选择 ', h('a', { style: { fontWeight: 600 }}, this.selectedRows.length)])
158+
h('span', {
159+
style: {
160+
marginRight: '12px'
161+
}
162+
}, ['已选择 ', h('a', {
163+
style: {
164+
fontWeight: 600
165+
}
166+
}, this.selectedRows.length)])
162167
);
163168

164169
// 构建 列统计
165170
this.needTotalList.map(item => {
166-
d.push( h('span',
167-
{ style: { marginRight: '12px' } },
171+
d.push(h('span', {
172+
style: {
173+
marginRight: '12px'
174+
}
175+
},
168176
[
169177
`${ item.title }总计 `,
170-
h('a', { style: { fontWeight: 600 }}, `${ item.customRender ? item.customRender(item.total) : item.total }`)
171-
] )
172-
)
178+
h('a', {
179+
style: {
180+
fontWeight: 600
181+
}
182+
}, `${ !item.customRender ? item.total : item.customRender(item.total) }`)
183+
]))
173184
});
174185

175186
// 构建 清空选择
176-
d.push( h('a', {
177-
style: { marginLeft: '24px' },
187+
d.push(h('a', {
188+
style: {
189+
marginLeft: '24px'
190+
},
178191
on: {
179192
click: _vm.onClearSelected
180193
}
181-
}, '清空') )
194+
}, '清空'))
182195

183196
return d
184197
},
185198
renderAlert(h) {
186-
187199
return h('span', {
188200
slot: 'message'
189201
}, this.renderMsg(h))
190202
},
191203
},
204+
192205
render(h) {
193206
const _vm = this
194207

@@ -206,7 +219,13 @@ export default {
206219
// 显示信息提示
207220
if (this.showAlertInfo) {
208221

209-
props.rowSelection = { selectedRowKeys: this.selectedRowKeys, onChange: this.updateSelect };
222+
props.rowSelection = {
223+
selectedRowKeys: this.selectedRowKeys,
224+
onChange: (selectedRowKeys, selectedRows) => {
225+
_vm.updateSelect(selectedRowKeys, selectedRows)
226+
_vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
227+
}
228+
};
210229

211230
return h('div', {}, [
212231
h("a-alert", {
@@ -217,16 +236,17 @@ export default {
217236
type: 'info',
218237
showIcon: true
219238
}
220-
}, [ _vm.renderAlert(h) ]),
239+
}, [_vm.renderAlert(h)]),
221240
h("a-table", {
222241
tag: "component",
223242
attrs: props,
224243
on: {
225244
change: _vm.loadData
226245
},
227246
scopedSlots: this.$scopedSlots
228-
})
247+
}, this.$slots.default)
229248
]);
249+
230250
}
231251

232252
return h("a-table", {
@@ -236,6 +256,6 @@ export default {
236256
change: _vm.loadData
237257
},
238258
scopedSlots: this.$scopedSlots
239-
});
259+
}, this.$slots.default);
240260
}
241-
};
261+
};

0 commit comments

Comments
 (0)