perf: VueX缩减、优化; 表头编辑插件重构

This commit is contained in:
chenjinsong
2020-08-04 21:53:06 +08:00
parent 0bff11644f
commit 06a3000af1
21 changed files with 472 additions and 1425 deletions

View File

@@ -8,17 +8,27 @@
<i style="cursor: pointer" class="el-icon-delete"></i> <i style="cursor: pointer" class="el-icon-delete"></i>
</div> </div>
</transition> </transition>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<!--表格--> <!--表格-->
<el-table <el-table
class="nz-table tabelH100" class="nz-table tabelH100"
:data="tableData" :data="tableData"
border border
v-show="mainResizeShow" v-show="bottomBox.mainResizeShow"
ref="alertListTable" ref="alertListTable"
tooltip-effect="light" tooltip-effect="light"
:height="tableHeight" :height="tableHeight"
v-scrollBar:el-table="'large'" v-scrollBar:el-table="'large'"
v-loading="loading" v-loading="tools.loading"
:cell-class-name="labelsClassName" :cell-class-name="labelsClassName"
@selection-change="selectChange" @selection-change="selectChange"
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
@@ -34,7 +44,7 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:minWidth="item.minWidth" :minWidth="item.minWidth"
@@ -48,9 +58,6 @@
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'"> <template v-if="item.prop == 'alertRule'">
<!--<div class="link too-long-split"
@click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
<span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)"> <span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
<el-tooltip <el-tooltip
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')" :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
@@ -61,11 +68,6 @@
</span> </span>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
<!--<div v-else-if="item.prop == 'type'" class="content-right-options">
<span v-if="scope.row[item.prop] == 1">Project</span>
<span v-if="scope.row[item.prop] == 2">Module</span>
<span v-if="scope.row[item.prop] == 3">Device</span>
</div>-->
<template v-else-if="item.prop == 'summary'"> <template v-else-if="item.prop == 'summary'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template> <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template> <template v-else>-</template>
@@ -79,15 +81,6 @@
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span> <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span> <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
</span> </span>
<!--<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
<span v-else>-</span>
</div>-->
<template v-else-if="item.prop == 'labels'" class="labels"> <template v-else-if="item.prop == 'labels'" class="labels">
<el-tooltip <el-tooltip
v-for="item in labelsSort(scope.row.labels)" v-for="item in labelsSort(scope.row.labels)"
@@ -114,12 +107,6 @@
</nz-alert-tag> </nz-alert-tag>
</span> </span>
</el-tooltip> </el-tooltip>
<!--<el-tag @click="showTagDetail(scope.row, key)"
:key="key"
:class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
v-if="key != 'alertname' && key != 'severity'"
:type="tagType(key)"
size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
</template> </template>
<div v-else-if="item.prop == 'state'"> <div v-else-if="item.prop == 'state'">
<span class=""> <span class="">
@@ -147,25 +134,25 @@
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
<template v-slot="scope"> <template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button> <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && tools.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--<弹窗>--> <!--<弹窗>-->
<!--删除弹窗--> <!--删除弹窗-->
<element-set <!--<element-set
v-clickoutside="elementsetHide" v-clickoutside="elementsetHide"
:table-title="tableTitle" :table-title="tableTitle"
:dropCol="dropCol" :dropCol="dropCol"
@tablelable="tablelabelEmit" @tablelable="tablelabelEmit"
ref="elementset" ref="elementset"
:path="this.fromPath" :path="this.fromPath"
></element-set> ></element-set>-->
<!--导出--> <!--导出-->
<div class="export-xlsx"> <div class="export-xlsx">
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog"> <el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
@@ -244,16 +231,25 @@
/*二级列表相关*/ /*二级列表相关*/
tabList: [], //二级列表的标签 tabList: [], //二级列表的标签
tabDetailList: [], //多个详情 tabDetailList: [], //多个详情
targetTab: '', //展示二级列表中的哪个页签 bottomBox: {
inTransform: false, //搜索框相关搜索条件下拉框是否在transform里 tabList: [], //二级列表的标签
mainResizeShow: true, //dom高度改变时部分内容是否展示 tabDetailList: [], //多个详情
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true, subResizeShow: true,
isFullScreen: false, isFullScreen: false, //全屏状态
showSubList: false, //是否示二级列表 showSubList: false, //是否示二级列表
mainTableHeight: this.$tableHeight.normal, //主列表table高度 targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关搜索条件下拉框是否在transform里
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
//导出相关 //导出相关
importBox: {show: false, title:this.$t('overall.exportExcel')}, importBox: {show: false, title:this.$t('overall.exportExcel')},
@@ -267,7 +263,6 @@
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
currentMsg: {}, currentMsg: {},
chartUnit: 5, chartUnit: 5,
showTopBtn: false,
pageObj: { pageObj: {
pageNo: 1, pageNo: 1,
pageSize: 50, pageSize: 50,
@@ -329,8 +324,6 @@
width: 90 width: 90
} }
], ],
tablelable: [],
dropCol: [],
viewRuleData: { viewRuleData: {
id: '', id: '',
alertName: '', alertName: '',
@@ -390,36 +383,6 @@
}) })
return result; return result;
}, },
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
chartUnitChange:function(unit){ chartUnitChange:function(unit){
this.chartUnit=unit; this.chartUnit=unit;
this.$nextTick(()=>{ this.$nextTick(()=>{
@@ -618,7 +581,7 @@
}, },
deleteMessage() { deleteMessage() {
this.$emit('deleteMessage',this.deleteBox); this.$emit('deleteMessage',this.deleteBox);
console.log(this.deleteBox); //console.log(this.deleteBox);
this.deleteBox.show = false; this.deleteBox.show = false;
this.deleteBox.ids=[]; this.deleteBox.ids=[];
}, },
@@ -695,14 +658,17 @@
}, },
// 全屏 // 全屏
fullScreen() { fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm); this.$bottomBoxWindow.fullScreen(vm);
}, },
// 退出全屏 // 退出全屏
exitFullScreen() { exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm); this.$bottomBoxWindow.exitFullScreen(vm);
}, },
// 鼠标拖动二级列表 // 鼠标拖动二级列表
listResize(e) { listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e); this.$bottomBoxWindow.listResize(vm, e);
}, },
showTagDetail(data, key) { showTagDetail(data, key) {
@@ -719,10 +685,8 @@
detailList.push(data[item]); detailList.push(data[item]);
} }
} }
this.showSubList = true; this.bottomBox.showSubList = true;
this.tabList = labelList; this.tabList = labelList;
/*this.tabDetailList = detailList;
this.targetTab = key;*/
} }
}, },
labelsClassName(row) { labelsClassName(row) {
@@ -732,18 +696,7 @@
return ""; return "";
} }
}, },
jumpTo(data, id) { viewRule(id) {
bus.$emit("menu-change", data);
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
viewRule: function (id) {
this.closeViews(); this.closeViews();
this.$get('alert/rule', {"id": id}).then(response => { this.$get('alert/rule', {"id": id}).then(response => {
if (response.code == 200) { if (response.code == 200) {
@@ -817,16 +770,6 @@
}, },
// 数据排序 // 数据排序
tableDataSort(item){ tableDataSort(item){
// let orderBy='';
// if(item.order==='ascending'){
// orderBy=item.prop;
// }
// if(item.order==='descending'){
// orderBy='-'+item.prop;
// }
// this.pageObj.orderBy=orderBy;
// this.$set(this.searchLabel, "orderBy", orderBy);
// this.getAlertList();
this.$emit('tableDataSort',item); this.$emit('tableDataSort',item);
}, },
// label tooltip是否显示 // label tooltip是否显示
@@ -866,6 +809,10 @@
}, },
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -879,20 +826,20 @@
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", () => { el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) { if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true; this.tools.showTopBtn = true;
} else { } else {
this.showTopBtn = false; this.tools.showTopBtn = false;
} }
}); });
el.addEventListener("mouseenter", () => { el.addEventListener("mouseenter", () => {
this.tableHover = true; this.tools.tableHover = true;
}); });
el.addEventListener("mouseleave", () => { el.addEventListener("mouseleave", () => {
this.tableHover = false; this.tools.tableHover = false;
}); });
} }
}); });
if(this.from=='alertMessage'){ /*if(this.from=='alertMessage'){
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)) ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle; : this.tableTitle;
@@ -910,7 +857,7 @@
: this.tableTitle; : this.tableTitle;
console.log(2); console.log(2);
} }
console.log( this.tableTitle,this.fromPath,this.form,this.tablelable); console.log( this.tableTitle,this.fromPath,this.form,this.tablelable);*/
} }
} }

