feat: 完成上传数据页面

2026-03-02 19:18:45 +08:00
parent 7d1ab61705
commit c6d5063c8d
6 changed files with 1612 additions and 76 deletions
--- a/ruoyi-ui/src/views/ccdiProject/detail.vue
+++ b/ruoyi-ui/src/views/ccdiProject/detail.vue
@@ -0,0 +1,497 @@
+<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 UploadParams from "./components/detail/UploadParams";
+// 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,
+    // UploadParams,
+    // ParamConfig,
+    // PreliminaryCheck,
+    // SpecialCheck,
+    // DetailQuery,
+  },
+  data() {
+    return {
+      // 当前标签页
+      activeTab: "data",
+      // 项目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>