图形监控添加IPv4和IPv6的流量图、服务器管理列表和表单添加新字段、列表字段直接修改功能

1、服务器管理列表和表单添加新字段、列表字段直接修改功能
2、服务器管理列表添加默认选中且不可修改字段、列表增加排序功能
3、图形监控添加IPv4和IPv6的流量图
4、交换机管理和服务器管理列表设置不刷新缓存
This commit is contained in:
康冉冉
2025-12-05 18:45:26 +08:00
parent c949b89aa8
commit 17d61dbe43
11 changed files with 257 additions and 45 deletions
+52 -3
View File
@@ -10,7 +10,7 @@
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :modelIdent="this.modelIdent" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
</el-row>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" :highlight-current-row="config && config.currentSel || false" @current-change="(val) => handleClick({fnCode: 'currentData'},val)" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange">
<el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" :highlight-current-row="config && config.currentSel || false" @current-change="(val) => handleClick({fnCode: 'currentData'},val)" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange" @sort-change="handleSortChange">
<!-- :selectable="() => config && config.selectable ? false : true" -->
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
<!-- 展开列内容 -->
@@ -27,7 +27,7 @@
<template v-for="(column, key, index) of columns">
<!-- customTooltip:true 自定义tooltip 展示 -->
<template v-if="column.customTooltip">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
<template #default="scope">
<el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
@@ -44,7 +44,7 @@
</template>
<!-- 原tooltip展示逻辑 -->
<template v-else>
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
<!-- 插槽 自定义列表表头数据格式 -->
<template #header v-if="column && column.slotHeaderName">
<span>{{column.label}}</span>
@@ -419,6 +419,52 @@
}
this.tableKey++;
},
// 排序发生变化时
handleSortChange({column, prop, order}) {
let sortType = 3;
if (order === 'ascending') {
sortType = 1;
} else if (order === 'descending') {
sortType = 2;
}
this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
},
// 排序图标替换
renderHeader(h, { column, $index }) {
if (column && column.sortable) {
if (column.order === 'ascending') {
// 升序图标
return (
<div style="display: flex; align-items: center;">
<span>{column.label}</span>
<i class="el-icon-sort-down" style="margin-left: 2px;font-weight: 700;color: #c0c4cc;"></i>
<i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;font-weight: 700;"></i>
</div>
);
} else if (column.order === 'descending') {
// 降序图标
return (
<div style="display: flex; align-items: center;">
<span>{column.label}</span>
<i class="el-icon-sort-down" style="color: #409EFF; margin-left: 2px;font-weight: 700;"></i>
<i class="el-icon-sort-up" style="margin-left: -8px;font-weight: 700;color: #c0c4cc;"></i>
</div>
);
} else {
// 默认状态(无序)
return (
<div style="display: flex; align-items: center;">
<span>{column.label}</span>
<i class="el-icon-sort" style="color: #C0C4CC; margin-left: 4px;font-weight: 700;"></i>
</div>
);
}
}
return h('div', [
h('span', column.label), // 标题文本
// h('i', { class: iconClass }) // 排序图标
]);
},
}
}
</script>
@@ -438,6 +484,9 @@
white-space: normal; /* 允许自动换行 */
line-height: 1.6; /* 调整行高,提升可读性 */
}
::v-deep .caret-wrapper {
display: none !important;
}
</style>
<style>
.my-custom-tooltip {