lowflow-h5/src/components/UserSelector/OrgName.vue

<script setup lang="ts">
import { type Dept, getById } from '@/api/modules/system/dept'
const props = withDefaults(
  defineProps<{
    id: string
    showLabel?: boolean
  }>(),
  {
    showLabel: true
  }
)
const dept = ref<Dept>()
onMounted(async () => {
  if (!props.id) {
    throw new Error('id is required')
  }
  const res = await getById(props.id)
  if (res.success) {
    dept.value = res.data
  }
})
</script>

<template>
  <div class="flex-items-center">
    <van-image class="h-6 w-6" round fit="cover">
      <template v-slot:loading>
        <van-icon name="cluster" />
      </template>
    </van-image>
    <span class="org-name" v-show="showLabel">
      {{ dept?.name }}
    </span>
  </div>
</template>

<style scoped lang="less">
.van-image + .org-name {
  margin-left: 8px;
}
</style>