Merge pull request #143 from cshaptx4869/patch-98

refactor(PageContent): ♻️ 导入模板参数改名

src/components/CURD/PageContent.vue

@@ -416,28 +416,28 @@
     </el-dialog>
     <!-- 导入弹窗 -->
     <el-dialog
-      v-model="importsModalVisible"
+      v-model="importModalVisible"
       :align-center="true"
       title="导入数据"
       width="600px"
       style="padding-right: 0"
-      @close="handleCloseImportsModal"
+      @close="handleCloseImportModal"
     >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
         <el-form
-          ref="importsFormRef"
+          ref="importFormRef"
           label-width="auto"
           style="padding-right: var(--el-dialog-padding-primary)"
-          :model="importsFormData"
+          :model="importFormData"
-          :rules="importsFormRules"
+          :rules="importFormRules"
         >
           <el-form-item label="文件名" prop="files">
             <el-upload
               class="w-full"
               ref="uploadRef"
-              v-model:file-list="importsFormData.files"
+              v-model:file-list="importFormData.files"
               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
               :drag="true"
               :limit="1"
@@ -452,7 +452,7 @@
                 <div class="el-upload__tip">
                   *.xlsx / *.xls
                   <el-link
-                    v-if="contentConfig.importsTemplate"
+                    v-if="contentConfig.importTemplate"
                     type="primary"
                     icon="download"
                     :underline="false"
@@ -471,12 +471,12 @@
         <div style="padding-right: var(--el-dialog-padding-primary)">
           <el-button
             type="primary"
-            :disabled="importsFormData.files.length === 0"
+            :disabled="importFormData.files.length === 0"
-            @click="handleImportsSubmit"
+            @click="handleImportSubmit"
           >
             确 定
           </el-button>
-          <el-button @click="handleCloseImportsModal">取 消</el-button>
+          <el-button @click="handleCloseImportModal">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -706,19 +706,19 @@ function handleExports() {
 // 导入表单
 let isFileImport = false;
 const uploadRef = ref<UploadInstance>();
-const importsModalVisible = ref(false);
+const importModalVisible = ref(false);
-const importsFormRef = ref<FormInstance>();
+const importFormRef = ref<FormInstance>();
-const importsFormData = reactive<{
+const importFormData = reactive<{
   files: UploadUserFile[];
 }>({
   files: [],
 });
-const importsFormRules: FormRules = {
+const importFormRules: FormRules = {
   files: [{ required: true, message: "请选择文件" }],
 };
 // 打开导入弹窗
-function handleOpenImportsModal(isFile: boolean = false) {
+function handleOpenImportModal(isFile: boolean = false) {
-  importsModalVisible.value = true;
+  importModalVisible.value = true;
   isFileImport = isFile;
 }
 // 覆盖前一个文件
@@ -730,11 +730,11 @@ function handleFileExceed(files: File[]) {
 }
 // 下载导入模板
 function handleDownloadTemplate() {
-  const importsTemplate = props.contentConfig.importsTemplate;
+  const importTemplate = props.contentConfig.importTemplate;
-  if (typeof importsTemplate === "string") {
+  if (typeof importTemplate === "string") {
-    window.open(importsTemplate);
+    window.open(importTemplate);
-  } else if (typeof importsTemplate === "function") {
+  } else if (typeof importTemplate === "function") {
-    importsTemplate().then((response) => {
+    importTemplate().then((response) => {
       const fileData = response.data;
       const fileName = decodeURI(
         response.headers["content-disposition"].split(";")[1].split("=")[1]
@@ -742,12 +742,12 @@ function handleDownloadTemplate() {
       saveXlsx(fileData, fileName);
     });
   } else {
-    ElMessage.error("未配置importsTemplate");
+    ElMessage.error("未配置importTemplate");
   }
 }
 // 导入确认
-const handleImportsSubmit = useThrottleFn(() => {
+const handleImportSubmit = useThrottleFn(() => {
-  importsFormRef.value?.validate((valid: boolean) => {
+  importFormRef.value?.validate((valid: boolean) => {
     if (valid) {
       if (isFileImport) {
         handleImport();
@@ -758,11 +758,11 @@ const handleImportsSubmit = useThrottleFn(() => {
   });
 }, 3000);
 // 关闭导入弹窗
-function handleCloseImportsModal() {
+function handleCloseImportModal() {
-  importsModalVisible.value = false;
+  importModalVisible.value = false;
-  importsFormRef.value?.resetFields();
+  importFormRef.value?.resetFields();
   nextTick(() => {
-    importsFormRef.value?.clearValidate();
+    importFormRef.value?.clearValidate();
   });
 }
 // 文件导入
@@ -772,9 +772,9 @@ function handleImport() {
     ElMessage.error("未配置importAction");
     return;
   }
-  importAction(importsFormData.files[0].raw as File).then(() => {
+  importAction(importFormData.files[0].raw as File).then(() => {
     ElMessage.success("导入数据成功");
-    handleCloseImportsModal();
+    handleCloseImportModal();
     handleRefresh(true);
   });
 }
@@ -786,7 +786,7 @@ function handleImports() {
     return;
   }
   // 获取选择的文件
-  const file = importsFormData.files[0].raw as File;
+  const file = importFormData.files[0].raw as File;
   // 创建Workbook实例
   const workbook = new ExcelJS.Workbook();
   // 使用FileReader对象来读取文件内容
@@ -833,7 +833,7 @@ function handleImports() {
           }
           importsAction(data).then(() => {
             ElMessage.success("导入数据成功");
-            handleCloseImportsModal();
+            handleCloseImportModal();
             handleRefresh(true);
           });
         })
@@ -854,7 +854,7 @@ function handleToolbar(name: string) {
       handleOpenExportsModal();
       break;
     case "imports":
-      handleOpenImportsModal();
+      handleOpenImportModal();
       break;
     case "search":
       emit("searchClick");
@@ -866,7 +866,7 @@ function handleToolbar(name: string) {
       handleDelete();
       break;
     case "import":
-      handleOpenImportsModal(true);
+      handleOpenImportModal(true);
       break;
     case "export":
       emit("exportClick");

src/components/CURD/types.ts

@@ -92,10 +92,10 @@ export interface IContentConfig<T = any> {
   exportAction?: (queryParams: T) => Promise<any>;
   // 前端全量导出的网络请求函数(需返回promise)
   exportsAction?: (queryParams: T) => Promise<IObject[]>;
+  // 导入模板
+  importTemplate?: string | (() => Promise<any>);
   // 后端导入的网络请求函数(需返回promise)
   importAction?: (file: File) => Promise<any>;
-  // 前端导入模板
-  importsTemplate?: string | (() => Promise<any>);
   // 前端导入的网络请求函数(需返回promise)
   importsAction?: (data: IObject[]) => Promise<any>;
   // 主键名(默认为id)

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

@@ -29,7 +29,7 @@ const contentConfig: IContentConfig<UserQuery> = {
     return UserAPI.import(1, file);
   },
   exportAction: UserAPI.export,
-  importsTemplate: UserAPI.downloadTemplate,
+  importTemplate: UserAPI.downloadTemplate,
   importsAction(data) {
     // 模拟导入数据
     console.log("importsAction", data);