Skip to content

Commit 75b0fab

Browse files
lingtinglingting
committed
⚡ lov组件添加 spin用于加载状态时loading，修改deselect 时backVal校验方式
1 parent af095e2 commit 75b0fab

File tree

1 file changed

+87
-74
lines changed

1 file changed

+87
-74
lines changed

‎src/components/lov/Lov.vue

Lines changed: 87 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,88 @@
11
<template>
22
<div>
33
<a-input-group compact>
4-
<a-input read-only style="width: calc(100% - 92px);" class="lov-data"
5-
v-if="!multiple" :value="selectValue"/>
6-
<a-select read-only style="width: calc(100% - 92px);" class="lov-data" mode="tags" v-if="multiple"
7-
:value="selectValue" :open="false" @deselect="multipleDeselect"/>
4+
<a-spin :spinning="loading" size="small">
5+
<a-input read-only style="width: calc(100% - 92px);" class="lov-data"
6+
v-if="!multiple" :value="selectValue" />
7+
<a-select read-only style="width: calc(100% - 92px);" class="lov-data" mode="tags" v-if="multiple"
8+
:value="selectValue" :open="false" @deselect="multipleDeselect" />
89

9-
<a-button :disabled="disabled" title="单击以选择数据"
10-
@click="showModal">
11-
<a-icon type="select"/>
12-
</a-button>
13-
<a-button :disabled="disabled" title="单击以清除选中内容" @click="cleanAll">
14-
<a-icon style="color: red;" type="close-circle"/>
15-
</a-button>
10+
<a-button :disabled="disabled" title="单击以选择数据"
11+
@click="showModal">
12+
<a-icon type="select" />
13+
</a-button>
14+
<a-button :disabled="disabled" title="单击以清除选中内容" @click="cleanAll">
15+
<a-icon style="color: red;" type="close-circle" />
16+
</a-button>
17+
</a-spin>
1618
</a-input-group>
1719

1820
<a-modal class="lov-model" width="800px" @cancel="cancel" @ok="selectData" :visible="visible"
1921
:confirmLoading="loading"
2022
:footer="ret?undefined:null" :bodyStyle="{paddingBottom:'0'}" :closable="title.length>0" :title="title">
21-
<div v-if="search" class="table-page-search-wrapper" style="text-align: left">
22-
<a-form layout="inline">
23-
<a-row :gutter="12">
24-
<a-col :span="6" v-for="item in searchList" :key="item.id">
25-
<a-form-item :label="item.label">
26-
<a-input v-if="item.tag==='INPUT_TEXT'" v-model="queryParam[item.field]"
27-
:placeholder="item.placeholder"/>
28-
<a-input-number style="width: 100%" v-if="item.tag==='INPUT_NUMBER'" v-model="queryParam[item.field]"
29-
:placeholder="item.placeholder"
30-
:min="item.min" :max="item.max"/>
31-
<a-select allowClear v-if="item.tag==='SELECT'" v-model="queryParam[item.field]"
32-
:placeholder="item.placeholder"
33-
:options="item.options"/>
34-
<dict-select v-if="item.tag==='DICT_SELECT'" :placeholder="item.placeholder" :dict-code="item.dictCode"
35-
v-model="queryParam[item.field]"/>
36-
</a-form-item>
37-
</a-col>
38-
</a-row>
39-
</a-form>
40-
</div>
4123

