newBank/code/vue/vue3/src/pengbaohao/staff.vue

<template>
  <div>
    <h3>员工信息</h3>
    <p v-if="loading">加载中...</p>
    <div v-else>
      <p>员工编号：{{ staffInfo.staffNo }}</p>
      <p>员工姓名：{{ staffInfo.staffName }}</p>
      <p>性别：{{ staffInfo.gender }}</p>
      <p>生日：{{ staffInfo.birthday }}</p>
      <p>身份证号码：{{ staffInfo.id }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { qryStaff } from '../api/staff';

// 定义响应式状态
const staffInfo = ref({
  staffNo: '',
  staffName: '',
  gender: '',
  birthday: '',
  id:'',
});


const loading = ref(true);

// 调用 API 获取员工信息
const fetchStaffInfo = async (staffNo: string) => {
  try {
    loading.value = true;
    console.log(staffNo);


    //调起 请求方法
    const response = await qryStaff(staffNo);


    console.log(response);

    staffInfo.value = response[0]; // 假设返回的数据结构与 staffInfo 相同
  } catch (error) {
    console.error('Failed to fetch staff info:', error);
    // 处理错误情况，例如显示错误消息
  } finally {
    loading.value = false;
  }
};

// 在组件挂载时获取员工信息
onMounted(() => {
  // 假设员工编号是已知的，或者从其他途径获取
  const staffNo = '007';
  fetchStaffInfo(staffNo);
});
</script>