kev/Drawer/drawer-htmlroot/components/ImportDataDialog.vue

<template>
    <el-dialog :title="title" v-model="dialogVisible" width="30%" @close="closeDialog" :close-on-click-modal="false">
        <input type="file" ref="fileInput" @change="handleFileChange" v-show="false"
            accept=".kev,.dfd,.pcg,.gdbx,.jpg,.xls,.xlsx,.kev,.txt" />
        <el-tag type="primary" style="margin-bottom: 5px;">可选择kev,dfd,pcg等文件。</el-tag>
        <div style="margin-top: 20px">

            <el-button type="primary" @click="triggerFileSelect">选择文件</el-button>
            <!-- 文件名回显 -->
            <span v-if="fileName" style="margin-left: 10px; color: #333">已选择文件：{{ fileName }}</span>
        </div>
        <!-- <div style="
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 200px;
          ">
            <div v-if="fileContent" style="white-space: pre-wrap; word-wrap: break-word">
                {{ fileContent }}
            </div>
        </div> -->
        <template v-slot:footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="handleImport">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { uploadData } from '~/services/dataManageService';
// 消息提示（自动隐藏）
const { $toastMessage } = useNuxtApp();


const props = defineProps({
    dataId: {
        type: Number,
        required: true
    },
    isVisible: {
        type: Boolean,
        default: true
    }, // 是否显示
    showFileContent: {
        type: Boolean,
        default: false
    }
});

const title = computed(() => {
    switch (props.dataId) {
        case 9:
            return '导入地质图件';
        case 11:
            return '导入地质参数图件';
        default:
            return '导入文件';
    }
});

const fileInput = ref(null);
// const fileContent = ref("");
const fileName = ref("");
const selectedFile = ref(null);
// 控制弹出框显示
const dialogVisible = ref(props.isVisible);

const emit = defineEmits(['uploadSuccess', 'update:changeShowDialog']);

const triggerFileSelect = () => {
    // 触发隐藏的文件选择框
    fileInput.value.click();
};

const closeDialog = () => {
    fileName.value = "";
    dialogVisible.value = false;
    emit("update:changeShowDialog", false);
};


const handleImport = async () => {
    fileName.value = "";
    // 执行导入操作
    if (!selectedFile.value) {
        $toastMessage.warning("请先选择一个文件");
        return;
    }
    const formData = new FormData();
    formData.append("File", selectedFile.value);
    formData.append("DataId", props.dataId);
    try {
        await uploadData(formData);
        $toastMessage.success("文件上传成功");
        emit('uploadSuccess', true);
        // 处理成功后的操作
    } catch (error) {
        console.error("文件上传失败:", error);
        $toastMessage.error("文件上传失败:", error.message);
        // 错误处理
    } finally {
        selectedFile.value = null;
        dialogVisible.value = false;
    }
};


const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
        // 检查是否是 Excel 文件
        const fileExtension = file.name.split(".").pop().toLowerCase();
        if (
            fileExtension === "kev" ||
            fileExtension === "dfd" ||
            fileExtension === "gdbx" ||
            fileExtension === "pcg" ||
            fileExtension === "xls" ||
            fileExtension === "xlsx" ||
            fileExtension === "txt" ||
            fileExtension === "jpg"
        ) {
            fileName.value = file.name; // 设置文件名
            selectedFile.value = file;
        } else {
            $toastMessage.warning("请选择一个有效的[Excel, GDBX, DFD, PCG, KEV, TXT]格式文件！");
            return;
        }
    }
};
</script>