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

<template>
  <GiPageLayout>
    <div class="my-insurance-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">我的保险信息</h2>
      </div>

      <!-- 保险信息表格 -->
      <a-card class="insurance-table-card" :bordered="false">
        <a-table 
          :columns="insuranceColumns" 
          :data="insuranceData"
          :pagination="false"
          row-key="id"
        >
          <template #type="{ record }">
            <a-tag 
              :color="record.type === '医疗保险' ? 'blue' : record.type === '意外险' ? 'green' : 'orange'"
            >
              {{ record.type }}
            </a-tag>
          </template>

          <template #status="{ record }">
            <a-tag 
              :color="record.status === '有效' ? 'green' : 'red'"
            >
              {{ record.status }}
            </a-tag>
          </template>

          <template #action="{ record }">
            <a-button 
              type="primary" 
              size="small" 
              @click="handleViewDetails(record)"
            >
              查看详情
            </a-button>
          </template>
        </a-table>
      </a-card>

      <!-- 查看详情弹窗 -->
      <a-modal
        v-model:visible="detailModalVisible"
        title="保险详情"
        width="800px"
      >
        <div class="detail-content" v-if="selectedRecord">
          <div class="detail-item">
            <span class="detail-label">保险公司：</span>
            <span class="detail-value">{{ selectedRecord.company }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">保险类型：</span>
            <span class="detail-value">{{ selectedRecord.type }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">保单号：</span>
            <span class="detail-value">{{ selectedRecord.policyNo }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">生效日期：</span>
            <span class="detail-value">{{ selectedRecord.startDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">到期日期：</span>
            <span class="detail-value">{{ selectedRecord.endDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">状态：</span>
            <span class="detail-value">{{ selectedRecord.status }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">保险金额：</span>
            <span class="detail-value">{{ selectedRecord.amount }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">保险范围：</span>
            <span class="detail-value">{{ selectedRecord.coverage }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">受益人：</span>
            <span class="detail-value">{{ selectedRecord.beneficiary }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">备注：</span>
            <span class="detail-value">{{ selectedRecord.remark }}</span>
          </div>
        </div>
      </a-modal>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 保险信息表格列配置
const insuranceColumns = [
  { title: '保险公司', dataIndex: 'company', width: 150 },
  { title: '保险类型', dataIndex: 'type', slotName: 'type', width: 120 },
  { title: '保单号', dataIndex: 'policyNo', width: 150 },
  { title: '生效日期', dataIndex: 'startDate', width: 120 },
  { title: '到期日期', dataIndex: 'endDate', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

// 保险信息数据
const insuranceData = ref([
  {
    id: 1,
    company: '中国人寿',
    type: '医疗保险',
    policyNo: 'CL12345678',
    startDate: '2023-01-01',
    endDate: '2023-12-31',
    status: '有效',
    amount: '50万元',
    coverage: '住院医疗、门诊医疗、重大疾病',
    beneficiary: '法定继承人',
    remark: '企业统一购买，覆盖基本医疗保险'
  },
  {
    id: 2,
    company: '平安保险',
    type: '意外险',
    policyNo: 'PA87654321',
    startDate: '2023-01-01',
    endDate: '2023-12-31',
    status: '有效',
    amount: '100万元',
    coverage: '意外伤害、意外医疗、交通意外',
    beneficiary: '法定继承人',
    remark: '个人购买，工作期间意外保障'
  },
  {
    id: 3,
    company: '泰康保险',
    type: '养老保险',
    policyNo: 'TK33445566',
    startDate: '2022-01-01',
    endDate: '2042-12-31',
    status: '有效',
    amount: '200万元',
    coverage: '养老金、年金给付',
    beneficiary: '法定继承人',
    remark: '企业年金计划，长期养老保障'
  }
])

// 弹窗状态
const detailModalVisible = ref(false)
const selectedRecord = ref<any>(null)

// 查看详情
const handleViewDetails = (record: any) => {
  selectedRecord.value = record
  detailModalVisible.value = true
}
</script>

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

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

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

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

.detail-content {
  padding: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.detail-label {
  font-weight: 600;
  width: 120px;
  flex-shrink: 0;
  color: #1d2129;
}

.detail-value {
  color: #4e5969;
  word-break: break-word;
}
</style>