|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<template>
<div>
<a-modal
centered
:title="title"
:width="1000"
:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
|
|
15
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<a-row :gutter="24">
<a-col :span="10">
<a-form-item label="用户账号">
<a-input placeholder="请输入用户账号" v-model="queryParam.username"></a-input>
</a-form-item>
</a-col>
<a-col :span="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- table区域-begin -->
<div>
<a-table
size="small"
bordered
rowKey="id"
:columns="columns1"
:dataSource="dataSource1"
:pagination="ipagination"
:loading="loading"
:scroll="{ y: 240 }"
:rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"
@change="handleTableChange">
</a-table>
</div>
<!-- table区域-end -->
</a-modal>
</div>
</template>
<script>
|
|
57
58
|
import {filterObj} from '@/utils/util'
import {getAction} from '@/api/manage'
|
|
59
|
|
|
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
export default {
name: "SelectUserModal",
data() {
return {
title: "添加已有用户",
names: [],
visible: false,
placement: 'right',
description: '',
// 查询条件
queryParam: {},
// 表头
columns1: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 50,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
|
|
81
|
}
|
|
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
},
{
title: '用户账号',
align: "center",
width: 100,
dataIndex: 'username'
},
{
title: '用户名称',
align: "center",
width: 100,
dataIndex: 'realname'
},
{
title: '性别',
align: "center",
width: 100,
dataIndex: 'sex_dictText'
},
{
title: '电话',
align: "center",
width: 100,
dataIndex: 'phone'
},
{
title: '部门',
align: "center",
width: 150,
dataIndex: 'orgCode'
}
],
columns2: [
{
title: '用户账号',
align: "center",
dataIndex: 'username',
|
|
119
120
|
},
|
|
121
122
123
124
|
{
title: '用户名称',
align: "center",
dataIndex: 'realname',
|
|
125
|
},
|
|
126
127
128
129
130
131
|
{
title: '操作',
dataIndex: 'action',
align: "center",
width: 100,
scopedSlots: {customRender: 'action'},
|
|
132
|
}
|
|
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
],
//数据集
dataSource1: [],
dataSource2: [],
// 分页参数
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
isorter: {
column: 'createTime',
order: 'desc',
},
loading: false,
selectedRowKeys: [],
selectedRows: [],
url: {
list: "/sys/user/list",
|
|
158
|
}
|
|
159
160
161
162
163
164
165
166
|
}
},
created() {
this.loadData();
},
methods: {
searchQuery() {
this.loadData(1);
|
|
167
|
},
|
|
168
169
170
|
searchReset() {
this.queryParam = {};
this.loadData(1);
|
|
171
|
},
|
|
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
handleCancel() {
this.visible = false;
},
handleOk() {
this.dataSource2 = this.selectedRowKeys;
console.log("data:" + this.dataSource2);
this.$emit("selectFinished", this.dataSource2);
this.visible = false;
},
add() {
this.visible = true;
},
loadData(arg) {
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();//查询条件
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.dataSource1 = res.result.records;
this.ipagination.total = res.result.total;
|
|
194
|
}
|
|
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
})
},
getQueryParams() {
var param = Object.assign({}, this.queryParam, this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
getQueryField() {
//TODO 字段权限控制
},
onSelectAll(selected, selectedRows, changeRows) {
if (selected === true) {
for (var a = 0; a < changeRows.length; a++) {
this.dataSource2.push(changeRows[a]);
|
|
211
|
}
|
|
212
213
214
|
} else {
for (var b = 0; b < changeRows.length; b++) {
this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1);
|
|
215
|
}
|
|
216
217
218
219
220
221
222
223
224
225
226
|
}
// console.log(selected, selectedRows, changeRows);
},
onSelect(record, selected) {
if (selected === true) {
this.dataSource2.push(record);
} else {
var index = this.dataSource2.indexOf(record);
//console.log();
if (index >= 0) {
this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
|
|
227
|
}
|
|
228
|
|
|
229
|
}
|
|
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
|
},
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectedRows;
},
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
},
handleDelete: function (record) {
this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
},
handleTableChange(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
console.log(sorter);
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.ipagination = pagination;
this.loadData();
|
|
252
253
|
}
}
|
|
254
|
}
|
|
255
256
|
</script>
<style lang="less" scoped>
|
|
257
258
259
|
.ant-card-body .table-operator {
margin-bottom: 18px;
}
|
|
260
|
|
|
261
262
263
264
|
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
|
|
265
|
|
|
266
267
268
|
.anty-row-operator button {
margin: 0 5px
}
|
|
269
|
|
|
270
271
272
|
.ant-btn-danger {
background-color: #ffffff
}
|
|
273
|
|
|
274
275
276
|
.ant-modal-cust-warp {
height: 100%
}
|
|
277
|
|
|
278
279
280
281
|
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
|
|
282
|
|
|
283
284
285
286
|
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
|
|
287
|
</style>
|