feat: customer import

apps/web-antd/src/api/crm/customer/index.ts

@@ -35,6 +35,11 @@ export namespace CrmCustomerApi {
     createTime: Date; // 创建时间
     updateTime: Date; // 更新时间
   }
+  export interface CustomerImport {
+    ownerUserId: number;
+    file: File;
+    updateSupport: boolean;
+  }
 }
 
 /** 查询客户列表 */
@@ -78,8 +83,8 @@ export function importCustomerTemplate() {
 }
 
 /** 导入客户 */
-export function importCustomer(file: File) {
-  return requestClient.upload('/crm/customer/import', { file });
+export function importCustomer(data: CrmCustomerApi.CustomerImport) {
+  return requestClient.upload('/crm/customer/import', data);
 }
 
 /** 获取客户精简信息列表 */

apps/web-antd/src/views/crm/customer/index.vue

@@ -21,6 +21,7 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
 
 const { push } = useRouter();
 const sceneType = ref('1');
@@ -35,6 +36,16 @@ function onRefresh() {
   gridApi.query();
 }
 
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 导入客户 */
+function handleImport() {
+  importModalApi.open();
+}
+
 /** 导出表格 */
 async function handleExport() {
   const data = await exportCustomer(await gridApi.formApi.getValues());
@@ -124,6 +135,7 @@ function onChangeSceneType(key: number | string) {
     </template>
 
     <FormModal @success="onRefresh" />
+    <ImportModal @success="onRefresh" />
     <Grid>
       <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
@@ -142,6 +154,13 @@ function onChangeSceneType(key: number | string) {
               auth: ['crm:customer:create'],
               onClick: handleCreate,
             },
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['crm:customer:import'],
+              onClick: handleImport,
+            },
             {
               label: $t('ui.actionTitle.export'),
               type: 'primary',

apps/web-antd/src/views/crm/customer/modules/import-form.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importCustomer, importCustomerTemplate } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'file',
+      label: '用户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的用户数据',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importCustomer({
+        ownerUserId: data.ownerUserId,
+        file: data.file,
+        updateSupport: data.updateSupport,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importCustomerTemplate();
+  downloadFileFromBlobPart({ fileName: '客户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="客户导入" class="w-[30%]">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <Button type="primary"> 选择 Excel 文件 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>