yili/vue-apps
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一个流程对应多个角色图的检测功能增强，查询角色图是否有相关

Browse Source
This commit is contained in:
446052889@qq.com 2025-04-18 10:19:50 +08:00
parent 91c08d3194
commit c8e8aabfe8
1 changed files with 166 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
com.actionsoft.apps.coe.pal.datamigration/src/components/role-error-change.vue
View File

@ -204,8 +204,8 @@
<el-table <el-table
v-loading="roleMultiError.loading" v-loading="roleMultiError.loading"
:data="roleMultiError.list" :data="roleMultiError.list"
stripe
height="650" height="650"
:row-style="getRowStyle"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="no" prop="no"
@ -236,9 +236,108 @@
width="180"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="roleVersion" prop="activeRelationCount"
label="版本号" label="关联了..."
width="50"> width="50">
<template #default="scope">
<template v-if="scope.row.activeRelationCount > 0">
<el-popover
trigger="hover"
placement="top"
width="500px"
>
<!-- 关联模型标题 -->
<div class="popover-section-title">关联了其他模型</div>
<!-- 表格容器（带滚动条） -->
<div class="popover-table-container">
<table class="popover-table">
<thead>
<tr>
<th>当前角色节点</th>
<th>模型名称</th>
<th>节点名称</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in scope.row.activeRelationList"
:key="item.id"
>
<td>{{ item.currShapeName }}</td>
<td>{{ item.modelName }}</td>
<td>{{ item.shapeName }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 触发元素（显示关联数量） -->
<template #reference>
<el-tag
size="medium"
type="info"
>
{{ scope.row.activeRelationCount }}
</el-tag>
</template>
</el-popover>
</template>
<template v-else>
<span class="zero-count">0</span>
</template>
</template>
</el-table-column>
<el-table-column
prop="passiveRelationCount"
label="被...关联"
width="50">
<template #default="scope">
<template v-if="scope.row.passiveRelationCount > 0">
<el-popover
trigger="hover"
placement="top"
width="600px"
>
<!-- 关联模型标题 -->
<div class="popover-section-title">被其他模型关联</div>
<!-- 表格容器（带滚动条） -->
<div class="popover-table-container">
<table class="popover-table">
<thead>
<tr>
<th>当前角色节点</th>
<th>模型名称</th>
<th>节点名称</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in scope.row.passiveRelationList"
:key="item.id"
>
<td>{{ item.currShapeName }}</td>
<td>{{ item.modelName }}</td>
<td>{{ item.shapeName }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 触发元素（显示关联数量） -->
<template #reference>
<el-tag
size="medium"
type="info"
>
{{ scope.row.passiveRelationCount }}
</el-tag>
</template>
</el-popover>
</template>
<span v-else class="zero-count">0</span>
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="roleId" prop="roleId"
@ -248,6 +347,22 @@
prop="roleVersionId" prop="roleVersionId"
label="角色版本ID"> label="角色版本ID">
</el-table-column> </el-table-column>
<el-table-column
prop="createUser"
label="创建人">
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间">
</el-table-column>
<el-table-column
prop="updateUser"
label="修改人">
</el-table-column>
<el-table-column
prop="updateTime"
label="修改时间">
</el-table-column>
</el-table> </el-table>
</div> </div>
</el-tab-pane> </el-tab-pane>
@ -763,6 +878,21 @@ export default defineComponent({
that.roleMultiError.list = ''; that.roleMultiError.list = '';
that.roleMultiError.desc = ''; that.roleMultiError.desc = '';
} }
const getRowStyle = ({row}) => {
return {
backgroundColor: row.color,
color: $this.getTextColor(row.color), // 自动适配文字颜色
};
}
const getTextColor = (bgColor) => {
if (!bgColor) return "#f00";
const hex = bgColor.replace("#", "");
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 128 ? "#000" : "#fff";
}
return { return {
tabs, tabs,
roleVersionIdError, roleVersionIdError,
@ -793,13 +923,45 @@ export default defineComponent({
checkErrorVerModel, checkErrorVerModel,
updateErrorVerModel, updateErrorVerModel,
checkErrorMultiModel, checkErrorMultiModel,
updateErrorMultiModel updateErrorMultiModel,
getRowStyle,
getTextColor
} }
} }
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.el-table__row {
background-color: inherit !important;
}
.popover-table-container {
max-height: 280px; /* 限制高度 */
overflow-y: auto; /* 内容过多时显示滚动条 */
margin: 10px 0; /* 增加外边距 */
}
.popover-table {
width: 100%;
border-collapse: collapse;
}
.popover-table th,
.popover-table td {
padding: 10px 12px;
border-bottom: 1px solid #ebeef5;
text-align: left;
}
.popover-table th {
background-color: #f5f7fa; /* 表头背景色 */
font-weight: bold;
}
.popover-section-title {
font-weight: bold;
margin-bottom: 8px;
}
.zero-count {
color: #999;
font-size: 14px;
}
.data-migration { .data-migration {
width: 100%; width: 100%;
height: 100%; height: 100%;