From 49f13bf3015ba8589c4affce8d20431895d37814 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 5 Apr 2025 08:21:32 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20user=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=9A=84=E5=AF=BC=E5=85=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/system/user/index.ts    |  8 ++
 apps/web-antd/src/views/system/user/data.ts   | 27 ++++++-
 apps/web-antd/src/views/system/user/index.vue | 20 ++++-
 .../views/system/user/modules/import-form.vue | 77 +++++++++++++++++++
 packages/@core/base/icons/src/lucide.ts       |  1 +
 packages/locales/src/langs/en-US/ui.json      |  6 +-
 packages/locales/src/langs/zh-CN/ui.json      |  6 +-
 7 files changed, 140 insertions(+), 5 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/user/modules/import-form.vue

diff --git a/apps/web-antd/src/api/system/user/index.ts b/apps/web-antd/src/api/system/user/index.ts
index e0b7ad644..7a49ace60 100644
--- a/apps/web-antd/src/api/system/user/index.ts
+++ b/apps/web-antd/src/api/system/user/index.ts
@@ -56,6 +56,14 @@ export function importUserTemplate() {
   return requestClient.download('/system/user/get-import-template');
 }
 
+/** 导入用户 */
+export function importUser(file: File, updateSupport: boolean) {
+  return requestClient.upload('/system/user/import', {
+    file,
+    updateSupport
+  });
+}
+
 /** 用户密码重置 */
 export function resetUserPassword(id: number, password: string) {
   return requestClient.put('/system/user/update-password', { id, password });
diff --git a/apps/web-antd/src/views/system/user/data.ts b/apps/web-antd/src/views/system/user/data.ts
index 4ec431372..3e888c561 100644
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@@ -220,6 +220,31 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
   ]
 }
 
+/** 用户导入的表单 */
+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: '是否更新已经存在的用户数据',
+    },
+  ];
+}
+
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -317,7 +342,7 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
           onClick: onActionClick,
         },
         name: 'CellOperation',
-        // TODO @芋艿：后续把 delete、assign-role、reset-password 搞成“更多”
+        // TODO @芋艿：后续把 delete、assign-role、reset-password 搞成"更多"
         options: [
           'edit', // 默认的编辑按钮
           'delete', // 默认的删除按钮
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 0ca1a5615..a4d444a73 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -4,11 +4,12 @@ import type { SystemUserApi } from '#/api/system/user';
 import type { SystemDeptApi } from '#/api/system/dept';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Button, message, Modal, Row, Col } from 'ant-design-vue';
-import { Plus, Download } from '@vben/icons';
+import { Button, message, Modal } from 'ant-design-vue';
+import { Plus, Download, Upload } from '@vben/icons';
 import Form from './modules/form.vue';
 import ResetPasswordForm from './modules/reset-password-form.vue';
 import AssignRoleForm from './modules/assign-role-form.vue';
+import ImportForm from './modules/import-form.vue';
 import DeptTree from './modules/dept-tree.vue';
 
 import { $t } from '#/locales';
@@ -35,6 +36,11 @@ const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function onRefresh() {
   gridApi.query();
@@ -58,6 +64,11 @@ function onCreate() {
   formModalApi.setData(null).open();
 }
 
+/** 导入用户 */
+function onImport() {
+  importModalApi.open();
+}
+
 /** 编辑用户 */
 function onEdit(row: SystemUserApi.SystemUser) {
   formModalApi.setData(row).open();
@@ -180,6 +191,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <ResetPasswordModal @success="onRefresh" />
     <AssignRoleModal @success="onRefresh" />
+    <ImportModal @success="onRefresh" />
 
     <div class="flex h-full">
       <!-- 左侧部门树 -->
@@ -198,6 +210,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
               <Download class="size-5" />
               {{ $t('ui.actionTitle.export') }}
             </Button>
+            <Button type="primary" class="ml-2" @click="onImport">
+              <Upload class="size-5" />
+              {{ $t('ui.actionTitle.import', ['用户']) }}
+            </Button>
           </template>
         </Grid>
       </div>
diff --git a/apps/web-antd/src/views/system/user/modules/import-form.vue b/apps/web-antd/src/views/system/user/modules/import-form.vue
new file mode 100644
index 000000000..5c9d21181
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/modules/import-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { useVbenModal } from '@vben/common-ui';
+import { message} from 'ant-design-vue';
+import { Button, Upload } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+import { useVbenForm } from '#/adapter/form';
+import { importUser, importUserTemplate } from '#/api/system/user';
+import { downloadByData } from '#/utils/download';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  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 {
+      await importUser(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  }
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function onDownload() {
+  const data = await importUserTemplate();
+  downloadByData(data, '用户导入模板.xlsx');
+}
+</script>
+
+<template>
+  <Modal title="导入用户">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload :max-count="1" accept=".xls,.xlsx" :beforeUpload="beforeUpload">
+            <Button type="primary"> 选择 Excel 文件 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="onDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/packages/@core/base/icons/src/lucide.ts b/packages/@core/base/icons/src/lucide.ts
index 528673e22..81225ba4b 100644
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -66,4 +66,5 @@ export {
   UserRoundPen,
   X,
   Download,
+  Upload,
 } from 'lucide-vue-next';
diff --git a/packages/locales/src/langs/en-US/ui.json b/packages/locales/src/langs/en-US/ui.json
index 84d8410ef..abcac6950 100644
--- a/packages/locales/src/langs/en-US/ui.json
+++ b/packages/locales/src/langs/en-US/ui.json
@@ -14,6 +14,7 @@
     "create": "Create {0}",
     "delete": "Delete {0}",
     "view": "View {0}",
+    "import": "Import",
     "export": "Export"
   },
   "actionMessage": {
@@ -21,7 +22,10 @@
     "deleting": "Deleting {0} ...",
     "deleteSuccess": "{0} deleted successfully",
     "operationSuccess": "Operation succeeded",
-    "operationFailed": "Operation failed"
+    "operationFailed": "Operation failed",
+    "importSuccess": "Import succeeded",
+    "importFail": "Import failed",
+    "downloadTemplateFail": "Download template failed"
   },
   "placeholder": {
     "input": "Please enter",
diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json
index 0899cfa21..c604078bb 100644
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -14,6 +14,7 @@
     "create": "新增{0}",
     "delete": "删除{0}",
     "view": "查看{0}",
+    "import": "导入",
     "export": "导出"
   },
   "actionMessage": {
@@ -21,7 +22,10 @@
     "deleting": "正在删除 {0} ...",
     "deleteSuccess": "{0} 删除成功",
     "operationSuccess": "操作成功",
-    "operationFailed": "操作失败"
+    "operationFailed": "操作失败",
+    "importSuccess": "导入成功",
+    "importFail": "导入失败",
+    "downloadTemplateFail": "下载模板失败"
   },
   "placeholder": {
     "input": "请输入",