ListData.js
5.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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
119
120
121
122
123
124
125
126
127
128
129
130
131
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
module.exports = {
name: 'list-data',
data() {
return {
batch_flag: true, //符合批量删除为true,否则为false
batch_datas: [],
batch_ids: [],
list: this.List, //列表数组
fields: this.FieldList, //字段数组
selection: this.Selection, //是否需要批量选择
btn_info: this.BtnInfo,
pagination: this.Pagination,
}
},
methods: {
/**
* 表格列表触发CheckBox的事件
* @param {array} val 当前选中的用户信息数组,每个元素是用户信息对象
*/
onSelectionChange(val) {
this.batch_datas = val;
this.batch_ids = [];
if (val.length) {
this.batch_flag = false;
for (var i = 0; i < val.length; i++) {
this.batch_ids.push(val[i].id);
}
} else {
this.batch_flag = true;
}
/**
* 改变CheckBox事件,第一个参数是ID数组,第二个参数二维数组,每个数组是选中的对象
*/
this.$emit('onSelectionChange', this.batch_ids, this.batch_datas);
this.$emit('onSelectionChangeObj', {
ids: this.batch_ids,
datas: this.batch_datas
});
},
/**
* 删除事件
* @param {object || boolean} user 当前信息对象或者为布尔值,为布尔值时,代表是批量删除
* @param {number} index 当前列表索引
*/
onDelete(data, index) {
var opts = {};
if (data === true) {
opts.batch_ids = this.batch_ids;
opts.batch_datas = this.batch_datas;
} else {
opts.data = data;
opts.index = index;
}
/**
* 删除事件,参数为对象
* 分两种情况,一种是单个删除,一种是批量删除,属性分别如下
* 1:单个删除
* opts.data 当前要删除的数据对象
* opts.index 当前要删除的索引
* opts.list 当前列表数组
* 2:批量删除
* opts.batch_ids 一维数组,需要删除的ID数组
* opts.batch_datas 二维数组,每个元素为对象(需要删除的数据对象)
*/
this.$emit('onDelete', opts);
},
/**
* 获取行信息事件
* @param {object} row 当前行对象
* @param {number} index 当前行索引
* @param {array} list 当前列表数组
*/
onGetInfo(row, index, list, type) {
this.$emit('onGetInfo', {
row,
index,
list,
type
});
},
onUpdateBtn(data, index, list) {
if (this.btn_info.update && this.btn_info.update.path) {
var path = this.btn_info.update.path,
param_keys = this.btn_info.update.param_keys || [],
query_keys = this.btn_info.update.query_keys || [],
query = {};
for (var i = 0; i < param_keys.length; i++) {
path += '/' + data[param_keys[i]];
}
for (var i = 0; i < query_keys.length; i++) {
query[query_keys[i]] = data[query_keys[i]];
}
// console.log(path);
// console.log(query);
this.$router.push({
path: path,
query: query
});
} else {
this.onGetInfo(data, index, list, 'update');
}
},
/**
* 内置删除事件执行成功后,更新列表方法
* 分两种情况,一种是批量删除,一种是单个删除
* 1:单个删除
* row 当前需要删除行的索引
* 2:批量删除
* row 一维数组,需要删除的ID数组
*/
onUpdateList(row) {
if (!Array.isArray(row)) {
this.list.splice(row, 1);
} else {
this.list = this.list.filter(function(item, idx) {
return row.indexOf(item.id) === -1;
});
}
},
onChangeCurrentPage(page) {
this.$emit('onChangeCurrentPage', page);
},
onChangePageSize(page_size) {
this.$emit('onChangePageSize', page_size);
}
},
mounted() {
// console.log(this.list);
},
/**
* 接收参数
* @type {Object}
*/
props: {
List: {
type: Array,
required: true
},
FieldList: {
type: Array,
required: true
},
BtnInfo: {
type: Object,
default: {}
},
Selection: {
type: Boolean,
default: false
},
Pagination: {
type: Object,
default: {}
}
},
/**
* 监控参数
* @type {Object}
*/
watch: {
List(v) {
if (v) {
this.list = v;
}
},
FieldList(v) {
if (v) {
this.fields = v;
}
},
Selection(v) {
this.selection = v;
},
BtnInfo(v) {
this.btn_info = v;
},
Pagination(v) {
this.pagination = v;
}
}
}