文件导入公共方法

src/views/common/ImportExcelDialog.vue

@@ -0,0 +1,401 @@
+<template>
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="450px" append-to-body @close="handleClose"
+        class="import-excel-dialog">
+        <div class="upload-container">
+            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers"
+                :action="uploadUrl + '?updateSupport=' + updateSupport" :disabled="isUploading"
+                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-error="handleFileError"
+                :before-upload="beforeUpload" :auto-upload="false" drag class="custom-upload">
+                <div class="upload-content">
+                    <i class="el-icon-upload upload-icon"></i>
+                    <div class="upload-text">
+                        <div class="main-text">将文件拖到此处</div>
+                        <div class="sub-text">或<em>点击上传</em></div>
+                    </div>
+                </div>
+                <div class="upload-tip" slot="tip">
+                    <i class="el-icon-info"></i>
+                    <span>仅允许导入 xls、xlsx 格式文件，单份文件大小上限 {{ maxFileTips }}</span>
+                </div>
+            </el-upload>
+        </div>
+        <div slot="footer" class="dialog-footer">
+
+            <el-button type="primary" class="confirm-btn" @click="handleSubmit" :loading="isUploading"
+                :disabled="isUploading">
+                <span v-if="!isUploading">确认</span>
+                <span v-else>上传中...</span>
+            </el-button>
+            <el-button class="cancel-btn" @click="handleClose">取消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+
+export default {
+    name: 'ImportExcelDialog',
+    props: {
+        // 是否显示对话框
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        // 对话框标题
+        title: {
+            type: String,
+            default: '数据导入'
+        },
+        // 上传地址
+        uploadUrl: {
+            type: String,
+            required: true
+        },
+        maxFileTips: {
+            type: String,
+            default: '20MB',
+        },
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            isUploading: false,
+            updateSupport: 0,
+            headers: {
+                Authorization: 'Bearer ' + getToken()
+            }
+        }
+    },
+    watch: {
+        visible: {
+            immediate: true,
+            handler(val) {
+                this.dialogVisible = val
+                if (val) {
+                    // 打开对话框时重置状态
+                    this.resetState()
+                }
+            }
+        },
+        dialogVisible(val) {
+            this.$emit('update:visible', val)
+        }
+    },
+    computed: {
+        // 将 maxFileTips 转换为字节数
+        maxFileSize() {
+            const tips = this.maxFileTips.toUpperCase()
+            const match = tips.match(/(\d+)(MB|KB|GB)/)
+            if (!match) return 20 * 1024 * 1024 // 默认 20MB
+            
+            const size = parseInt(match[1])
+            const unit = match[2]
+            
+            switch (unit) {
+                case 'KB':
+                    return size * 1024
+                case 'MB':
+                    return size * 1024 * 1024
+                case 'GB':
+                    return size * 1024 * 1024 * 1024
+                default:
+                    return 20 * 1024 * 1024
+            }
+        }
+    },
+    methods: {
+        // 文件上传前的验证
+        beforeUpload(file) {
+            // 验证文件大小
+            if (file.size > this.maxFileSize) {
+                this.$message.error(`文件大小不能超过 ${this.maxFileTips}`)
+                return false
+            }
+            
+            // 验证文件类型
+            const isExcel = file.type === 'application/vnd.ms-excel' || 
+                           file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+                           file.name.endsWith('.xls') ||
+                           file.name.endsWith('.xlsx')
+            
+            if (!isExcel) {
+                this.$message.error('只能上传 xls、xlsx 格式的文件！')
+                return false
+            }
+            
+            return true
+        },
+        // 重置状态
+        resetState() {
+            this.isUploading = false
+            this.updateSupport = 0
+            if (this.$refs.upload) {
+                this.$refs.upload.clearFiles()
+            }
+        },
+        // 文件上传进度
+        handleFileUploadProgress(event, file, fileList) {
+            this.isUploading = true
+            this.$emit('upload-progress', event, file, fileList)
+        },
+        // 文件上传成功
+        handleFileSuccess(response, file, fileList) {
+            this.isUploading = false
+            this.$refs.upload.clearFiles()
+            this.$emit('upload-success', response, file, fileList)
+
+            // 显示导入结果
+            if (response && response.msg) {
+                this.$alert(
+                    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>",
+                    "导入结果",
+                    {
+                        dangerouslyUseHTMLString: true,
+                        type: response.code === 200 ? 'success' : 'error'
+                    }
+                )
+            }
+
+            // 成功后关闭对话框
+            if (response && response.code === 200) {
+                this.handleClose()
+            }
+        },
+        // 文件上传失败
+        handleFileError(error, file, fileList) {
+            this.isUploading = false
+            this.$message.error('文件上传失败，请稍后重试')
+            this.$emit('upload-error', error, file, fileList)
+        },
+        // 提交上传
+        handleSubmit() {
+            if (!this.$refs.upload.fileList || this.$refs.upload.fileList.length === 0) {
+                this.$message.warning('请先选择要上传的文件')
+                return
+            }
+            this.$refs.upload.submit()
+        },
+        // 关闭对话框
+        handleClose() {
+            this.dialogVisible = false
+            this.resetState()
+            this.$emit('close')
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+// 对话框样式优化
+::v-deep .import-excel-dialog {
+    .el-dialog {
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .el-dialog__header {
+        padding: 20px 24px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+        .el-dialog__title {
+            color: #fff;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .el-dialog__close {
+            color: #fff;
+            font-size: 20px;
+
+            &:hover {
+                color: rgba(255, 255, 255, 0.8);
+            }
+        }
+    }
+
+    .el-dialog__body {
+        padding: 30px 24px 20px;
+    }
+}
+
+// 上传容器
+.upload-container {
+    width: 100%;
+}
+
+// 自定义上传样式
+::v-deep .custom-upload {
+    .el-upload-dragger {
+        width: 100%;
+        height: 200px;
+        border: 2px dashed #d9d9d9;
+        border-radius: 8px;
+        background: #fafafa;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        &:hover {
+            border-color: #409EFF;
+            background: #f0f7ff;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+        }
+
+        &.is-dragover {
+            border-color: #409EFF;
+            background: #e6f4ff;
+            border-style: solid;
+        }
+    }
+
+    .el-upload__input {
+        display: none;
+    }
+}
+
+// 上传内容区域
+.upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 20px;
+
+    .upload-icon {
+        font-size: 64px;
+        color: #409EFF;
+        margin-bottom: 16px;
+        transition: all 0.3s ease;
+    }
+
+    .upload-text {
+        text-align: center;
+
+        .main-text {
+            font-size: 16px;
+            color: #333;
+            font-weight: 500;
+            margin-bottom: 8px;
+        }
+
+        .sub-text {
+            font-size: 14px;
+            color: #666;
+
+            em {
+                color: #409EFF;
+                font-style: normal;
+                font-weight: 500;
+            }
+        }
+    }
+
+    &:hover {
+        .upload-icon {
+            transform: scale(1.1);
+            color: #66b1ff;
+        }
+    }
+}
+
+// 上传提示
+.upload-tip {
+    margin-top: 16px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    color: #909399;
+    font-size: 13px;
+
+    i {
+        color: #909399;
+        font-size: 14px;
+    }
+
+    span {
+        line-height: 20px;
+    }
+}
+
+// 文件列表样式优化
+::v-deep .el-upload-list {
+    margin-top: 16px;
+
+    .el-upload-list__item {
+        border-radius: 6px;
+        border: 1px solid #e4e7ed;
+        transition: all 0.3s ease;
+
+        &:hover {
+            border-color: #409EFF;
+            background: #f0f7ff;
+        }
+
+        .el-icon-document {
+            color: #409EFF;
+        }
+
+        .el-upload-list__item-name {
+            color: #333;
+        }
+    }
+}
+
+// 禁用状态
+::v-deep .custom-upload.is-disabled {
+    .el-upload-dragger {
+        cursor: not-allowed;
+        opacity: 0.6;
+
+        &:hover {
+            border-color: #d9d9d9;
+            background: #fafafa;
+            transform: none;
+            box-shadow: none;
+        }
+    }
+}
+
+// 底部按钮样式（按照 ToolForm.vue 样式）
+.dialog-footer {
+    text-align: center;
+}
+
+.confirm-btn {
+    width: 98px;
+    height: 36px;
+    background: #1F72EA;
+    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
+    border-radius: 4px;
+    color: #fff;
+    border: none;
+    font-size: 14px;
+    transition: all 0.3s;
+
+    &:hover {
+        background: #4A8BFF;
+        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
+    }
+}
+
+.cancel-btn {
+    width: 98px;
+    height: 36px;
+    background: #E5E5E5;
+    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
+    border-radius: 4px;
+    color: #333;
+    border: none;
+    font-size: 14px;
+    transition: all 0.3s;
+
+    &:hover {
+        background: #d0d0d0;
+        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
+    }
+}
+</style>

src/views/enterpriseLibrary/tool/index.vue

@@ -44,6 +44,16 @@
         <!-- 添加方案类型弹窗 -->
         <ToolForm ref="toolForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
             @closeDialog="closeDialog" :width="600" />
+        <!-- 批量导入弹窗 -->
+        <ImportExcelDialog 
+            :visible.sync="importExcelDialogVisible" 
+            ref="importExcelDialog" 
+            title="工器具导入"
+            :upload-url="importExcelDialogUploadUrl" 
+            @upload-success="handleImportSuccess" 
+            @close="handleImportClose"
+            :maxFileTips="maxFileTips"
+        />
     </el-card>
 </template>
 
@@ -54,11 +64,13 @@ import ToolForm from './components/ToolForm.vue'
 import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/tool/tool'
 import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
 import { downloadFileWithLoading } from '@/utils/download'
+import ImportExcelDialog from '@/views/common/ImportExcelDialog'
 export default {
     name: 'Tool',
     components: {
         TableModel,
-        ToolForm
+        ToolForm,
+        ImportExcelDialog
     },
     data() {
         return {
@@ -70,6 +82,10 @@ export default {
             isflag: false,
             isAdd: '',
             row: {},
+            maxFileTips:'200MB',
+            importExcelDialogVisible: false,
+            // 批量导入上传地址（需要根据实际API接口修改）
+            importExcelDialogUploadUrl: process.env.VUE_APP_BASE_API + '/smartBid/mainDatabase/tool/importData',
         }
     },
 
@@ -126,8 +142,13 @@ export default {
         },
         // 批量导入
         handleBathchImport(){
-            
+            this.importExcelDialogVisible = true;
-
+        },
+        handleImportSuccess() {
+            this.handleQuery();
+        },
+        handleImportClose() {
+            this.handleQuery();
         },
         closeDialog() {
             this.isflag = false;