Authored by 王涛
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 //关闭弹框