labsop_scientific_h5/pages/todo/components/document/AchCommitteeForm.vue

<template>
  <view class="document-form">
    <uv-loading-icon v-if="loading" mode="circle" text="正在加载详情..."></uv-loading-icon>
    <template v-else-if="form">
      <!-- 变更单据基本信息 -->
      <CommonSection title="基本信息" :isFirst="true">
        <CommonInfoRow label="所属委员会" :value="committeeLabel" />
        <CommonInfoRow label="变更类型" :value="getChangeTypeLabel(form.changeType)" />
        <CommonInfoRow label="变更时间" :value="formatDate(form.changeDate)" />
        <CommonInfoRow label="备注说明" :value="form.remark" isColumn />
      </CommonSection>

      <!-- 变更材料 -->
      <AttachmentList :file="mergedChangeFile" title="变更材料" />

      <!-- 如果是主任变更 (10) -->
      <template v-if="form.changeType === '10'">
        <CommonSection title="现委员会主任">
          <view class="info-box" v-if="acadeCommittee">
            <CommonInfoRow label="主任委员" :value="acadeCommittee.directorName" />
            <CommonInfoRow label="所属科室" :value="acadeCommittee.directorDeptName" />
            <CommonInfoRow label="职称" :value="acadeCommittee.directorTechnicalTitle" />
            <CommonInfoRow label="邮箱" :value="acadeCommittee.directorEmail" />
          </view>
          <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
        </CommonSection>

        <CommonSection title="变更委员会主任">
          <view class="info-box highlight-box" v-if="acadeCommitteeChange">
            <CommonInfoRow label="主任委员" :value="acadeCommitteeChange.userName" />
            <CommonInfoRow label="所属科室" :value="acadeCommitteeChange.deptName" />
            <CommonInfoRow label="职称" :value="acadeCommitteeChange.technicalTitle" />
            <CommonInfoRow label="邮箱" :value="acadeCommitteeChange.userEmail" />
          </view>
        </CommonSection>
      </template>

      <!-- 如果是副主任/委员变更 (20/30) -->
      <template v-else>
        <!-- 现人员信息 -->
        <CommonSection title="现人员信息">
          <view class="staff-list" v-if="acadeMemberList?.length">
            <view class="staff-item" v-for="(item, index) in acadeMemberList" :key="index">
              <view class="staff-header">
                <text class="s-name">{{ item.userName }}</text>
                <text class="s-tag blue">{{ getUserTypeLabel(item.userType) }}</text>
              </view>
              <view class="s-body">
                <text class="s-text">{{ item.deptName }} | {{ item.technicalTitle }}</text>
                <text class="s-text mt5">{{ item.userEmail }}</text>
              </view>
            </view>
          </view>
          <uv-empty v-else mode="data" text="暂无人员信息"></uv-empty>
        </CommonSection>

        <!-- 变更人员信息 -->
        <CommonSection title="变更人员信息">
          <view class="staff-list" v-if="acadeCommitteeChangeList?.length">
            <view class="staff-item highlight-border" v-for="(item, index) in acadeCommitteeChangeList" :key="index">
              <view class="staff-header">
                <text class="s-name">{{ item.userName }}</text>
                <text class="s-tag primary">{{ getUserTypeLabel(item.userType) }}</text>
              </view>
              <view class="s-body">
                <text class="s-text">{{ item.deptName }} | {{ item.technicalTitle }}</text>
                <text class="s-text mt5">{{ item.userEmail }}</text>
              </view>
            </view>
          </view>
          <uv-empty v-else mode="data" text="暂无变更信息"></uv-empty>
        </CommonSection>
      </template>
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { useDocumentApi } from '@/api/document';
import { formatDate } from '@/utils/date';
import to from 'await-to-js';
import CommonSection from '@/components/ui/CommonSection.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';
import AttachmentList from './AttachmentList.vue';

const props = defineProps<{
  code: string;
}>();

const documentApi = useDocumentApi();

const form = ref<any>(null); // 变更单据
const acadeCommittee = ref<any>(null); // 变更前的委员会详情
const acadeCommitteeChange = ref<any>(null); // 变更后的主任信息
const acadeMemberList = ref<any[]>([]); // 变更前的人员列表
const acadeCommitteeChangeList = ref<any[]>([]); // 变更后的人员列表
const committees = ref<any[]>([]); // 所有委员会列表，用于翻译名称

const loading = ref(false);

const committeeLabel = computed(() => {
  if (!form.value?.committeeId) return '';
  const item = committees.value.find(c => c.id === form.value.committeeId);
  return item ? item.committeeName : '-';
});

const mergedChangeFile = computed(() => {
  if (!form.value?.changeFile) return null;
  return {
    url: form.value.changeFile,
    name: '变更材料',
    type: '变更材料'
  };
});

const getChangeTypeLabel = (val: string) => {
  const map: any = { '10': '主任变更', '20': '副主任变更', '30': '委员变更' };
  return map[val] || val || '-';
};

const getUserTypeLabel = (val: string) => {
  const map: any = { '10': '主任委员', '20': '副主任委员', '30': '委员' };
  return map[val] || val || '-';
};

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  
  // 1. 获取委员会列表（用于翻译ID）
  const [cErr, cRes] = await to(documentApi.getCommitteeList());
  if (!cErr && cRes?.data?.list) {
    committees.value = cRes.data.list;
  }

  // 2. 获取变更单据详情
  const [err, res] = await to(documentApi.getCommitteeByCode(props.code));
  if (!err && res?.data) {
    form.value = res.data;
    acadeCommitteeChange.value = res.data.acadeCommitteeMember;
    acadeCommitteeChangeList.value = res.data.acadeCommitteeList || [];

    // 3. 根据委员会ID获取原始详情（現人员信息）
    const [e, r] = await to(documentApi.getCommitteeById(res.data.committeeId, res.data.changeType));
    if (!e && r?.data) {
      acadeCommittee.value = r.data;
      acadeMemberList.value = r.data.acadeCommitteeList || [];
    }
  }
  
  loading.value = false;
};

onMounted(() => {
  fetchData();
});

watch(() => props.code, () => {
  fetchData();
});
</script>

<style lang="scss" scoped>
@import "./common.scss";

.info-box {
  background-color: #f8fafc;
  border-radius: 12rpx;
  padding: 8rpx 0;
  &.highlight-box {
    background-color: #f0f9ff;
    border: 1rpx solid #e0f2fe;
  }
}

.staff-list {
  .staff-item {
    padding: 24rpx;
    background-color: #f8fafc;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    border: 1rpx solid #f1f5f9;
    
    &.highlight-border {
      border: 2rpx dashed #3b82f6;
      background-color: #f0f9ff;
    }

    .staff-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .s-name {
        font-size: 30rpx;
        font-weight: 700;
        color: #1e293b;
      }
    }

    .s-body {
      display: flex;
      flex-direction: column;
      .s-text {
        font-size: 26rpx;
        color: #64748b;
      }
      .mt5 { margin-top: 8rpx; }
    }
  }
}
</style>