zjrs-jeecgBoot/jeecgboot-vue3/src/views/focuspersonnel/components/FocusPersonnelDetail.vue

<template>
  <a-spin :spinning="loading">
    <div class="focus-personnel-detail" v-if="detailData">
      <!-- 顶部人员概要信息 -->
      <div class="detail-header">
        <div class="header-avatar">
          <a-avatar :size="64" style="background-color: #1890ff">
            {{ detailData.fullName ? detailData.fullName.substring(0, 1) : '?' }}
          </a-avatar>
        </div>
        <div class="header-info">
          <div class="header-name">
            <span class="name">{{ detailData.fullName || '-' }}</span>
            <span class="gender">{{ detailData.gender || '' }}</span>
            <span class="age" v-if="detailData.age != null">{{ detailData.age }}岁</span>
          </div>
          <div class="header-tags">
            <a-tag v-if="detailData.majorTag" color="blue">{{ detailData.majorTag }}</a-tag>
            <a-tag v-if="detailData.minorTag" color="green">{{ detailData.minorTag }}</a-tag>
            <template v-if="detailData.customTag">
              <a-tag v-for="tag in customTagList" :key="tag" color="orange">{{ tag }}</a-tag>
            </template>
          </div>
          <div class="header-meta">
            <span v-if="detailData.education">{{ detailData.education }}</span>
            <span v-if="detailData.contactPhone"> | {{ detailData.contactPhone }}</span>
            <span v-if="detailData.jobSearchStatus"> | {{ detailData.jobSearchStatus }}</span>
          </div>
        </div>
      </div>

      <a-divider style="margin: 12px 0" />

      <!-- Tab页签组织详情内容 -->
      <a-tabs v-model:activeKey="activeTab">
        <!-- Tab1: 基本信息 -->
        <a-tab-pane key="basic" tab="基本信息">
          <a-descriptions bordered :column="2" size="small">
            <a-descriptions-item label="证件类型">{{ detailData.idType || '-' }}</a-descriptions-item>
            <a-descriptions-item label="证件号码">{{ detailData.idNumber || '-' }}</a-descriptions-item>
            <a-descriptions-item label="出生日期">{{ formatDate(detailData.birthDate) }}</a-descriptions-item>
            <a-descriptions-item label="年龄">{{ detailData.age != null ? detailData.age + '岁' : '-' }}</a-descriptions-item>
            <a-descriptions-item label="民族">{{ detailData.nation || '-' }}</a-descriptions-item>
            <a-descriptions-item label="国籍">{{ detailData.nationality || '-' }}</a-descriptions-item>
            <a-descriptions-item label="婚姻状况">{{ detailData.maritalStatus || '-' }}</a-descriptions-item>
            <a-descriptions-item label="政治面貌">{{ detailData.politicalStatus || '-' }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <!-- Tab2: 教育与求职 -->
        <a-tab-pane key="education" tab="教育与求职">
          <a-descriptions bordered :column="2" size="small">
            <a-descriptions-item label="学历">{{ detailData.education || '-' }}</a-descriptions-item>
            <a-descriptions-item label="毕业日期">{{ formatDate(detailData.graduationDate) }}</a-descriptions-item>
            <a-descriptions-item label="毕业院校">{{ detailData.graduateSchool || '-' }}</a-descriptions-item>
            <a-descriptions-item label="专业">{{ detailData.major || '-' }}</a-descriptions-item>
            <a-descriptions-item label="工作经验">{{ detailData.workExperience || '-' }}</a-descriptions-item>
            <a-descriptions-item label="职业技能等级">{{ detailData.skillLevel || '-' }}</a-descriptions-item>
            <a-descriptions-item label="是否留学人才">{{ detailData.isOverseasTalent || '-' }}</a-descriptions-item>
            <a-descriptions-item label="求职人员类别">{{ detailData.jobSeekerCategory || '-' }}</a-descriptions-item>
            <a-descriptions-item label="求职状态">{{ detailData.jobSearchStatus || '-' }}</a-descriptions-item>
            <a-descriptions-item label="是否接受推荐职位">{{ detailData.acceptRecommend || '-' }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <!-- Tab3: 联系与居住 -->
        <a-tab-pane key="contact" tab="联系与居住">
          <a-descriptions bordered :column="2" size="small">
            <a-descriptions-item label="联系电话">{{ detailData.contactPhone || '-' }}</a-descriptions-item>
            <a-descriptions-item label="邮箱">{{ detailData.email || '-' }}</a-descriptions-item>
            <a-descriptions-item label="QQ号码">{{ detailData.qqNumber || '-' }}</a-descriptions-item>
            <a-descriptions-item label="微信号">{{ detailData.wechatId || '-' }}</a-descriptions-item>
            <a-descriptions-item label="户口性质">{{ detailData.householdType || '-' }}</a-descriptions-item>
            <a-descriptions-item label="户口所在地">{{ detailData.householdLocation || '-' }}</a-descriptions-item>
            <a-descriptions-item label="现居住地">{{ detailData.currentResidence || '-' }}</a-descriptions-item>
            <a-descriptions-item label="现居住地址">{{ detailData.currentAddress || '-' }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <!-- Tab4: 标签信息 -->
        <a-tab-pane key="tags" tab="标签信息">
          <a-descriptions bordered :column="1" size="small">
            <a-descriptions-item label="人员大类标签">
              <a-tag v-if="detailData.majorTag" color="blue">{{ detailData.majorTag }}</a-tag>
              <span v-else>-</span>
            </a-descriptions-item>
            <a-descriptions-item label="人员小类标签">
              <a-tag v-if="detailData.minorTag" color="green">{{ detailData.minorTag }}</a-tag>
              <span v-else>-</span>
            </a-descriptions-item>
            <a-descriptions-item label="自定义标签">
              <template v-if="customTagList.length > 0">
                <a-tag v-for="tag in customTagList" :key="tag" color="orange" style="margin-bottom: 4px">{{ tag }}</a-tag>
              </template>
              <span v-else>-</span>
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <!-- Tab5: 服务跟进 -->
        <a-tab-pane key="service" tab="服务跟进">
          <div style="margin-bottom: 12px">
            <a-button type="primary" size="small" @click="handleAddServiceFollow" v-auth="'focus_personnel:serviceFollow'">
              新增跟进
            </a-button>
          </div>
          <a-table
            :columns="serviceFollowColumns"
            :dataSource="serviceFollowList"
            :pagination="false"
            size="small"
            :locale="{ emptyText: '暂无跟进记录' }"
            rowKey="id"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
    <div v-else-if="!loading" style="text-align: center; padding: 40px; color: #999">
      暂无数据
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import { queryDetailById } from '../FocusPersonnel.api';
  import dayjs from 'dayjs';

  const props = defineProps({
    record: { type: Object, default: () => ({}) },
  });

  const loading = ref<boolean>(false);
  const detailData = ref<any>(null);
  const activeTab = ref<string>('basic');

  /** 服务跟进列表（暂为空，待后端接口开发） */
  const serviceFollowList = ref<any[]>([]);

  /** 服务跟进表格列 */
  const serviceFollowColumns = [
    { title: '姓名', dataIndex: 'fullName', width: 100 },
    { title: '服务内容', dataIndex: 'serviceContent' },
    { title: '服务时间', dataIndex: 'serviceTime', width: 120 },
    { title: '服务人员', dataIndex: 'servicePerson', width: 100 },
  ];

  /** 自定义标签列表（逗号分隔转数组） */
  const customTagList = computed(() => {
    if (!detailData.value?.customTag) return [];
    return detailData.value.customTag.split(',').filter((t: string) => t.trim());
  });

  /** 格式化日期 */
  function formatDate(date: any) {
    if (!date) return '-';
    return dayjs(date).format('YYYY-MM-DD');
  }

  /** 新增服务跟进（占位） */
  function handleAddServiceFollow() {
    // 待开发：打开服务跟进表单弹窗
  }

  /**
   * 加载详情数据
   */
  async function loadDetail() {
    if (!props.record.id) return;
    loading.value = true;
    activeTab.value = 'basic';
    try {
      const res = await queryDetailById({ id: props.record.id });
      // defHttp默认isTransformResponse=true，返回的res已经是result数据
      if (res) {
        detailData.value = res;
      }
    } catch (e) {
      console.error('加载详情失败', e);
    } finally {
      loading.value = false;
    }
  }

  // 监听record变化自动加载
  watch(
    () => props.record,
    () => {
      loadDetail();
    },
    { immediate: true, deep: true }
  );

  defineExpose({
    loadDetail,
  });
</script>

<style lang="less" scoped>
  .focus-personnel-detail {
    padding: 16px;

    .detail-header {
      display: flex;
      align-items: center;
      gap: 16px;

      .header-info {
        flex: 1;

        .header-name {
          margin-bottom: 6px;
          .name {
            font-size: 20px;
            font-weight: 600;
            margin-right: 8px;
          }
          .gender, .age {
            font-size: 14px;
            color: #666;
            margin-right: 6px;
          }
        }

        .header-tags {
          margin-bottom: 6px;
        }

        .header-meta {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
</style>