labsop_scientific_h5/pages/todo/components/document/CredentialForm.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="form.credentialName" />
        <CommonInfoRow label="药证号" :value="form.credentialCode" />
        <CommonInfoRow label="药证类型" :value="form.credentialType === '10' ? '中药' : form.credentialType === '20' ? '西药' : '-'" />
        <CommonInfoRow label="批准单位" :value="form.ratifyDept" />
        <CommonInfoRow label="批准时间" :value="formatDate(form.ratifyTime)" />
        <CommonInfoRow label="一级学科" :value="form.disciplineName" />
        <CommonInfoRow label="所属单位" :value="form.deptName" />
        <CommonInfoRow label="备注" :value="form.remark" isColumn />
      </CommonSection>

      <!-- 作者信息 -->
      <CommonSection title="作者信息" v-if="form.memberList?.length">
        <view class="member-list">
          <view class="member-item" v-for="(member, index) in form.memberList" :key="index">
            <view class="member-header">
              <view class="m-left">
                <text class="m-name">{{ member.memberName }}</text>
                <text class="m-type-tag blue">{{ getDictLabel('sci_paper_author_type', member.memberType) }}</text>
              </view>
              <text class="m-tag" v-if="member.signOrder">署名顺序: {{ member.signOrder }}</text>
            </view>
            <view class="m-body">
              <view class="m-line"><text class="l">职工号/学号：</text><text class="v">{{ member.memberCode || '-' }}</text></view>
              <view class="m-line">
                <text class="l">性别：</text>
                <text class="v">{{ member.gender === '10' ? '男' : member.gender === '20' ? '女' : '-' }}</text>
              </view>
              <view class="m-line">
                <text class="l">学历：</text>
                <text class="v">{{ getDictLabel('sci_academic_degree', member.educated) }}</text>
              </view>
              <view class="m-line">
                <text class="l">职称：</text>
                <text class="v">{{ getDictLabel('sci_discipline_job_title', member.technicalTitle) }}</text>
              </view>
              <view class="m-line"><text class="l">单位/学校：</text><text class="v">{{ member.deptName || '-' }}</text></view>
              <view class="m-line"><text class="l">贡献率：</text><text class="v">{{ member.contributionRate || 0 }}%</text></view>
            </view>
          </view>
        </view>
      </CommonSection>

      <!-- 附件信息 -->
      <AttachmentList :list="mergedFileList" title="审批附件" />
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { useDict } from '@/hooks/useDict';
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 { getDictLabel } = useDict(
  'sci_paper_author_type',
  'sci_academic_degree',
  'sci_discipline_job_title'
);
const documentApi = useDocumentApi();

const form = ref<any>(null);
const loading = ref(false);

const mergedFileList = computed(() => {
  if (!form.value?.fileName || !form.value?.fileUrl) return [];
  return [{
    fileName: form.value.fileName,
    fileUrl: form.value.fileUrl,
    fileType: '审批附件'
  }];
});

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  const [err, res] = await to(documentApi.getCredentialByCode(props.code));
  if (!err && res?.data) {
    form.value = res.data;
  }
  loading.value = false;
};

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

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

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