ccdi/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue

<template>
  <div class="project-table-container">
    <el-table
      :data="dataList"
      :loading="loading"
      border
      style="width: 100%"
    >
      <!-- 项目名称（含描述） -->
      <el-table-column
        label="项目名称"
        min-width="300"
        align="left"
      >
        <template slot-scope="scope">
          <div class="project-info-cell">
            <div class="project-name">{{ scope.row.projectName }}</div>
            <div class="project-desc">{{ scope.row.description || '暂无描述' }}</div>
          </div>
        </template>
      </el-table-column>

      <!-- 项目状态 -->
      <el-table-column
        prop="status"
        label="项目状态"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            <dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
          </el-tag>
        </template>
      </el-table-column>

      <!-- 目标人数 -->
      <el-table-column
        prop="targetCount"
        label="目标人数"
        width="100"
        align="center"
      />

      <!-- 预警人数（带悬停详情） -->
      <el-table-column
        label="预警人数"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top" effect="light">
            <div slot="content">
              <div style="padding: 8px;">
                <div style="margin-bottom: 8px; font-weight: bold; color: #303133;">
                  风险人数统计
                </div>
                <div style="margin-bottom: 6px;">
                  <span style="color: #f56c6c;">● 高风险：</span>
                  <span style="font-weight: bold;">{{ scope.row.highRiskCount }} 人</span>
                </div>
                <div style="margin-bottom: 6px;">
                  <span style="color: #e6a23c;">● 中风险：</span>
                  <span style="font-weight: bold;">{{ scope.row.mediumRiskCount }} 人</span>
                </div>
                <div>
                  <span style="color: #909399;">● 低风险：</span>
                  <span style="font-weight: bold;">{{ scope.row.lowRiskCount }} 人</span>
                </div>
              </div>
            </div>
            <div class="warning-count-wrapper">
              <span :class="getWarningClass(scope.row)" style="cursor: pointer;">
                {{ scope.row.highRiskCount + scope.row.mediumRiskCount + scope.row.lowRiskCount }}
              </span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <!-- 创建人 -->
      <el-table-column
        prop="createByName"
        label="创建人"
        width="120"
        align="center"
      />

      <!-- 创建时间 -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column
        label="操作"
        width="200"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- 进行中状态 (status = '0') -->
          <el-button
            v-if="scope.row.status === '0'"
            size="mini"
            type="text"
            icon="el-icon-right"
            @click="handleEnter(scope.row)"
          >进入项目</el-button>

          <!-- 已完成状态 (status = '1') -->
          <template v-if="scope.row.status === '1'">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleViewResult(scope.row)"
            >查看结果</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-refresh"
              @click="handleReAnalyze(scope.row)"
            >重新分析</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-folder"
              @click="handleArchive(scope.row)"
            >归档</el-button>
          </template>

          <!-- 已归档状态 (status = '2') -->
          <el-button
            v-if="scope.row.status === '2'"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleViewResult(scope.row)"
          >查看结果</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-show="total > 0"
      :current-page="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 16px; text-align: right;"
    />
  </div>
</template>

<script>
export default {
  name: 'ProjectTable',
  dicts: ['ccdi_project_status', 'ccdi_config_type'],
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    pageParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10
      })
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        '0': 'primary',  // 进行中
        '1': 'success',  // 已完成
        '2': 'info'      // 已归档
      }
      return statusMap[status] || 'info'
    },

    getWarningClass(row) {
      const total = row.highRiskCount + row.mediumRiskCount + row.lowRiskCount
      if (row.highRiskCount > 0) {
        return 'text-danger text-bold'
      } else if (row.mediumRiskCount > 0) {
        return 'text-warning text-bold'
      } else if (total > 0) {
        return 'text-info'
      }
      return ''
    },

    handleEnter(row) {
      this.$emit('enter', row)
    },

    handleViewResult(row) {
      this.$emit('view-result', row)
    },

    handleReAnalyze(row) {
      this.$emit('re-analyze', row)
    },

    handleArchive(row) {
      this.$emit('archive', row)
    },

    handleSizeChange(val) {
      this.$emit('pagination', { pageNum: this.pageParams.pageNum, pageSize: val })
    },

    handleCurrentChange(val) {
      this.$emit('pagination', { pageNum: val, pageSize: this.pageParams.pageSize })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-table-container {
  margin-top: 16px;

  // 表格整体样式 - Material Design 卡片式
  :deep(.el-table) {
    // 移除边框，使用阴影
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    // 悬停时卡片阴影加深
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    // 表头样式 - 扁平化，无背景色
    th {
      background-color: transparent;
      color: #333;
      font-weight: 600;
      font-size: 14px;
      height: 56px;
      padding: 16px 12px;

      // 只保留底部一条分隔线
      border-bottom: 2px solid #e0e0e0;
    }

    // 数据行样式 - 增加留白，移除分隔线
    td {
      color: #333;
      font-size: 14px;
      height: 64px;
      padding: 20px 12px;
      border-bottom: none;
    }

    // 移除列分隔线
    .el-table__body-wrapper {
      .cell {
        border-right: none;
      }
    }

    // 悬停效果
    .el-table__row {
      transition: background-color 0.2s ease;

      &:hover > td {
        background-color: #fafafa !important;
      }
    }

    // 移除额外边框
    &::before,
    &::after {
      display: none;
    }
  }
}

.project-info-cell {
  padding: 8px 0;
  line-height: 1.5;

  .project-name {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-desc {
    font-size: 12px;
    color: #909399;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.warning-count-wrapper {
  display: inline-block;
}

.text-danger {
  color: #f56c6c;
}

.text-warning {
  color: #e6a23c;
}

.text-info {
  color: #909399;
}

.text-bold {
  font-weight: bold;
}

// 操作按钮样式 - Material Design 风格
:deep(.el-button--text) {
  color: #1890ff;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    color: #096dd9;
    background-color: rgba(24, 144, 255, 0.08);
    text-decoration: none;
  }

  &:first-child {
    padding-left: 0;
  }

  // 按钮间距
  & + .el-button--text {
    margin-left: 4px;
  }
}

// 分页样式优化 - Material Design 风格
:deep(.el-pagination) {
  margin-top: 24px;
  text-align: right;

  // 扁平化按钮
  .btn-prev,
  .btn-next,
  .el-pager li {
    border: none;
    background-color: transparent;

    &:hover {
      background-color: #f5f5f5;
    }
  }

  .el-pager li.active {
    background-color: #1890ff;
    color: white;
    border-radius: 4px;
  }

  .el-pagination__total,
  .el-pagination__sizes,
  .el-pagination__jump {
    color: #666;
  }
}
</style>