1、入驻人员

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

@@ -0,0 +1,105 @@
+<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 {personList} from "#/api/property/resident/person";
+// import {renderDict} 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 };
+  // const response = await personInfo(id);
+  const response = {id:1};
+  // 赋值
+  personDetail.value = response;
+
+  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="入驻人员">
+       {{ '入驻人员' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="所属单位">
+        {{ '单位名称' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="入驻位置">
+        {{ '单位名称' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="人脸图片">
+        {{ '单位名称' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="入驻时间">
+        {{ '单位名称' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="车牌号码">
+        {{ '单位名称' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="备注">
+        {{ '单位名称' }}
+      </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="车辆记录">
+          <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>