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="100"
        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">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(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 ''
    },

    handleDetail(row) {
      this.$emit('detail', row)
    },

    handleEdit(row) {
      this.$emit('edit', row)
    },

    handleDelete(row) {
      this.$emit('delete', 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;
}

.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;
}
</style>