health.admin/src/components/UserPreview.vue

<script setup lang="ts">
import type { UserModel } from '@/model/system.model';
import { userMethod }     from '@/request/api/system.api';
import { useRequest }     from 'alova/client';


const props = withDefaults(defineProps<{ data: UserModel, request?: boolean; }>(), {
  request: true,
});
const { data, loading } = useRequest(
  () => userMethod(props.data),
  {
    initialData: props.data,
    middleware: (_, next) => { if ( props.request ) next(); },
  },
);
</script>
<template>
  <a-spin :spinning="loading">
    <a-descriptions bordered>
      <a-descriptions-item label="系统账号">{{ data.userId }}</a-descriptions-item>
      <a-descriptions-item label="角色" :span="2">{{ data.roles?.map(t => t.roleName)?.join(', ') }}
      </a-descriptions-item>
      <a-descriptions-item label="医院 / 科室" :span="2">{{ data.dept?.deptFullPathName }}</a-descriptions-item>
      <a-descriptions-item label="工号">{{ data.jobnumber }}</a-descriptions-item>
      <a-descriptions-item label="姓名">{{ data.nickName }}</a-descriptions-item>
      <a-descriptions-item label="手机号码">{{ data.phonenumber }}</a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>
<style scoped lang="scss">
.separate + .separate::before{
  content: '/';
  margin: 0 2px;
}
</style>