View File

@@ -27,10 +27,20 @@
</export-excel> </export-excel>
</div> </div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
:data="tableData" :data="tableData"
border border
v-loading="loading" v-loading="tools.loading"
class="nz-table endpoint-table" class="nz-table endpoint-table"
:height="$tableHeight.noPagination" :height="$tableHeight.noPagination"
v-scrollBar:el-table="'large'" v-scrollBar:el-table="'large'"
@@ -40,7 +50,7 @@
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -76,24 +86,16 @@
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
<template v-slot="scope"> <template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button> <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<element-set
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:path="'/assetEndpoint'"
ref="elementset"
></element-set>
<transition name="right-box"> <transition name="right-box">
<add-endpoint-box v-if="rightBox.add.show" :current-project="currentProject" :current-module="currentModule" @close="closeRightBox" ref="addEndpointBox"></add-endpoint-box> <add-endpoint-box v-if="rightBox.add.show" :current-project="currentProject" :current-module="currentModule" @close="closeRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition> </transition>
@@ -119,15 +121,19 @@
add: {show: false}, add: {show: false},
edit: {show: false}, edit: {show: false},
}, },
endpoint: {}, //用来查看详情和编辑的对象 /*工具参数*/
//asset: {}, //对应props的obj tools: {
showTopBtn: false, //top按钮是否显示 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
endpoint: {}, //用来查看详情和编辑的对象
endpointSearchLabel:{ endpointSearchLabel:{
}, },
loading: false,
tableTitle: [ tableTitle: [
{ {
label: this.$t("project.endpoint.endpointId"), label: this.$t("project.endpoint.endpointId"),
@@ -213,11 +219,11 @@
this.$emit('changeTab', tab); this.$emit('changeTab', tab);
}, },
getTableData() { getTableData() {
this.loading = true; this.tools.loading = true;
this.$set(this.endpointSearchLabel, "assetId", this.asset.id); this.$set(this.endpointSearchLabel, "assetId", this.asset.id);
this.$set(this.endpointSearchLabel, "pageSize", '-1'); this.$set(this.endpointSearchLabel, "pageSize", '-1');
this.$get('/endpoint',this.endpointSearchLabel).then(response => { this.$get('/endpoint',this.endpointSearchLabel).then(response => {
this.loading = false; this.tools.loading = false;
if (response.code === 200) { if (response.code === 200) {
this.tableData = response.data.list; this.tableData = response.data.list;
this.$emit("reload"); this.$emit("reload");
@@ -262,36 +268,6 @@
} }
this.getTableData(); this.getTableData();
}, },
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
dateFormat(time) { dateFormat(time) {
if (!time) { if (!time) {
return '-'; return '-';
@@ -386,11 +362,9 @@
} }
}, },
mounted() { mounted() {
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint") //初始化表头
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint")) this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/project")
: this.tableTitle; ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/project"))
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint")
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint"))
: this.tableTitle; : this.tableTitle;
this.$nextTick(() => { this.$nextTick(() => {
@@ -399,16 +373,16 @@
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", () => { el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) { if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true; this.tools.showTopBtn = true;
} else { } else {
this.showTopBtn = false; this.tools.showTopBtn = false;
} }
}); });
el.addEventListener("mouseenter", () => { el.addEventListener("mouseenter", () => {
this.tableHover = true; this.tools.tableHover = true;
}); });
el.addEventListener("mouseleave", () => { el.addEventListener("mouseleave", () => {
this.tableHover = false; this.tools.tableHover = false;
}); });
} }
}); });

View File

