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

<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>