新增Excel导入组件ExcelImportDialog

src/components/ExcelImportDialog/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-dialog :title="title" v-model="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-change="handleFileChange" :on-remove="handleFileRemove" :on-success="handleSuccess" :auto-upload="false" drag>
+      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <template #tip>
+        <div class="el-upload__tip text-center">
+          <div class="el-upload__tip">
+            <el-checkbox v-model="updateSupport"> {{ updateSupportLabel }} </el-checkbox>
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link v-if="templateUrl" type="primary" underline="never" style="font-size: 12px; vertical-align: baseline" @click="handleDownloadTemplate">下载模板</el-link>
+        </div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import type {  AjaxResult } from '@/types/api/common'
+import { getToken } from '@/utils/auth'
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  // 对话框标题
+  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: '是否更新已经存在的数据'
+  }
+})
+
+const emit = defineEmits(['success'])
+
+const uploadRef = ref<any>()
+const visible = ref<boolean>(false)
+const selectedFile = ref<any>(null)
+const isUploading = ref<boolean>(false)
+const updateSupport = ref<boolean>(false)
+const headers = { Authorization: 'Bearer ' + getToken() }
+
+const uploadUrl = computed(() => {
+  return import.meta.env.VITE_APP_BASE_API + props.action + '?updateSupport=' + (updateSupport.value ? 1 : 0)
+})
+
+const templateUrl = computed(() => !!props.templateAction)
+
+// 打开对话框（供父组件通过 ref 调用）
+function open(): void {
+  updateSupport.value = false
+  isUploading.value = false
+  visible.value = true
+  nextTick(() => {
+    selectedFile.value = null
+    uploadRef.value?.clearFiles()
+  })
+}
+
+// 关闭时清理
+function handleClose(): void {
+  isUploading.value = false
+  selectedFile.value = null
+  uploadRef.value?.clearFiles()
+}
+
+// 下载模板
+function handleDownloadTemplate(): void {
+  proxy.download(props.templateAction, {}, `${props.templateFileName}_${new Date().getTime()}.xlsx`)
+}
+
+// 上传进度
+function handleProgress(): void {
+  isUploading.value = true
+}
+
+/** 文件选择处理 */
+const handleFileChange = (file: any): void => {
+  selectedFile.value = file
+}
+
+/** 文件删除处理 */
+const handleFileRemove = (file: any) => {
+  selectedFile.value = null
+}
+
+// 上传成功
+function handleSuccess(response: AjaxResult) {
+  visible.value = false
+  isUploading.value = false
+  selectedFile.value = null
+  uploadRef.value?.clearFiles()
+  proxy.$alert("<div style='overflow:auto;overflow-x:hidden;max-height:70vh;padding:10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
+  emit('success')
+}
+
+// 提交上传
+function handleSubmit() {
+  const file = selectedFile.value
+  if (!file || file.length === 0 || !file.name.toLowerCase().endsWith('.xls') && !file.name.toLowerCase().endsWith('.xlsx')) {
+    proxy.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
+    return
+  }
+  uploadRef.value.submit()
+}
+
+defineExpose({ open })
+</script>

src/views/system/user/index.vue

@@ -173,27 +173,7 @@
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+    <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" />
-      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-change="handleFileChange" :on-remove="handleFileRemove" :auto-upload="false" drag>
-        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip text-center">
-            <div class="el-upload__tip">
-              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-            </div>
-            <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
-          </div>
-        </template>
-      </el-upload>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitFileForm">确 定</el-button>
-          <el-button @click="upload.open = false">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -201,6 +181,7 @@
 import { getToken } from "@/utils/auth"
 import useAppStore from '@/store/modules/app'
 import TreePanel from "@/components/TreePanel"
+import ExcelImportDialog from "@/components/ExcelImportDialog"
 import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
 import type { SysUser, UserQueryParams, UserFormDataResult } from '@/types/api/system/user'
 import type { SysRole } from '@/types/api/system/role'
@@ -227,21 +208,6 @@ const enabledDeptOptions = ref<TreeSelect[] | undefined>(undefined)
 const initPassword = ref<string | undefined>(undefined)
 const postOptions = ref<SysPost[]>([])
 const roleOptions = ref<SysRole[]>([])
-/*** 用户导入参数 */
-const upload = reactive({
-  // 是否显示弹出层（用户导入）
-  open: false,
-  // 弹出层标题（用户导入）
-  title: "",
-  // 是否禁用上传
-  isUploading: false,
-  // 是否更新已经存在的用户数据
-  updateSupport: 0,
-  // 设置上传的请求头部
-  headers: { Authorization: "Bearer " + getToken() },
-  // 上传的地址
-  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
-})
 // 列显隐信息
 const columns = ref<Record<string, TableShowColumns>>({
   userId: { label: '用户编号', visible: true },
@@ -406,49 +372,7 @@ function handleSelectionChange(selection: SysUser[]) {
 
 /** 导入按钮操作 */
 function handleImport() {
-  upload.title = "用户导入"
+  proxy.$refs["importUserRef"].open()
-  upload.open = true
-  upload.selectedFile = null
-}
-
-/** 下载模板操作 */
-function importTemplate() {
-  proxy.download("system/user/importTemplate", {
-  }, `user_template_${new Date().getTime()}.xlsx`)
-}
-
-/**文件上传中处理 */
-const handleFileUploadProgress = (event: any, file: any, fileList: any[]) => {
-  upload.isUploading = true
-}
-
-/** 文件选择处理 */
-const handleFileChange = (file: any, fileList: any[]) => {
-  upload.selectedFile = file
-}
-
-/** 文件删除处理 */
-const handleFileRemove = (file: any, fileList: any[]) => {
-  upload.selectedFile = null
-}
-
-/** 文件上传成功处理 */
-const handleFileSuccess = (response: AjaxResult, file: any, fileList: any[]) => {
-  upload.open = false
-  upload.isUploading = false
-  proxy.$refs["uploadRef"].handleRemove(file)
-  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-  getList()
-}
-
-/** 提交上传文件 */
-function submitFileForm() {
-  const file = upload.selectedFile
-  if (!file || file.length === 0 || !file.name.toLowerCase().endsWith('.xls') && !file.name.toLowerCase().endsWith('.xlsx')) {
-    proxy.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
-    return
-  }
-  proxy.$refs["uploadRef"].submit()
 }
 
 /** 重置操作表单 */