wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改造流水明细详情弹窗并统一列表样式

Browse Source
This commit is contained in:
wkc
2026-03-11 15:08:36 +08:00
parent 0de248a039
commit d9f3165872
10 changed files with 472 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
View File

@@ -5,7 +5,6 @@
:data="dataList"
style="width: 100%"
>
<!-- 项目名称（含描述） -->
<el-table-column
label="项目名称"
min-width="180"
@@ -14,12 +13,11 @@
<template slot-scope="scope">
<div class="project-info-cell">
<div class="project-name">{{ scope.row.projectName }}</div>
<div class="project-desc">{{ scope.row.description || '暂无描述' }}</div>
<div class="project-desc">{{ scope.row.description || "暂无描述" }}</div>
</div>
</template>
</el-table-column>
<!-- 更新/创建时间 -->
<el-table-column
prop="updateTime"
label="更新/创建时间"
@@ -31,7 +29,6 @@
</template>
</el-table-column>
<!-- 创建人 -->
<el-table-column
prop="createByName"
label="创建人"
@@ -39,7 +36,6 @@
align="center"
/>
<!-- 状态 -->
<el-table-column
prop="status"
label="状态"
@@ -49,12 +45,11 @@
<template slot-scope="scope">
<div class="status-tag">
<span class="status-dot" :style="{ color: getStatusColor(scope.row.status) }">●</span>
<dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
<dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status" />
</div>
</template>
</el-table-column>
<!-- 目标人数 -->
<el-table-column
prop="targetCount"
label="目标人数"
@@ -62,7 +57,6 @@
align="center"
/>
<!-- 预警人数（带悬停详情） -->
<el-table-column
label="预警人数"
width="120"
@@ -71,26 +65,24 @@
<template slot-scope="scope">
<el-tooltip placement="top" effect="light">
<div slot="content">
<div style="padding: 8px;">
<div style="margin-bottom: 8px; font-weight: bold; color: #303133;">
风险人数统计
<div class="risk-tooltip">
<div class="risk-tooltip-title">风险人数统计</div>
<div class="risk-tooltip-item risk-tooltip-item--high">
<span>● 高风险：</span>
<span class="risk-tooltip-count">{{ scope.row.highRiskCount }} 人</span>
</div>
<div style="margin-bottom: 6px;">
<span style="color: #f56c6c;">● 高风险：</span>
<span style="font-weight: bold;">{{ scope.row.highRiskCount }} 人</span>
<div class="risk-tooltip-item risk-tooltip-item--medium">
<span>● 中风险：</span>
<span class="risk-tooltip-count">{{ scope.row.mediumRiskCount }} 人</span>
</div>
<div style="margin-bottom: 6px;">
<span style="color: #e6a23c;">● 中风险：</span>
<span style="font-weight: bold;">{{ scope.row.mediumRiskCount }} 人</span>
</div>
<div>
<span style="color: #909399;">● 低风险：</span>
<span style="font-weight: bold;">{{ scope.row.lowRiskCount }} 人</span>
<div class="risk-tooltip-item risk-tooltip-item--low">
<span>● 低风险：</span>
<span class="risk-tooltip-count">{{ scope.row.lowRiskCount }} 人</span>
</div>
</div>
</div>
<div class="warning-count-wrapper">
<span :class="getWarningClass(scope.row)" style="cursor: pointer;">
<span :class="getWarningClass(scope.row)" class="warning-count">
{{ scope.row.highRiskCount + scope.row.mediumRiskCount + scope.row.lowRiskCount }}
</span>
</div>
@@ -98,7 +90,6 @@
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column
label="操作"
width="350"
@@ -106,50 +97,56 @@
fixed="right"
>
<template slot-scope="scope">
<!-- 进行中状态 (status = '0') -->
<el-button
v-if="scope.row.status === '0'"
size="mini"
type="text"
icon="el-icon-right"
@click="handleEnter(scope.row)"
>进入项目</el-button>
>
进入项目
</el-button>
<!-- 已完成状态 (status = '1') -->
<template v-if="scope.row.status === '1'">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewResult(scope.row)"
>查看结果</el-button>
>
查看结果
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-refresh"
@click="handleReAnalyze(scope.row)"
>重新分析</el-button>
>
重新分析
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-folder"
@click="handleArchive(scope.row)"
>归档</el-button>
>
归档
</el-button>
</template>
<!-- 已归档状态 (status = '2') -->
<el-button
v-if="scope.row.status === '2'"
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewResult(scope.row)"
>查看结果</el-button>
>
查看结果
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-show="total > 0"
:current-page="pageParams.pageNum"
@@ -159,147 +156,89 @@
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 16px; text-align: right;"
style="margin-top: 16px; text-align: right"
/>
</div>
</template>
<script>
export default {
name: 'ProjectTable',
dicts: ['ccdi_project_status', 'ccdi_config_type'],
name: "ProjectTable",
dicts: ["ccdi_project_status", "ccdi_config_type"],
props: {
dataList: {
type: Array,
default: () => []
default: () => [],
},
loading: {
type: Boolean,
default: false
default: false,
},
total: {
type: Number,
default: 0
default: 0,
},
pageParams: {
type: Object,
default: () => ({
pageNum: 1,
pageSize: 10
})
}
pageSize: 10,
}),
},
},
methods: {
getStatusColor(status) {
const colorMap = {
'0': '#1890ff', // 进行中 - 蓝色
'1': '#52c41a', // 已完成 - 绿色
'2': '#8c8c8c' // 已归档 - 灰色
}
return colorMap[status] || '#8c8c8c'
0: "#1890ff",
1: "#52c41a",
2: "#8c8c8c",
};
return colorMap[status] || "#8c8c8c";
},
getWarningClass(row) {
const total = row.highRiskCount + row.mediumRiskCount + row.lowRiskCount
const total = row.highRiskCount + row.mediumRiskCount + row.lowRiskCount;
if (row.highRiskCount > 0) {
return 'text-danger text-bold'
} else if (row.mediumRiskCount > 0) {
return 'text-warning text-bold'
} else if (total > 0) {
return 'text-info'
return "text-danger text-bold";
}
return ''
if (row.mediumRiskCount > 0) {
return "text-warning text-bold";
}
if (total > 0) {
return "text-info";
}
return "";
},
handleEnter(row) {
this.$emit('enter', row)
this.$emit("enter", row);
},
handleViewResult(row) {
this.$emit('view-result', row)
this.$emit("view-result", row);
},
handleReAnalyze(row) {
this.$emit('re-analyze', row)
this.$emit("re-analyze", row);
},
handleArchive(row) {
this.$emit('archive', row)
this.$emit("archive", row);
},
handleSizeChange(val) {
this.$emit('pagination', { pageNum: this.pageParams.pageNum, pageSize: val })
this.$emit("pagination", {
pageNum: this.pageParams.pageNum,
pageSize: val,
});
},
handleCurrentChange(val) {
this.$emit('pagination', { pageNum: val, pageSize: this.pageParams.pageSize })
}
}
}
this.$emit("pagination", {
pageNum: val,
pageSize: this.pageParams.pageSize,
});
},
},
};
</script>
<style lang="scss" scoped>
.project-table-container {
margin-top: 16px;
// 表格整体样式 - 扁平化设计
::v-deep .el-table {
// 移除边框和卡片效果，设置透明背景
border: none !important;
background-color: transparent !important;
overflow: hidden;
// 表头样式 - 扁平化，无背景色
th.el-table__cell {
background-color: transparent !important;
color: #333;
font-weight: 600;
font-size: 14px;
height: 44px;
padding: 12px 10px;
// 只保留底部一条分隔线
border-bottom: 2px solid #e0e0e0 !important;
border-right: none !important;
}
// 数据行样式 - 增加留白，移除分隔线
td.el-table__cell {
color: #333;
font-size: 14px;
height: 48px;
padding: 12px 10px;
border-bottom: none !important;
border-right: none !important;
}
// 移除列分隔线
.el-table__body-wrapper {
.cell {
border-right: none;
}
}
// 悬停效果
.el-table__row {
transition: background-color 0.2s ease;
&:hover > td.el-table__cell {
background-color: #fafafa !important;
}
}
// 移除额外边框
&::before,
&::after {
display: none !important;
}
// 移除 inner border
.el-table__inner-wrapper::before {
display: none !important;
}
}
}
.status-tag {
@@ -336,10 +275,44 @@ export default {
}
}
.risk-tooltip {
padding: 8px;
}
.risk-tooltip-title {
margin-bottom: 8px;
font-weight: 600;
color: #303133;
}
.risk-tooltip-item {
margin-bottom: 6px;
}
.risk-tooltip-item--high {
color: #f56c6c;
}
.risk-tooltip-item--medium {
color: #e6a23c;
}
.risk-tooltip-item--low {
color: #909399;
}
.risk-tooltip-count {
font-weight: 600;
}
.warning-count-wrapper {
display: inline-block;
}
.warning-count {
cursor: pointer;
}
.text-danger {
color: #f56c6c;
}
@@ -353,10 +326,9 @@ export default {
}
.text-bold {
font-weight: bold;
font-weight: 700;
}
// 操作按钮样式 - Material Design 风格
::v-deep .el-button--text {
color: #1890ff;
padding: 8px 12px;
@@ -373,18 +345,15 @@ export default {
padding-left: 0;
}
// 按钮间距
& + .el-button--text {
margin-left: 4px;
}
}
// 分页样式优化 - Material Design 风格
::v-deep .el-pagination {
margin-top: 24px;
text-align: right;
// 扁平化按钮
.btn-prev,
.btn-next,
.el-pager li {
@@ -398,7 +367,7 @@ export default {
.el-pager li.active {
background-color: #1890ff;
color: white;
color: #fff;
border-radius: 4px;
}