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

<script setup lang="ts">

import {ref, shallowRef} from 'vue';

import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem, Tabs, TabPane, Table} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

import {personInfo} from '#/api/property/resident/person';
import type {Person} from "#/api/property/resident/person/model";
import {accessControlColumns,carColumns} from "#/views/property/resident/person/data";
import { renderDictValue} from "#/utils/render";


dayjs.extend(duration);
dayjs.extend(relativeTime);
const personDetail = shallowRef<null | Person>(null);

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



const activeKey = ref('1');

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

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

  modalApi.modalLoading(false);
}


</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="入驻人员信息" class="w-[70%]">
    <Descriptions v-if="personDetail" size="small" :column="1" bordered :labelStyle="{width:'100px'}">
      <DescriptionsItem label="入驻人员">
       {{ personDetail.userName+'-'+renderDictValue(personDetail.gender,'sys_user_sex')+'-'+personDetail.phone}}
      </DescriptionsItem>
      <DescriptionsItem label="所属单位">
        {{personDetail.unitName+'-'+personDetail.unitId }}
      </DescriptionsItem>
      <DescriptionsItem label="入驻位置">
        {{ personDetail.locathon }}
      </DescriptionsItem>
      <DescriptionsItem label="人脸图片">
        {{ personDetail.img }}
      </DescriptionsItem>
      <DescriptionsItem label="入驻时间">
        {{ personDetail.time}}
      </DescriptionsItem>
      <DescriptionsItem label="车牌号码">
        {{personDetail.carNumber}}
      </DescriptionsItem>
      <DescriptionsItem label="备注">
        {{ personDetail.remark }}
      </DescriptionsItem>

    </Descriptions>
    <div class="foot-tabs">
      <Tabs v-model:activeKey="activeKey" type="card">
        <TabPane key="1" tab="门禁记录">
          <Table :dataSource="[]" :columns="accessControlColumns" :pagination="false"  >
            <template #bodyCell="{ column, index }">
              <template v-if="column.field === 'id'">
                {{ index + 1 }}
              </template>
            </template>
          </Table>
        </TabPane>
        <TabPane key="2" tab="车辆记录" v-if="personDetail?.carNumber">
          <Table :dataSource="[]" :columns="carColumns" :pagination="false" >
            <template #bodyCell="{ column, index }">
              <template v-if="column.field === 'id'">
                {{ index + 1 }}
              </template>
            </template>
          </Table>
        </TabPane>
      </Tabs>
    </div>
  </BasicModal>
</template>
<style lang="scss" scoped>
.foot-tabs {
  margin-top:20px;
}
</style>