From bf023fc2f72d6b4a2788d8f9c027aeb493f07688 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Fri, 03 Apr 2026 08:56:31 +0800
Subject: [PATCH] 新增Excel导入组件ExcelImportDialog
---
ruoyi-ui/src/components/ExcelImportDialog/index.vue | 126 +++++++++++++++++++++++++++++++
ruoyi-ui/src/views/system/user/index.vue | 66 +---------------
2 files changed, 130 insertions(+), 62 deletions(-)
diff --git a/ruoyi-ui/src/components/ExcelImportDialog/index.vue b/ruoyi-ui/src/components/ExcelImportDialog/index.vue
new file mode 100644
index 0000000..1d32764
--- /dev/null
+++ b/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>
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index 2dd3120..ef4cbf7 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/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 @@
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 @@
},
/** 导入按钮操作 */
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()
}
}
}
--
Gitblit v1.9.3