@@ -1,28 +1,14 @@
<template> <template>
<div <div class="pop-custom" v-clickoutside="esc">
class="pop-elementset"
:style="{opacity:(eventfixedVal.shezhi==1),left:(eventfixedVal.shezhi==1 ? event_positionx : -2000)+'px',top:(event_positiony)+'px'}"
>
<!--<div class="pop-top-btns">
<button type="button" @click="shezhiControl('ok')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="element-set-ok">
<span class="pop-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="shezhiControl('cancel')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="element-set-esc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>-->
<div class="pop-title">{{$t('overall.select')}}</div> <div class="pop-title">{{$t('overall.select')}}</div>
<div class="pop-box elementset-labels"> <div class="pop-box custom-labels">
<el-scrollbar style="height: 100%;"> <el-scrollbar style="height: 100%;">
<div <div
v-for="(item,index) in dropColRes" v-for="(item,index) in custom"
:key="index" :key="index"
class="elementset-label" class="custom-label"
:class="!allowedAll&&(index==0 || index == 1) ? 'elementset-label-disabled' : ''" :class="!allowedAll && (index==0 || index == 1) ? 'custom-label-disabled' : ''"
:title="item.visibility == 'disabled' ? other.inDevelopment : ''" @click="handler(item,index)"
@click="addcol(item,index)"
:id="'element-set-el-'+index" :id="'element-set-el-'+index"
> >
<i class="el-icon-check" v-if="!allowedAll&&(index==0||index==1||item.visibility=='disabled')"></i> <i class="el-icon-check" v-if="!allowedAll&&(index==0||index==1||item.visibility=='disabled')"></i>
@@ -31,52 +17,42 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="elementset-bottom-btns"> <div class="custom-bottom-btns">
<button v-if="isCancel" type="button" @click="dropAll(false)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35 is-cancel"> <button v-if="isCancel" type="button" @click="batchHandler(false)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35 is-cancel">
<span class="top-tool-btn-txt">{{$t('overall.clear')}}</span> <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</button> </button>
<button v-if="!isCancel" type="button" @click="dropAll(true)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35"> <button v-if="!isCancel" type="button" @click="batchHandler(true)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<span class="top-tool-btn-txt">{{$t('overall.all')}}</span> <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</button> </button>
<div> <div>
<button type="button" @click="shezhiControl('cancel')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35"> <button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<span class="top-tool-btn-txt">{{$t('overall.esc')}}</span> <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
</button> </button>
<button type="button" @click="shezhiControl('ok')" class="nz-btn nz-btn-size-small nz-btn-style-normal nz-btn-min-width-35"> <button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal nz-btn-min-width-35">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span> <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button> </button>
</div> </div>
<!--<button type="button" @click="dropAll(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
</button>-->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
// props: ["dropCol","tableTitle","path"],
props:{ props:{
dropCol:{}, customTableTitle: Array, //自定义的title
tableTitle:{}, originalTableTitle: Array, //原始title
path:{}, path: String,
allowedAll: {default: false}, allowedAll: {default: false},
}, },
data() { data() {
return { return {
other: this.$t("overall.other"), custom: [],
event_positiony: 0,
event_positionx: 0,
eventfixedVal: {},
dropColRes: JSON.parse(JSON.stringify(this.dropCol)),
titles: JSON.parse(JSON.stringify(this.tableTitle))
}; };
}, },
mounted() {},
created() { created() {
let localStorageTitle = JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)); let localStorageTitle = JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path));
if (localStorageTitle ){ if (localStorageTitle ){
for(let title of this.titles){ for (let title of this.originalTableTitle) {
for (let lsTitle of localStorageTitle) { for (let lsTitle of localStorageTitle) {
if (lsTitle.prop === title.prop){ if (lsTitle.prop === title.prop){
lsTitle.label = title.label; lsTitle.label = title.label;
@@ -88,83 +64,53 @@ export default {
}, },
watch: { watch: {
dropCol: { customTableTitle: {
immediate: true, immediate: true,
deep: true, deep: true,
handler(data) { handler(n) {
this.dropColRes = JSON.parse(JSON.stringify(data)); this.custom = JSON.parse(JSON.stringify(n));
}, },
}, },
position: {
//监听设置icon的显示位置
handler(data) {
this.event_positiony = data.positiony;
this.event_positionx = data.positionx;
},
immediate: true
},
eventfixed: {
handler(data) {
if (data)
this.eventfixedVal = data;
},
immediate: true
}
}, },
methods: { methods: {
//悬浮点击空白隐藏 //悬浮点击空白隐藏
elementsetHide() { esc() {
this.eventfixedVal.shezhi = 0;
this.$emit('close'); this.$emit('close');
}, },
//点击全选all或者cancel按钮 //全选all true 或者全取消cancel false按钮
dropAll(state) { batchHandler(state) {
for (let index = 0; index < this.dropColRes.length; index++) { for (let index = 0; index < this.custom.length; index++) {
if (index == 0 || index == 1) { if (index == 0 || index == 1) {
this.dropColRes[index].show = true; this.custom[index].show = true;
} else { } else {
this.dropColRes[index].show = state; this.custom[index].show = state;
} }
} }
}, },
//下拉选项选择 //单选
addcol(val, index) { handler(val, index) {
if (!this.allowedAll && (index == 0 || index == 1)) { if (!this.allowedAll && (index == 0 || index == 1)) {
this.dropColRes[index].show = true; this.custom[index].show = true;
} else { } else {
this.dropColRes[index].show = !this.dropColRes[index].show; this.custom[index].show = !this.custom[index].show;
} }
}, },
//点击第二个cancel //点击第二个cancel
shezhiControl(t) { save() {
if (t == "ok") { this.$emit('update:customTableTitle', this.custom);
this.$emit("tablelable", JSON.parse(JSON.stringify(this.dropColRes)));
localStorage.setItem( localStorage.setItem(
"nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + ((typeof this.path != 'undefined') ? this.path : this.$route.path), "nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + ((typeof this.path != 'undefined') ? this.path : this.$route.path),
JSON.stringify(this.tablelable) JSON.stringify(this.custom)
); );
} else { this.esc();
this.dropColRes = JSON.parse(JSON.stringify(this.tablelable));
}
this.elementsetHide();
}, },
}, },
computed: { computed: {
eventfixed() {
return this.$store.state.eventfixed;
},
position() {
return this.$store.state.position;
},
tablelable() {
return this.$store.state.tablelable;
},
//点击all是否是全部取消选中true为是 //点击all是否是全部取消选中true为是
isCancel() { isCancel() {
let isCancel = true; let isCancel = true;
for (let i = 0; i < this.dropColRes.length; i++) { for (let i = 0; i < this.custom.length; i++) {
if (!this.dropColRes[i].show) { if (!this.custom[i].show) {
isCancel = false; isCancel = false;
break; break;
} }
@@ -175,45 +121,47 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.pop-elementset { .pop-custom {
padding: 0 12px 12px 12px; padding: 0 12px 12px 12px;
border: 1px solid #EBEEF5; border: 1px solid #EBEEF5;
box-shadow: $pop-box-shadow; box-shadow: $pop-box-shadow;
position: fixed; position: absolute;
top: 0; top: 83px;
left: 10px; right: 0;
width: 200px; width: 200px;
color: #606266; color: #606266;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
z-index: 999999; z-index: 999999;
} }
.relative-position .pop-custom {
.elementset-labels { top: 33px;
}
.custom-labels {
margin-top: 12px; margin-top: 12px;
width: 100%; width: 100%;
height: 300px; height: 300px;
} }
.elementset-labels i { .custom-labels i {
color: #04b330; color: #04b330;
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
left: 5px; left: 5px;
top: 6px; top: 6px;
} }
.elementset-label { .custom-label {
padding: 2px 0 2px 25px; padding: 2px 0 2px 25px;
position: relative; position: relative;
cursor: default; cursor: default;
font-size: 14px; font-size: 14px;
} }
.elementset-label-disabled { .custom-label-disabled {
cursor: not-allowed; cursor: not-allowed;
background: #f1f3f4; background: #f1f3f4;
opacity: 0.7; opacity: 0.7;
} }
.elementset-bottom-btns { .custom-bottom-btns {
margin-top: 7px; margin-top: 7px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@@ -58,7 +58,7 @@
<el-submenu index="3" popper-class="nz-submenu"> <el-submenu index="3" popper-class="nz-submenu">
<template slot="title"> <template slot="title">
<div v-if="assetData.length == 0">{{$t('overall.asset')}}</div> <div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
<div v-else @click="jumpToAsset(assetData[0])" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div> <div v-else @click="jumpToAsset()" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
</template> </template>
<template> <template>
<el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item> <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
@@ -366,15 +366,16 @@
} }
}, },
jumpToAsset(dc) { jumpToAsset(dc) {
if (dc) {
this.activeItemIndex = dc.id; this.activeItemIndex = dc.id;
bus.$emit("header-dc-change", dc.id); //发送给leftMenu顶部dc条件改变了 bus.$emit("header-dc-change", dc.id); //发送给leftMenu顶部dc条件改变了
}
this.jumpTo("asset", "assets"); this.jumpTo("asset", "assets");
}, },
jumpToProject(p) { jumpToProject(p) {
this.currentProject = p; this.currentProject = p;
this.$store.commit('currentProjectChange', p); this.$store.commit('currentProjectChange', p);
bus.$emit("project-page-type", 'project'); bus.$emit("project-page-type", 'project');
localStorage.setItem('nz-current-project', p.id);
this.activeItemIndex = p.id; this.activeItemIndex = p.id;
this.jumpTo('project', 'projects'); this.jumpTo('project', 'projects');
@@ -499,7 +500,7 @@
this.refreshLang(); this.refreshLang();
this.activeIndex = 'overview'; this.activeIndex = 'overview';
}); });
bus.$on("dc-list-change", () => { bus.$on("dc-list-change", () => { //dc.vue增删改dc时刷新顶部菜单dc列表
this.getAssetData(); this.getAssetData();
}); });
bus.$on("current-project-change", project => { bus.$on("current-project-change", project => {
@@ -514,6 +515,7 @@
}, },
mounted() { mounted() {
this.$i18n.locale = this.language; this.$i18n.locale = this.language;
this.initEvent();
this.getAssetData(); this.getAssetData();
this.getUserData(); this.getUserData();
this.getProjectList(); this.getProjectList();

View File

@@ -236,19 +236,16 @@
} }
}, },
}, },
dcCheckList(n, o) {
this.$store.commit("currentDcListChange", n);
/* setTimeout(() => {
if (n.length > 0 ) {
bus.$emit("asset-filter-change", "idcIds", n.join(','));
} else {
bus.$emit("asset-filter-change", "idcIds", "");
}
}, 100);*/
},
currentProject(n, o) { currentProject(n, o) {
bus.$emit("current-project-change", n); //告知project.vue bus.$emit("current-project-change", n); //告知project.vue
}, },
dcCheckList: {
deep: true,
immediate: true,
handler(n) {
bus.$emit("asset-filter-change", "idcIds", n.join(","));
}
}
}, },
mounted() { mounted() {
Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => { Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
@@ -324,11 +321,14 @@
bus.$emit("project-page-type", "endpoint"); //告知project.vue bus.$emit("project-page-type", "endpoint"); //告知project.vue
}, },
addModule() { addModule() {
/*this.module = this.newModule(); this.module = this.newModule();
this.rightBox.module.show = true; this.rightBox.module.show = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.moduleBox.initWalk(); this.$refs.moduleBox.initWalk();
});*/ });
},
newModule() {
return JSON.parse(JSON.stringify(this.blankModule));
}, },
//弹出module编辑页 //弹出module编辑页
editModule(module) { editModule(module) {
@@ -433,7 +433,6 @@
bus.$emit("asset-filter-change", "typeIds", ""); bus.$emit("asset-filter-change", "typeIds", "");
this.pageObj.typeIds=''; this.pageObj.typeIds='';
} }
this.getTableData();
}, },
changeVendorCheckBox() { changeVendorCheckBox() {
if(this.vendorCheckList && this.vendorCheckList.length > 0){ if(this.vendorCheckList && this.vendorCheckList.length > 0){
@@ -442,7 +441,6 @@
}else{ }else{
bus.$emit("asset-filter-change", "vendorIds", ""); bus.$emit("asset-filter-change", "vendorIds", "");
} }
this.getTableData();
}, },
changePingCheckBox() { changePingCheckBox() {
if(this.pingCheckList && this.pingCheckList.length > 0){ if(this.pingCheckList && this.pingCheckList.length > 0){

View File

@@ -1,236 +0,0 @@
<template>
<el-popover :placement="placement" @show="afterShow" width="400" @hide="hidePop" ref="popBox" v-model="popBox.show" popper-class="nz-pop">
<div class="">
<!-- begin--顶部按钮-->
<div class="pop-top-btns">
<button type="button" v-if="idc.id && idc.id != ''&& popBox.isEdit" @click="del" class="nz-btn nz-btn-size-small nz-btn-size-alien nz-btn-style-light nz-btn-min-width-60" id="dc-del">
<span class="pop-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-60" id="dc-save">
<span class="pop-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="pop-top-btn-txt" v-if="popBox.isEdit">{{$t('overall.save')}}</span>
<span class="pop-top-btn-txt" v-else>{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<div class="pop-title">{{title}}</div>
<div class="pop-item-wider">
<el-form class="right-box-form" :model="idc" label-position="left" label-width="150px" :rules="rules" ref="idcForm">
<el-form-item :label="$t('asset.dcName')" prop="name">
<el-input type="text" placeholder="" v-model="idc.name" size="mini" maxlength="64" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.name}}</div>
</el-form-item>
<el-form-item :label="$t('asset.location')" prop="location">
<el-input type="text" placeholder="" v-model="idc.location" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.location}}</div>
</el-form-item>
<el-form-item :label="$t('asset.principal')" prop="principal">
<el-select v-model="idc.principal" clearable size="mini" placeholder="" v-if="popBox.isEdit" popper-class="dc-dropdown">
<el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
</el-select>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.principal}}</div>
</el-form-item>
<el-form-item :label="$t('asset.tel')" prop="tel" >
<el-input type="text" placeholder="" v-model="idc.tel" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.tel}}</div>
</el-form-item>
</el-form>
</div>
</div>
<span :class="buttonClass" @click.prevent.stop="" slot="reference" :id="'edit-idc-'+Math.random().toString(36).slice(-8)">
<slot name="optionZone">
<i class="el-icon-plus" id="dc-plus"></i>
</slot>
</span>
</el-popover>
</template>
<script>
import {phone} from '../../common/js/validate'
export default {
name: "dcConfig",
props:{
postIdc:{type:Object},
placement:{type:String},
buttonClass:{type:String},
isEdit:{type:Boolean,default:true},
userData:{type:Array}
},
created() {
this.init();
},
data(){
return {
title:"",
rules:{
name:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
location:[
],
principal:[
],
tel:[
{ validator: phone, trigger: 'blur'}
]
},
idc:{},
principals:[],
popBox:{isEdit:true,show:false}
}
},
methods:{
init:function(){
let temp=this;
temp.getUserData();
},
resetData:function(){
let temp=this;
temp.idc={
name:"",
location: "",
principal: null,
tel:""
}
},
openBox:function(){
this.popBox.show=true;
},
afterShow:function(){
if(!this.popBox.isEdit){
this.popBox.isEdit=this.isEdit;
}
},
getUserData() {
let temp=this;
if(temp.userData&&temp.userData.length>0){
temp.principals=temp.userData;
return;
}
temp.$get('sys/user/list').then(response => {
if (response.code === 200) {
temp.principals = response.data.list
}
})
},
saveOrToEdit:function(){
if (!this.popBox.isEdit) {
this.toEdit(this.idc);
} else {
this.save();
}
},
save:function(){
let temp=this;
temp.$refs.idcForm.validate((valide)=>{
if(valide){
const h = temp.$createElement;
if(!temp.idc.id){
temp.$post('idc', temp.idc).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
}
})
}else{
this.$put('idc', temp.idc).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
}
})
}
}else{
return false;
}
});
},
toEdit:function(u){
this.idc = Object.assign({}, u);
this.popBox.isEdit = true;
this.title = this.$t('asset.editIdcTab.title') + " ID" + this.idc.id
this.popBox.show = true;
},
show:function(isShow,isEdit){
this.popBox.show=isShow;
this.popBox.isEdit=isEdit;
},
esc:function(){
this.popBox.show=false;
},
del:function(){
let temp=this;
temp.$confirm(temp.$t("tip.confirmDelete"), {
confirmButtonText: temp.$t("tip.yes"),
cancelButtonText: temp.$t("tip.no"),
type: 'warning'
}).then(() => {
temp.$delete("idc?ids=" + temp.idc.id).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
}
});
});
},
hidePop:function(){//隐藏事件触发方法
if(this.postIdc&&this.postIdc.id){
this.idc=this.postIdc
}else{
this.resetData();
}
this.clearValidate();
},
clearValidate:function(){
this.$refs.idcForm.clearValidate();
}
},
watch:{
postIdc: {
immediate: true,
deep: true,
handler(n, o) {
if (n && n.id) {
this.title = this.popBox.isEdit?this.$t('asset.editIdcTab.title') + " ID" + n.id:this.$t('asset.dc') + " ID" + n.id;
this.idc=n;
} else {
this.title = this.$t('asset.AddIdcTab.title');
this.resetData();
}
}
},
isEdit:{
immediate: true,
handler(n, o) {
this.popBox.isEdit=n;
}
}
}
}
</script>
<style scoped>
</style>

