1、入驻人员

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

@@ -3,7 +3,7 @@
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import {Avatar, Modal, Popconfirm, Space} from 'ant-design-vue';
 
 import {
   useVbenVxeGrid,
@@ -20,7 +20,9 @@ import type { PersonForm } from '#/api/property/resident/person/model';
 import { commonDownloadExcel } from '#/utils/file/download';
 
 import personModal from './person-modal.vue';
+import personDetail from './person-detail.vue';
 import { columns, querySchema } from './data';
+// import {TableSwitch} from "#/components/table";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -31,15 +33,6 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -83,6 +76,10 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 const [PersonModal, modalApi] = useVbenModal({
   connectedComponent: personModal,
 });
+const [PersonDetail, personDetailApi] = useVbenModal({
+  connectedComponent: personDetail,
+});
+
 
 function handleAdd() {
   modalApi.setData({});
@@ -118,6 +115,12 @@ function handleDownloadExcel() {
     fieldMappingTime: formOptions.fieldMappingTime,
   });
 }
+
+function handleInfo(row: Required<PersonForm>) {
+  personDetailApi.setData({ id: row.id });
+  personDetailApi.open();
+}
+
 </script>
 
 <template>
@@ -148,8 +151,26 @@ function handleDownloadExcel() {
           </a-button>
         </Space>
       </template>
+      <template #img="{ row }">
+        <Avatar :src="row.img" />
+      </template>
+<!--      <template #state="{ row }">-->
+<!--        <TableSwitch-->
+<!--          v-model:value="row.status"-->
+<!--          :api="() => personStatusChange(row)"-->
+<!--          :disabled="-->
+<!--              row.userId === 1 || !hasAccessByCodes(['system:user:edit'])-->
+<!--            "-->
+<!--          @reload="() => tableApi.query()"-->
+<!--        />-->
+<!--      </template>-->
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['property:person:edit']"
             @click.stop="handleEdit(row)"
@@ -174,5 +195,6 @@ function handleDownloadExcel() {
       </template>
     </BasicTable>
     <PersonModal @reload="tableApi.query()" />
+    <PersonDetail></PersonDetail>
   </Page>
 </template>