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">
      <!-- 变更单据基本信息 -->
      <view class="common-section-card">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">所属委员会</text>
          <text class="value">{{ committeeLabel || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">变更类型</text>
          <text class="value">{{ getChangeTypeLabel(form.changeType) }}</text>
        </view>
        <view class="info-row">
          <text class="label">变更时间</text>
          <text class="value">{{ form.changeDate || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">备注说明</text>
          <text class="value">{{ form.remark || '-' }}</text>
        </view>
      </view>

      <!-- 变更材料 -->
      <view class="common-section-card mt20" v-if="form.changeFile">
        <view class="section-title">变更材料</view>
        <view class="common-file-list">
          <view class="file-item" @click="previewFile(form.changeFile, '变更材料')">
            <view class="file-info">
              <text class="f-name">下载变更材料</text>
              <view class="f-meta">
                <text class="f-type">附件</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 如果是主任变更 (10) -->
      <template v-if="form.changeType === '10'">
        <view class="common-section-card mt20">
          <view class="section-title">现委员会主任</view>
          <view class="info-box" v-if="acadeCommittee">
            <view class="info-row"><text class="label">主任委员</text><text class="value">{{ acadeCommittee.directorName || '-' }}</text></view>
            <view class="info-row"><text class="label">所属科室</text><text class="value">{{ acadeCommittee.directorDeptName || '-' }}</text></view>
            <view class="info-row"><text class="label">职称</text><text class="value">{{ acadeCommittee.directorTechnicalTitle || '-' }}</text></view>
            <view class="info-row"><text class="label">邮箱</text><text class="value">{{ acadeCommittee.directorEmail || '-' }}</text></view>
          </view>
          <text v-else class="empty-text">暂无数据</text>
        </view>

        <view class="common-section-card mt20">
          <view class="section-title">变更委员会主任</view>
          <view class="info-box highlight-box" v-if="acadeCommitteeChange">
            <view class="info-row"><text class="label">主任委员</text><text class="value">{{ acadeCommitteeChange.userName || '-' }}</text></view>
            <view class="info-row"><text class="label">所属科室</text><text class="value">{{ acadeCommitteeChange.deptName || '-' }}</text></view>
            <view class="info-row"><text class="label">职称</text><text class="value">{{ acadeCommitteeChange.technicalTitle || '-' }}</text></view>
            <view class="info-row"><text class="label">邮箱</text><text class="value">{{ acadeCommitteeChange.userEmail || '-' }}</text></view>
          </view>
        </view>
      </template>

      <!-- 如果是副主任/委员变更 (20/30) -->
      <template v-else>
        <!-- 现人员信息 -->
        <view class="common-section-card mt20">
          <view class="section-title">现人员信息</view>
          <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">{{ 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>
        </view>

        <!-- 变更人员信息 -->
        <view class="common-section-card mt20">
          <view class="section-title">变更人员信息</view>
          <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>
        </view>
      </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 { previewFile } from '@/utils/file';
import to from 'await-to-js';

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 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: 10rpx 20rpx;
  &.highlight-box {
    background-color: #f0f9ff;
    border: 1rpx solid #e0f2fe;
  }
}

.empty-text {
  font-size: 24rpx;
  color: #999;
  padding: 20rpx;
}

.staff-list {
  .staff-item {
    padding: 20rpx;
    background-color: #f8fafc;
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    border: 1rpx solid #eef2f7;
    
    &.highlight-border {
      border-color: #bae6fd;
      background-color: #f0f9ff;
    }

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

      .s-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #334155;
      }

      .s-tag {
        font-size: 20rpx;
        color: #64748b;
        background-color: #f1f5f9;
        padding: 2rpx 12rpx;
        border-radius: 4rpx;
        
        &.primary {
          color: #0284c7;
          background-color: #e0f2fe;
        }
      }
    }

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