新增Excel导入组件ExcelImportDialog

RuoYi

2026-04-03 bf023fc2f72d6b4a2788d8f9c027aeb493f07688

新增Excel导入组件ExcelImportDialog

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

New file
@@ -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 @@
      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()

    }

  }

}