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

<template>
  <div class="app-container dpc-detail-container">
    <!-- 原页面头部 (已隐藏，使用UploadData组件的头部) -->
    <div class="detail-header">
      <div class="header-left">
        <el-button size="small" icon="el-icon-back" @click="handleBack"
          >返回</el-button
        >
        <div class="title-section">
          <div class="page-title">
            <h2>
              {{ projectInfo.projectName }}
            </h2>
            <el-tag
              :type="getStatusType(projectInfo.projectStatus)"
              size="small"
            >
              {{ getStatusLabel(projectInfo.projectStatus) }}
            </el-tag>
          </div>

          <p class="update-time">
            最后更新时间：{{ formatUpdateTime(projectInfo.updateTime) }}
          </p>
        </div>
      </div>
      <div class="header-right">
        <div class="action-buttons">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-upload2"
            @click="handleUploadData"
          >
            上传数据
          </el-button>
          <el-button
            size="small"
            icon="el-icon-setting"
            @click="handleParamConfig"
          >
            参数配置
          </el-button>
          <el-dropdown @command="handleCheckResultCommand" trigger="click">
            <el-button size="small" icon="el-icon-document">
              初核结果<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="overview">结果总览</el-dropdown-item>
              <el-dropdown-item command="special">专项排查</el-dropdown-item>
              <el-dropdown-item command="detail">流水明细查询</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 数据上传页面 -->
    <UploadData
      :project-id="projectId"
      :project-info="projectInfo"
      @menu-change="handleMenuChange"
      @data-uploaded="handleDataUploaded"
      @name-selected="handleNameSelected"
      @generate-report="handleGenerateReport"
      @fetch-bank-info="handleFetchBankInfo"
    />
  </div>
</template>

<script>
import UploadData from "./components/detail/UploadData";
import ParamConfig from "./components/detail/ParamConfig";
import PreliminaryCheck from "./components/detail/PreliminaryCheck";
import SpecialCheck from "./components/detail/SpecialCheck";
import DetailQuery from "./components/detail/DetailQuery";

