Authored by 王涛
<div >
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
<el-table :border="showBorder" v-loading="loading" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px;">
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
<el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
<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 "
:width="getWidth(item.width)">
... ...
... ... @@ -83,6 +83,7 @@ export default {
setup(props, {attrs, slots, emit}) {
let currentPage = Vue.ref(1);
let pageSize = Vue.ref(props.pageSize);
let multipleSelection=Vue.ref([]);
/**
... ... @@ -163,6 +164,12 @@ export default {
// Vue.watch(() => filterText.value, (newValue, oldVlaue) => {
// proxy.$refs.tree.filter(newValue)
// });
//全选事件
let handleSelectionChange=(val)=>{
multipleSelection.value = val
emit('selectionChange', multipleSelection.value)
}
// 挂载完
Vue.onMounted(() => {
... ... @@ -170,6 +177,8 @@ export default {
})
return {
handleSelectionChange,
multipleSelection,
currentPage,
pageSize,
handleSizeChange,
... ...
... ... @@ -30,7 +30,7 @@
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
<el-button type="primary" @click="saveAll()" style="margin-left: 10px">全部添加</el-button>
<el-button type="primary" @click="saveAll()" style="margin-left: 10px">添加</el-button>
</div>
</div>
... ... @@ -39,8 +39,8 @@
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
... ...
... ... @@ -59,6 +59,8 @@ export default {
let busTypeList = Vue.ref([]);
let bizId=Vue.ref();//所属业务id
let targetId=Vue.ref();//所属模块id
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(5);//每页显示条数
let init = () =>{
let params1={
... ... @@ -122,12 +124,41 @@ export default {
}
//表格全选事件
let selectionChange=(val)=>{
let selectData=val;
if(selectData.length>0){
selectData.map((item,index)=>{
proxy.tableDataList.map((v,i)=>{
if(item.id==v.id){
v.checked=true;
}
})
})
}else{
proxy.tableDataList.map((v,i)=>{
v.checked=false;
})
}
}
//添加所有数据
let saveAll=()=>{
let npmListSelectData=[];
proxy.tableDataList.map(item=>{
if(item.checked){
npmListSelectData.push(item)
}
})
let params={
busId:proxy.bizId
targetId:proxy.targetId,
npmList:npmListSelectData
}
proxy.$http.post('/api-web/fault/conf/apm/saveOrUpdate',[params],function (res){
/*let params={
busId:proxy.bizId
}*/
proxy.$http.post('/api-web/fault/conf/apm/saveOrUpdate',params,function (res){
if(res && res.object){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.src;
... ... @@ -142,6 +173,9 @@ export default {
}
return {
page,
pageSize,
selectionChange,
saveAll,
getResData,
changeRes,
... ... @@ -177,7 +211,10 @@ export default {
this.APMVisible=false;
},
//重新加载表格数据
loadTableDataList(){
loadTableDataList(val){
console.log("page",val)
this.page=val.page;
this.pageSize=val.limit;
this.getNodeList()
},
//获取apm配置列表数据
... ... @@ -187,8 +224,8 @@ export default {
keyWords:this.keyWords,
busId:this.bizId,
kpiId:this.kpiTypeArr,
page:1,
pageSize:5
page:this.page,
pageSize:this.pageSize,
}
this.$http.get(`/api-web/fault/conf/apm/getFaultApmAllResInfo`, params, function (res) {
... ...
... ... @@ -30,7 +30,7 @@
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">全部添加</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">添加</el-button>
</div>
</div>
</el-col>
... ... @@ -38,8 +38,8 @@
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #default="{row,prop,column}">
<div v-if="prop == 'url'" class="text-overflow" :title="row.url">
... ...
... ... @@ -14,12 +14,6 @@ export default {
sortable: true,
align: 'center',
},*/
{
prop: 'url',
label: 'url',
sortable: true,
align: 'center',
},
/*{
prop: 'streamId',
label: '链路id',
... ... @@ -30,8 +24,15 @@ export default {
prop: 'streamName',
label: '链路名称',
sortable: true,
width:'260',
align: 'center',
}
},
{
prop: 'url',
label: 'url',
sortable: true,
align: 'center',
},
],
}
},
... ... @@ -53,6 +54,8 @@ export default {
let busTypeList = Vue.ref([]);
let networkMonitorList=Vue.ref([]);
let isLoading=Vue.ref(false);//按钮加载中
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(5);//每页显示条数
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
... ... @@ -107,12 +110,39 @@ export default {
}
//表格全选事件
let selectionChange=(val)=>{
console.log("selectionChange",val,val.length)
let selectData=val;
if(selectData.length>0){
selectData.map((item,index)=>{
proxy.tableDataList.map((v,i)=>{
if(item.id==v.id){
v.checked=true;
}
})
})
}else{
proxy.tableDataList.map((v,i)=>{
v.checked=false;
})
}
}
//全部添加
let saveAll=()=>{
console.log("alldata",proxy.tableDataList);
let npmListSelectData=[];
proxy.tableDataList.map(item=>{
if(item.checked){
npmListSelectData.push(item)
}
})
proxy.isLoading=true;
let params={
targetId:proxy.targetId,
npmList:[npmList]
npmList:npmListSelectData
}
proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',params,function (res){
... ... @@ -127,6 +157,9 @@ export default {
}
return {
page,
pageSize,
selectionChange,
isLoading,
saveAll,
networkMonitorList,
... ... @@ -162,7 +195,9 @@ export default {
this.applicationMonitorVisible=false;
},
//重新加载表格数据
loadTableDataList(){
loadTableDataList(val){
this.page=val.page;
this.pageSize=val.limit;
this.getNodeList()
},
//获取应用监测配置列表数据
... ... @@ -184,8 +219,8 @@ export default {
// busId: this.busTypeArr.join(','),
bizId: this.bizId,
configId: this.config,
page: 1,
pageSize: 5
page: this.page,
pageSize: this.pageSize
}
},
//关闭弹框
... ...
... ... @@ -157,7 +157,7 @@
<el-col :span="24" :class="[{'table-height':!flag},{'table-height-45':flag}]">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
... ...
... ... @@ -94,6 +94,8 @@ export default {
let linkId=Vue.ref();
//所有图标数据
let iconArr=Vue.ref([]);
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(5);//每页显示条数
let init = () =>{
//根据业务id获取资源列表
let paramsRes={
... ... @@ -274,6 +276,8 @@ export default {
}
return {
page,
pageSize,
addRes,
setBizId,
saveLinkAndNodeInfo,
... ... @@ -431,7 +435,9 @@ export default {
},
//重新加载表格数据
loadTableDataList(){
loadTableDataList(val){
this.page=val.page;
this.pageSize=val.limit;
this.getNodeList()
},
//获取配置节点列表数据
... ... @@ -452,8 +458,8 @@ export default {
resId: this.resTypeArr,
kpiId: this.kpiTypeArr,
busId: this.busTypeArr.join(','),
page: 1,
pageSize: 5
page: this.page,
pageSize: this.pageSize
}
},
//关闭弹框
... ...