You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.9 KiB
Vue
132 lines
3.9 KiB
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> |