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

apps/web-antd/src/api/property/resident/person/index.ts

@@ -1,9 +1,9 @@
-import type { PersonVO, PersonForm, PersonQuery } from './model';
+import type { PersonVO, PersonForm, PersonQuery, PerssonImportParam } from './model';
 
 import type { ID, IDS } from '#/api/common';
 import type { PageResult } from '#/api/common';
 
-import { commonExport } from '#/api/helper';
+import { commonExport, ContentTypeEnum } from '#/api/helper';
 import { requestClient } from '#/api/request';
 
 /**
@@ -59,3 +59,54 @@ export function personUpdate(data: PersonForm) {
 export function personRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/property/person/${id}`);
 }
+
+/**
+ * 从excel导入用户
+ * @param data
+ * @returns void
+ */
+export function personImportData(data: PerssonImportParam) {
+  return requestClient.post<{ code: number; msg: string }>(
+    '/property/person/importData',
+    data,
+    {
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_DATA,
+      },
+      isTransformResponse: false,
+    },
+  );
+}
+
+/**
+ * 导入人脸
+ * @param data
+ * @returns void
+ */
+export function personImportFace(data: PerssonImportParam) {
+  return requestClient.post<{ code: number; msg: string }>(
+    '/property/person/importFace',
+    data,
+    {
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_DATA,
+      },
+      isTransformResponse: false,
+    },
+  );
+}
+
+/**
+ * 下载用户导入模板
+ * @returns blob
+ */
+export function downloadImportTemplate() {
+  return requestClient.post<Blob>(
+    '/property/person/importTemplate',
+    {},
+    {
+      isTransformResponse: false,
+      responseType: 'blob',
+    },
+  );
+}

apps/web-antd/src/api/property/resident/person/model.d.ts

@@ -285,3 +285,15 @@ export interface Person extends BaseEntity {
 
   email: string
 }
+
+/**
+ * @description: 用户导入
+ * @param updateSupport 是否覆盖数据
+ * @param unitId 单位Id
+ * @param file excel文件
+ */
+export interface PerssonImportParam {
+  updateSupport: boolean;
+  unitId: number;
+  file: Blob | File;
+}