42-
<!-- 搜索控制按钮 -->
43-
<div v-if="search" class="table-operator">
44-
<a-button @click="reloadTable" type="primary">查询</a-button>
45-
<a-button @click="resetSearchForm" style="margin-left: 8px">重置</a-button>
46-
</div>
24+
<a-spin :spinning="loading">
25+
<div v-if="search" class="table-page-search-wrapper" style="text-align: left">
26+
<a-form layout="inline">
27+
<a-row :gutter="12">
28+
<a-col :span="6" v-for="item in searchList" :key="item.id">
29+
<a-form-item :label="item.label">
30+
<a-input v-if="item.tag==='INPUT_TEXT'" v-model="queryParam[item.field]"
31+
:placeholder="item.placeholder" />
32+
<a-input-number style="width: 100%" v-if="item.tag==='INPUT_NUMBER'" v-model="queryParam[item.field]"
33+
:placeholder="item.placeholder"
34+
:min="item.min" :max="item.max" />
35+
<a-select allowClear v-if="item.tag==='SELECT'" v-model="queryParam[item.field]"
36+
:placeholder="item.placeholder"
37+
:options="item.options" />
38+
<dict-select v-if="item.tag==='DICT_SELECT'" :placeholder="item.placeholder"
39+
:dict-code="item.dictCode"
40+
v-model="queryParam[item.field]" />
41+
</a-form-item>
42+
</a-col>
43+
</a-row>
44+
</a-form>
45+
</div>
4746

48-
<div v-if="showSelectAll">
49-
<a-form>
50-
<a-form-item read-only label="已选中数据 ">
51-
<a-select v-if="multiple" :value="selectValue" @deselect="multipleDeselect" :open="false" read-only
52-
mode="tags"/>
53-
<a-select v-if="!multiple" :value="selectValue?[selectValue]:[]" @deselect="singleDeselect" :open="false"
54-
read-only mode="tags"/>
55-
</a-form-item>
56-
</a-form>
57-
</div>
47+
<!-- 搜索控制按钮 -->
48+
<div v-if="search" class="table-operator">
49+
<a-button @click="reloadTable" type="primary">查询</a-button>
50+
<a-button @click="resetSearchForm" style="margin-left: 8px">重置</a-button>
51+
</div>
5852

59-
<a-table
60-
ref="table"
61-
size="middle"
62-
:rowKey="rowKey"
63-
:columns="columns"
64-
:dataSource="dataSource"
65-
:pagination="pagination"
66-
:loading="loading"
67-
:rowSelection="ret?{onSelect,onSelectAll,selectedRows,selectedRowKeys, type: multiple?'checkbox':'radio'}:undefined"
68-
:customRow="customRow"
69-
@change="handleTableChange"
70-
/>
53+
<div v-if="showSelectAll">
54+
<a-form>
55+
<a-form-item read-only label="已选中数据 ">
56+
<a-select v-if="multiple" :value="selectValue" @deselect="multipleDeselect" :open="false" read-only
57+
mode="tags" />
58+
<a-select v-if="!multiple" :value="selectValue?[selectValue]:[]" @deselect="singleDeselect" :open="false"
59+
read-only mode="tags" />
60+
</a-form-item>
61+
</a-form>
62+
</div>
63+
64+
<a-table
65+
ref="table"
66+
size="middle"
67+
:rowKey="rowKey"
68+
:columns="columns"
69+
:dataSource="dataSource"
70+
:pagination="pagination"
71+
:loading="loading"
72+
:rowSelection="ret?{onSelect,onSelectAll,selectedRows,selectedRowKeys, type: multiple?'checkbox':'radio'}:undefined"
73+
:customRow="customRow"
74+
@change="handleTableChange"
75+
/>
76+
</a-spin>
7177
</a-modal>
7278
</div>
7379
</template>
7480

