项管首页
This commit is contained in:
347
ruoyi-ui/src/views/dpcProject/components/ProjectTable.vue
Normal file
347
ruoyi-ui/src/views/dpcProject/components/ProjectTable.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="project-table-container">
|
||||
<el-card class="table-card" shadow="hover">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dataList"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
|
||||
>
|
||||
<!-- 序号 -->
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
width="60"
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<!-- 项目名称 -->
|
||||
<el-table-column
|
||||
label="项目名称"
|
||||
min-width="160"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div class="project-name-cell">
|
||||
<div class="name">{{ scope.row.projectName }}</div>
|
||||
<div class="desc">{{ scope.row.projectDesc }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 创建时间 -->
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="110"
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<!-- 状态 -->
|
||||
<el-table-column
|
||||
label="状态"
|
||||
prop="projectStatus"
|
||||
width="90"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="getStatusType(scope.row.projectStatus)"
|
||||
size="medium"
|
||||
effect="plain"
|
||||
>
|
||||
{{ getStatusLabel(scope.row.projectStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 目标人数 -->
|
||||
<el-table-column
|
||||
label="目标人数"
|
||||
prop="targetCount"
|
||||
width="80"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="count-number">{{ scope.row.targetCount }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 预警人数 -->
|
||||
<el-table-column
|
||||
label="预警人数"
|
||||
width="90"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span :class="getWarningClass(scope.row)">{{ scope.row.warningCount }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作 -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="200"
|
||||
align="center"
|
||||
fixed="right"
|
||||
class-name="operation-column"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div class="operation-buttons">
|
||||
<!-- 进行中项目 -->
|
||||
<template v-if="scope.row.projectStatus === '0'">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-s-data"
|
||||
@click="handleEnter(scope.row)"
|
||||
>进入项目</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 已完成项目 -->
|
||||
<template v-else-if="scope.row.projectStatus === '1'">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleViewResult(scope.row)"
|
||||
>查看结果</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-refresh"
|
||||
@click="handleReAnalyze(scope.row)"
|
||||
>重新分析</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-folder"
|
||||
@click="handleArchive(scope.row)"
|
||||
>归档</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 已归档项目 -->
|
||||
<template v-else>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
@click="handleDetail(scope.row)"
|
||||
>查看详情</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page="pageParams.pageNum"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="pageParams.pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProjectTable',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
pageParams: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 获取状态类型 */
|
||||
getStatusType(status) {
|
||||
const statusMap = {
|
||||
'0': 'primary', // 进行中
|
||||
'1': 'success', // 已完成
|
||||
'2': 'info' // 已归档
|
||||
}
|
||||
return statusMap[status] || 'info'
|
||||
},
|
||||
/** 获取状态标签 */
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
'0': '进行中',
|
||||
'1': '已完成',
|
||||
'2': '已归档'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
},
|
||||
/** 获取预警数量样式类名 */
|
||||
getWarningClass(row) {
|
||||
if (row.warningCount > 20) return 'warning-high'
|
||||
if (row.warningCount > 10) return 'warning-medium'
|
||||
return 'warning-normal'
|
||||
},
|
||||
/** 进入项目 */
|
||||
handleEnter(row) {
|
||||
this.$emit('enter', row)
|
||||
},
|
||||
/** 查看详情 */
|
||||
handleDetail(row) {
|
||||
this.$emit('detail', row)
|
||||
},
|
||||
/** 查看结果 */
|
||||
handleViewResult(row) {
|
||||
this.$emit('view-result', row)
|
||||
},
|
||||
/** 重新分析 */
|
||||
handleReAnalyze(row) {
|
||||
this.$emit('re-analyze', row)
|
||||
},
|
||||
/** 归档 */
|
||||
handleArchive(row) {
|
||||
this.$emit('archive', row)
|
||||
},
|
||||
/** 分页大小变化 */
|
||||
handleSizeChange(val) {
|
||||
this.$emit('pagination', { pageSize: val, pageNum: 1 })
|
||||
},
|
||||
/** 当前页变化 */
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { pageNum: val })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.project-table-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EBEEF5;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.project-name-cell {
|
||||
.name {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.count-number {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.warning-count-cell {
|
||||
.warning-high {
|
||||
color: #F56C6C;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.warning-medium {
|
||||
color: #E6A23C;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.warning-normal {
|
||||
color: #67C23A;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
// 表格行样式优化
|
||||
:deep(.el-table) {
|
||||
.el-table__row {
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #dcdfe6;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 操作列样式
|
||||
.operation-column {
|
||||
.cell {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operation-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
|
||||
:deep(.el-button--mini) {
|
||||
padding: 4px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-button--mini .el-icon--left) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
:deep(.el-button + .el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user