dev_ljl
87331ab607
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
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>
|