提交 125a47f5 authored 作者: caijian's avatar caijian

支持文件上传和下载

上级 814bcb40
......@@ -290,3 +290,18 @@ export const uploadFileService = (file) => {
// }
// });
};
export const getDownloadTemplate = async () => {
let data = await request.get('/api/hypergraph/get_upload_template')
return data
}
export const uploadFile = async (params) => {
let data = await request.post('/api/hypergraph/create_upload', params, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
return data
}
......@@ -33,7 +33,7 @@
</el-row>
</el-form>
<el-tabs class="tablist" v-model="activeTabName" @tab-click="changeTabs">
<el-tabs class="tablist" v-model="activeTabName" @tab-click="changeTabs" v-show="formState.radio == 'local'">
<el-tab-pane
v-for="tab in tabsList"
:key="tab.label"
......@@ -87,15 +87,17 @@
</div>
<!-- 数据上传 -->
<el-dialog title="数据上传" v-model="uploadVisible" width="30%" :before-close="handleCancleUpload" :close-on-click-modal="false">
<el-upload drag action="#" ref="uploadRef" multiple :auto-upload="false" :file-list="fileList" :show-file-list="true" :before-upload="handleBeforeUpload" :on-change="changeUpload">
<el-icon class="el-icon-upload">
<Upload />
</el-icon>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
<div v-loading="uploadLoading" element-loading-text="正在上传中...">
<el-upload drag action="#" ref="uploadRef" multiple :auto-upload="false" :file-list="fileList" :show-file-list="true" :before-upload="handleBeforeUpload" :on-change="changeUpload" :disabled="uploadLoading">
<el-icon class="el-icon-upload">
<Upload />
</el-icon>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</div>
<div class="dialog-footer">
<el-button @click="handleCancleUpload">取 消</el-button>
<el-button type="primary" @click="handleConfirmUpload">确 定</el-button>
<el-button @click="handleCancleUpload" :disabled="uploadLoading">取 消</el-button>
<el-button type="primary" @click="handleConfirmUpload" :loading="uploadLoading">确 定</el-button>
</div>
</el-dialog>
<!-- 数据详情 -->
......@@ -143,7 +145,7 @@ import {
} from "@/api/graphApi";
import TablePaginationComp from "../components/TablePagination.vue";
import CreateFooterBtn from "../components/CreateFooterBtn.vue";
import { createGraph } from "@/api/graphApi";
import { createGraph, getDownloadTemplate, uploadFile } from "@/api/graphApi";
const emit = defineEmits(['handleCancelCreate']);
const {
appContext
......@@ -196,6 +198,7 @@ let rowInfo = ref({}) // 数据详情
let dialogTitle = ref("")
let tableCompRef = ref()
let uploadVisible = ref(false) // 数据上传弹框
let uploadLoading = ref(false) // 上传loading状态
let tabsList = ref([
{
label: "实体",
......@@ -336,7 +339,14 @@ function changeUpload(file, list) {
}
// 模板下载
function handleDownload() {
getDownloadTemplate().then((res) => {
if (res.code == 1) {
const domain = location.origin
const prefix = domain.indexOf('localhost') !== -1 ? 'http://8.140.26.4:10006' : domain
window.open(prefix + '/tech_hyper' + res.data)
console.log(res.data)
}
})
}
// 数据上传弹框
function hanlleUploadVisible() {
......@@ -348,10 +358,53 @@ function handleCancleUpload() {
fileList.value = [];
}
// 确定上传
function handleConfirmUpload() {
async function handleConfirmUpload() {
if (!fileList.value.length) {
return globalProxy.$message.error("请上传数据");
}
try {
uploadLoading.value = true;
// 从 store 中获取 name 和 description
const graphFormData = store.state.graph.create_graph_form[0] || {};
const name = graphFormData.graphName || "";
const description = graphFormData.description || "";
if (!name) {
globalProxy.$message.error("专题名称不能为空");
return;
}
// 创建FormData对象
const formData = new FormData();
formData.append('name', name);
formData.append('description', description);
// 添加文件到FormData
fileList.value.forEach((file) => {
const { raw } = file;
formData.append('file', raw);
});
// 调用上传接口
const result = await uploadFile(formData);
if (result.code == 1) {
globalProxy.$message.success("创建成功");
handleCancleUpload(); // 关闭上传弹框
// 跳转到第三步
store.commit("graph/SET_ACTIVE_STEP", 2);
} else {
globalProxy.$message.error(result.message || "上传失败");
}
} catch (error) {
console.error("上传失败:", error);
globalProxy.$message.error("上传失败,请重试");
} finally {
uploadLoading.value = false;
}
}
// 获取数据
function getTableData(postData) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论