table列表操作处按钮添加按钮样式效果、服务器管理详情

1、table列表操作处按钮添加按钮样式效果
2、服务器管理图形监控和详情按钮权限修改
3、服务器管理详情网卡信息和虚拟网卡信息的form表单改为table列表
4、服务器管理详情流量图切换单双列优化、添加定时刷新功能
This commit is contained in:
康冉冉
2026-01-08 18:23:46 +08:00
parent 6f96bdc406
commit c6eced0841
42 changed files with 405 additions and 226 deletions
+5
View File
@@ -106,6 +106,11 @@
delete window.detailsVal;
},
methods: {
resizeChart() {
if (this.lineDataListIntance) {
this.lineDataListIntance.resize();
}
},
getList(title, dataXY) {
let that = this;
if (that.lineDataListIntance) {
+8 -5
View File
@@ -105,7 +105,7 @@
<template v-for="item of config.tableButton.line">
<template v-if="item && item.more && item.more.length > 0 && checkPermi(item.hasPermi)">
<el-dropdown size="mini" trigger="click" @command="(command) => handleClick({fnCode: command}, scope.row)">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"><span style="margin-left: -5px;">{{item && item.title ? item.title : '更多'}}</span></el-button>
<el-button size="mini" type="primary" plain icon="el-icon-d-arrow-right"><span style="margin-left: -5px;">{{item && item.title ? item.title : '更多'}}</span></el-button>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" :hasPermi="[dropBut.hasPermi]">{{dropBut.content}}</el-dropdown-item>-->
<el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" v-show="dropBut && dropBut.showName ? dropBut.showVal.includes(scope.row[dropBut.showName]) : true" v-if="checkPermi([dropBut.hasPermi])">{{dropBut.content}}</el-dropdown-item>
@@ -115,7 +115,7 @@
<template v-else>
<!-- <el-tooltip v-if="item && item.content" :content="item.content" placement="top">-->
<template v-if="item && item.content">
<el-button size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="item && item.hasPermi ? checkPermi([item.hasPermi]) : true">{{item.content}}</el-button>
<el-button size="mini" plain link :type="item.type || 'primary'" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="item && item.hasPermi ? checkPermi([item.hasPermi]) : true">{{item.content}}</el-button>
</template>
<!-- <el-button v-if="item && item.content" size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>-->
<!-- </el-tooltip>-->
@@ -207,7 +207,7 @@
},
created() {
if (!(this.config && this.config.colTopHiddenIcon)) {
this.$modal.loading();
// this.$modal.loading();
}
},
methods: {
@@ -246,8 +246,8 @@
buttonConfigs.forEach(config => {
// 判断按钮是否显示
if (this.isButtonVisible(config, row)) {
// 12是图标的宽度
const btnWidth = this.calculateButtonWidth(config) + 14;
// 12是图标的宽度 8是按钮padding宽度
const btnWidth = this.calculateButtonWidth(config) + 14 + 8;
currentLineWidth += btnWidth;
visibleButtonCount++;
}
@@ -507,6 +507,9 @@
text-overflow: ellipsis; /* 溢出显示... */
word-break: keep-all; /* 避免英文单词截断 */
}
::v-deep .el-table .fixed-width .el-button--mini {
padding: 4px!important;
}
/* 自定义tooltip样式:支持换行+限制宽度 */
::v-deep .el-tooltip__popper {