View File

@@ -512,7 +512,6 @@
this.$put('module', this.editModule).then(response => { this.$put('module', this.editModule).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
//this.$store.commit('moduleListChange');
this.esc(true); this.esc(true);
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
@@ -522,7 +521,6 @@
this.$post('module', this.editModule).then(response => { this.$post('module', this.editModule).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
//this.$store.commit('moduleListChange');
this.esc(true); this.esc(true);
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
@@ -544,7 +542,6 @@
this.$delete("module?ids=" + this.editModule.id).then(response => { this.$delete("module?ids=" + this.editModule.id).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
//this.$store.commit('moduleListChange');
this.esc(true); this.esc(true);
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);

View File

@@ -222,11 +222,6 @@
downBool:false downBool:false
} }
}, },
computed: {
alertListAssetId() {
return this.$store.state.assetForAlertList;
}
},
watch: { watch: {
defaultValue: { defaultValue: {
immediate: true, immediate: true,
@@ -348,100 +343,6 @@
} }
} }
}, },
/*alertListAssetId: {
immediate: true,
handler(newData, oldData) {
if (newData && this.$route.path == '/alertList') {
setTimeout(()=>{
//
//1.条件名alertType
//
this.searchLabelList.splice(2, 1);
this.select_list.push({
name: this.$t('alert.list.type'),
id: 3,
type: 'select',
label: 'alertType',
disabled: false
});
//
//2.条件值asset
//
this.select_list.forEach(val => {
if (val.label == 'alertType') {
val.val = this.$t('alert.config.typeOption.asset');
val.valnum = 3;
//alertList页type选择asset时可以搜索asset
if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum == 3) {
for (let i = 0; i < this.searchLabelList.length; i++) {
if (this.searchLabelList[i].label == 'asset') {
this.searchLabelList[i].disabled = false;
break;
}
}
} else if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum != 3) {
let ind = -1;
for (let i = 0; i < this.searchLabelList.length; i++) {
if (this.searchLabelList[i].label == 'asset') {
this.searchLabelList[i].disabled = true;
break;
}
}
for (let i = 0; i < this.select_list.length; i++) {
if (this.select_list[i].label == 'asset') {
ind = i;
break;
}
}
if (ind >= 0) {
this.close_selcet_list(ind);
}
}
}
});
//
//3.条件名asset
//
//this.input_list = false;
this.searchLabelList.splice(3, 1);
this.select_list.push({
name: this.$t('asset.asset'),
id: 11,
type: 'asset',
label: 'asset',
disabled: false
});
//
//4.条件值指定的asset
setTimeout(()=>{
let assetHost = '';
for (let i = 0; i < this.assetSelect.length; i++) {
if (this.assetSelect[i].id == newData) {
assetHost = this.assetSelect[i].host;
}
}
this.select_list.forEach(val => {
if (val.label == 'asset') {
val.val = assetHost;
val.valnum = newData;
}
});
this.input_sreach = '';
this.sreach_num = this.select_list.length;
this.change_sreach_show = false;
this.input_list = true;
//
//5.点击搜索
//
this.select();
}, 50);
}, 100);
this.$store.commit('assetForAlertListChange', '');
}
}
}*/
}, },
props:['searchMsg','defaultItem','defaultValue','inTransform'], props:['searchMsg','defaultItem','defaultValue','inTransform'],
methods: { methods: {

View File

@@ -19,6 +19,16 @@
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
@@ -35,7 +45,7 @@
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tools.tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -72,7 +82,7 @@
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -92,15 +102,6 @@
<transition name="right-box"> <transition name="right-box">
<alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box> <alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
</transition> </transition>
<element-set
v-if="tools.showElementSet"
@close="elementsetHide"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:tools.dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div> </div>
</template> </template>
@@ -132,10 +133,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
mainTableHeight: this.$tableHeight.normal, //主列表table高度 mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -256,40 +256,6 @@
this.bottomBox.showSubList = true; this.bottomBox.showSubList = true;
this.bottomBox.targetTab = 'alertMessage'; this.bottomBox.targetTab = 'alertMessage';
}, },
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
this.tools.dropCol = data;
},
edit(u) { edit(u) {
this.alertRule = JSON.parse(JSON.stringify(u)); this.alertRule = JSON.parse(JSON.stringify(u));
this.rightBox.show = true; this.rightBox.show = true;
@@ -542,6 +508,10 @@
window.onresize = null; window.onresize = null;
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -569,12 +539,6 @@
}); });
} }
}); });
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
} }
} }
</script> </script>

