Industrial-image-management-system---web/src/views/hr/salary/insurance/overview/index.vue

<template>
  <GiPageLayout>
    <div class="insurance-overview-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">工作台概览</h2>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-grid">
        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ insuranceStats.total }}</div>
            <div class="stat-label">我的保险</div>
            <div class="stat-status success">全部有效</div>
          </div>
        </a-card>

        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ insuranceStats.lastCheckup }}</div>
            <div class="stat-label">最近体检</div>
            <div class="stat-status normal">正常</div>
          </div>
        </a-card>

        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ insuranceStats.expiringCount }}</div>
            <div class="stat-label">即将到期</div>
            <div class="stat-status warning">医疗保险</div>
          </div>
        </a-card>

        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ insuranceStats.healthScore }}</div>
            <div class="stat-label">健康评分</div>
            <div class="stat-status success">↑ {{ insuranceStats.healthTrend }} 较上月</div>
          </div>
        </a-card>
      </div>

      <!-- 提醒信息 -->
      <div class="reminder-section">
        <a-alert
          type="warning"
          :message="medicalInsuranceReminder"
          :closable="false"
          show-icon
        />
        <a-alert
          type="info"
          :message="checkupReminder"
          :closable="false"
          show-icon
        />
      </div>

      <!-- 我的提醒表格 -->
      <a-card class="reminder-table-card" :bordered="false">
        <template #title>
          <div class="card-title">我的提醒</div>
        </template>

        <a-table 
          :columns="reminderColumns" 
          :data="reminderData"
          :pagination="false"
          row-key="id"
        >
          <template #status="{ record }">
            <a-tag 
              :color="record.status === 'pending' ? 'orange' : record.status === 'completed' ? 'green' : 'gray'"
            >
              {{ record.status === 'pending' ? '即将到期' : record.status === 'completed' ? '待安排' : '已完成' }}
            </a-tag>
          </template>

          <template #action="{ record }">
            <a-button 
              type="primary" 
              size="small" 
              @click="handleAction(record)"
            >
              {{ record.actionText }}
            </a-button>
          </template>
        </a-table>
      </a-card>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'

// 保险统计数据
const insuranceStats = reactive({
  total: 3,
  lastCheckup: '2023-10-15',
  expiringCount: 1,
  healthScore: 86,
  healthTrend: '2%'
})

// 提醒信息
const medicalInsuranceReminder = '您的医疗保险将于 15天 后到期，请及时联系HR处理续保事宜。'
const checkupReminder = '您的下一次体检安排在 2024-04-15，请提前做好准备。'

// 提醒表格列配置
const reminderColumns = [
  { title: '事项', dataIndex: 'item', width: 200 },
  { title: '日期', dataIndex: 'date', width: 150 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 120 },
  { title: '操作', slotName: 'action', width: 150 }
]

// 提醒表格数据
const reminderData = ref([
  {
    id: 1,
    item: '医疗保险续保',
    date: '2023-12-15',
    status: 'pending',
    actionText: '详情'
  },
  {
    id: 2,
    item: '年度体检',
    date: '2024-04-15',
    status: 'completed',
    actionText: '详情'
  },
  {
    id: 3,
    item: '健康问卷',
    date: '2023-12-01',
    status: 'completed',
    actionText: '填写'
  }
])

// 操作处理
const handleAction = (record: any) => {
  Message.success(`处理 ${record.item} 操作`)
}
</script>

<style scoped>
.insurance-overview-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 12px;
}

.stat-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.stat-status.success {
  background: #f0f9ff;
  color: #1890ff;
}

.stat-status.normal {
  background: #f6ffed;
  color: #52c41a;
}

.stat-status.warning {
  background: #fff7e6;
  color: #fa8c16;
}

.reminder-section {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reminder-table-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}
</style>