Industrial-image-management-system---web/src/views/system/post/PostDetailDrawer.vue

<template>
  <a-drawer
    v-model:visible="visible"
    title="岗位详情"
    width="500px"
    :footer="false"
    unmount-on-close
  >
    <a-descriptions
      :data="detailData"
      :column="1"
      :align="{ label: 'right' }"
      label-style="width: 120px"
      size="medium"
      :loading="loading"
      border
    >
      <template #label="{ label }">{{ label }}</template>
      <template #value="{ value }">
        <span v-if="value !== undefined && value !== null">{{ value }}</span>
        <span v-else>-</span>
      </template>
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import { getPostDetail } from '@/apis/system/post'
import { useLoading } from '@/hooks'

defineOptions({ name: 'PostDetailDrawer' })

const visible = ref(false)
const { loading, setLoading } = useLoading()
const detailData = ref<Array<{ label: string, value: any }>>([])

// 获取详情
const getDetail = async (id: string) => {
  try {
    setLoading(true)
    const { data } = await getPostDetail(id)
    if (data) {
      detailData.value = [
        { label: '岗位名称', value: data.postName },
        { label: '岗位排序', value: data.postSort },
        { label: '状态', value: Number(data.status) === 1 ? '正常' : '停用' },
        { label: '备注', value: data.remark },
        { label: '创建时间', value: data.createTime },
        { label: '更新时间', value: data.updateTime },
      ]
    }
  } finally {
    setLoading(false)
  }
}

// 查看详情
const onDetail = async (id: string) => {
  visible.value = true
  await getDetail(id)
}

defineExpose({
  onDetail,
})
</script>