Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web
Showing
8 changed files
with
115 additions
and
28 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 | /** |
@@ -163,6 +164,12 @@ export default { | @@ -163,6 +164,12 @@ export default { | ||
163 | // Vue.watch(() => filterText.value, (newValue, oldVlaue) => { | 164 | // Vue.watch(() => filterText.value, (newValue, oldVlaue) => { |
164 | // proxy.$refs.tree.filter(newValue) | 165 | // proxy.$refs.tree.filter(newValue) |
165 | // }); | 166 | // }); |
167 | + //全选事件 | ||
168 | + let handleSelectionChange=(val)=>{ | ||
169 | + multipleSelection.value = val | ||
170 | + emit('selectionChange', multipleSelection.value) | ||
171 | + | ||
172 | + } | ||
166 | 173 | ||
167 | // 挂载完 | 174 | // 挂载完 |
168 | Vue.onMounted(() => { | 175 | Vue.onMounted(() => { |
@@ -170,6 +177,8 @@ export default { | @@ -170,6 +177,8 @@ export default { | ||
170 | }) | 177 | }) |
171 | 178 | ||
172 | return { | 179 | return { |
180 | + handleSelectionChange, | ||
181 | + multipleSelection, | ||
173 | currentPage, | 182 | currentPage, |
174 | pageSize, | 183 | pageSize, |
175 | handleSizeChange, | 184 | handleSizeChange, |
@@ -30,7 +30,7 @@ | @@ -30,7 +30,7 @@ | ||
30 | <div class="flex-div-start"> | 30 | <div class="flex-div-start"> |
31 | <el-button type="primary" @click="onReset()">重置</el-button> | 31 | <el-button type="primary" @click="onReset()">重置</el-button> |
32 | <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button> | 32 | <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button> |
33 | - <el-button type="primary" @click="saveAll()" style="margin-left: 10px">全部添加</el-button> | 33 | + <el-button type="primary" @click="saveAll()" style="margin-left: 10px">添加</el-button> |
34 | </div> | 34 | </div> |
35 | 35 | ||
36 | </div> | 36 | </div> |
@@ -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) { |
@@ -30,7 +30,7 @@ | @@ -30,7 +30,7 @@ | ||
30 | <div class="flex-div-start"> | 30 | <div class="flex-div-start"> |
31 | <el-button type="primary" @click="onReset()">重置</el-button> | 31 | <el-button type="primary" @click="onReset()">重置</el-button> |
32 | <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button> | 32 | <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button> |
33 | - <el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">全部添加</el-button> | 33 | + <el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">添加</el-button> |
34 | </div> | 34 | </div> |
35 | </div> | 35 | </div> |
36 | </el-col> | 36 | </el-col> |
@@ -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"> |
@@ -14,12 +14,6 @@ export default { | @@ -14,12 +14,6 @@ export default { | ||
14 | sortable: true, | 14 | sortable: true, |
15 | align: 'center', | 15 | align: 'center', |
16 | },*/ | 16 | },*/ |
17 | - { | ||
18 | - prop: 'url', | ||
19 | - label: 'url', | ||
20 | - sortable: true, | ||
21 | - align: 'center', | ||
22 | - }, | ||
23 | /*{ | 17 | /*{ |
24 | prop: 'streamId', | 18 | prop: 'streamId', |
25 | label: '链路id', | 19 | label: '链路id', |
@@ -30,8 +24,15 @@ export default { | @@ -30,8 +24,15 @@ export default { | ||
30 | prop: 'streamName', | 24 | prop: 'streamName', |
31 | label: '链路名称', | 25 | label: '链路名称', |
32 | sortable: true, | 26 | sortable: true, |
27 | + width:'260', | ||
33 | align: 'center', | 28 | align: 'center', |
34 | - } | 29 | + }, |
30 | + { | ||
31 | + prop: 'url', | ||
32 | + label: 'url', | ||
33 | + sortable: true, | ||
34 | + align: 'center', | ||
35 | + }, | ||
35 | ], | 36 | ], |
36 | } | 37 | } |
37 | }, | 38 | }, |
@@ -53,6 +54,8 @@ export default { | @@ -53,6 +54,8 @@ export default { | ||
53 | let busTypeList = Vue.ref([]); | 54 | let busTypeList = Vue.ref([]); |
54 | let networkMonitorList=Vue.ref([]); | 55 | let networkMonitorList=Vue.ref([]); |
55 | let isLoading=Vue.ref(false);//按钮加载中 | 56 | let isLoading=Vue.ref(false);//按钮加载中 |
57 | + let page=Vue.ref(1);//当前页 | ||
58 | + let pageSize=Vue.ref(5);//每页显示条数 | ||
56 | let init = () =>{ | 59 | let init = () =>{ |
57 | proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { | 60 | proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { |
58 | if (res && res.data) { | 61 | if (res && res.data) { |
@@ -107,12 +110,39 @@ export default { | @@ -107,12 +110,39 @@ export default { | ||
107 | 110 | ||
108 | 111 | ||
109 | } | 112 | } |
113 | + //表格全选事件 | ||
114 | + let selectionChange=(val)=>{ | ||
115 | + console.log("selectionChange",val,val.length) | ||
116 | + let selectData=val; | ||
117 | + if(selectData.length>0){ | ||
118 | + selectData.map((item,index)=>{ | ||
119 | + proxy.tableDataList.map((v,i)=>{ | ||
120 | + if(item.id==v.id){ | ||
121 | + v.checked=true; | ||
122 | + } | ||
123 | + }) | ||
124 | + }) | ||
125 | + | ||
126 | + }else{ | ||
127 | + proxy.tableDataList.map((v,i)=>{ | ||
128 | + v.checked=false; | ||
129 | + }) | ||
130 | + } | ||
131 | + } | ||
110 | //全部添加 | 132 | //全部添加 |
111 | let saveAll=()=>{ | 133 | let saveAll=()=>{ |
134 | + console.log("alldata",proxy.tableDataList); | ||
135 | + let npmListSelectData=[]; | ||
136 | + proxy.tableDataList.map(item=>{ | ||
137 | + if(item.checked){ | ||
138 | + npmListSelectData.push(item) | ||
139 | + } | ||
140 | + | ||
141 | + }) | ||
112 | proxy.isLoading=true; | 142 | proxy.isLoading=true; |
113 | let params={ | 143 | let params={ |
114 | targetId:proxy.targetId, | 144 | targetId:proxy.targetId, |
115 | - npmList:[npmList] | 145 | + npmList:npmListSelectData |
116 | } | 146 | } |
117 | 147 | ||
118 | proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',params,function (res){ | 148 | proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',params,function (res){ |
@@ -127,6 +157,9 @@ export default { | @@ -127,6 +157,9 @@ export default { | ||
127 | 157 | ||
128 | } | 158 | } |
129 | return { | 159 | return { |
160 | + page, | ||
161 | + pageSize, | ||
162 | + selectionChange, | ||
130 | isLoading, | 163 | isLoading, |
131 | saveAll, | 164 | saveAll, |
132 | networkMonitorList, | 165 | networkMonitorList, |
@@ -162,7 +195,9 @@ export default { | @@ -162,7 +195,9 @@ export default { | ||
162 | this.applicationMonitorVisible=false; | 195 | this.applicationMonitorVisible=false; |
163 | }, | 196 | }, |
164 | //重新加载表格数据 | 197 | //重新加载表格数据 |
165 | - loadTableDataList(){ | 198 | + loadTableDataList(val){ |
199 | + this.page=val.page; | ||
200 | + this.pageSize=val.limit; | ||
166 | this.getNodeList() | 201 | this.getNodeList() |
167 | }, | 202 | }, |
168 | //获取应用监测配置列表数据 | 203 | //获取应用监测配置列表数据 |
@@ -184,8 +219,8 @@ export default { | @@ -184,8 +219,8 @@ export default { | ||
184 | // busId: this.busTypeArr.join(','), | 219 | // busId: this.busTypeArr.join(','), |
185 | bizId: this.bizId, | 220 | bizId: this.bizId, |
186 | configId: this.config, | 221 | configId: this.config, |
187 | - page: 1, | ||
188 | - pageSize: 5 | 222 | + page: this.page, |
223 | + pageSize: this.pageSize | ||
189 | } | 224 | } |
190 | }, | 225 | }, |
191 | //关闭弹框 | 226 | //关闭弹框 |
@@ -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