7581
<script>
76-
import {TablePageMixin} from '@/mixins'
82+
import { TablePageMixin } from '@/mixins'
7783
import Vue from 'vue'
78-
import {axios} from '@/utils/request'
79-
import {getData} from '@/api/sys/lov'
84+
import { axios } from '@/utils/request'
85+
import { getData } from '@/api/sys/lov'
8086
8187
export default {
8288
name: 'Lov',
@@ -86,7 +92,7 @@ export default {
8692
keyword: String,
8793
showSelectAll: {
8894
type: Boolean,
89-
default: function () {
95+
default: function() {
9096
return true
9197
}
9298
},
@@ -95,13 +101,13 @@ export default {
95101
},
96102
lazy: {
97103
type: Boolean,
98-
default: function () {
104+
default: function() {
99105
return false
100106
}
101107
},
102108
disabled: {
103109
type: Boolean,
104-
default: function () {
110+
default: function() {
105111
return false
106112
}
107113
},
@@ -110,7 +116,7 @@ export default {
110116
*/
111117
selectRow: {
112118
type: Function,
113-
default: function (record, selectedRows, nativeEvent) {
119+
default: function(record, selectedRows, nativeEvent) {
114120
if (!this.multiple) {
115121
// 单选处理
116122
this.selectedRowKeys = [].concat(record[this.rowKey])
@@ -129,7 +135,7 @@ export default {
129135
*/
130136
backValIndexOfRow: {
131137
type: Function,
132-
default: function (value, row) {
138+
default: function(value, row) {
133139
return value.indexOf(this.retHandlerBySelectRow(row))
134140
}
135141
},
@@ -138,7 +144,7 @@ export default {
138144
*/
139145
unselectRow: {
140146
type: Function,
141-
default: function (record, selectedRows, nativeEvent) {
147+
default: function(record, selectedRows, nativeEvent) {
142148
// 移除key
143149
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
144150
// 移除行数据
@@ -158,7 +164,7 @@ export default {
158164
*/
159165
showHandlerBySelectRow: {
160166
type: Function,
161-
default: function (row) {
167+
default: function(row) {
162168
return `${row[this.retField]}`
163169
}
164170
},
@@ -167,7 +173,7 @@ export default {
167173
*/
168174
putValueShowHandler: {
169175
type: Function,
170-
default: function (data) {
176+
default: function(data) {
171177
return `${data}`
172178
}
173179
},
@@ -176,7 +182,7 @@ export default {
176182
*/
177183
retHandlerBySelectRow: {
178184
type: Function,
179-
default: function (row) {
185+
default: function(row) {
180186
return row[this.retField]
181187
}
182188
}
@@ -279,7 +285,7 @@ export default {
279285
url: json.url,
280286
method: json.method
281287
}
282-
req[this.position] = {...this.fixedParams, ...query}
288+
req[this.position] = { ...this.fixedParams, ...query }
283289
return axios(req)
284290
}
285291
@@ -311,6 +317,7 @@ export default {
311317
312318
// 复制传入参数
313319
this.copyValue()
320+
this.loading = false
314321
})
315322
},
316323
getCacheKey() {
@@ -359,7 +366,7 @@ export default {
359366
}, {
360367
sortField: this.sortField,
361368
sortAsc: this.sortAsc
362-
}, {...this.filters})
369+
}, { ...this.filters })
363370
364371
this.loading = true
365372
this.getPage(params)
@@ -412,6 +419,7 @@ export default {
412419
this.$emit('input', val)
413420
},
414421
copyValue() {
422+
this.loading = true
415423
if (this.multiple) {
416424
let selectValue = []
417425
let backVal = []
@@ -428,9 +436,11 @@ export default {
428436
this.selectValue = this.value
429437
this.backVal = this.value
430438
}
439+
this.loading = false
431440
},
432441
// select 取消选中时
433442
multipleDeselect(value, option) {
443+
this.loading = true
434444
// 查询移除值在选中数据的位置
435445
const index = this.selectValue.indexOf(value)
436446
// 移除数据
@@ -445,8 +455,8 @@ export default {
445455
for (let i = 0; i < this.selectedRows.length; i++) {
446456
row = this.selectedRows[i]
447457
// 寻找当前被删除数据所属行
448-
if (bv === this.retHandlerBySelectRow(row)) {
449-
// 找到被移除的返回值
458+
if (this.backValIndexOfRow(this.backVal, row) === index) {
459+
// 如果当前行在 backVal 中的索引值等于index 则找到被移除的返回值
450460
si = i
451461
break
452462
}
@@ -459,12 +469,15 @@ export default {
459469
this.selectedRows.splice(si, 1)
460470
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(row[this.rowKey]), 1)
461471
}
472+
this.loading = false
462473
},
463474
singleDeselect() {
475+
this.loading = true
464476
this.selectedRows = []
465477
this.selectedRowKeys = []
466478
this.selectValue = undefined
467479
this.backVal = undefined
480+
this.loading = false
468481
},
469482
cleanAll() {
470483
this.emit(this.multiple ? [] : '')

0 commit comments

Comments
 (0)