feat(PageContent): ✨ 支持后端文件导入

src/components/CURD/PageContent.vue

@@ -29,11 +29,22 @@
                 删除
               </el-button>
             </template>
+            <!-- 导入 -->
+            <template v-else-if="item === 'import'">
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                type="default"
+                icon="upload"
+                @click="handleToolbar(item)"
+              >
+                导入
+              </el-button>
+            </template>
             <!-- 导出 -->
             <template v-else-if="item === 'export'">
               <el-button
                 v-hasPerm="[`${contentConfig.pageName}:${item}`]"
-                type="primary"
+                type="default"
                 icon="download"
                 @click="handleToolbar(item)"
               >
@@ -573,8 +584,8 @@ function handleSelectionChange(selection: any[]) {
 }
 
 // 刷新
-function handleRefresh() {
+function handleRefresh(isRestart = false) {
-  fetchPageData(lastFormData);
+  fetchPageData(lastFormData, isRestart);
 }
 
 // 删除
@@ -593,7 +604,7 @@ function handleDelete(id?: number | string) {
     if (props.contentConfig.deleteAction) {
       props.contentConfig.deleteAction(ids).then(() => {
         ElMessage.success("删除成功");
-        fetchPageData({}, true);
+        handleRefresh(true);
       });
     } else {
       ElMessage.error("未配置deleteAction");
@@ -693,6 +704,7 @@ function handleExports() {
 }
 
 // 导入表单
+let isFileImport = false;
 const uploadRef = ref<UploadInstance>();
 const importsModalVisible = ref(false);
 const importsFormRef = ref<FormInstance>();
@@ -705,8 +717,9 @@ const importsFormRules: FormRules = {
   files: [{ required: true, message: "请选择文件" }],
 };
 // 打开导入弹窗
-function handleOpenImportsModal() {
+function handleOpenImportsModal(isFile: boolean = false) {
   importsModalVisible.value = true;
+  isFileImport = isFile;
 }
 // 覆盖前一个文件
 function handleFileExceed(files: File[]) {
@@ -735,7 +748,13 @@ function handleDownloadTemplate() {
 // 导入确认
 const handleImportsSubmit = useThrottleFn(() => {
   importsFormRef.value?.validate((valid: boolean) => {
-    valid && handleImports();
+    if (valid) {
+      if (isFileImport) {
+        handleImport();
+      } else {
+        handleImports();
+      }
+    }
   });
 }, 3000);
 // 关闭导入弹窗
@@ -746,6 +765,19 @@ function handleCloseImportsModal() {
     importsFormRef.value?.clearValidate();
   });
 }
+// 文件导入
+function handleImport() {
+  const importAction = props.contentConfig.importAction;
+  if (importAction === undefined) {
+    ElMessage.error("未配置importAction");
+    return;
+  }
+  importAction(importsFormData.files[0].raw as File).then(() => {
+    ElMessage.success("导入数据成功");
+    handleCloseImportsModal();
+    handleRefresh(true);
+  });
+}
 // 导入
 function handleImports() {
   const importsAction = props.contentConfig.importsAction;
@@ -802,6 +834,7 @@ function handleImports() {
           importsAction(data).then(() => {
             ElMessage.success("导入数据成功");
             handleCloseImportsModal();
+            handleRefresh(true);
           });
         })
         .catch((error) => console.log(error));
@@ -832,6 +865,9 @@ function handleToolbar(name: string) {
     case "delete":
       handleDelete();
       break;
+    case "import":
+      handleOpenImportsModal(true);
+      break;
     case "export":
       emit("exportClick");
       break;
@@ -876,11 +912,11 @@ function handleModify(
 // 分页切换
 function handleSizeChange(value: number) {
   pagination.pageSize = value;
-  fetchPageData(lastFormData);
+  handleRefresh();
 }
 function handleCurrentChange(value: number) {
   pagination.currentPage = value;
-  fetchPageData(lastFormData);
+  handleRefresh();
 }
 
 // 远程数据筛选

src/components/CURD/types.ts

@@ -92,6 +92,8 @@ export interface IContentConfig<T = any> {
   exportAction?: (queryParams: T) => Promise<any>;
   // 前端全量导出的网络请求函数(需返回promise)
   exportsAction?: (queryParams: T) => Promise<IObject[]>;
+  // 后端导入的网络请求函数(需返回promise)
+  importAction?: (file: File) => Promise<any>;
   // 前端导入模板
   importsTemplate?: string | (() => Promise<any>);
   // 前端导入的网络请求函数(需返回promise)
@@ -102,6 +104,7 @@ export interface IContentConfig<T = any> {
   toolbar?: Array<
     | "add"
     | "delete"
+    | "import"
     | "export"
     | {
         auth: string;

src/views/demo/curd/config/content.ts

@@ -25,6 +25,9 @@ const contentConfig: IContentConfig<UserQuery> = {
     return UserAPI.getPage(params);
   },
   deleteAction: UserAPI.deleteByIds,
+  importAction(file) {
+    return UserAPI.import(1, file);
+  },
   exportAction: UserAPI.export,
   importsTemplate: UserAPI.downloadTemplate,
   importsAction(data) {
@@ -42,13 +45,8 @@ const contentConfig: IContentConfig<UserQuery> = {
   toolbar: [
     "add",
     "delete",
+    "import",
     "export",
-    {
-      name: "import",
-      icon: "upload",
-      text: "导入",
-      auth: "import",
-    },
     {
       name: "custom1",
       icon: "plus",

src/views/demo/curd/index.vue

@@ -113,8 +113,8 @@ async function handleEditClick(row: IObject) {
 // 其他工具栏
 function handleToolbarClick(name: string) {
   console.log(name);
-  if (name === "import") {
+  if (name === "custom1") {
-    ElMessage.success("点击了导入按钮");
+    ElMessage.success("点击了自定义1按钮");
   }
 }
 // 其他操作列