Files
ccdi/ruoyi-ui/src/views/ccdiProject/index.vue

272 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container dpc-project-container">
<!-- 页面标题 -->
<div class="page-header">
<h2 class="page-title">初核项目管理</h2>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建项目</el-button>
</div>
<!-- 搜索和操作区 -->
<search-bar
:show-search="showSearch"
:tab-counts="tabCounts"
@query="handleQuery"
/>
<!-- 项目列表表格 -->
<project-table
:loading="loading"
:data-list="projectList"
:total="total"
:page-params="queryParams"
@pagination="getList"
@enter="handleEnter"
@view-result="handleViewResult"
@re-analyze="handleReAnalyze"
@archive="handleArchive"
/>
<!-- 快捷入口区 -->
<quick-entry
@import-history="handleImport"
@create-quarterly="handleCreateQuarterly"
@create-employee="handleCreateEmployee"
@create-highrisk="handleCreateHighRisk"
/>
<!-- 新建项目弹窗 -->
<add-project-dialog
:visible.sync="addDialogVisible"
:title="addDialogTitle"
:form="projectForm"
@submit="handleSubmitProject"
@close="handleCloseAddDialog"
/>
<!-- 导入历史项目弹窗 -->
<import-history-dialog
:visible.sync="importDialogVisible"
@submit="handleSubmitImport"
@close="handleCloseImportDialog"
/>
<!-- 项目归档确认弹窗 -->
<archive-confirm-dialog
:visible.sync="archiveDialogVisible"
:project-data="currentArchiveProject"
@confirm="handleConfirmArchive"
@close="archiveDialogVisible = false"
/>
</div>
</template>
<script>
import {listProject} from '@/api/ccdiProject'
import SearchBar from './components/SearchBar'
import ProjectTable from './components/ProjectTable'
import QuickEntry from './components/QuickEntry'
import AddProjectDialog from './components/AddProjectDialog'
import ImportHistoryDialog from './components/ImportHistoryDialog'
import ArchiveConfirmDialog from './components/ArchiveConfirmDialog'
export default {
name: 'DpcProject',
components: {
SearchBar,
ProjectTable,
QuickEntry,
AddProjectDialog,
ImportHistoryDialog,
ArchiveConfirmDialog
},
data() {
return {
// 加载状态
loading: true,
// 显示搜索栏
showSearch: true,
// 总条数
total: 0,
// 项目列表
projectList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
projectName: null,
status: null
},
// 标签页数量统计
tabCounts: {
all: 0,
'0': 0,
'1': 0,
'2': 0
},
// 新增/编辑弹窗
addDialogVisible: false,
addDialogTitle: '新建项目',
projectForm: {},
// 导入历史项目弹窗
importDialogVisible: false,
// 归档确认弹窗
archiveDialogVisible: false,
currentArchiveProject: null
}
},
created() {
this.getList()
},
methods: {
/** 查询项目列表 */
getList() {
this.loading = true
// 使用真实API
listProject(this.queryParams).then(response => {
this.projectList = response.rows
this.total = response.total
this.loading = false
// 计算标签页数量
this.calculateTabCounts()
}).catch(() => {
this.loading = false
})
},
/** 计算标签页数量 */
calculateTabCounts() {
// 注意这里需要后端API返回所有状态的数量统计
// 目前暂时使用当前页的数据进行计算
this.tabCounts = {
all: this.total,
'0': this.projectList.filter(p => p.status === '0').length,
'1': this.projectList.filter(p => p.status === '1').length,
'2': this.projectList.filter(p => p.status === '2').length
}
},
/** 搜索按钮操作 */
handleQuery(queryParams) {
if (queryParams) {
this.queryParams = { ...this.queryParams, ...queryParams }
}
this.queryParams.pageNum = 1
this.getList()
},
/** 新增按钮操作 */
handleAdd() {
this.projectForm = this.getEmptyForm()
this.addDialogTitle = '新建项目'
this.addDialogVisible = true
},
/** 获取空表单 */
getEmptyForm() {
return {
projectId: null,
projectName: '',
projectDesc: '',
startDate: '',
endDate: '',
targetCount: 0,
targetPersons: []
}
},
/** 关闭新增弹窗 */
handleCloseAddDialog() {
this.addDialogVisible = false
this.projectForm = {}
},
/** 提交项目表单 */
handleSubmitProject(data) {
// 不需要再次调用API因为AddProjectDialog已经处理了
this.addDialogVisible = false
this.getList() // 刷新列表
},
/** 导入历史项目 */
handleImport() {
this.importDialogVisible = true
},
/** 关闭导入弹窗 */
handleCloseImportDialog() {
this.importDialogVisible = false
},
/** 提交导入 */
handleSubmitImport(data) {
console.log('导入历史项目:', data)
this.$modal.msgSuccess('项目导入成功')
this.importDialogVisible = false
this.getList()
},
/** 创建季度初核 */
handleCreateQuarterly() {
this.projectForm = this.getEmptyForm()
this.addDialogTitle = '创建季度初核项目'
this.addDialogVisible = true
},
/** 创建新员工排查 */
handleCreateEmployee() {
this.projectForm = this.getEmptyForm()
this.addDialogTitle = '创建新员工排查项目'
this.addDialogVisible = true
},
/** 创建高风险专项 */
handleCreateHighRisk() {
this.projectForm = this.getEmptyForm()
this.addDialogTitle = '创建高风险专项项目'
this.addDialogVisible = true
},
/** 进入项目 */
handleEnter(row) {
console.log('进入项目:', row)
this.$modal.msgSuccess('进入项目: ' + row.projectName)
},
/** 查看结果 */
handleViewResult(row) {
console.log('查看结果:', row)
this.$modal.msgInfo('查看项目结果: ' + row.projectName)
},
/** 重新分析 */
handleReAnalyze(row) {
console.log('重新分析:', row)
this.$modal.msgSuccess('正在重新分析项目: ' + row.projectName)
},
/** 归档项目 */
handleArchive(row) {
this.currentArchiveProject = row
this.archiveDialogVisible = true
},
/** 确认归档 */
handleConfirmArchive(data) {
console.log('确认归档:', data)
this.$modal.msgSuccess('项目已归档')
this.archiveDialogVisible = false
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.dpc-project-container {
padding: 16px;
background: #f0f2f5;
min-height: calc(100vh - 140px);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 16px 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.page-title {
margin: 0;
font-size: 20px;
font-weight: 500;
color: #303133;
}
}
</style>