新增Excel导入组件ExcelImportDialog

ruoyi-ui/src/components/ExcelImportDialog/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" :width="width" append-to-body @close="handleClose">
+    <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="headers" :action="uploadUrl" :disabled="isUploading" :on-progress="handleProgress" :on-success="handleSuccess" :auto-upload="false" drag>
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__tip text-center" slot="tip">
+        <div class="el-upload__tip" slot="tip">
+          <el-checkbox v-model="updateSupport"> {{ updateSupportLabel }} </el-checkbox>
+        </div>
+        <span>仅允许导入xls、xlsx格式文件。</span>
+        <el-link v-if="templateUrl" type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="handleDownloadTemplate">下载模板</el-link>
+      </div>
+    </el-upload>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+
+export default {
+  props: {
+    // 对话框标题
+    title: {
+      type: String,
+      default: '数据导入'
+    },
+    // 对话框宽度
+    width: {
+      type: String,
+      default: '400px'
+    },
+    // 上传接口地址（必传）
+    action: {
+      type: String,
+      required: true
+    },
+    // 模板下载接口地址，不传则不显示下载模板链接
+    templateAction: {
+      type: String,
+      default: ''
+    },
+    // 模板文件名
+    templateFileName: {
+      type: String,
+      default: 'template'
+    },
+    // 覆盖更新勾选框的说明文字
+    updateSupportLabel: {
+      type: String,
+      default: '是否更新已经存在的数据'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      isUploading: false,
+      updateSupport: false,
+      headers: { Authorization: 'Bearer ' + getToken() }
+    }
+  },
+  computed: {
+    uploadUrl() {
+      return process.env.VUE_APP_BASE_API + this.action + '?updateSupport=' + (this.updateSupport ? 1 : 0)
+    },
+    templateUrl() {
+      return !!this.templateAction
+    }
+  },
+  methods: {
+    // 打开对话框（供父组件通过 ref 调用）
+    open() {
+      this.updateSupport = false
+      this.isUploading = false
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.$refs.uploadRef) {
+          this.$refs.uploadRef.clearFiles()
+        }
+      })
+    },
+    // 关闭时清理
+    handleClose() {
+      this.isUploading = false
+      if (this.$refs.uploadRef) {
+        this.$refs.uploadRef.clearFiles()
+      }
+    },
+    // 下载模板
+    handleDownloadTemplate() {
+      this.download(this.templateAction, {}, `${this.templateFileName}_${new Date().getTime()}.xlsx`)
+    },
+    // 上传进度
+    handleProgress() {
+      this.isUploading = true
+    },
+    // 上传成功
+    handleSuccess(response) {
+      this.visible = false
+      this.isUploading = false
+      if (this.$refs.uploadRef) {
+        this.$refs.uploadRef.clearFiles()
+      }
+      this.$alert("<div style='overflow:auto;overflow-x:hidden;max-height:70vh;padding:10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
+      this.$emit('success')
+    },
+    // 提交上传
+    handleSubmit() {
+      const files = this.$refs.uploadRef.uploadFiles
+      if (!files || files.length === 0) {
+        this.$modal.msgError('请选择要上传的文件。')
+        return
+      }
+      const name = files[0].name.toLowerCase()
+      if (!name.endsWith('.xls') && !name.endsWith('.xlsx')) {
+        this.$modal.msgError('请选择后缀为 "xls" 或 "xlsx" 的文件。')
+        return
+      }
+      this.$refs.uploadRef.submit()
+    }
+  }
+}
+</script>

ruoyi-ui/src/views/system/user/index.vue

@@ -164,37 +164,21 @@
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
+    <excel-import-dialog ref="importUserRef" title="用户导入" action="/system/user/importData" template-action="/system/user/importTemplate" template-file-name="user_template" update-support-label="是否更新已经存在的用户数据" @success="getList" />
   </div>
 </template>
 
 <script>
 import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"
-import { getToken } from "@/utils/auth"
 import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 import TreePanel from "@/components/TreePanel"
+import ExcelImportDialog from "@/components/ExcelImportDialog"
 
 export default {
   name: "User",
   dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect, TreePanel },
+  components: { Treeselect, TreePanel, ExcelImportDialog },
   data() {
     return {
       // 遮罩层
@@ -229,21 +213,6 @@ export default {
       roleOptions: [],
       // 表单参数
       form: {},
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -489,34 +458,7 @@ export default {
     },
     /** 导入按钮操作 */
     handleImport() {
-      this.upload.title = "用户导入"
-      this.upload.open = true
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false
-      this.upload.isUploading = false
-      this.$refs.upload.clearFiles()
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-      this.getList()
-    },
-    // 提交上传文件
-    submitFileForm() {
-      const file = this.$refs.upload.uploadFiles
-      if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) {
-        this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
-        return
-      }
-      this.$refs.upload.submit()
+      this.$refs.importUserRef.open()
     }
   }
 }