xk-admin/apps/web-antd/src/views/system/doctor-input/components/DetailModal.vue

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

import { useVbenModal } from '@vben/common-ui';

import { Avatar, Descriptions, DescriptionsItem, Image, Spin, message } from 'ant-design-vue';

import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';

import { getDoctorInputDetail } from '../api';
import {
  inputUserDisplayName,
  normalizeInputUser,
  resolveAvatarUrl,
} from '../../store-input/utils/inputUser';

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

const getTypeText = (type: number) => {
  if (type === 1) return '中医医生';
  if (type === 2) return '西医医生';
  return '-';
};

const getSignTypeText = (signType: number) => {
  if (signType === 1) return '电子签名';
  if (signType === 2) return '手写签名';
  return '-';
};

const loadDetail = async (id: number) => {
  loading.value = true;
  detailData.value = null;
  try {
    const res = await getDoctorInputDetail(id);
    detailData.value = res;
    normalizeInputUser(detailData.value);
  } catch (error) {
    console.error('获取详情失败:', error);
    message.error('获取详情失败');
  } finally {
    loading.value = false;
  }
};

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      detailData.value = null;
      loading.value = false;
      return;
    }
    const { values } = modalApi.getData<Record<string, any>>();
    if (values?.id) {
      await loadDetail(values.id);
    } else {
      detailData.value = values || null;
      normalizeInputUser(detailData.value);
    }
  },
});
</script>

<template>
  <Modal title="医生预填详情" class="w-[70%]">
    <Spin :spinning="loading">
      <div v-if="detailData" class="p-4">
        <Descriptions :column="2" bordered>
          <DescriptionsItem label="ID">{{ detailData.id }}</DescriptionsItem>
          <DescriptionsItem label="医生姓名">{{ detailData.name }}</DescriptionsItem>
          <DescriptionsItem label="手机号">
            <SensitiveText :record="detailData" field="mobile" />
          </DescriptionsItem>
          <DescriptionsItem label="身份证">
            <SensitiveText :record="detailData" field="idcard" />
          </DescriptionsItem>
          <DescriptionsItem label="身份">{{ getTypeText(detailData.type) }}</DescriptionsItem>
          <DescriptionsItem label="签名类型">{{ getSignTypeText(detailData.sign_type) }}</DescriptionsItem>
          <DescriptionsItem label="科室">{{ detailData.depart?.name || '-' }}</DescriptionsItem>
          <DescriptionsItem label="职称">{{ detailData.titleInfo?.name || '-' }}</DescriptionsItem>
          <DescriptionsItem label="擅长" :span="2">{{ detailData.good_at }}</DescriptionsItem>
          <DescriptionsItem label="简介" :span="2">{{ detailData.intro }}</DescriptionsItem>
          <DescriptionsItem label="录入人">
          <div class="flex items-center gap-2">
            <Avatar
              v-if="resolveAvatarUrl(detailData.inputUser?.avatar)"
              :src="resolveAvatarUrl(detailData.inputUser?.avatar)"
              :size="40"
            />
            <Avatar v-else :size="40">{{ inputUserDisplayName(detailData.inputUser).charAt(0) }}</Avatar>
            <span>{{ inputUserDisplayName(detailData.inputUser) }}</span>
          </div>
        </DescriptionsItem>
          <DescriptionsItem label="审核状态">
            <span
              :class="{
                'text-orange-500': detailData.status === 0,
                'text-green-500': detailData.status === 1,
                'text-red-500': detailData.status === 2,
              }"
            >
              {{
                detailData.status === 0
                  ? '待审核'
                  : detailData.status === 1
                    ? '审核通过'
                    : '审核拒绝'
              }}
            </span>
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.auditAdmin" label="审核人">
            {{ detailData.auditAdmin.nick_name }}
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.audit_time" label="审核时间">
            {{ new Date(detailData.audit_time * 1000).toLocaleString() }}
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.audit_remark" label="审核备注" :span="2">
            {{ detailData.audit_remark }}
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.avatar" label="头像" :span="2">
            <Image :src="detailData.avatar" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.qualification" label="资格证书" :span="2">
            <Image :src="detailData.qualification" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.practicing" label="执业证书" :span="2">
            <Image :src="detailData.practicing" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.title" label="职称证书" :span="2">
            <Image :src="detailData.title" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.card_up" label="身份证正面" :span="2">
            <Image :src="detailData.card_up" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.card_down" label="身份证反面" :span="2">
            <Image :src="detailData.card_down" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.sign_image" label="签名图片" :span="2">
            <Image :src="detailData.sign_image" :width="100" :height="100" :preview="true" />
          </DescriptionsItem>
        </Descriptions>
      </div>
      <div v-else-if="!loading" class="p-8 text-center text-gray-400">暂无详情数据</div>
    </Spin>
  </Modal>
</template>