apps/web-antd/src/views/property/resident/person/face-import-modal.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { UploadFile } from 'ant-design-vue/es/upload/interface'
+
+import { h, ref } from 'vue'
+
+import { useVbenModal } from '@vben/common-ui'
+import { InBoxIcon } from '@vben/icons'
+
+import { Modal, Upload, Select, message } from 'ant-design-vue'
+
+import type { Resident_unitQuery } from '#/api/property/resident/unit/model'
+import { resident_unitList } from '#/api/property/resident/unit'
+import { personImportFace } from '#/api/property/resident/person'
+
+const emit = defineEmits<{ reload: [] }>()
+
+const UploadDragger = Upload.Dragger
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null
+    }
+
+    const params: Resident_unitQuery = {
+      pageNum: 1,
+      pageSize: 500,
+    }
+
+    const res = await resident_unitList(params)
+    unitOptions.value = res.rows
+  }
+})
+
+const unitOptions = ref<any[]>([])
+const fileList = ref<UploadFile[]>([])
+const unitId = ref<number>()
+const fieldNames = {
+  value: 'id',
+  label: 'name',
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true)
+    if (fileList.value.length !== 1) {
+      handleCancel()
+      return
+    }
+    if (!unitId.value) {
+      message.error('请选择单位！')
+      return
+    }
+    const data = {
+      file: fileList.value[0]!.originFileObj as Blob,
+      unitId: unitId.value,
+    }
+    // console.log(data)
+    // const code = 200
+    // const msg = '成功'
+    const { code, msg } = await personImportFace(data)
+    let modal = Modal.success
+    if (code === 200) {
+      emit('reload')
+    } else {
+      modal = Modal.error
+    }
+    handleCancel()
+    modal({
+      content: h('div', {
+        class: 'max-h-[260px] overflow-y-auto',
+        innerHTML: msg, // 后台已经处理xss问题
+      }),
+      title: '提示',
+    })
+  } catch (error) {
+    console.warn(error)
+    modalApi.close()
+  } finally {
+    modalApi.modalLoading(false)
+  }
+}
+
+function handleCancel() {
+  modalApi.close()
+  fileList.value = []
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :fullscreen-button="false" title="用户人脸导入">
+    <!-- z-index不设置会遮挡模板下载loading -->
+    <!-- 手动处理 而不是放入文件就上传 -->
+    <UploadDragger v-model:file-list="fileList" :before-upload="() => false" :max-count="1" :show-upload-list="true"
+      accept=".zip">
+      <p class="ant-upload-drag-icon flex items-center justify-center">
+        <InBoxIcon class="text-primary size-[48px]" />
+      </p>
+      <p class="ant-upload-text">点击或者拖拽到此处上传文件</p>
+    </UploadDragger>
+    <div class="mt-2 flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <span>允许导入.zip文件</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span>
+          选择单位：
+        </span>
+        <Select :options="unitOptions" :fieldNames="fieldNames" v-model:value="unitId" style="width: 250px;" />
+      </div>
+    </div>
+  </BasicModal>
+</template>

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>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { UploadFile } from 'ant-design-vue/es/upload/interface'
+
+import { h, ref, unref } from 'vue'
+
+import { useVbenModal } from '@vben/common-ui'
+import { ExcelIcon, InBoxIcon } from '@vben/icons'
+
+import { Modal, Switch, Upload, Select, message } from 'ant-design-vue'
+
+import type { Resident_unitQuery } from '#/api/property/resident/unit/model'
+import { resident_unitList } from '#/api/property/resident/unit'
+import { downloadImportTemplate, personImportData } from '#/api/property/resident/person'
+import { commonDownloadExcel } from '#/utils/file/download'
+
+const emit = defineEmits<{ reload: [] }>()
+
+const UploadDragger = Upload.Dragger
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null
+    }
+
+    const params: Resident_unitQuery = {
+      pageNum: 1,
+      pageSize: 500,
+    }
+
+    const res = await resident_unitList(params)
+    unitOptions.value = res.rows
+  }
+})
+
+const unitOptions = ref<any[]>([])
+const fileList = ref<UploadFile[]>([])
+const checked = ref(false)
+const unitId = ref<number>()
+const fieldNames = {
+  value: 'id',
+  label: 'name',
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true)
+    if (fileList.value.length !== 1) {
+      handleCancel()
+      return
+    }
+    if (!unitId.value) {
+      message.error('请选择单位！')
+      return
+    }
+    const data = {
+      file: fileList.value[0]!.originFileObj as Blob,
+      updateSupport: unref(checked),
+      unitId: unitId.value,
+    }
+    // console.log(data)
+    // const code = 200
+    // const msg = '成功'
+    const { code, msg } = await personImportData(data)
+    let modal = Modal.success
+    if (code === 200) {
+      emit('reload')
+    } else {
+      modal = Modal.error
+    }
+    handleCancel()
+    modal({
+      content: h('div', {
+        class: 'max-h-[260px] overflow-y-auto',
+        innerHTML: msg, // 后台已经处理xss问题
+      }),
+      title: '提示',
+    })
+  } catch (error) {
+    console.warn(error)
+    modalApi.close()
+  } finally {
+    modalApi.modalLoading(false)
+  }
+}
+
+function handleCancel() {
+  modalApi.close()
+  fileList.value = []
+  checked.value = false
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :fullscreen-button="false" title="用户导入">
+    <!-- z-index不设置会遮挡模板下载loading -->
+    <!-- 手动处理 而不是放入文件就上传 -->
+    <UploadDragger v-model:file-list="fileList" :before-upload="() => false" :max-count="1" :show-upload-list="true"
+      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+      <p class="ant-upload-drag-icon flex items-center justify-center">
+        <InBoxIcon class="text-primary size-[48px]" />
+      </p>
+      <p class="ant-upload-text">点击或者拖拽到此处上传文件</p>
+    </UploadDragger>
+    <div class="mt-2 flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <span>允许导入xlsx, xls文件</span>
+        <a-button type="link" @click="commonDownloadExcel(downloadImportTemplate, '入驻员工导入模板')">
+          <div class="flex items-center gap-[4px]">
+            <ExcelIcon />
+            <span>下载模板</span>
+          </div>
+        </a-button>
+      </div>
+      <div class="flex items-center gap-2">
+        <span :class="{ 'text-red-500': checked }">
+          是否更新/覆盖已存在的用户数据
+        </span>
+        <Switch v-model:checked="checked" />
+      </div>
+      <div class="flex items-center gap-2">
+        <span :class="{ 'text-red-500': checked }">
+          选择单位：
+        </span>
+        <Select :options="unitOptions" :fieldNames="fieldNames" v-model:value="unitId" style="width: 250px;" />
+      </div>
+    </div>
+  </BasicModal>
+</template>