feat: 客户管理和项目管理导入支持

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

@@ -72,6 +72,19 @@ export function exportCustomer(params: any) {
   return requestClient.download('/license/customer/export-excel', params);
 }
 
+/** 下载导入模板 */
+export function importTemplate() {
+  return requestClient.download('/license/customer/get-import-template');
+}
+
+/** 导入客户 */
+export function importCustomer(file: File, updateSupport: boolean) {
+  return requestClient.upload('/license/customer/import', {
+    file,
+    updateSupport,
+  });
+}
+
 /** 客户名称是否唯一 */
 export async function isCustomerNameUnique(
   name: string,

apps/web-antd/src/api/license/project/index.ts

@@ -67,6 +67,19 @@ export function exportProject(params: any) {
   return requestClient.download('/license/project/export-excel', params);
 }
 
+/** 下载导入模板 */
+export function importTemplate() {
+  return requestClient.download('/license/project/get-import-template');
+}
+
+/** 导入项目 */
+export function importProject(file: File, updateSupport: boolean) {
+  return requestClient.upload('/license/project/import', {
+    file,
+    updateSupport,
+  });
+}
+
 /** 项目名称是否唯一 */
 export async function isProjectNameUnique(
   name: string,

apps/web-antd/src/views/license/customer/data.ts

@@ -281,3 +281,27 @@ export function useGridColumns(
     },
   ];
 }
+
+/** 客户导入的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '客户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的客户数据',
+    },
+  ];
+}

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

@@ -20,12 +20,18 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function onRefresh() {
   gridApi.query();
@@ -67,6 +73,11 @@ async function onExport() {
   });
 }
 
+/** 导入客户 */
+function handleImport() {
+  importModalApi.open();
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -124,6 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
+    <ImportModal @success="onRefresh" />
 
     <Grid :table-title="$t('customer.customerList')">
       <template #toolbar-tools>
@@ -143,6 +155,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['license:customer:export'],
               onClick: onExport,
             },
+            {
+              label: $t('ui.actionTitle.import', [$t('customer.customer')]),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['license:customer:export'],
+              onClick: handleImport,
+            },
           ]"
         />
       </template>

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

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { h } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importCustomer, importTemplate } from '#/api/license/customer';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importCustomer(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      let failuresMsg: any;
+      if (result.creates && result.creates.length > 0) {
+        failuresMsg = h(
+          'div',
+          {
+            style: {
+              color: 'green',
+            },
+          },
+          [failuresMsg, `新增成功：${result.creates.join('，')}`],
+        );
+      }
+      if (result.updates && result.updates.length > 0) {
+        failuresMsg = h(
+          'div',
+          {
+            style: {
+              color: 'blue',
+            },
+          },
+          [failuresMsg, `更新成功：${result.updates.join('，')}`],
+        );
+      }
+      for (const key in result.failures) {
+        failuresMsg = h(
+          'div',
+          {
+            style: {
+              color: 'red',
+            },
+          },
+          [failuresMsg, `导入失败：${key}，失败原因：${result.failures[key]}`],
+        );
+      }
+      message.info(failuresMsg, 10);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importTemplate();
+  downloadFileFromBlobPart({ fileName: '客户导入模板.xlsx', source: data });
+}
+</script>
+
+<template>
+  <Modal title="导入客户" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <UploadDragger
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <p class="ant-upload-drag-icon">
+              <span class="icon-[ep--upload-filled] size-12"></span>
+            </p>
+
+            <p class="ant-upload-text">点击或拖拽Excel文件上传</p>
+          </UploadDragger>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>

apps/web-antd/src/views/license/license/index.vue

@@ -186,7 +186,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.import', ['License']),
               type: 'primary',
               icon: ACTION_ICON.UPLOAD,
-              auth: ['system:user:import'],
+              auth: ['license:license:export'],
               onClick: handleImport,
             },
           ]"

apps/web-antd/src/views/license/project/data.ts

@@ -463,3 +463,27 @@ export function useGridColumns(
     },
   ];
 }
+
+/** 项目导入的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '项目数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的项目数据',
+    },
+  ];
+}

apps/web-antd/src/views/license/project/index.vue

@@ -20,6 +20,7 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
 import Progress from './modules/progress.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -32,6 +33,11 @@ const [ProgressDrawer, progressDrawerApi] = useVbenDrawer({
   destroyOnClose: true,
 });
 
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function onRefresh() {
   gridApi.query();
@@ -78,6 +84,11 @@ async function onExport() {
   });
 }
 
+/** 导入项目 */
+function handleImport() {
+  importModalApi.open();
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<ProjectApi.Project>) {
   switch (code) {
@@ -139,6 +150,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
     <ProgressDrawer @success="onRefresh" />
+    <ImportModal @success="onRefresh" />
 
     <Grid :table-title="$t('project.list')">
       <template #toolbar-tools>
@@ -158,6 +170,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['license:project:export'],
               onClick: onExport,
             },
+            {
+              label: $t('ui.actionTitle.import', [$t('project.project')]),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['license:project:export'],
+              onClick: handleImport,
+            },
           ]"
         />
       </template>

apps/web-antd/src/views/license/project/modules/import-form.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { h } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importProject, importTemplate } from '#/api/license/project';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importProject(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      let failuresMsg: any;
+      if (result.creates && result.creates.length > 0) {
+        failuresMsg = h(
+          'div',
+          {
+            style: {
+              color: 'green',
+            },
+          },
+          [failuresMsg, `新增成功：${result.creates.join('，')}`],
+        );
+      }
+      if (result.updates && result.updates.length > 0) {
+        failuresMsg = h(
+          'div',
+          {
+            style: {
+              color: 'blue',
+            },
+          },
+          [failuresMsg, `更新成功：${result.updates.join('，')}`],
+        );
+      }
+      for (const key in result.failures) {
+        failuresMsg = h(
+          'div',
+          {
+            style: {
+              color: 'red',
+            },
+          },
+          [failuresMsg, `导入失败：${key}，失败原因：${result.failures[key]}`],
+        );
+      }
+      message.info(failuresMsg, 10);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importTemplate();
+  downloadFileFromBlobPart({ fileName: '项目导入模板.xlsx', source: data });
+}
+</script>
+
+<template>
+  <Modal title="导入项目" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <UploadDragger
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <p class="ant-upload-drag-icon">
+              <span class="icon-[ep--upload-filled] size-12"></span>
+            </p>
+
+            <p class="ant-upload-text">点击或拖拽Excel文件上传</p>
+          </UploadDragger>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>