View File

@@ -18,11 +18,11 @@
</style> </style>
<template> <template>
<div class="list"> <div class="list">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}"> <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="top-tools" v-show="mainResizeShow"> <div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}"> <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search"> <div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input> <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
</div> </div>
<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')" <button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export"> class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
@@ -33,19 +33,19 @@
</div> </div>
<alertMessageTable <alertMessageTable
:tableData="tableData" :tableData="tableData"
:loading="loading" :loading="tools.loading"
:tableHeight="mainTableHeight" :tableHeight="mainTableHeight"
:tableId="tableId" :tableId="tableId"
@tableDataSort="tableDataSort" @tableDataSort="tableDataSort"
@deleteMessage="deleteMessage" @deleteMessage="deleteMessage"
:from="'alertMessage'" :from="'alertMessage'"
></alertMessageTable> ></alertMessageTable>
<div class="pagination-bottom" v-show="!showSubList"> <div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div> </div>
</div> </div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList" <bottom-box v-if="bottomBox.showSubList" :show-sub-list="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen" :from="'alertMessage'" :target-tab.sync="bottomBox.targetTab" :detailList="tabDetailList"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box> @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
<!--导出--> <!--导出-->
<div class="export-xlsx"> <div class="export-xlsx">
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog"> <el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
@@ -100,7 +100,7 @@
import chartDataFormat from "../../charts/chartDataFormat"; import chartDataFormat from "../../charts/chartDataFormat";
import alertRuleInfo from '../../common/alert/alertRuleInfo' import alertRuleInfo from '../../common/alert/alertRuleInfo'
import alertLabel from '../../common/alert/alertLabel' import alertLabel from '../../common/alert/alertLabel'
import alertMessageTable from '@/components/common/alert/alertMessageTable.vue' import alertMessageTable from '../../common/alert/alertMessageTable.vue'
export default { export default {
name: "alertList", name: "alertList",
components: { components: {
@@ -112,20 +112,28 @@
}, },
data() { data() {
return { return {
loading: false,
/*二级列表相关*/ /*二级列表相关*/
mainTableHeight: this.$tableHeight.normal, //主列表table高度
/*二级页面相关*/
bottomBox: {
tabList: [], //二级列表的标签 tabList: [], //二级列表的标签
tabDetailList: [], //多个详情 tabDetailList: [], //多个详情
targetTab: '', //展示二级列表中的哪个页签 mainResizeShow: true, //dom高度改变时是否展示|隐藏
inTransform: false, //搜索框相关搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true, subResizeShow: true,
isFullScreen: false, isFullScreen: false, //全屏状态
showSubList: false, //是否示二级列表 showSubList: false, //是否示二级列表
mainTableHeight: this.$tableHeight.normal, //主列表table高度 targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关搜索条件下拉框是否在transform里
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
//导出相关 //导出相关
importBox: {show: false, title:this.$t('overall.exportExcel')}, importBox: {show: false, title:this.$t('overall.exportExcel')},
@@ -141,7 +149,6 @@
chartUnit: 5, chartUnit: 5,
tableId: 'alertListTable', //需要分页的table的id用于记录每页数量 tableId: 'alertListTable', //需要分页的table的id用于记录每页数量
showTopBtn: false,
pageObj: { pageObj: {
pageNo: 1, pageNo: 1,
pageSize: 50, pageSize: 50,
@@ -258,8 +265,6 @@
searchLabel: { //搜索参数 searchLabel: { //搜索参数
}, },
tablelable: [],
dropCol: [],
tableData: [], tableData: [],
requestIndex:0, requestIndex:0,
viewRuleData: { viewRuleData: {
@@ -321,11 +326,6 @@
}) })
return result; return result;
}, },
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
chartUnitChange:function(unit){ chartUnitChange:function(unit){
this.chartUnit=unit; this.chartUnit=unit;
this.$nextTick(()=>{ this.$nextTick(()=>{
@@ -481,9 +481,9 @@
getAlertList: function () { getAlertList: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true; this.tools.loading = true;
this.$get('alert/message', this.searchLabel).then(response => { this.$get('alert/message', this.searchLabel).then(response => {
this.loading = false; this.tools.loading = false;
if (response.code == 200) { if (response.code == 200) {
this.tableData = response.data.list; this.tableData = response.data.list;
this.tableData.forEach((item) => { this.tableData.forEach((item) => {
@@ -638,14 +638,17 @@
}, },
// 全屏 // 全屏
fullScreen() { fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm); this.$bottomBoxWindow.fullScreen(vm);
}, },
// 退出全屏 // 退出全屏
exitFullScreen() { exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm); this.$bottomBoxWindow.exitFullScreen(vm);
}, },
// 鼠标拖动二级列表 // 鼠标拖动二级列表
listResize(e) { listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e); this.$bottomBoxWindow.listResize(vm, e);
}, },
showTagDetail(data, key) { showTagDetail(data, key) {
@@ -662,10 +665,10 @@
detailList.push(data[item]); detailList.push(data[item]);
} }
} }
this.showSubList = true; this.bottomBox.showSubList = true;
this.tabList = labelList; this.tabList = labelList;
/*this.tabDetailList = detailList; /*this.tabDetailList = detailList;
this.targetTab = key;*/ this.bottomBox.targetTab = key;*/
} }
}, },
labelsClassName(row) { labelsClassName(row) {
@@ -675,17 +678,6 @@
return ""; return "";
} }
}, },
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
this.getAlertList(); this.getAlertList();
@@ -695,7 +687,7 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val); localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getAlertList(); this.getAlertList();
}, },
search: function (searchObj) { search(searchObj) {
let orderBy=''; let orderBy='';
if(this.searchLabel.orderBy){ if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy orderBy=this.searchLabel.orderBy
@@ -831,6 +823,10 @@
}, },
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -844,25 +840,19 @@
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", () => { el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) { if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true; this.tools.showTopBtn = true;
} else { } else {
this.showTopBtn = false; this.tools.showTopBtn = false;
} }
}); });
el.addEventListener("mouseenter", () => { el.addEventListener("mouseenter", () => {
this.tableHover = true; this.tools.tableHover = true;
}); });
el.addEventListener("mouseleave", () => { el.addEventListener("mouseleave", () => {
this.tableHover = false; this.tools.tableHover = false;
}); });
} }
}); });
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
} }
} }
</script> </script>

View File