export default {
  name: "ProjectDetail",
  components: {
    UploadData,
    ParamConfig,
    PreliminaryCheck,
    SpecialCheck,
    DetailQuery,
  },
  data() {
    return {
      // 当前激活的菜单项索引
      activeTab: "upload",
      // 当前显示的组件名称
      currentComponent: "UploadData",
      // 项目ID
      projectId: this.$route.params.projectId,
      // 项目信息
      projectInfo: {
        projectId: this.$route.params.projectId,
        projectName: "",
        projectDesc: "",
        createTime: "",
        updateTime: "",
        startDate: "",
        endDate: "",
        targetCount: 0,
        warningCount: 0,
        warningThreshold: 60,
        projectStatus: "0",
      },
    };
  },
  watch: {
    "$route.params.projectId"(newId) {
      if (newId) {
        this.projectId = newId;
        this.projectInfo.projectId = newId;
        this.initPageData();
      }
    },
  },
  created() {
    // 初始化页面数据
    this.initPageData();
  },
  methods: {
    /** 初始化页面数据 */
    initPageData() {
      // 这里应该从API获取项目详细信息
      this.mockProjectInfo();
    },
    /** 格式化更新时间 */
    formatUpdateTime(time) {
      if (!time) return "-";
      const date = new Date(time);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 模拟项目信息 */
    mockProjectInfo() {
      // 模拟数据，实际应该调用API
      this.projectInfo = {
        projectId: this.projectId,
        projectName: "2024年Q1初核项目",
        projectDesc: "第一季度员工异常行为排查",
        createTime: "2024-01-01 10:00:00",
        updateTime: new Date().toISOString(),
        startDate: "2024-01-01",
        endDate: "2024-03-31",
        targetCount: 500,
        warningCount: 15,
        warningThreshold: 60,
        projectStatus: "0",
      };
    },
    /** 获取状态类型 */
    getStatusType(status) {
      const statusMap = {
        0: "primary", // 进行中
        1: "success", // 已完成
        2: "info", // 已归档
      };
      return statusMap[status] || "info";
    },
    /** 获取状态标签 */
    getStatusLabel(status) {
      const statusMap = {
        0: "进行中",
        1: "已完成",
        2: "已归档",
      };
      return statusMap[status] || "未知";
    },
    /** 标签页切换 */
    handleTabChange(tab) {
      console.log("切换到标签页:", tab.name);
    },
    /** 返回列表页 */
    handleBack() {
      this.$router.push("/ccdiProject");
    },
    /** UploadData 组件：菜单切换 */
    handleMenuChange({ key, route }) {
      console.log("切换到菜单:", key, route);
      // 根据不同的菜单项跳转到不同的组件或页面
      switch (route) {
        case "config":
          this.$message.info("参数配置功能开发中");
          break;
        case "overview":
          this.$message.info("结果总览功能开发中");
          break;
        case "special":
          this.$message.info("专项排查功能开发中");
          break;
        case "detail":
          this.$message.info("流水明细查询功能开发中");
          break;
        default:
          break;
      }
    },
    /** UploadData 组件：数据上传完成 */
    handleDataUploaded({ type }) {
      console.log("数据上传完成:", type);
      this.$message.success(`${type} 数据上传成功`);
    },
    /** UploadData 组件：名单选择完成 */
    handleNameSelected(nameList) {
      console.log("名单选择完成:", nameList);
      this.$message.success("名单选择成功");
    },
    /** UploadData 组件：生成报告 */
    handleGenerateReport() {
      console.log("生成报告");
      // this.$message.info("生成报告功能开发中");
    },
    /** UploadData 组件：拉取本行信息 */
    handleFetchBankInfo() {
      console.log("拉取本行信息");
      this.$message.info("拉取本行信息功能开发中");
    },
    /** 上传数据 (原方法，已由UploadData组件处理) */
    handleUploadData() {
      console.log("上传数据");
      this.$message.info("上传数据功能已迁移至上传页面");
    },
    /** 参数配置 (原方法) */
    handleParamConfig() {
      console.log("参数配置");
      this.$message.info("参数配置功能开发中");
    },
    /** 初核结果下拉菜单命令 */
    handleCheckResultCommand(command) {
      console.log("初核结果命令:", command);
      switch (command) {
        case "overview":
          this.$message.info("结果总览功能开发中");
          break;
        case "special":
          this.$message.info("专项排查功能开发中");
          break;
        case "detail":
          this.$message.info("流水明细查询功能开发中");
          break;
        default:
          break;
      }
    },
    /** 数据上传完成 */
    handleDataUploaded() {
      console.log("数据上传完成");
      this.$message.success("数据上传成功");
    },
    /** 刷新页面 */
    handleRefresh() {
      this.mockProjectInfo();
      this.$message.success("刷新成功");
    },
    /** 导出报告 */
    handleExport() {
      console.log("导出报告");
      this.$message.info("报告导出功能开发中");
    },
    /** 完成项目 */
    handleComplete() {
      this.$confirm("确定要完成当前项目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("项目已完成");
          this.projectInfo.projectStatus = "1";
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    /** 归档项目 */
    handleArchive() {
      this.$confirm(
        "确定要归档当前项目吗？归档后将不能进行修改操作。",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$message.success("项目已归档");
          this.projectInfo.projectStatus = "2";
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.dpc-detail-container {
  padding: 16px;
  background: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

  .header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .el-button {
      padding: 8px 12px;
      font-size: 13px;
      margin-top: 4px;
    }

    .title-section {
      .page-title {
        display: flex;
        align-items: center;
        h2 {
          margin: 0 0 4px 0;
          font-size: 20px;
          font-weight: 500;
          color: #303133;
          margin-right: 5px;
        }
      }

      .update-time {
        margin: 0;
        font-size: 13px;
        color: #909399;
      }
    }
  }

  .header-right {
    .action-buttons {
      display: flex;
      align-items: center;
      gap: 12px;

      .el-button {
        padding: 8px 16px;
        font-size: 14px;

        .el-icon--right {
          margin-left: 4px;
        }
      }

      .el-tag {
        margin-left: 4px;
      }
    }
  }
}

.info-card {
  margin-bottom: 16px;

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.info-header {
  margin-bottom: 16px;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.info-content {
  .info-row {
    display: flex;
    gap: 32px;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-item {
    display: flex;
    align-items: center;
    font-size: 14px;

    .label {
      color: #606266;
      min-width: 100px;
      font-weight: 500;
    }

    .value {
      color: #303133;
      font-weight: 400;

      &.warning-count {
        color: #e6a23c;
        font-weight: 600;
      }
    }
  }
}

.content-card {
  margin-bottom: 16px;

  :deep(.el-card__body) {
    padding: 0;

    .el-tabs {
      height: 100%;

      .el-tabs__content {
        padding: 20px;
      }
    }
  }
}

.action-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

  .el-button {
    padding: 10px 20px;

    i {
      margin-right: 4px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dpc-detail-container {
    padding: 8px;
  }

  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .info-content {
    .info-row {
      flex-direction: column;
      gap: 8px;

      .info-item {
        .label {
          min-width: auto;
        }
      }
    }
  }

  .action-bar {
    flex-wrap: wrap;

    .el-button {
      width: 100%;
    }
  }
}
</style>