提交代码
This commit is contained in:
jiang
parent
27534f574c
commit
0183956746
|
|
@ -24,7 +24,8 @@
|
|||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['dataCenter:dataSet:import']"
|
||||
>导入</el-button>
|
||||
>导入
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
|
|
@ -35,7 +36,8 @@
|
|||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['dataCenter:dataSet:file:delete']"
|
||||
>删除</el-button>
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
|
|
@ -44,24 +46,27 @@
|
|||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="handleClose"
|
||||
>关闭</el-button>
|
||||
>关闭
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table style="width: 100%" v-loading="loading" :data="list" :height="tableHeight" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column type="index" label="序号" :index="indexMethod" width="50" />
|
||||
<el-table-column label="文件名称" align="center" show-overflow-tooltip prop="fileName" min-width="100" />
|
||||
<el-table-column label="文件大小" align="center" show-overflow-tooltip prop="fileSize" >
|
||||
<el-table style="width: 100%" v-loading="loading" :data="list" :height="tableHeight"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="50" align="center"/>
|
||||
<el-table-column type="index" label="序号" :index="indexMethod" width="50"/>
|
||||
<el-table-column label="文件名称" align="center" show-overflow-tooltip prop="fileName" min-width="100"/>
|
||||
<el-table-column label="文件大小" align="center" show-overflow-tooltip prop="fileSize">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.fileSize < 1024 * 1024?(scope.row.fileSize/1024).toFixed(2)+'KB':(scope.row.fileSize/1024/1024).toFixed(2)+'MB'}}</span>
|
||||
<span>{{ scope.row.fileSize < 1024 * 1024 ? (scope.row.fileSize / 1024).toFixed(2) + 'KB' : (scope.row.fileSize / 1024 / 1024).toFixed(2) + 'MB' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="格式" align="center" show-overflow-tooltip prop="createBy" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{scope.row.fileName.split('.').pop()}}
|
||||
{{ scope.row.fileName.split('.').pop() }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -70,7 +75,7 @@
|
|||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" min-width="100" class-name="small-padding fixed-width" >
|
||||
<el-table-column label="操作" align="center" min-width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
|
|
@ -78,7 +83,8 @@
|
|||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['dataCenter:dataSet:file:delete']"
|
||||
>删除</el-button>
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -92,20 +98,23 @@
|
|||
/>
|
||||
|
||||
<!-- 导入 -->
|
||||
<import-dialog :get-list="getList" :open="importOpen" :data-type="dataType" :dataset-id="datasetId.toString()" @dialog-cancel="handleCancel"/>
|
||||
<import-dialog :get-list="getList" :open="importOpen" :data-type="dataType" :dataset-id="datasetId.toString()"
|
||||
@dialog-cancel="handleCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import { list,remove} from '@/api/dataCenter/dataSetDetails'
|
||||
import { list, remove } from '@/api/dataCenter/dataSetDetails'
|
||||
import importDialog from './importDialog.vue'
|
||||
|
||||
export default {
|
||||
components: { importDialog },
|
||||
name: "DataSet",
|
||||
name: 'DataSet',
|
||||
data() {
|
||||
return {
|
||||
dataType:'0',
|
||||
dataType: '0',
|
||||
datasetId: '0',
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
|
|
@ -128,78 +137,92 @@ export default {
|
|||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
datasetName: null,
|
||||
},
|
||||
};
|
||||
datasetName: null
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dataType = this.$route.query && this.$route.query.dataType;
|
||||
this.datasetId = this.$route.params && this.$route.params.dataSetId;
|
||||
this.getList();
|
||||
this.dataType = this.$route.query && this.$route.query.dataType
|
||||
this.datasetId = this.$route.params && this.$route.params.dataSetId
|
||||
this.getList()
|
||||
// 初始化表格高度
|
||||
this.updateTableHeight();
|
||||
this.updateTableHeight()
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener("resize", this.updateTableHeight);
|
||||
window.addEventListener('resize', this.updateTableHeight)
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
// 每次路由变化时重新加载数据
|
||||
if (to.fullPath !== from.fullPath) {
|
||||
this.dataType = this.$route.query && this.$route.query.dataType
|
||||
this.datasetId = this.$route.params && this.$route.params.dataSetId
|
||||
this.getList()
|
||||
// 初始化表格高度
|
||||
this.updateTableHeight()
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', this.updateTableHeight)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
indexMethod(index){
|
||||
console.log(index);
|
||||
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
|
||||
indexMethod(index) {
|
||||
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
|
||||
},
|
||||
updateTableHeight() {
|
||||
// 设置表格高度为窗口高度减去其他元素高度
|
||||
const headerHeight = 200; // 头部高度，可以调整
|
||||
const footerHeight = 80; // 底部高度，可以调整
|
||||
this.tableHeight = window.innerHeight - headerHeight - footerHeight;
|
||||
const headerHeight = 200 // 头部高度，可以调整
|
||||
const footerHeight = 80 // 底部高度，可以调整
|
||||
this.tableHeight = window.innerHeight - headerHeight - footerHeight
|
||||
},
|
||||
/**获取数据 **/
|
||||
getList(){
|
||||
this.loading =true
|
||||
this.queryParams.dataSetId = this.datasetId;
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.queryParams.dataSetId = this.datasetId
|
||||
list(this.queryParams).then(response => {
|
||||
this.list = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading =false
|
||||
this.list = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
/** 返回按钮操作 */
|
||||
handleClose() {
|
||||
const obj = { path: "/dataCenter/dataSet" };
|
||||
this.$tab.closeOpenPage(obj);
|
||||
const obj = { path: '/dataCenter/dataSet' }
|
||||
this.$tab.closeOpenPage(obj)
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
handleAdd(){
|
||||
this.importOpen = true;
|
||||
handleAdd() {
|
||||
this.importOpen = true
|
||||
},
|
||||
handleDelete(row){
|
||||
const datasetId = this.datasetId;
|
||||
const ids = row.fileId || this.ids.join(",");
|
||||
handleDelete(row) {
|
||||
const datasetId = this.datasetId
|
||||
const ids = row.fileId || this.ids.join(',')
|
||||
this.$modal.confirm('是否确认删除数据项？').then(function() {
|
||||
return remove(datasetId,ids);
|
||||
return remove(datasetId, ids)
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.fileId)
|
||||
this.single = selection.length!==1
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
// 处理取消事件
|
||||
handleCancel() {
|
||||
this.importOpen= false;
|
||||
},
|
||||
this.importOpen = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -207,10 +230,12 @@ export default {
|
|||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<template slot-scope="scope">
|
||||
<router-link :to="{
|
||||
path: '/dataCenter/dataSet-details/index/' + scope.row.datasetId,
|
||||
query: { dataType: scope.row.dataType }
|
||||
}" class="link-type">
|
||||
query: { dataType: scope.row.dataType,_t: Date.now() }
|
||||
}" class="link-type" @click="">
|
||||
<span>{{ scope.row.datasetName }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
|
|
@ -183,7 +183,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
indexMethod(index){
|
||||
console.log(index);
|
||||
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
|
||||
},
|
||||
updateTableHeight() {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@ export default {
|
|||
uploadFailed: {}, // 存储上传失败的文件
|
||||
queue: [], // 文件上传队列
|
||||
maxConcurrentUploads: 5, // 最大并发上传数
|
||||
uploadsNum:{}
|
||||
uploadsNum:{},
|
||||
isUploading: true, // 是否正在上传
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
|
|
@ -86,14 +87,17 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$modal.confirm('您确认要关闭吗？关闭后，未完成上传的文件将停止上传。').then(function() {
|
||||
return done();
|
||||
}).then(() => {
|
||||
this.resetComponent()
|
||||
//this.getList()
|
||||
this.getList()
|
||||
}).catch(function() {
|
||||
})
|
||||
this.$modal
|
||||
.confirm('您确认要关闭吗？关闭后，未完成上传的文件将停止上传。')
|
||||
.then(() => {
|
||||
this.queue = []; // 清空队列
|
||||
done();
|
||||
})
|
||||
.then(() => {
|
||||
this.resetComponent();
|
||||
this.getList && this.getList(); // 重新加载文件列表
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 重置组件状态
|
||||
resetComponent() {
|
||||
|
|
@ -102,6 +106,7 @@ export default {
|
|||
this.uploadFailed = {};
|
||||
this.queue = [];
|
||||
this.uploadsNum = {};
|
||||
this.isUploading = true; // 允许重新上传
|
||||
},
|
||||
// 自定义上传请求
|
||||
customUpload(uploadFile) {
|
||||
|
|
@ -124,40 +129,44 @@ export default {
|
|||
|
||||
// 分片上传
|
||||
uploadChunks(file) {
|
||||
this.$set(this.uploadsNum, file.name, 0); // 更新文件上传进度
|
||||
const totalChunks = Math.ceil(file.size / this.chunkSize); // 计算分片总数
|
||||
let currentChunk = 0; // 当前分片索引
|
||||
if (!this.drawer) return; // 检查是否需要继续上传
|
||||
this.$set(this.uploadsNum, file.name, 0);
|
||||
const totalChunks = Math.ceil(file.size / this.chunkSize);
|
||||
let currentChunk = 0;
|
||||
const uploadNextChunk = () => {
|
||||
console.log(this.queue.length)
|
||||
if (!this.drawer) return; // 检查是否需要继续上传
|
||||
const start = currentChunk * this.chunkSize;
|
||||
const end = Math.min(file.size, start + this.chunkSize);
|
||||
const chunk = file.slice(start, end);
|
||||
const formData = new FormData();
|
||||
formData.append("file", chunk);
|
||||
formData.append("filename", file.name);
|
||||
formData.append("chunk", currentChunk + 1); // 当前分片编号
|
||||
formData.append("totalChunks", totalChunks); // 总分片数
|
||||
formData.append("parentId", this.parentId);
|
||||
formData.append("fileUrl", this.fileUrl);
|
||||
// 使用 fetch 上传分片
|
||||
formData.append('file', chunk);
|
||||
formData.append('filename', file.name);
|
||||
formData.append('chunk', currentChunk + 1);
|
||||
formData.append('totalChunks', totalChunks);
|
||||
formData.append('parentId', this.parentId);
|
||||
formData.append('fileUrl', this.fileUrl);
|
||||
|
||||
uploadFiles(formData)
|
||||
.then(() => {
|
||||
currentChunk++;
|
||||
const progress = Math.floor((currentChunk / totalChunks) * 100);
|
||||
this.$set(this.uploadsNum, file.name, progress); // 更新文件上传进度
|
||||
this.$set(this.uploadProgress, file.name, progress); // 更新文件上传进度
|
||||
this.$set(this.uploadsNum, file.name, progress);
|
||||
this.$set(this.uploadProgress, file.name, progress);
|
||||
if (currentChunk < totalChunks) {
|
||||
uploadNextChunk(); // 上传下一个分片
|
||||
uploadNextChunk();
|
||||
} else {
|
||||
this.startNextUpload(); // 上传下一个文件
|
||||
this.checkAllUploadsComplete(); // 检查是否所有文件上传完成
|
||||
this.startNextUpload();
|
||||
this.checkAllUploadsComplete();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch(() => {
|
||||
this.$set(this.uploadFailed, file.name, true);
|
||||
this.startNextUpload(); // 上传下一个文件
|
||||
this.startNextUpload();
|
||||
});
|
||||
};
|
||||
uploadNextChunk(); // 开始上传第一个分片
|
||||
|
||||
uploadNextChunk();
|
||||
},
|
||||
checkAllUploadsComplete() {
|
||||
const allComplete = Object.values(this.uploadProgress).every(progress => progress === 100);
|
||||
|
|
@ -165,20 +174,24 @@ export default {
|
|||
this.$message.success("所有文件上传完成！");
|
||||
this.drawer = false; // 自动关闭弹窗
|
||||
this.getList && this.getList(); // 重新加载列表
|
||||
this.resetComponent();
|
||||
}
|
||||
},
|
||||
// 启动队列中的下一个文件上传（控制并发）
|
||||
startNextUpload() {
|
||||
Object.keys(this.uploadsNum).forEach(fileName => {
|
||||
if (!this.isUploading) return; // 如果停止上传，则不启动新任务
|
||||
|
||||
Object.keys(this.uploadsNum).forEach((fileName) => {
|
||||
if (this.uploadsNum[fileName] === 100) {
|
||||
delete this.uploadsNum[fileName]; // Remove completed files from the progress list
|
||||
delete this.uploadsNum[fileName];
|
||||
}
|
||||
});
|
||||
|
||||
if (this.queue.length === 0 || Object.values(this.uploadsNum).length >= this.maxConcurrentUploads) {
|
||||
return; // 如果队列为空或并发数已满，则不启动新任务
|
||||
return;
|
||||
}
|
||||
const nextFile = this.queue.shift(); // 获取下一个文件
|
||||
this.uploadChunks(nextFile); // 开始上传该文件
|
||||
const nextFile = this.queue.shift();
|
||||
this.uploadChunks(nextFile);
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const maxSize = 2 * 1024 * 1024*1024; // 限制文件最大为 5MB
|
||||
|
|
@ -186,6 +199,10 @@ export default {
|
|||
this.$message.error('文件大小不能超过 2GB');
|
||||
return false; // 阻止上传
|
||||
}
|
||||
if ( file.size < 0) {
|
||||
this.$message.error('文件大小错误');
|
||||
return false; // 阻止上传
|
||||
}
|
||||
return true; // 允许上传
|
||||
},
|
||||
// 处理超出文件数限制的情况
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@
|
|||
/>
|
||||
|
||||
<!-- 添加或修改标注人员和角色关联对话框 -->
|
||||
<el-dialog title="添加" :visible.sync="addOpen" width="800px" append-to-body>
|
||||
<el-dialog title="添加" :visible.sync="addOpen" width="800px" append-to-body @close="cancel">
|
||||
<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
|
||||
<el-form-item label="角色" prop="roleIds">
|
||||
<el-select v-model="addForm.roleIds" multiple style="width: 30%;" placeholder="请选择">
|
||||
|
|
@ -128,6 +128,8 @@
|
|||
</el-form-item>
|
||||
<el-form-item prop="selectedData">
|
||||
<el-transfer
|
||||
:key="transferKey"
|
||||
ref="transfer"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="addForm.selectedData"
|
||||
filterable
|
||||
|
|
@ -201,6 +203,7 @@ export default {
|
|||
selectUser:[],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
transferKey: 0, // 动态 key 用于刷新组件
|
||||
// 是否显示弹出层
|
||||
addOpen:false,
|
||||
open: false,
|
||||
|
|
@ -292,6 +295,7 @@ export default {
|
|||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.transferKey += 1; // 更新 key 强制刷新 el-transfer
|
||||
this.open = false;
|
||||
this.addOpen = false;
|
||||
this.reset();
|
||||
|
|
@ -303,6 +307,7 @@ export default {
|
|||
addTeamMember(this.addForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.addOpen = false;
|
||||
this.transferKey += 1; // 更新 key 强制刷新 el-transfer
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue