Skip to content

Commit e051a2d

Browse files
author
283591387@qq.com
committed
增加移动端列表数据可自定义多个按钮
1 parent 6155357 commit e051a2d

File tree

3 files changed

+72
-20
lines changed

3 files changed

+72
-20
lines changed

‎vol.uniapp/components/view-grid/view-grid.vue‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
<view class="view-grid">
33
<slot name="gridHeader"></slot>
44
<!-- 表格数据 -->
5-
<vol-table :url="tableUrl" @cellClick="gridCellClick" :rowClick="gridRowClick" :defaultLoadPage="load" @loadBefore="loadGridTableBefore"
6-
:index="rowIndex" @loadAfter="loadGridTableAfter" ref="table" :direction="direction"
7-
:titleField="titleField" :height="height" @formatter="cellFormatter" :columns.sync="columns"
8-
:textInline="textInline">
5+
<vol-table :url="tableUrl" @cellClick="gridCellClick" @rowButtons="getRowButtons"
6+
@rowButtonClick="gridRowButtonClick" :rowClick="gridRowClick" :defaultLoadPage="load"
7+
@loadBefore="loadGridTableBefore" :index="rowIndex" @loadAfter="loadGridTableAfter" ref="table"
8+
:direction="direction" :titleField="titleField" :height="height" @formatter="cellFormatter"
9+
:columns.sync="columns" :textInline="textInline">
910
<!-- <view style="height: 50rpx;"></view> -->
1011
<!-- <view class="vol-table-title-buttons" slot="title">
1112
<view @click.native.stop="gridRowClick()" class="vol-table-title-buttons-del">
@@ -95,6 +96,7 @@
9596
<slot name="modelHeader"></slot>
9697
<view class="vol-action-sheet-select-content">
9798
<vol-form :load-key="false" @onChange="editGirdFormOnChange" ref="form"
99+
@extraClick="gridExtraClick"
98100
:form-options.sync="editFormOptions" :formFields.sync="editFormFields">
99101
</vol-form>
100102
</view>
@@ -225,7 +227,7 @@
225227
_$this.model = true;
226228
}
227229
},
228-
gridCellClick(index,row,column){
230+
gridCellClick(index, row, column) {
229231
if (_$this.cellClick && !_$this.cellClick(index, row, column)) {
230232
return;
231233
};
@@ -474,7 +476,8 @@
474476
},
475477
initPermissionButtons() { //初始化按钮权限
476478
let _permission = (this.permission.find(x => {
477-
return (this.tableAction || this.options.table.name).toUpperCase() == x.tableName.toUpperCase()
479+
return (this.tableAction || this.options.table.name).toUpperCase() == x.tableName
480+
.toUpperCase()
478481
}) || {}).permission;
479482
if (!_permission) {
480483
return;
@@ -497,7 +500,7 @@
497500
name: "重置",
498501
icon: 'reload',
499502
value: 'reset',
500-
hidden:false,
503+
hidden: false,
501504
type: 'success',
502505
onClick: () => {
503506
this.resetEditForm();
@@ -506,7 +509,7 @@
506509
name: "提交",
507510
icon: 'checkbox-mark',
508511
value: 'add',
509-
hidden:false,
512+
hidden: false,
510513
type: 'primary',
511514
onClick: () => {
512515
this.gridSave();
@@ -524,15 +527,15 @@
524527
let fabButtons = [{
525528
icon: "search",
526529
value: "search",
527-
hidden:false,
530+
hidden: false,
528531
color: 'rgb(7 185 14)',
529532
onClick: () => {
530533
this.showSearch();
531534
}
532535
}, {
533536
icon: "reload", //刷新
534537
value: "search",
535-
hidden:false,
538+
hidden: false,
536539
color: '#009688',
537540
onClick: () => {
538541
this.refresh();
@@ -541,7 +544,7 @@
541544
if (_permission.indexOf("Add") != -1) {
542545
fabButtons.push({
543546
icon: "plus", //添加
544-
hidden:false,
547+
hidden: false,
545548
color: 'rgb(2, 171, 255)',
546549
onClick: () => {
547550
this.gridAdd();
@@ -629,6 +632,19 @@
629632
},
630633
griFabBtnClick(btn) { //浮动按钮点击事件
631634
btn.onClick();
635+
},
636+
getRowButtons(index, row, callback) {
637+
if (this.rowButtons) {
638+
callback(this.rowButtons(index, row))
639+
return;
640+
}
641+
return [];
642+
},
643+
gridRowButtonClick(btn, index, row) {
644+
this.rowButtonClick && this.rowButtonClick(btn, index, row);
645+
},
646+
gridExtraClick(option,fields){
647+
this.extraClick&&this.extraClick(option,fields);
632648
}
633649
},
634650
created() {

‎vol.uniapp/components/vol-form/vol-form.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,10 @@
109109
v-model="inFormFields[item.field]" border="none" :ref="item.field"
110110
:placeholder="item.placeholder||('请输入'+item.title)"></input>
111111
</view>
112+
<view v-if="item.extra" @click="extraClick(item,inFormFields)">
113+
<u-icon v-if="item.extra.icon" :name="item.extra.icon" :color="item.extra.clor||'#ffff'" size="20"></u-icon>
114+
<text :style="item.extra.style">{{item.extra.text}}</text>
115+
</view>
112116
</view>
113117
<slot></slot>
114118
<!--日期 -->
@@ -594,6 +598,9 @@
594598
// 删除图片
595599
deletePic(item, event) {
596600
this.inFormFields[item.field].splice(event.index, 1)
601+
},
602+
extraClick(item,inFormFields){
603+
this.$emit('extraClick',item,inFormFields)
597604
}
598605
},
599606
// #ifdef MP-WEIXIN

‎vol.uniapp/components/vol-table/vol-table.vue‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
<view :style="{width:column.width+'px',flex:column.width?'unset':1}"
2929
:class="{'text-inline':textInline}" :key="cindex" class="vol-table-body-cell"
3030
v-if="!column.hidden" v-for="(column,cindex) in columns">
31-
<view :style="column.style" class="vol-cell" @click.stop="cellClick(rowindex,row,column)"
32-
v-if="column.click">
33-
<view v-if="column.formatter" v-html="rowFormatter(row,column,rowindex)"></view>
34-
<view v-else="column.formatter">{{row[column.field]}}</view>
31+
<view class="vol-cell" @click.stop="cellClick(rowindex,row,column)" v-if="column.click">
32+
<view :style="column.style" v-if="column.formatter"
33+
v-html="rowFormatter(row,column,rowindex)"></view>
34+
<view :style="column.style" v-else>{{row[column.field]}}</view>
3535
</view>
3636
<view class="vol-cell" v-else-if="column.formatter"
3737
v-html="rowFormatter(row,column,rowindex)">
@@ -61,12 +61,12 @@
6161
<u-empty mode="list" v-if="!rowsData.length" text="无数据"
6262
icon="http://cdn.uviewui.com/uview/empty/list.png">
6363
</u-empty>
64-
<view @click="tableRowClick(rowindex,columns)" :key="rowindex" v-for="(row,rowindex) in rowsData">
64+
<view :key="rowindex" v-for="(row,rowindex) in rowsData">
6565
<view v-if="titleField" class="vol-table-list-item-title">
6666
<view class="vol-table-list-item-title-left">{{getListTitleValue(row)}}</view>
6767
<slot :data="row" name="title"></slot>
6868
</view>
69-
<view class="vol-table-list-item">
69+
<view @click="tableRowClick(rowindex,columns)" class="vol-table-list-item">
7070
<view :key="cindex" class="vol-table-list-item-cell"
7171
v-if="!column.hidden&&column.field!=titleField" v-for="(column,cindex) in columns">
7272
<view class="cell-left"> {{column.title}}</view>
@@ -79,9 +79,12 @@
7979
{{rowFormatterValue(row,column)}}
8080
</view>
8181
<view v-else-if="column.type=='img'">
82-
<u--image style="float: right;margin-left:10px;" width="50px" height="50px"
83-
radius="4px" :src="src" v-for="(src,index) in getImgSrc(row[column.field])"
84-
:key="index"></u--image>
82+
<view style="float: right;margin-left:10px;" width="50px" height="50px" v-for="(src,index) in getImgSrc(row[column.field])">
83+
<u--image
84+
width="50px" height="50px"
85+
radius="4px" :src="src"
86+
:key="index"></u--image>
87+
</view>
8588
</view>
8689
<view v-else-if="column.type=='date'">
8790
{{(row[column.field]||'').substr(0,10)}}
@@ -90,6 +93,13 @@
9093
</view>
9194
</view>
9295
</view>
96+
<view style="margin:20rpx 0 40rpx 20rpx" @click.stop>
97+
<view :key="btnIndex" class="extent-button" v-for="(btn,btnIndex) in rowButtons(rowindex,row)">
98+
<u-button :icon="btn.icon" :hairline="true" :shape="btn.shape" :disabled="btn.disabled" :plain="btn.plain" :type="btn.type"
99+
style="height:60rpx;" @click="rowBtnClick(btn,rowindex,row)" :text="btn.text">
100+
</u-button>
101+
</view>
102+
</view>
93103
</view>
94104
<slot></slot>
95105
</u-list>
@@ -314,6 +324,17 @@
314324
},
315325
cellClick(rowIndex, row, column) {
316326
this.$emit('cellClick', rowIndex, row, column)
327+
},
328+
rowButtons(index, row) {
329+
let _buttons = [];
330+
this.$emit('rowButtons',index, row, (buttons) => {
331+
_buttons = buttons;
332+
})
333+
console.log(_buttons)
334+
return (_buttons || [])//.reverse();
335+
},
336+
rowBtnClick(btn, rowindex, row) {
337+
this.$emit('rowButtonClick', btn, rowindex, row);
317338
}
318339
},
319340
created() {
@@ -485,4 +506,12 @@
485506
}
486507
}
487508
}
509+
510+
.extent-button {
511+
display: inline-block;
512+
float: right;
513+
min-width: 20%;
514+
margin-right: 20rpx;
515+
margin-bottom: 20rpx;
516+
}
488517
</style>

0 commit comments

Comments
 (0)