DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(项目看板): 新增项目综合看板功能

Browse Source 
新增项目综合看板功能，聚合展示项目、任务、进度主表和步骤数据
- 新增后端聚合接口 GET /oa/project/dashboard/{projectId}
- 新增前端看板页面，包含项目列表、任务表格和进度导图
- 优化思维导图组件，支持看板模式下的紧凑展示
- 新增进度明细表格视图和状态图例
- 实现任务与进度步骤的关联展示
- 添加项目模糊搜索功能
This commit is contained in:
王文昊
2026-04-15 17:19:56 +08:00
parent 5d4794c9bd
commit 50f3f15f48
24 changed files with 1623 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

894
ruoyi-ui/src/views/oa/project/dashboard2/index.vue Normal file
View File

@@ -0,0 +1,894 @@
<!--
前端路径：d:\RuoYI_workspace\fad_oa\ruoyi-ui\src\views\oa\project\dashboard2\index.vue
后端聚合接口：GET /oa/project/dashboard/{projectId}
-->
<template>
<div class="app-container dashboard2" v-loading="pageLoading">
<div class="layout">
<!-- 左侧 20%：项目列表 -->
<div class="left">
<div class="left-search">
<el-input
v-model="projectQuery.keyword"
size="small"
clearable
placeholder="名称 / 编号 / 代号"
class="left-keyword-input"
prefix-icon="el-icon-search"
@keyup.enter.native="getProjectList"
/>
<el-button type="primary" size="small" class="left-search-btn" @click="getProjectList">搜索</el-button>
</div>
<div class="project-list" v-loading="projectLoading">
<div
v-for="p in projectList"
:key="p.projectId"
class="project-item"
:class="{ active: String(p.projectId) === String(currentProjectId) }"
@click="handleSelectProject(p)"
:title="p.projectName"
>
<div class="project-name text-ellipsis">{{ p.projectName }}</div>
<div class="project-meta text-ellipsis">
<span v-if="p.projectCode" class="code">{{ p.projectCode }}</span>
<span class="time">{{ formatDate(p.beginTime) }} ~ {{ formatDate(p.finishTime) }}</span>
</div>
</div>
<div v-if="!projectList || projectList.length === 0" class="left-empty">
<el-empty :image-size="72" description="暂无项目"></el-empty>
</div>
</div>
<div class="left-pager">
<el-pagination
small
background
layout="total, prev, pager, next"
:total="projectTotal"
:current-page.sync="projectQuery.pageNum"
:page-size.sync="projectQuery.pageSize"
@current-change="getProjectList"
/>
</div>
</div>
<!-- 右侧 80% -->
<div class="right">
<div v-if="!currentProjectId" class="right-empty">
<el-empty description="请选择项目"></el-empty>
</div>
<template v-else>
<div class="panel task-panel">
<div class="panel-header task-panel__toolbar">
<div class="toolbar">
<el-input
v-model="taskQuery.projectCode"
size="small"
clearable
placeholder="项目代号"
style="width: 140px"
/>
<el-input
v-model="taskQuery.taskKeyword"
size="small"
clearable
placeholder="任务主题关键词"
style="width: 160px"
@keyup.enter.native="resetTaskPage"
/>
<el-button type="primary" size="mini" @click="resetTaskPage">搜索</el-button>
<el-button size="mini" @click="resetTaskFilters">重置</el-button>
<el-button size="mini" @click="refreshCurrent">刷新</el-button>
</div>
</div>
<div class="panel-body panel-body-flex">
<div class="task-table-wrap">
<vxe-table
ref="taskTable"
size="mini"
class="task-vxe"
border
stripe
show-overflow="tooltip"
height="auto"
:data="pagedTaskList"
:row-config="{ isHover: true }"
>
<vxe-column field="projectCode" title="代号" width="72"></vxe-column>
<vxe-column field="taskTitle" title="任务主题" min-width="96"></vxe-column>
<vxe-column field="scheduleProgress" title="对应进度" min-width="112">
<template #default="{ row }">
<div v-if="scheduleProgressUnlinked(row)" class="schedule-progress-wrap">
<el-tag type="info" effect="plain" size="mini">未关联进度</el-tag>
</div>
<div
v-else
class="schedule-progress-wrap schedule-progress-wrap--linked"
:title="scheduleProgressTitle(row)"
>
<el-tag :type="scheduleStepTagType(row)" size="mini" class="schedule-progress-status-tag">
{{ scheduleStepStatusLabel(row) }}
</el-tag>
<span class="schedule-progress-path">{{ scheduleProgressPath(row) }}</span>
</div>
</template>
</vxe-column>
<vxe-column field="taskType" title="工作类型" width="86">
<template #default="{ row }">
<dict-tag :options="dict.type.sys_work_type" :value="row.taskType" />
</template>
</vxe-column>
<vxe-column field="taskGrade" title="任务级别" width="78">
<template #default="{ row }">
<dict-tag :options="dict.type.sys_sort_grade" :value="row.taskGrade" />
</template>
</vxe-column>
<vxe-column field="workerNickName" title="执行人" width="76">
<template #default="{ row }">{{ row.workerNickName || '-' }}</template>
</vxe-column>
<vxe-column field="createUserNickName" title="创建人" width="76">
<template #default="{ row }">{{ row.createUserNickName || '-' }}</template>
</vxe-column>
<vxe-column field="state" title="状态" width="88">
<template #default="{ row }">
<el-tag :type="getStateTagType(row.state)" size="mini">{{ stateText(row.state) }}</el-tag>
</template>
</vxe-column>
<vxe-column field="finishTime" title="预期结束" width="100">
<template #default="{ row }">{{ formatDate(row.finishTime) }}</template>
</vxe-column>
</vxe-table>
</div>
<div class="task-pager">
<el-pagination
small
background
layout="total, prev, pager, next"
:total="filteredTaskTotal"
:current-page.sync="taskQuery.pageNum"
:page-size.sync="taskQuery.pageSize"
@current-change="noop"
/>
</div>
</div>
</div>
<!-- 下：进度板块 — Tab1 进度明细表（默认）；Tab2 原思维导图 + 图例 -->
<div class="panel schedule-panel">
<el-tabs v-model="scheduleViewTab" class="schedule-panel-tabs">
<el-tab-pane label="进度明细" name="list">
<!-- 进度数据：表格自然撑开高度，由 .progress-table-scroll 单独承担纵向/横向滚动 -->
<div class="progress-table-pane" v-loading="xmindLoading">
<el-empty
v-if="!stepList || stepList.length === 0"
:image-size="72"
description="暂无进度步骤数据"
/>
<div v-else class="progress-table-scroll">
<el-table
:data="scheduleStepsForTable"
size="mini"
border
stripe
class="progress-step-el-table"
>
<el-table-column prop="firstLevelNode" label="一级节点" min-width="112" show-overflow-tooltip />
<el-table-column prop="secondLevelNode" label="二级节点" min-width="112" show-overflow-tooltip />
<el-table-column prop="stepName" label="步骤名称" min-width="128" show-overflow-tooltip />
<el-table-column label="状态" width="92" align="center">
<template slot-scope="{ row }">
<el-tag :type="stepStatusTagType(row)" size="mini">{{ stepStatusLabel(row) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="计划开始" width="108" align="center">
<template slot-scope="{ row }">{{ formatStepPlanStart(row) }}</template>
</el-table-column>
<el-table-column label="计划结束" width="108" align="center">
<template slot-scope="{ row }">{{ formatStepPlanEnd(row) }}</template>
</el-table-column>
<el-table-column label="负责人" min-width="96" show-overflow-tooltip>
<template slot-scope="{ row }">{{ formatStepResponsible(row) }}</template>
</el-table-column>
</el-table>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="进度导图" name="mind">
<div class="schedule-tab-pane-inner schedule-tab-pane-inner--mind">
<div class="schedule-mind">
<div class="xmind-wrap" v-loading="xmindLoading">
<div v-if="xmindEmpty" class="xmind-empty">
<el-empty :image-size="80" description="暂无进度步骤数据"></el-empty>
</div>
<xmind
v-else-if="scheduleViewTab === 'mind'"
:list="stepList"
height="100%"
dashboard-mode
@refresh="onXmindRefresh"
/>
</div>
<aside v-if="scheduleViewTab === 'mind' && !xmindEmpty && stepList && stepList.length" class="mind-legend-aside">
<div class="mind-legend-title">状态图例</div>
<div class="mind-legend-row">
<i class="lg-dot lg-dot--done" />
<span>已完成</span>
</div>
<div class="mind-legend-row">
<i class="lg-dot lg-dot--doing" />
<span>进行中 / 待验收</span>
</div>
<div class="mind-legend-row">
<i class="lg-dot lg-dot--todo" />
<span>未开始 / 暂停</span>
</div>
<p class="mind-legend-tip">连线：已完成节点为绿色；可滚轮缩放、拖动画布。</p>
</aside>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Xmind from '@/views/oa/project/pace/components/xmind.vue'
export default {
name: 'OaProjectDashboard2',
components: { Xmind },
dicts: ['sys_work_type', 'sys_sort_grade'],
data () {
return {
pageLoading: false,
projectLoading: false,
xmindLoading: false,
/** 进度板块：默认进度明细表，切换为进度导图（原思维导图） */
scheduleViewTab: 'list'
}
},
computed: {
...mapState('oaProjectDashboard2', [
'currentProjectId',
'projectQuery',
'projectList',
'projectTotal',
'taskQuery',
'taskList',
'stepList'
]),
filteredTaskList () {
const list = this.taskList || []
const code = (this.taskQuery.projectCode || '').trim().toLowerCase()
const kw = (this.taskQuery.taskKeyword || '').trim().toLowerCase()
return list.filter(r => {
const okCode = !code || String(r.projectCode || '').toLowerCase().indexOf(code) !== -1
const title = String(r.taskTitle || '').toLowerCase()
const okKw = !kw || title.indexOf(kw) !== -1
return okCode && okKw
})
},
filteredTaskTotal () {
return (this.filteredTaskList || []).length
},
pagedTaskList () {
const pageNum = Number(this.taskQuery.pageNum || 1)
const pageSize = Number(this.taskQuery.pageSize || 10)
const start = (pageNum - 1) * pageSize
return (this.filteredTaskList || []).slice(start, start + pageSize)
},
xmindEmpty () {
return !this.stepList || this.stepList.length === 0
},
/** 进度明细表：按步骤序号排序，便于阅读 */
scheduleStepsForTable () {
const list = this.stepList || []
return [...list].sort((a, b) => {
const oa = Number(a.stepOrder != null ? a.stepOrder : 0)
const ob = Number(b.stepOrder != null ? b.stepOrder : 0)
return oa - ob
})
}
},
created () {
this.getProjectList()
},
methods: {
async getProjectList () {
this.projectLoading = true
try {
await this.$store.dispatch('oaProjectDashboard2/fetchProjectList', {
pageNum: this.projectQuery.pageNum,
pageSize: this.projectQuery.pageSize,
keyword: this.projectQuery.keyword
})
} catch (e) {
this.$message.error('项目列表加载失败，请稍后重试')
} finally {
this.projectLoading = false
}
},
async handleSelectProject (p) {
const projectId = p && p.projectId
if (!projectId) return
this.scheduleViewTab = 'list'
this.pageLoading = true
this.xmindLoading = true
try {
this.$store.commit('oaProjectDashboard2/SET_TASK_QUERY', { pageNum: 1 })
await this.$store.dispatch('oaProjectDashboard2/selectProject', projectId)
} catch (e) {
this.$message.error((e && e.message) || '加载项目数据失败，请稍后重试')
} finally {
this.pageLoading = false
this.xmindLoading = false
}
},
resetTaskPage () {
this.$store.commit('oaProjectDashboard2/SET_TASK_QUERY', { pageNum: 1 })
},
resetTaskFilters () {
this.$store.commit('oaProjectDashboard2/SET_TASK_QUERY', {
pageNum: 1,
pageSize: 10,
projectCode: '',
taskKeyword: ''
})
},
async refreshCurrent () {
if (!this.currentProjectId) return
this.pageLoading = true
this.xmindLoading = true
try {
await this.$store.dispatch('oaProjectDashboard2/selectProject', this.currentProjectId)
} catch (e) {
this.$message.error('刷新失败，请稍后重试')
} finally {
this.pageLoading = false
this.xmindLoading = false
}
},
/** 计划开始：库表 plan_start 可能为空，与进度页一致回退 start_time */
formatStepPlanStart (row) {
const raw = row && (row.planStart != null && row.planStart !== '' ? row.planStart : row.startTime)
return this.formatDateFlexible(raw)
},
formatStepPlanEnd (row) {
const raw = row && (row.planEnd != null && row.planEnd !== '' ? row.planEnd : row.endTime)
return this.formatDateFlexible(raw)
},
formatDateFlexible (val) {
if (val == null || val === '') return '-'
if (Array.isArray(val) && val.length >= 3) {
const y = val[0]
const mo = String(val[1]).padStart(2, '0')
const d = String(val[2]).padStart(2, '0')
return `${y}-${mo}-${d}`
}
if (typeof val === 'string') {
const s = val.trim()
if (!s) return '-'
if (s.length >= 10 && s[4] === '-' && s[7] === '-') return s.substring(0, 10)
const m = s.match(/^(\d{4}-\d{2}-\d{2})/)
return m ? m[1] : s
}
if (val instanceof Date && !isNaN(val.getTime())) {
const y = val.getFullYear()
const mo = String(val.getMonth() + 1).padStart(2, '0')
const d = String(val.getDate()).padStart(2, '0')
return `${y}-${mo}-${d}`
}
return '-'
},
/** 负责人：业务侧常用 node_header，兼容 header */
formatStepResponsible (row) {
if (!row) return '-'
const h = row.header != null && String(row.header).trim() !== '' ? String(row.header).trim() : ''
if (h) return h
const n = row.nodeHeader != null && String(row.nodeHeader).trim() !== '' ? String(row.nodeHeader).trim() : ''
return n || '-'
},
async onXmindRefresh () {
await this.refreshCurrent()
},
noop () {},
/** 无 track_id 或无步骤名称 → 未关联（后端联表 oa_project_schedule_step，use_flag=1） */
scheduleProgressUnlinked (row) {
if (!row || row.trackId == null || row.trackId === '') return true
const n = row.scheduleStepName
return n == null || String(n).trim() === ''
},
scheduleStepTagType (row) {
const s = row && row.scheduleStatus
if (s === null || s === undefined) return 'info'
const v = Number(s)
if (v === 2) return 'success'
if (v === 3) return 'warning'
if (v === 1) return 'primary'
if (v === 0) return 'info'
return 'info'
},
scheduleStepStatusLabel (row) {
const s = row && row.scheduleStatus
if (s === null || s === undefined) return '—'
const v = Number(s)
if (v === 2) return '已完成'
if (v === 1) return '进行中'
if (v === 3) return '暂停'
if (v === 0) return '未开始'
return '—'
},
scheduleProgressPath (row) {
if (!row) return ''
const n = row.scheduleStepName
return (n != null && String(n).trim() !== '') ? String(n).trim() : ''
},
scheduleProgressTitle (row) {
return `${this.scheduleStepStatusLabel(row)} ${this.scheduleProgressPath(row)}`.trim()
},
/** oa_project_schedule_step.status：与任务表「对应进度」标签一致 */
stepStatusLabel (row) {
return this.scheduleStepStatusLabel({ scheduleStatus: row && row.status })
},
stepStatusTagType (row) {
return this.scheduleStepTagType({ scheduleStatus: row && row.status })
},
formatDate (val) {
if (!val) return '-'
const s = String(val)
return s.length >= 10 ? s.substring(0, 10) : s
},
stateText (val) {
if (val === null || val === undefined || val === '') return '-'
const v = Number(val)
if (v === 2) return '执行完成'
if (v === 1) return '待验收'
if (v === 15) return '延期申请中'
if (v === 0) return '进行中'
return '其他'
},
getStateTagType (val) {
if (val === null || val === undefined || val === '') return 'info'
const v = Number(val)
if (v === 2) return 'success'
if (v === 1) return 'warning'
if (v === 15) return 'warning'
if (v === 0) return 'info'
return 'info'
}
}
}
</script>
<style scoped>
.dashboard2 {
font-size: 13px;
color: #606266;
}
.layout {
display: flex;
gap: 8px;
align-items: stretch;
height: calc(100vh - 120px);
min-height: 0;
max-height: calc(100vh - 120px);
}
.left {
width: 20%;
flex: 0 0 20%;
min-width: 220px;
max-width: 300px;
border: 1px solid #e4e7ed;
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
background: #fafbfc;
}
.left-search {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.left-keyword-input {
flex: 1;
min-width: 0;
}
.left-search-btn {
flex-shrink: 0;
padding-left: 14px;
padding-right: 14px;
}
.project-list {
flex: 1;
overflow: auto;
min-height: 0;
}
.project-item {
padding: 6px 8px;
cursor: pointer;
border-bottom: 1px solid #eef0f3;
border-radius: 4px;
margin-bottom: 2px;
min-height: 42px;
display: flex;
flex-direction: column;
justify-content: center;
transition: background 0.15s ease;
}
.project-item:hover {
background: #f0f2f5;
}
.project-item.active {
background: #ecf5ff;
border-left: 3px solid #409eff;
padding-left: 5px;
box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.15);
}
.project-name {
font-weight: 500;
font-size: 12px;
line-height: 1.35;
color: #303133;
}
.project-meta {
font-size: 11px;
color: #909399;
line-height: 1.35;
margin-top: 3px;
}
.project-meta .code {
margin-right: 8px;
color: #409eff;
}
.left-pager {
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid #ebeef5;
}
.left-pager :deep(.el-pagination) {
justify-content: center;
}
.left-empty {
padding: 10px;
}
.right {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
}
.right-empty {
border: 1px dashed #dcdfe6;
border-radius: 4px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.panel {
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
min-height: 0;
}
.panel-header {
padding: 8px 12px;
border-bottom: 1px solid #ebeef5;
}
/* 原「任务列表」标题条去掉后，工具栏区沿用顶栏灰底，与下方表格白底区分不变 */
.task-panel__toolbar {
background: #fafafa;
}
.panel-body {
padding: 8px 12px;
}
.panel-body-flex {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.toolbar {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.task-panel {
flex: 4 1 0%;
min-height: 0;
}
.schedule-panel {
flex: 6 1 0%;
min-height: 0;
display: flex;
flex-direction: column;
padding: 0;
}
.schedule-panel-tabs {
flex: 1 1 0%;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Element Tabs 根节点参与纵向 flex，才能把剩余高度交给内容区 */
.schedule-panel-tabs :deep(.el-tabs) {
flex: 1 1 0%;
min-height: 0;
display: flex;
flex-direction: column;
height: 100%;
}
.schedule-panel-tabs :deep(.el-tabs__header) {
margin-bottom: 0;
padding: 0 12px;
flex-shrink: 0;
}
.schedule-panel-tabs :deep(.el-tabs__content) {
flex: 1 1 0%;
min-height: 0;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
/* 当前激活的 pane 占满内容区高度，子元素才能算出可滚动区域 */
.schedule-panel-tabs :deep(.el-tab-pane) {
flex: 1 1 0%;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.schedule-tab-pane-inner {
flex: 1 1 0%;
min-height: 0;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.schedule-tab-pane-inner--mind {
min-height: 280px;
overflow: hidden;
}
/* 进度明细 Tab：占满下方板块；内部仅滚动区参与滚动 */
.progress-table-pane {
flex: 1 1 0%;
min-height: 0;
width: 100%;
height:300px;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 8px 12px 10px;
}
.progress-table-scroll {
flex: 1 1 0%;
min-height: 0;
min-width: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.progress-step-el-table {
width: 100%;
}
.schedule-mind {
display: flex;
flex-direction: row;
align-items: stretch;
flex: 1;
min-height: 0;
}
.task-table-wrap {
flex: 1;
min-height: 0;
min-width: 0;
overflow: hidden;
}
.task-table-wrap :deep(.vxe-table) {
font-size: 12px;
width: 100%;
}
.task-table-wrap :deep(.vxe-table--body-wrapper),
.task-table-wrap :deep(.vxe-table--header-wrapper) {
overflow-x: hidden;
}
.schedule-progress-wrap {
display: flex;
align-items: center;
gap: 6px;
max-width: 100%;
line-height: 1.35;
}
.schedule-progress-wrap--linked {
min-width: 0;
}
.schedule-progress-status-tag {
flex-shrink: 0;
}
.schedule-progress-path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: #606266;
}
.task-pager {
margin-top: 8px;
display: flex;
justify-content: flex-end;
}
.xmind-wrap {
flex: 1;
min-width: 0;
position: relative;
padding: 0;
display: flex;
flex-direction: column;
min-height: 320px;
}
.xmind-wrap :deep(.xmind-box--dashboard) {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.xmind-wrap :deep(.xmind-container) {
flex: 1;
min-height: 300px !important;
}
.mind-legend-aside {
flex: 0 0 132px;
padding: 10px 12px;
border-left: 1px solid #ebeef5;
background: #fafafa;
font-size: 12px;
color: #606266;
line-height: 1.5;
}
.mind-legend-title {
font-weight: 600;
color: #303133;
margin-bottom: 10px;
font-size: 13px;
}
.mind-legend-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.lg-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.lg-dot--done {
background: #67c23a;
}
.lg-dot--doing {
background: #e6a23c;
}
.lg-dot--todo {
background: #909399;
}
.mind-legend-tip {
margin: 12px 0 0;
font-size: 11px;
color: #909399;
line-height: 1.45;
}
.xmind-empty {
height: 100%;
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #ebeef5;
border-radius: 4px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>