@@ -20,7 +20,16 @@
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
class="nz-table" class="nz-table"
:height="mainTableHeight" :height="mainTableHeight"
@@ -37,7 +46,7 @@
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tools.tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col_${index}`" :key="`col_${index}`"
@@ -136,7 +145,7 @@
</el-table-column> </el-table-column>
<el-table-column width="28" fixed="right" :resizable="false"> <el-table-column width="28" fixed="right" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -160,16 +169,6 @@
<transition name="right-box"> <transition name="right-box">
<asset-box v-if="rightBox.show" :asset="asset" @refresh="flushData" ref="assetBox" @close="closeRightBox"></asset-box> <asset-box v-if="rightBox.show" :asset="asset" @refresh="flushData" ref="assetBox" @close="closeRightBox"></asset-box>
</transition> </transition>
<element-set
v-if="tools.showElementSet"
@close="elementsetHide"
v-clickoutside="elementsetHide"
:drop-col="tools.dropCol"
:table-title="tableTitle"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div> </div>
</template> </template>
@@ -208,10 +207,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
asset: {}, asset: {},
blankAsset: { blankAsset: {
@@ -362,14 +360,6 @@
} }
}, },
watch: { watch: {
currentDcListChange: {
deep: true,
immediate: true,
handler(n) {
this.pageObj.idcIds = n.join(",");
this.getTableData();
}
},
'bottomBox.showSubList': function(n) { 'bottomBox.showSubList': function(n) {
let vm = this; let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n); this.$bottomBoxWindow.showSubListWatch(vm, n);
@@ -399,51 +389,6 @@
let vm = this; let vm = this;
this.$bottomBoxWindow.listResize(vm, e); this.$bottomBoxWindow.listResize(vm, e);
}, },
dcSelectAll(val) { //DC全选
if (this.checkListData.length > 0) {
this.checkList = [];
if (val) {
for (let i = 0; i < this.checkListData.length; i++) {
this.checkList.push(this.checkListData[i].id);
this.$store.commit('assetItemIdChange',this.checkListData[i].id)
}
this.$store.commit('assetAllIdChange',this.checkListData)
}
}
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
cli([id,host,account]){ cli([id,host,account]){
const consoleParam = { const consoleParam = {
id: id, id: id,
@@ -718,13 +663,22 @@
}); });
} }
}, },
computed: {
currentDcListChange() {
return this.$store.state.currentDcList;
}
},
mounted() { mounted() {
//初始化表头
let tableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
if (this.assetPingSwitch == 'off') {
for (let i in tableTitle) {
let label = tableTitle[i];
if (label.prop == 'pingStatus') {
tableTitle.splice(i, 1);
break;
}
}
}
this.tools.customTableTitle = tableTitle;
//初始化数据 //初始化数据
this.getUserData(); this.getUserData();
this.getTableData(); this.getTableData();
@@ -759,23 +713,6 @@
el._ps_.update(); el._ps_.update();
}; };
}); });
let localStorageTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
this.tools.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
if (this.assetPingSwitch == 'off') {
for (let i in this.tools.tablelable) {
let label = this.tools.tablelable[i];
if (label.prop == 'pingStatus') {
this.tools.tablelable.splice(i, 1);
//console.log(this.tools.tablelable)
break;
}
}
}
this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
}, },
destroyed() { destroyed() {
window.onresize = null; window.onresize = null;

View File

@@ -22,6 +22,16 @@
<!-- 顶部分页组件当打开底部上滑框时出现 --> <!-- 顶部分页组件当打开底部上滑框时出现 -->
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
@@ -35,7 +45,7 @@
@sort-change="tableDataSort"> @sort-change="tableDataSort">
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tools.tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -74,7 +84,7 @@
</el-table-column> </el-table-column>
<el-table-column width="28"> <el-table-column width="28">
<template slot="header" slot-scope="scope" :resizable="false"> <template slot="header" slot-scope="scope" :resizable="false">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -95,15 +105,6 @@
<transition name="right-box"> <transition name="right-box">
<account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box> <account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
</transition> </transition>
<!-- 自定义table列 -->
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div> </div>
</template> </template>
<script> <script>
@@ -138,10 +139,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
mainTableHeight: this.$tableHeight.normal, //主列表table高度 mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -231,37 +231,6 @@
detail.push({label: this.$t("config.account.createTime"), value: obj.createTime}); detail.push({label: this.$t("config.account.createTime"), value: obj.createTime});
return detail; return detail;
}, },
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
closeRightBox(refresh) { closeRightBox(refresh) {
this.rightBox.show = false; this.rightBox.show = false;
if (refresh) { if (refresh) {
@@ -277,6 +246,22 @@
this.bottomBox.targetTab = "detail"; this.bottomBox.targetTab = "detail";
this.bottomBox.showSubList = true; this.bottomBox.showSubList = true;
}, },
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/user/delete?userIds=" + u.userId).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
getTableData() { getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
@@ -365,6 +350,10 @@
} }
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -391,12 +380,6 @@
}); });
} }
}); });
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
} }
} }
</script> </script>

View File

@@ -20,6 +20,16 @@
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
@@ -36,7 +46,7 @@
<el-table-column <el-table-column
:resizable="false" :resizable="false"
show-overflow-tooltip show-overflow-tooltip
v-for="(item, index) in tools.tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -46,8 +56,6 @@
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options"> <div v-if="item.prop == 'option'" class="content-right-options">
<!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;-->
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span> <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp; &nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span> <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
@@ -88,7 +96,7 @@
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -106,15 +114,6 @@
</transition> </transition>
</div> </div>
<!--dc table end--> <!--dc table end-->
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
<transition name="right-box"> <transition name="right-box">
<dc-box @close="closeDcBox" :dc="dc" :user-data="userData" @reload="getTableData" v-if="rightBox.dc.show"></dc-box> <dc-box @close="closeDcBox" :dc="dc" :user-data="userData" @reload="getTableData" v-if="rightBox.dc.show"></dc-box>
</transition> </transition>
@@ -152,10 +151,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
tableId: 'dcTable', //需要分页的table的id用于记录每页数量 tableId: 'dcTable', //需要分页的table的id用于记录每页数量
dc: {}, dc: {},
@@ -237,43 +235,12 @@
} }
}, },
methods: { methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
assetStatClassName(param) { assetStatClassName(param) {
if (param.column.label == this.$t("config.dc.assets")) { if (param.column.label == this.$t("config.dc.assets")) {
return "asset-state"; return "asset-state";
} }
return ""; return "";
}, },
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
jumpTo(data, id) { jumpTo(data, id) {
bus.$emit("menu-change", data); bus.$emit("menu-change", data);
this.$router.push({ this.$router.push({
@@ -368,7 +335,7 @@
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData(); this.getTableData();
this.$store.commit("dcListChange"); bus.$emit("dc-list-change");
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
@@ -484,6 +451,10 @@
window.onresize = null; window.onresize = null;
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -512,13 +483,6 @@
}; };
} }
}); });
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
} }
} }
</script> </script>

View File

@@ -25,8 +25,18 @@
</button> </button>
</div> </div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort"> <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''" <el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)" :key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)" :prop="propTitle(item.prop)"
:sort-orders="['ascending', 'descending']"> :sort-orders="['ascending', 'descending']">
@@ -76,7 +86,7 @@
</el-table-column> </el-table-column>
<el-table-column :resizable="false" width="28"> <el-table-column :resizable="false" width="28">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -88,14 +98,6 @@
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</template> </template>
<mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser> <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box"> <transition name="right-box">
<mib-box v-if="rightBox.show" ref="mibBox" :mib="mib" @reload="getTableData" @close="closeRightBox"></mib-box> <mib-box v-if="rightBox.show" ref="mibBox" :mib="mib" @reload="getTableData" @close="closeRightBox"></mib-box>
</transition> </transition>
@@ -120,10 +122,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
tableId: 'mibTable', //需要分页的table的id用于记录每页数量 tableId: 'mibTable', //需要分页的table的id用于记录每页数量
mib: {}, mib: {},
@@ -197,39 +198,6 @@
} }
}, },
methods: { methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
clickOutside() { clickOutside() {
this.rightBox.show = false; this.rightBox.show = false;
}, },
@@ -373,6 +341,10 @@
}, },
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -399,12 +371,6 @@
}); });
} }
}); });
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}, },
} }
</script> </script>

View File

@@ -19,6 +19,16 @@
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table :data="tableData" <el-table :data="tableData"
border style="width: 100%;" border style="width: 100%;"
ref="modelTable" ref="modelTable"
@@ -32,7 +42,7 @@
@sort-change="tableDataSort" @sort-change="tableDataSort"
> >
<el-table-column :resizable="false" <el-table-column :resizable="false"
v-for="(item, index) in tools.tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -66,7 +76,7 @@
</el-table-column> </el-table-column>
<el-table-column :resizable="false" width="28"> <el-table-column :resizable="false" width="28">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -83,14 +93,6 @@
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model" <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box> @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
</transition> </transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="tools.dropCol"
@tools.tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box"> <transition name="right-box">
<model-box v-if="rightBox.show" ref="modelBox" :model="model" @close="closeRightBox" @reload="getTableData"></model-box> <model-box v-if="rightBox.show" ref="modelBox" :model="model" @close="closeRightBox" @reload="getTableData"></model-box>
</transition> </transition>
@@ -120,10 +122,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
tableId: 'modelTable', //需要分页的table的id用于记录每页数量 tableId: 'modelTable', //需要分页的table的id用于记录每页数量
@@ -196,45 +197,12 @@
} }
}, },
methods: { methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
let eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
assetStatClassName(param) { assetStatClassName(param) {
if (param.column.label == this.$t("config.model.assets")) { if (param.column.label == this.$t("config.model.assets")) {
return "asset-state"; return "asset-state";
} }
return ""; return "";
}, },
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
panel(obj) { panel(obj) {
this.bottomBox.showSubList = true; this.bottomBox.showSubList = true;
this.bottomBox.model = obj; this.bottomBox.model = obj;
@@ -372,6 +340,10 @@
}, },
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -398,12 +370,6 @@
}); });
} }
}); });
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}, },
watch: { watch: {
'bottomBox.showSubList': function(n) { 'bottomBox.showSubList': function(n) {

View File

@@ -13,13 +13,23 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
border border
ref="operationLogTable" ref="operationLogTable"
:height="$tableHeight.normal" :height="$tableHeight.normal"
v-loading="loading" v-loading="tools.loading"
v-scrollBar:el-table="'large'" v-scrollBar:el-table="'large'"
:cell-class-name="messageStyle" :cell-class-name="messageStyle"
style="width: 100%;" style="width: 100%;"
@@ -27,7 +37,7 @@
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -45,23 +55,16 @@
</el-table-column> </el-table-column>
<el-table-column width="28"> <el-table-column width="28">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
<template v-slot="scope"> <template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button> <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div> </div>
</template> </template>
<script> <script>
@@ -70,16 +73,10 @@
name: "oparetionlog", name: "oparetionlog",
data() { data() {
return { return {
loading: false,
tableId: 'operationLogTable', //需要分页的table的id用于记录每页数量 tableId: 'operationLogTable', //需要分页的table的id用于记录每页数量
showTopBtn: false,
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
rightBox: { //弹出框相关 rightBox: { //弹出框相关
show: false, show: false,
isEdit: false, //false查看true编辑
title: ''
}, },
rightBoxResize: { //resize弹出框相关 rightBoxResize: { //resize弹出框相关
show: false, show: false,
@@ -96,6 +93,15 @@
isAdd: false, //falsetrueresize isAdd: false, //falsetrueresize
title: '' title: ''
}, },
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
pageObj: { pageObj: {
pageNo: 1, pageNo: 1,
pageSize: 50, pageSize: 50,
@@ -163,8 +169,6 @@
show: false, show: false,
}, },
], ],
tablelable: [],
dropCol: [],
tableData: [], tableData: [],
searchMsg: { //给搜索框子组件传递的信息 searchMsg: { //给搜索框子组件传递的信息
zheze_none: true, zheze_none: true,
@@ -194,36 +198,6 @@
} }
}, },
methods: { methods: {
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
messageStyle(e) { messageStyle(e) {
if (e.column.label == this.$t('config.operationlog.state')) { if (e.column.label == this.$t('config.operationlog.state')) {
if (e.row.state == 'success') { if (e.row.state == 'success') {
@@ -237,44 +211,15 @@
getTableData: function () { getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true; this.tools.loading = true;
this.$get('sys/log/list', this.searchLabel).then(response => { this.$get('sys/log/list', this.searchLabel).then(response => {
this.loading = false; this.tools.loading = false;
if (response.code === 200) { if (response.code === 200) {
// for (let i = 0; i < response.data.list.length; i++) {
// response.data.list[i].status = response.data.list[i].status + "";
// }
this.tableData = response.data.list; this.tableData = response.data.list;
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
} }
}) })
}, },
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
toEditReceiver: function (item) {
if (!item.isEdit) {
//如果不在编辑状态,那么其他项如果有改动,则还原改动,最后开始编辑
this.blurEditReceiver();
item.isEdit = true;
} else {
//如果已在编辑状态判断name是否有变更有变更则发请求
if (item.name != item.oldName) {
if (this.updateReceiverName(item) == 200) {
item.isEdit = false;
}
} else {
item.errorMessage = '';
item.isEdit = false;
}
}
},
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
this.getTableData(); this.getTableData();
@@ -349,6 +294,10 @@
} }
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize && pageSize != 'undefined') { if (pageSize && pageSize != 'undefined') {
@@ -362,25 +311,19 @@
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", () => { el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) { if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true; this.tools.showTopBtn = true;
} else { } else {
this.showTopBtn = false; this.tools.showTopBtn = false;
} }
}); });
el.addEventListener("mouseenter", () => { el.addEventListener("mouseenter", () => {
this.tableHover = true; this.tools.tableHover = true;
}); });
el.addEventListener("mouseleave", () => { el.addEventListener("mouseleave", () => {
this.tableHover = false; this.tools.tableHover = false;
}); });
} }
}); });
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
} }
} }
</script> </script>

View File

@@ -19,10 +19,20 @@
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;" <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
@sort-change="tableDataSort"> @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" <el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -57,7 +67,7 @@
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -77,14 +87,6 @@
<transition name="right-box"> <transition name="right-box">
<prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box> <prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
</transition> </transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div> </div>
</template> </template>
@@ -120,10 +122,9 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
tableId: 'promTable', //需要分页的table的id用于记录每页数量 tableId: 'promTable', //需要分页的table的id用于记录每页数量
@@ -252,37 +253,6 @@
}); });
return detail; return detail;
}, },
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
edit(u) { edit(u) {
this.promServer = JSON.parse(JSON.stringify(u)); this.promServer = JSON.parse(JSON.stringify(u));
this.rightBox.show = true; this.rightBox.show = true;
@@ -426,11 +396,15 @@
this.getTableData(); this.getTableData();
}, },
}, },
mounted: function () { mounted() {
//初始化数据 //初始化数据
Promise.all([this.getDcData()]).then(response => { Promise.all([this.getDcData()]).then(response => {
this.getTableData(); this.getTableData();
}); });
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) { if (pageSize != 'undefined' && pageSize != null) {
@@ -456,12 +430,6 @@
}); });
} }
}); });
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}, },
watch: { watch: {

View File

@@ -13,6 +13,16 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
@@ -20,13 +30,13 @@
ref="terminalLogTable" ref="terminalLogTable"
:height="$tableHeight.normal" :height="$tableHeight.normal"
v-scrollBar:el-table="'large'" v-scrollBar:el-table="'large'"
v-loading="loading" v-loading="tools.loading"
:cell-class-name="messageStyle" :cell-class-name="messageStyle"
style="width: 100%;" style="width: 100%;"
@sort-change="tableDataSort"> @sort-change="tableDataSort">
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -49,23 +59,16 @@
</el-table-column> </el-table-column>
<el-table-column width="28"> <el-table-column width="28">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
<template v-slot="scope"> <template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button> <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div> </div>
</template> </template>
<script> <script>
@@ -74,16 +77,22 @@
name: "terminallog", name: "terminallog",
data() { data() {
return { return {
loading: false,
tableId: 'terminalLogTable', //需要分页的table的id用于记录每页数量 tableId: 'terminalLogTable', //需要分页的table的id用于记录每页数量
showTopBtn: false,
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
rightBox: { //弹出框相关 rightBox: { //弹出框相关
show: false, show: false,
isEdit: false, //false查看true编辑 isEdit: false, //false查看true编辑
title: '' title: ''
}, },
rightBoxResize: { //resize弹出框相关 rightBoxResize: { //resize弹出框相关
show: false, show: false,
@@ -169,8 +178,6 @@
width: 100 width: 100
} }
], ],
tablelable: [],
dropCol: [],
tableData: [], tableData: [],
searchMsg: { //给搜索框子组件传递的信息 searchMsg: { //给搜索框子组件传递的信息
zheze_none: true, zheze_none: true,
@@ -213,42 +220,12 @@
} }
}, },
methods: { methods: {
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
getTableData: function () { getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true; this.tools.loading = true;
this.$get('terminal/log', this.searchLabel).then(response => { this.$get('terminal/log', this.searchLabel).then(response => {
this.loading = false; this.tools.loading = false;
if (response.code === 200) { if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) { for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ""; response.data.list[i].status = response.data.list[i].status + "";
@@ -258,15 +235,6 @@
} }
}) })
}, },
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
messageStyle(e) { messageStyle(e) {
if (e.column.label == this.$t('config.terminallog.status')) { if (e.column.label == this.$t('config.terminallog.status')) {
if (e.row.status == '1') { if (e.row.status == '1') {
@@ -277,23 +245,6 @@
} }
return ''; return '';
}, },
toEditReceiver: function (item) {
if (!item.isEdit) {
//如果不在编辑状态,那么其他项如果有改动,则还原改动,最后开始编辑
this.blurEditReceiver();
item.isEdit = true;
} else {
//如果已在编辑状态判断name是否有变更有变更则发请求
if (item.name != item.oldName) {
if (this.updateReceiverName(item) == 200) {
item.isEdit = false;
}
} else {
item.errorMessage = '';
item.isEdit = false;
}
}
},
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
this.getTableData(); this.getTableData();
@@ -360,14 +311,11 @@
this.getTableData(); this.getTableData();
}, },
}, },
computed: {
isCurrentUser() {
return function(username) {
return localStorage.getItem('nz-username') == username;
}
}
},
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize && pageSize != 'undefined') { if (pageSize && pageSize != 'undefined') {
@@ -381,25 +329,19 @@
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", () => { el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) { if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true; this.tools.showTopBtn = true;
} else { } else {
this.showTopBtn = false; this.tools.showTopBtn = false;
} }
}); });
el.addEventListener("mouseenter", () => { el.addEventListener("mouseenter", () => {
this.tableHover = true; this.tools.tableHover = true;
}); });
el.addEventListener("mouseleave", () => { el.addEventListener("mouseleave", () => {
this.tableHover = false; this.tools.tableHover = false;
}); });
} }
}); });
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
} }
} }
</script> </script>

View File

@@ -43,6 +43,16 @@
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table <el-table
:data="endpointTableData" :data="endpointTableData"
border border
@@ -57,7 +67,7 @@
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
v-for="(item, index) in tools.tablelable" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -100,7 +110,7 @@
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
</template> </template>
@@ -117,21 +127,12 @@
<template v-else-if="pageType == 'project'"> <template v-else-if="pageType == 'project'">
<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab> <panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
</template> </template>
<transition name="el-zoom-in-bottom"> <transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen" <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail" :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box> @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition> </transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="endpointTableTitle"
:drop-col="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box"> <transition name="right-box">
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box> <add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition> </transition>
@@ -180,23 +181,17 @@
loading: false, //是否显示table加载动画 loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现 tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮 showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header showCustomTableTitle: false, //自定义列弹框是否显示
dropCol: [], //自定义列工具的数据 customTableTitle: [], //自定义列工具的数据
}, },
tableId: 'projectTable', //需要分页的table的id用于记录每页数量 tableId: 'projectTable', //需要分页的table的id用于记录每页数量
endpoint:{
project:null,
module:null,
},
userData: [], userData: [],
endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []}, endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [ tableTitle: [
{ {
label: this.$t("project.endpoint.endpointId"), label: this.$t("project.endpoint.endpointId"),
prop: 'id', prop: 'id',
@@ -249,7 +244,6 @@
pageSize: 50, pageSize: 50,
total:0 total:0
}, },
endpoint: {},
currentProjectTitle:'', currentProjectTitle:'',
moduleList: [], moduleList: [],
@@ -294,36 +288,6 @@
let vm = this; let vm = this;
this.$bottomBoxWindow.listResize(vm, e); this.$bottomBoxWindow.listResize(vm, e);
}, },
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
},
elementsetHide() {
//悬浮点击空白隐藏
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
getEndpointTableData() { getEndpointTableData() {
if(this.currentModule && this.currentModule.id) { if(this.currentModule && this.currentModule.id) {
this.pageType = 'endpoint'; this.pageType = 'endpoint';
@@ -493,9 +457,6 @@
this.endpoint = Object.assign({}, endpoint); this.endpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = 'assetDetail'; this.bottomBox.targetTab = 'assetDetail';
this.bottomBox.showSubList = true; this.bottomBox.showSubList = true;
/*this.viewAssetState=true;
this.$refs.assetEditUnit.getAssetData(id);
this.$refs.assetEditUnit.tabView=true;*/
}, },
query(endpoint) { query(endpoint) {
this.endpoint = Object.assign({}, endpoint); this.endpoint = Object.assign({}, endpoint);
@@ -507,7 +468,6 @@
if(row.state == 1){ if(row.state == 1){
return 'up'; return 'up';
}else{ }else{
// return 'down'+'['+this.getStateErrorMsg(row)+']';
return `down:${this.getStateErrorMsg(row)}` return `down:${this.getStateErrorMsg(row)}`
} }
} }
@@ -647,6 +607,10 @@
this.getProjectList(); this.getProjectList();
}, },
mounted() { mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存 //是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize) { if (pageSize) {
@@ -663,13 +627,6 @@
window.onresize = function() { window.onresize = function() {
vm.$refs.leftScrollbar.update(); vm.$refs.leftScrollbar.update();
}; };
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
}, },
computed: { computed: {
itemTip() { itemTip() {

View File

@@ -34,7 +34,6 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件 import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
import assetBox from "./components/common/rightBox/assetBox"; //资产添加组件 import assetBox from "./components/common/rightBox/assetBox"; //资产添加组件
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件 import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框组件
import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件 import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件 import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件 import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
@@ -55,7 +54,6 @@ Vue.component("edit-endpoint-box", editEndpointBox);
Vue.component("add-endpoint-box", addEndpointBox); Vue.component("add-endpoint-box", addEndpointBox);
Vue.component("asset-box", assetBox); Vue.component("asset-box", assetBox);
Vue.component("alert-config-box", alertConfigBox); Vue.component("alert-config-box", alertConfigBox);
Vue.component("idc-config-box", dcConfigBox);
Vue.component("panel-box", panelBox); Vue.component("panel-box", panelBox);
Vue.component("module-list-pop", moduleListPop); Vue.component("module-list-pop", moduleListPop);
Vue.component("cabinet-config-box", cabinetConfigBox); Vue.component("cabinet-config-box", cabinetConfigBox);

View File

@@ -1,36 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
Vue.use(Vuex) Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
assetForAlertList: 0, //asset页跳转alertList时传递的assetId
assetItemId:'' , //复选框ID
assetAllId:[] , //复选框allID
dcList: 0, //监听此值改变则刷新dc列表
/* 监听对象变化,用于顶部菜单与底部内容的同步 */ /* 监听对象变化,用于顶部菜单与底部内容的同步 */
currentProject: {id: "", name: "", remark: ""}, currentProject: {id: "", name: "", remark: ""},
currentModule: {id: ""},
currentAsset: {id: ""},
currentDcList: [],
projectListChange: 0, projectListChange: 0,
moduleListChange: 0,
endpointListChange: 0,
assetListChange: 0,
dcListChange: 0,
alertConfigListChange: 0,
eventfixed: {
shezhi: 0,
screen: 0
},
tablelable: [], //获取头部信息
position: {
event_positiony: 0,
event_positionx: -200
},
showPanel:{ showPanel:{
id: 0, id: 0,
name: '', name: '',
@@ -52,54 +29,15 @@ const store = new Vuex.Store({
projectListChange(state) { projectListChange(state) {
state.projectListChange++; state.projectListChange++;
}, },
moduleListChange(state) {
state.moduleListChange++;
},
endpointListChange(state) {
state.endpointListChange++;
},
assetListChange(state) {
state.assetListChange++;
},
alertConfigListChange(state) {
state.alertConfigListChange++;
},
dcListChange(state) {
state.dcListChange++;
},
currentProjectChange(state, project) { currentProjectChange(state, project) {
state.currentProject = project; state.currentProject = project;
}, },
currentDcListChange(state, dcList) {
state.currentDcList = dcList;
},
currentAssetChange(state, asset) {
state.currentAsset = asset;
},
panelShowPanelChange(state, panel) { //用来panel页控制初始panel的 panelShowPanelChange(state, panel) { //用来panel页控制初始panel的
state.showPanel.id = panel.id; state.showPanel.id = panel.id;
state.showPanel.name = panel.name; state.showPanel.name = panel.name;
}, },
setHeaderTable(state, data) { //设置table头部
state.tablelable = data;
},
assetItemIdChange(state,data){ //修改复选框
state.assetItemId = data
},
assetAllIdChange(state,data){ //修改复选框
state.assetAllId = data
},
setEventfixed(state, data) { //设置坐标
state.eventfixed = data;
},
setPosition(state, data) { //设置坐标
state.position = data;
},
assetForAlertListChange(state, data) { //asset跳转alertmsg时
state.assetForAlertList = data;
},
openConsole(state) {//打开console如果当前窗口数为0则默认新建一个console openConsole(state) {//打开console如果当前窗口数为0则默认新建一个console
state.consoleShow = true; state.consoleShow = true;
if(state.consoleCount === 0){ if(state.consoleCount === 0){