Merge branch 'master-v32-lushangqing' into 'master'
故障联调 表格增加复选框事件回调函数 See merge request !235
Showing
8 changed files
with
105 additions
and
19 deletions
1 | <div > | 1 | <div > |
2 | <!-- 表格--> | 2 | <!-- 表格--> |
3 | - <el-table :border="showBorder" v-loading="loading" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height" | 3 | + <el-table :border="showBorder" v-loading="loading" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height" |
4 | style="width: 100%;margin: 0px 0px;"> | 4 | style="width: 100%;margin: 0px 0px;"> |
5 | - <el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/> | ||
6 | <el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" /> | 5 | <el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" /> |
6 | + <el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/> | ||
7 | 7 | ||
8 | <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align " | 8 | <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align " |
9 | :width="getWidth(item.width)"> | 9 | :width="getWidth(item.width)"> |
@@ -83,6 +83,7 @@ export default { | @@ -83,6 +83,7 @@ export default { | ||
83 | setup(props, {attrs, slots, emit}) { | 83 | setup(props, {attrs, slots, emit}) { |
84 | let currentPage = Vue.ref(1); | 84 | let currentPage = Vue.ref(1); |
85 | let pageSize = Vue.ref(props.pageSize); | 85 | let pageSize = Vue.ref(props.pageSize); |
86 | + let multipleSelection=Vue.ref([]); | ||
86 | 87 | ||
87 | 88 | ||
88 | /** | 89 | /** |
@@ -159,6 +160,12 @@ export default { | @@ -159,6 +160,12 @@ export default { | ||
159 | // Vue.watch(() => filterText.value, (newValue, oldVlaue) => { | 160 | // Vue.watch(() => filterText.value, (newValue, oldVlaue) => { |
160 | // proxy.$refs.tree.filter(newValue) | 161 | // proxy.$refs.tree.filter(newValue) |
161 | // }); | 162 | // }); |
163 | + //全选事件 | ||
164 | + let handleSelectionChange=(val)=>{ | ||
165 | + multipleSelection.value = val | ||
166 | + emit('selectionChange', multipleSelection.value) | ||
167 | + | ||
168 | + } | ||
162 | 169 | ||
163 | // 挂载完 | 170 | // 挂载完 |
164 | Vue.onMounted(() => { | 171 | Vue.onMounted(() => { |
@@ -166,6 +173,8 @@ export default { | @@ -166,6 +173,8 @@ export default { | ||
166 | }) | 173 | }) |
167 | 174 | ||
168 | return { | 175 | return { |
176 | + handleSelectionChange, | ||
177 | + multipleSelection, | ||
169 | currentPage, | 178 | currentPage, |
170 | pageSize, | 179 | pageSize, |
171 | handleSizeChange, | 180 | handleSizeChange, |
@@ -39,8 +39,8 @@ | @@ -39,8 +39,8 @@ | ||
39 | <el-row class="margin-bottom-50"> | 39 | <el-row class="margin-bottom-50"> |
40 | <el-col :span="24" class="table-height"> | 40 | <el-col :span="24" class="table-height"> |
41 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" | 41 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" |
42 | - :showIndex="true" :total="count" | ||
43 | - :showBorder="true" :loading="false" | 42 | + :showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange" |
43 | + :showBorder="true" :loading="false" :pageSize="pageSize" | ||
44 | :showPage="true" :showTools="true" :height="(height - 500)"> | 44 | :showPage="true" :showTools="true" :height="(height - 500)"> |
45 | <template #tools="{scope}"> | 45 | <template #tools="{scope}"> |
46 | <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)"> | 46 | <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)"> |
@@ -59,6 +59,8 @@ export default { | @@ -59,6 +59,8 @@ export default { | ||
59 | let busTypeList = Vue.ref([]); | 59 | let busTypeList = Vue.ref([]); |
60 | let bizId=Vue.ref();//所属业务id | 60 | let bizId=Vue.ref();//所属业务id |
61 | let targetId=Vue.ref();//所属模块id | 61 | let targetId=Vue.ref();//所属模块id |
62 | + let page=Vue.ref(1);//当前页 | ||
63 | + let pageSize=Vue.ref(5);//每页显示条数 | ||
62 | let init = () =>{ | 64 | let init = () =>{ |
63 | 65 | ||
64 | let params1={ | 66 | let params1={ |
@@ -122,12 +124,41 @@ export default { | @@ -122,12 +124,41 @@ export default { | ||
122 | 124 | ||
123 | 125 | ||
124 | } | 126 | } |
127 | + //表格全选事件 | ||
128 | + let selectionChange=(val)=>{ | ||
129 | + let selectData=val; | ||
130 | + if(selectData.length>0){ | ||
131 | + selectData.map((item,index)=>{ | ||
132 | + proxy.tableDataList.map((v,i)=>{ | ||
133 | + if(item.id==v.id){ | ||
134 | + v.checked=true; | ||
135 | + } | ||
136 | + }) | ||
137 | + }) | ||
138 | + | ||
139 | + }else{ | ||
140 | + proxy.tableDataList.map((v,i)=>{ | ||
141 | + v.checked=false; | ||
142 | + }) | ||
143 | + } | ||
144 | + } | ||
125 | //添加所有数据 | 145 | //添加所有数据 |
126 | let saveAll=()=>{ | 146 | let saveAll=()=>{ |
147 | + let npmListSelectData=[]; | ||
148 | + proxy.tableDataList.map(item=>{ | ||
149 | + if(item.checked){ | ||
150 | + npmListSelectData.push(item) | ||
151 | + } | ||
152 | + | ||
153 | + }) | ||
127 | let params={ | 154 | let params={ |
128 | - busId:proxy.bizId | 155 | + targetId:proxy.targetId, |
156 | + npmList:npmListSelectData | ||
129 | } | 157 | } |
130 | - proxy.$http.post('/api-web/fault/conf/apm/saveOrUpdate',[params],function (res){ | 158 | + /*let params={ |
159 | + busId:proxy.bizId | ||
160 | + }*/ | ||
161 | + proxy.$http.post('/api-web/fault/conf/apm/saveOrUpdate',params,function (res){ | ||
131 | if(res && res.object){ | 162 | if(res && res.object){ |
132 | proxy.$global.showMsg('添加成功','success'); | 163 | proxy.$global.showMsg('添加成功','success'); |
133 | proxy.targetId=res.src; | 164 | proxy.targetId=res.src; |
@@ -142,6 +173,9 @@ export default { | @@ -142,6 +173,9 @@ export default { | ||
142 | 173 | ||
143 | } | 174 | } |
144 | return { | 175 | return { |
176 | + page, | ||
177 | + pageSize, | ||
178 | + selectionChange, | ||
145 | saveAll, | 179 | saveAll, |
146 | getResData, | 180 | getResData, |
147 | changeRes, | 181 | changeRes, |
@@ -177,7 +211,10 @@ export default { | @@ -177,7 +211,10 @@ export default { | ||
177 | this.APMVisible=false; | 211 | this.APMVisible=false; |
178 | }, | 212 | }, |
179 | //重新加载表格数据 | 213 | //重新加载表格数据 |
180 | - loadTableDataList(){ | 214 | + loadTableDataList(val){ |
215 | + console.log("page",val) | ||
216 | + this.page=val.page; | ||
217 | + this.pageSize=val.limit; | ||
181 | this.getNodeList() | 218 | this.getNodeList() |
182 | }, | 219 | }, |
183 | //获取apm配置列表数据 | 220 | //获取apm配置列表数据 |
@@ -187,8 +224,8 @@ export default { | @@ -187,8 +224,8 @@ export default { | ||
187 | keyWords:this.keyWords, | 224 | keyWords:this.keyWords, |
188 | busId:this.bizId, | 225 | busId:this.bizId, |
189 | kpiId:this.kpiTypeArr, | 226 | kpiId:this.kpiTypeArr, |
190 | - page:1, | ||
191 | - pageSize:5 | 227 | + page:this.page, |
228 | + pageSize:this.pageSize, | ||
192 | 229 | ||
193 | } | 230 | } |
194 | this.$http.get(`/api-web/fault/conf/apm/getFaultApmAllResInfo`, params, function (res) { | 231 | this.$http.get(`/api-web/fault/conf/apm/getFaultApmAllResInfo`, params, function (res) { |
@@ -38,8 +38,8 @@ | @@ -38,8 +38,8 @@ | ||
38 | <el-row class="margin-bottom-50"> | 38 | <el-row class="margin-bottom-50"> |
39 | <el-col :span="24" class="table-height"> | 39 | <el-col :span="24" class="table-height"> |
40 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" | 40 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" |
41 | - :showIndex="true" :total="count" | ||
42 | - :showBorder="true" :loading="false" | 41 | + :showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange" |
42 | + :showBorder="true" :loading="false" :pageSize="pageSize" | ||
43 | :showPage="true" :showTools="true" :height="(height - 500)"> | 43 | :showPage="true" :showTools="true" :height="(height - 500)"> |
44 | <template #default="{row,prop,column}"> | 44 | <template #default="{row,prop,column}"> |
45 | <div v-if="prop == 'url'" class="text-overflow" :title="row.url"> | 45 | <div v-if="prop == 'url'" class="text-overflow" :title="row.url"> |
@@ -53,6 +53,8 @@ export default { | @@ -53,6 +53,8 @@ export default { | ||
53 | let busTypeList = Vue.ref([]); | 53 | let busTypeList = Vue.ref([]); |
54 | let networkMonitorList=Vue.ref([]); | 54 | let networkMonitorList=Vue.ref([]); |
55 | let isLoading=Vue.ref(false);//按钮加载中 | 55 | let isLoading=Vue.ref(false);//按钮加载中 |
56 | + let page=Vue.ref(1);//当前页 | ||
57 | + let pageSize=Vue.ref(5);//每页显示条数 | ||
56 | let init = () =>{ | 58 | let init = () =>{ |
57 | proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { | 59 | proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { |
58 | if (res && res.data) { | 60 | if (res && res.data) { |
@@ -107,12 +109,39 @@ export default { | @@ -107,12 +109,39 @@ export default { | ||
107 | 109 | ||
108 | 110 | ||
109 | } | 111 | } |
112 | + //表格全选事件 | ||
113 | + let selectionChange=(val)=>{ | ||
114 | + console.log("selectionChange",val,val.length) | ||
115 | + let selectData=val; | ||
116 | + if(selectData.length>0){ | ||
117 | + selectData.map((item,index)=>{ | ||
118 | + proxy.tableDataList.map((v,i)=>{ | ||
119 | + if(item.id==v.id){ | ||
120 | + v.checked=true; | ||
121 | + } | ||
122 | + }) | ||
123 | + }) | ||
124 | + | ||
125 | + }else{ | ||
126 | + proxy.tableDataList.map((v,i)=>{ | ||
127 | + v.checked=false; | ||
128 | + }) | ||
129 | + } | ||
130 | + } | ||
110 | //全部添加 | 131 | //全部添加 |
111 | let saveAll=()=>{ | 132 | let saveAll=()=>{ |
133 | + console.log("alldata",proxy.tableDataList); | ||
134 | + let npmListSelectData=[]; | ||
135 | + proxy.tableDataList.map(item=>{ | ||
136 | + if(item.checked){ | ||
137 | + npmListSelectData.push(item) | ||
138 | + } | ||
139 | + | ||
140 | + }) | ||
112 | proxy.isLoading=true; | 141 | proxy.isLoading=true; |
113 | let params={ | 142 | let params={ |
114 | targetId:proxy.targetId, | 143 | targetId:proxy.targetId, |
115 | - npmList:[npmList] | 144 | + npmList:npmListSelectData |
116 | } | 145 | } |
117 | 146 | ||
118 | proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',params,function (res){ | 147 | proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',params,function (res){ |
@@ -127,6 +156,9 @@ export default { | @@ -127,6 +156,9 @@ export default { | ||
127 | 156 | ||
128 | } | 157 | } |
129 | return { | 158 | return { |
159 | + page, | ||
160 | + pageSize, | ||
161 | + selectionChange, | ||
130 | isLoading, | 162 | isLoading, |
131 | saveAll, | 163 | saveAll, |
132 | networkMonitorList, | 164 | networkMonitorList, |
@@ -162,7 +194,9 @@ export default { | @@ -162,7 +194,9 @@ export default { | ||
162 | this.applicationMonitorVisible=false; | 194 | this.applicationMonitorVisible=false; |
163 | }, | 195 | }, |
164 | //重新加载表格数据 | 196 | //重新加载表格数据 |
165 | - loadTableDataList(){ | 197 | + loadTableDataList(val){ |
198 | + this.page=val.page; | ||
199 | + this.pageSize=val.limit; | ||
166 | this.getNodeList() | 200 | this.getNodeList() |
167 | }, | 201 | }, |
168 | //获取应用监测配置列表数据 | 202 | //获取应用监测配置列表数据 |
@@ -184,8 +218,8 @@ export default { | @@ -184,8 +218,8 @@ export default { | ||
184 | // busId: this.busTypeArr.join(','), | 218 | // busId: this.busTypeArr.join(','), |
185 | bizId: this.bizId, | 219 | bizId: this.bizId, |
186 | configId: this.config, | 220 | configId: this.config, |
187 | - page: 1, | ||
188 | - pageSize: 5 | 221 | + page: this.page, |
222 | + pageSize: this.pageSize | ||
189 | } | 223 | } |
190 | }, | 224 | }, |
191 | //关闭弹框 | 225 | //关闭弹框 |
@@ -157,7 +157,7 @@ | @@ -157,7 +157,7 @@ | ||
157 | <el-col :span="24" :class="[{'table-height':!flag},{'table-height-45':flag}]"> | 157 | <el-col :span="24" :class="[{'table-height':!flag},{'table-height-45':flag}]"> |
158 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" | 158 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" |
159 | :showIndex="true" :total="count" | 159 | :showIndex="true" :total="count" |
160 | - :showBorder="true" :loading="false" | 160 | + :showBorder="true" :loading="false" :pageSize="pageSize" |
161 | :showPage="true" :showTools="true" :height="(height - 500)"> | 161 | :showPage="true" :showTools="true" :height="(height - 500)"> |
162 | <template #tools="{scope}"> | 162 | <template #tools="{scope}"> |
163 | <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)"> | 163 | <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)"> |
@@ -94,6 +94,8 @@ export default { | @@ -94,6 +94,8 @@ export default { | ||
94 | let linkId=Vue.ref(); | 94 | let linkId=Vue.ref(); |
95 | //所有图标数据 | 95 | //所有图标数据 |
96 | let iconArr=Vue.ref([]); | 96 | let iconArr=Vue.ref([]); |
97 | + let page=Vue.ref(1);//当前页 | ||
98 | + let pageSize=Vue.ref(5);//每页显示条数 | ||
97 | let init = () =>{ | 99 | let init = () =>{ |
98 | //根据业务id获取资源列表 | 100 | //根据业务id获取资源列表 |
99 | let paramsRes={ | 101 | let paramsRes={ |
@@ -274,6 +276,8 @@ export default { | @@ -274,6 +276,8 @@ export default { | ||
274 | } | 276 | } |
275 | 277 | ||
276 | return { | 278 | return { |
279 | + page, | ||
280 | + pageSize, | ||
277 | addRes, | 281 | addRes, |
278 | setBizId, | 282 | setBizId, |
279 | saveLinkAndNodeInfo, | 283 | saveLinkAndNodeInfo, |
@@ -431,7 +435,9 @@ export default { | @@ -431,7 +435,9 @@ export default { | ||
431 | 435 | ||
432 | }, | 436 | }, |
433 | //重新加载表格数据 | 437 | //重新加载表格数据 |
434 | - loadTableDataList(){ | 438 | + loadTableDataList(val){ |
439 | + this.page=val.page; | ||
440 | + this.pageSize=val.limit; | ||
435 | this.getNodeList() | 441 | this.getNodeList() |
436 | }, | 442 | }, |
437 | //获取配置节点列表数据 | 443 | //获取配置节点列表数据 |
@@ -452,8 +458,8 @@ export default { | @@ -452,8 +458,8 @@ export default { | ||
452 | resId: this.resTypeArr, | 458 | resId: this.resTypeArr, |
453 | kpiId: this.kpiTypeArr, | 459 | kpiId: this.kpiTypeArr, |
454 | busId: this.busTypeArr.join(','), | 460 | busId: this.busTypeArr.join(','), |
455 | - page: 1, | ||
456 | - pageSize: 5 | 461 | + page: this.page, |
462 | + pageSize: this.pageSize | ||
457 | } | 463 | } |
458 | }, | 464 | }, |
459 | //关闭弹框 | 465 | //关闭弹框 |
-
Please register or login to post a comment