TRKJ/profitManage1.2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

监控看板、脚本管理添加新字段、服务器脚本添加执行结果查看列表

Browse Source 
1、监控看板_前端开发并联调
2、脚本管理页面_前端开发并联调
3、服务器脚本模块执行结果查看_前端开发并联调
This commit is contained in:
康冉冉
2025-11-18 18:24:04 +08:00
parent 10c4dd9ef0
commit d6fde5d504
12 changed files with 274 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/table/index.vue
+44 -35
View File
@@ -25,7 +25,26 @@
</template>
</el-table-column>
<template v-for="(column, key, index) of columns">
<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">
<!-- 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">
<template #default="scope">
<el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
placement="top"
effect="dark"
popper-class="my-custom-tooltip">
<div slot="content" v-html="formatCellContent(scope.row[key])"></div>
<div :ref="`cell-${key}-${scope.row.id}`" class="cell-content">
{{ scope.row[key] }}
</div>
</el-tooltip>
</template>
</el-table-column>
</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">
<!-- 插槽 自定义列表表头数据格式 -->
<template #header v-if="column && column.slotHeaderName">
<span>{{column.label}}</span>
@@ -34,41 +53,20 @@
<i class="el-icon-question"></i>
</el-tooltip>
</template>
<!-- 单元格内容：自定义tooltip支持换行 -->
<template #default="scope">
<!-- 1. 有自定义插槽时，插槽内容仍用原逻辑，但包裹tooltip -->
<template v-if="column && column.slotName">
<el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
placement="top"
effect="dark">
<div slot="content" v-html="formatCellContent(scope.row[key])"></div>
<div :ref="`cell-${key}-${scope.row.id}`" class="cell-content">
<slot
:name="column.slotName"
:valueKey="key"
:row="scope.row"
:rowIndex="scope.$index"
:column="column"
:scope="scope"
></slot>
</div>
</el-tooltip>
</template>
<!-- 2. 无自定义插槽时，直接渲染内容+tooltip -->
<template v-else>
<el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
placement="top"
effect="dark">
<div slot="content" v-html="formatCellContent(scope.row[key])"></div>
<div :ref="`cell-${key}-${scope.row.id}`" class="cell-content">
{{ scope.row[key] }}
</div>
</el-tooltip>
</template>
<!-- 插槽 自定义列表内数据格式 -->
<template #default="scope" v-if="column && column.slotName">
<!-- 传递行数据、行索引等信息到父组件的插槽 -->
<slot
:name="column.slotName"
:valueKey="key"
:row="scope.row"
:rowIndex="scope.$index"
:column="column"
:scope="scope"
></slot>
</template>
</el-table-column>
</template>
</template>
<!-- 表格行内按钮 -->
<el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="calculateOperationColumnWidth(config.tableButton.line, tableList)" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
@@ -217,6 +215,9 @@
maxTotalWidth = currentLineWidth;
}
});
if (maxTotalWidth === 0) {
maxTotalWidth = 20;
}
// 加上单元格内边距
return Math.max(maxTotalWidth + 40); // 最小宽度120px
},
@@ -369,7 +370,6 @@
this.selectList = [];
this.ids = [];
if (tableInstance) {
console.log('rows===',rows);
if (rows && rows.length > 0) {
rows.forEach(row => {
tableInstance.toggleRowSelection(row, true);
@@ -439,3 +439,12 @@
line-height: 1.6; /* 调整行高，提升可读性 */
}
</style>
<style>
.my-custom-tooltip {
box-sizing: border-box !important;
max-height: 500px !important; /* 设置最大高度 */
overflow-y: auto !important; /* 内容超出时显示垂直滚动条 */
line-height: 1.5 !important; /* 设置行高，提升可读性 */
padding: 8px 12px !important; /* 设置内边距 */
}
</style>