admin-vben5/apps/web-antd/src/views/property/resident/unit/unit-detail.vue

<script setup lang="ts">
import type {Unit} from '#/api/property/resident/unit/model';

import {shallowRef} from 'vue';

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

import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

import {resident_unitInfo} from '#/api/property/resident/unit';
import {renderDict} from "#/utils/render";

dayjs.extend(duration);
dayjs.extend(relativeTime);

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    unitDetail.value = null;
  },
});

const unitDetail = shallowRef<null | Unit>(null);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);

  const {id} = modalApi.getData() as { id: number | string };
  const response = await resident_unitInfo(id);
  // 赋值
  unitDetail.value = response;

  modalApi.modalLoading(false);
}


</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="入驻单位信息" class="w-[70%]">
    <Descriptions v-if="unitDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
      <DescriptionsItem label="单位编号">
       {{ unitDetail.id }}
      </DescriptionsItem>
      <DescriptionsItem label="单位名称">
        {{ unitDetail.name }}
      </DescriptionsItem>
      <DescriptionsItem label="单位类型" v-if="unitDetail.type!=null">
        <component
          :is="renderDict(unitDetail.type,'wy_qylx')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="联系人">
        {{ unitDetail.contactPerson +'-'+unitDetail.phone}}
      </DescriptionsItem>
      <DescriptionsItem label="入驻位置" :span="2">
        {{ unitDetail.locationDetail }}
      </DescriptionsItem>
      <DescriptionsItem label="入驻时间">
        {{ unitDetail.time }}
      </DescriptionsItem>
      <DescriptionsItem label="员工数量">
        {{ unitDetail.number }}
      </DescriptionsItem>
      <DescriptionsItem label="创建时间">
        {{ unitDetail.createTime ?? '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="状态" v-if="unitDetail.state!=null">
        <component
          :is="renderDict(unitDetail.state,'wy_state')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="备注">
        {{ unitDetail.remark ?? '-' }}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>