feat(property): 添加用户导入和人脸导入功能

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

@@ -1,29 +1,31 @@
 <script setup lang="ts">
 
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'
+import { getVxePopupContainer } from '@vben/utils'
 
-import {Avatar, Modal, Popconfirm, Space} from 'ant-design-vue';
+import { Avatar, Modal, Popconfirm, Space } from 'ant-design-vue'
 
 import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
   type VxeGridProps
-} from '#/adapter/vxe-table';
+} from '#/adapter/vxe-table'
 
 import {
   personExport,
   personList,
   personRemove, personUpdate,
-} from '#/api/property/resident/person';
-import type { PersonForm } from '#/api/property/resident/person/model';
-import { commonDownloadExcel } from '#/utils/file/download';
+} from '#/api/property/resident/person'
+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 {useAccess} from "@vben/access";
-import {TableSwitch} from "#/components/table";
+import personModal from './person-modal.vue'
+import personDetail from './person-detail.vue'
+import personImportModal from './person-import-modal.vue'
+import faceImportModal from './face-import-modal.vue'
+import { columns, querySchema } from './data'
+import { useAccess } from "@vben/access"
+import { TableSwitch } from "#/components/table"
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -34,7 +36,7 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-};
+}
 
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
@@ -56,7 +58,7 @@ const gridOptions: VxeGridProps = {
           pageNum: page.currentPage,
           pageSize: page.pageSize,
           ...formValues,
-        });
+        })
       },
     },
   },
@@ -65,60 +67,74 @@ const gridOptions: VxeGridProps = {
   },
   // 表格全局唯一表示 保存列配置需要用到
   id: 'property-person-index'
-};
+}
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-});
+})
 
 const [PersonModal, modalApi] = useVbenModal({
   connectedComponent: personModal,
-});
+})
 const [PersonDetail, personDetailApi] = useVbenModal({
   connectedComponent: personDetail,
-});
+})
+const [PersonImportModal, personImportModalApi] = useVbenModal({
+  connectedComponent: personImportModal,
+})
+const [FaceImportModal, faceImportModalApi] = useVbenModal({
+  connectedComponent: faceImportModal,
+})
 
-const { hasAccessByCodes } = useAccess();
+const { hasAccessByCodes } = useAccess()
 
 function handleAdd() {
-  modalApi.setData({});
-  modalApi.open();
+  modalApi.setData({})
+  modalApi.open()
+}
+
+function handleImport() {
+  personImportModalApi.open()
+}
+
+function handleFaceImport() {
+  faceImportModalApi.open()
 }
 
 async function handleEdit(row: Required<PersonForm>) {
-  modalApi.setData({ id: row.id });
-  modalApi.open();
+  modalApi.setData({ id: row.id })
+  modalApi.open()
 }
 
 async function handleDelete(row: Required<PersonForm>) {
-  await personRemove(row.id);
-  await tableApi.query();
+  await personRemove(row.id)
+  await tableApi.query()
 }
 
 function handleMultiDelete() {
-  const rows = tableApi.grid.getCheckboxRecords();
-  const ids = rows.map((row: Required<PersonForm>) => row.id);
+  const rows = tableApi.grid.getCheckboxRecords()
+  const ids = rows.map((row: Required<PersonForm>) => row.id)
   Modal.confirm({
     title: '提示',
     okType: 'danger',
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
-      await personRemove(ids);
-      await tableApi.query();
+      await personRemove(ids)
+      await tableApi.query()
     },
-  });
+  })
 }
 
 function handleDownloadExcel() {
   commonDownloadExcel(personExport, '入驻员工数据', tableApi.formApi.form.values, {
     fieldMappingTime: formOptions.fieldMappingTime,
-  });
+  })
 }
 
 function handleInfo(row: Required<PersonForm>) {
-  personDetailApi.setData({ id: row.id });
-  personDetailApi.open();
+  personDetailApi.setData({ id: row.id })
+  personDetailApi.open()
 }
 </script>
 
@@ -127,68 +143,44 @@ function handleInfo(row: Required<PersonForm>) {
     <BasicTable table-title="入驻员工列表">
       <template #toolbar-tools>
         <Space>
-          <a-button
-            v-access:code="['property:person:export']"
-            @click="handleDownloadExcel"
-          >
+          <a-button v-access:code="['property:person:export']" @click="handleDownloadExcel">
             {{ $t('pages.common.export') }}
           </a-button>
-          <a-button
-            :disabled="!vxeCheckboxChecked(tableApi)"
-            danger
-            type="primary"
-            v-access:code="['property:person:remove']"
-            @click="handleMultiDelete">
+          <a-button v-access:code="['system:user:import']" @click="handleImport">
+            {{ $t('pages.common.import') }}
+          </a-button>
+          <a-button @click="handleFaceImport">
+            人脸导入
+          </a-button>
+          <a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary"
+            v-access:code="['property:person:remove']" @click="handleMultiDelete">
             {{ $t('pages.common.delete') }}
           </a-button>
-          <a-button
-            type="primary"
-            v-access:code="['property:person:add']"
-            @click="handleAdd"
-          >
+          <a-button type="primary" v-access:code="['property:person:add']" @click="handleAdd">
             {{ $t('pages.common.add') }}
           </a-button>
         </Space>
       </template>
       <template #img="{ row }">
         <Avatar :src="row.img" v-if="row.img" />
-        <span v-else >无</span>
+        <span v-else>无</span>
       </template>
       <template #state="{ row }">
-
-        <TableSwitch
-          :checkedValue="1"
-          :unCheckedValue="0"
-          v-model:value="row.state"
-          :api="() => personUpdate(row)"
-          :disabled="!hasAccessByCodes(['property:person:edit'])"
-          @reload="() => tableApi.query()"
-        />
+  
+        <TableSwitch :checkedValue="1" :unCheckedValue="0" v-model:value="row.state" :api="() => personUpdate(row)"
+          :disabled="!hasAccessByCodes(['property:person:edit'])" @reload="() => tableApi.query()" />
       </template>
       <template #action="{ row }">
         <Space>
-          <ghost-button
-            @click.stop="handleInfo(row)"
-          >
+          <ghost-button @click.stop="handleInfo(row)">
             {{ $t('pages.common.info') }}
           </ghost-button>
-          <ghost-button
-            v-access:code="['property:person:edit']"
-            @click.stop="handleEdit(row)"
-          >
+          <ghost-button v-access:code="['property:person:edit']" @click.stop="handleEdit(row)">
             {{ $t('pages.common.edit') }}
           </ghost-button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
-              danger
-              v-access:code="['property:person:remove']"
-              @click.stop=""
-            >
+          <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确认删除？"
+            @confirm="handleDelete(row)">
+            <ghost-button danger v-access:code="['property:person:remove']" @click.stop="">
               {{ $t('pages.common.delete') }}
             </ghost-button>
           </Popconfirm>
@@ -197,10 +189,12 @@ function handleInfo(row: Required<PersonForm>) {
     </BasicTable>
     <PersonModal @reload="tableApi.query()" />
     <PersonDetail></PersonDetail>
+    <PersonImportModal />
+    <FaceImportModal />
   </Page>
 </template>
 <style scoped>
-:where(.css-dev-only-do-not-override-aza1th).ant-avatar{
+:where(.css-dev-only-do-not-override-aza1th).ant-avatar {
   border-radius: 0;
 }
 </style>