ThbTech/FileManage
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

文件同步管理页面

Browse Source
This commit is contained in:
wangxk 2025-03-03 11:29:41 +08:00
parent 8ea12a93f7
commit d3fcd35579
2 changed files with 323 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/views/testdata/datamanagement/index.vue vendored
View File

@ -994,6 +994,7 @@ const rowarr: any = ref()
function renames(row: any) {
rename.value = true
rowarr.value = row
renameobj.value.fileName = row.fileName
}
function RenameClose() {
rename.value = false
@ -1342,7 +1343,7 @@ function removeSuffix(filename: any) {
<span class="img_tree">
<img src="@/assets/project/xiu.png" alt="" title="编辑" @click="editSubItem(data)">
<img src="@/assets/project/del.png" alt="" title="删除" @click="delSubItem(data)">
<img src="@/assets/images/chayi.png" alt="" title="差异性对比" @click="opendifference(data)">
<!-- <img src="@/assets/images/chayi.png" alt="" title="差异性对比" @click="opendifference(data)"> -->
<img src="@/assets/project/jia.png" alt="" title="添加子项目" @click="addSubItem(data)">
</span>
</span>
@ -1422,7 +1423,7 @@ function removeSuffix(filename: any) {
</template>
</el-table-column>
<el-table-column prop="uploader" width="80" label="上传人"></el-table-column>
<el-table-column prop="uploadTime" width="170" label="上传时间"></el-table-column>
<el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
<el-table-column fixed="right" label="操作" width="120" align="center">
<template #default="scope">
<span

362
web/src/views/testdata/fileSynchronization/index.vue vendored
View File

@ -9,7 +9,20 @@ import { ref, onMounted, nextTick, defineAsyncComponent } from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from "element-plus";
import { tstaskList, getTsNodesTree, tsFilesPage } from "@/api/datamanagement";
// 文件预览相关
import useFileUpload from "@/components/file/file/useFileUpload";
import useHeaderStorageList from "@/components/header/useHeaderStorageList";
import useFileData from "@/components/file/file/useFileData";
import Viewfile from '@/views/component/Viewfile.vue'
import useFilePreview from "@/components/file/file/useFilePreview";
import MarkdownViewerAsyncLoading from "@/components/file/preview/MarkdownViewerAsyncLoading.vue";
import VideoPlayerAsyncLoading from "@/components/file/preview/VideoPlayerAsyncLoading.vue";
import TextViewerAsyncLoading from "@/components/file/preview/TextViewerAsyncLoading.vue";
import MarkdownViewerDialogAsyncLoading from "@/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
const { dialogVideoVisible, dialogTextVisible, dialogPdfVisible, dialogOfficeVisible, dialog3dVisible } = useFilePreview();
const { clearALlFinishedUploadFile } = useFileUpload();
const { currentStorageKey } = useHeaderStorageList();
const { openRow } = useFileData();
//左侧树的选择框
const projectId = ref()
@ -32,7 +45,6 @@ const props = {
label: 'fileName',
children: 'zones',
}
let count = 1
const workloading = ref(false)
//表格数据配置
const queryParams: any = ref({
@ -44,8 +56,17 @@ const queryParams: any = ref({
});
const worktree = ref(false)
const workdata = ref([])
const workTreeArr = ref([])
const workId = ref()
//备份空间
const backupsdata = ref([])
// 右键菜单相关
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const currentNode = ref<any>(null)
//文件差异性对比
const differential = ref(true)
function diffClose() {
differential.value = false
}
//获取所有项目
function getProject() {
tstaskList().then((res: any) => {
@ -65,36 +86,12 @@ function gettreedata() {
nextTick(() => {
treeRef.value?.setCurrentKey(pathid.value);
});
getdata()
getWorkData()
})
}
function handleNodeClick(data: any, node: any) {
pathid.value = data.nodeId
getdata()
}
//工作空间数据处理
const loadNode = (node: any, resolve: (data: any) => void) => {
if (node.level === 0) {
return resolve(workdata.value)
}
let hasChild = false
console.log(node)
if (node.data.isFile === 'FOLDER') {
hasChild = true
queryParams.value.id = node.data.id
getdata()
} else {
hasChild = false
}
let data: any = []
if (hasChild) {
data = workTreeArr.value
} else {
data = []
}
resolve(data)
getWorkData()
}
//工作空间树点击
const handleCheckChange = (
@ -102,22 +99,64 @@ const handleCheckChange = (
checked: boolean,
indeterminate: boolean
) => {
console.log(data, checked, indeterminate)
console.log(data, checked)
}
//工作空间树获取
//获取表格数据
function getdata() {
//获取工作空间数据
function getWorkData() {
// workloading.value = true
queryParams.value.nodeId = pathid.value
queryParams.value.taskId = projectId.value
tsFilesPage(queryParams.value).then((res: any) => {
// workloading.value = false
workdata.value = res.data.records
backupsdata.value = res.data.records
worktree.value = true
workTreeArr.value = workdata.value
})
}
//备份空间
function backupsChange(
data: any,
checked: boolean,
indeterminate: boolean
) {
console.log(data, checked)
}
//右键菜单
const handleRightClick = (event: Event, data: any, node: any) => {
console.log(data)
event.preventDefault()
currentNode.value = data
contextMenuVisible.value = true
contextMenuPosition.value = {
x: (event as MouseEvent).clientX + 10,
y: (event as MouseEvent).clientY
}
}
const handleMenuClick = (action: string, type: any) => {
contextMenuVisible.value = false
switch (action) {
case 'restore':
// 处理恢复逻辑
break
case 'backups':
// 处理备份逻辑
break
case 'delete':
// 处理删除逻辑
break
case 'preview':
// 处理预览逻辑
break
}
}
// 点击其他地方关闭菜单
document.addEventListener('click', () => {
contextMenuVisible.value = false
})
onMounted(() => {
getProject()
});
@ -139,6 +178,32 @@ const vMove = {
};
}
}
//预览
// 文件预览相关, 视频、音频、文本、图片
const VideoPlayer = defineAsyncComponent({
loader: () => import("@/components/file/preview/VideoPlayer.vue"),
loadingComponent: VideoPlayerAsyncLoading
})
const TextViewer = defineAsyncComponent({
loader: () => import("@/components/file/preview/TextViewer.vue"),
loadingComponent: TextViewerAsyncLoading
})
const MarkdownViewer = defineAsyncComponent({
loader: () => import("@/components/file/preview/MarkdownViewer.vue"),
loadingComponent: MarkdownViewerDialogAsyncLoading
})
const PdfViewer = defineAsyncComponent({
loader: () => import("@/components/file/preview/PdfViewer.vue"),
loadingComponent: MarkdownViewerDialogAsyncLoading
})
const OfficeViewer = defineAsyncComponent({
loader: () => import("@/components/file/preview/OfficeViewer.vue"),
loadingComponent: MarkdownViewerDialogAsyncLoading
})
const Three3dPreview = defineAsyncComponent({
loader: () => import("@/components/file/preview/Three3dPreview.vue"),
loadingComponent: MarkdownViewerDialogAsyncLoading
})
</script>
<template>
@ -173,11 +238,184 @@ const vMove = {
<div class="tree_left">
<div class="tree_title">工作空间:</div>
<div>
<el-tree v-if="worktree" style="max-width: 600px" :props="props" :load="loadNode" lazy
show-checkbox v-loading="workloading" @check-change="handleCheckChange" />
<el-scrollbar height="73vh">
<el-tree v-if="worktree" style="max-width: 600px" :props="props" :data="workdata"
@node-contextmenu="handleRightClick" :expand-on-click-node="false" show-checkbox
v-loading="workloading" @check-change="handleCheckChange">
<template #default="{ data }">
<span class="custom-tree-node">
<!-- data.children.length -->
<span class="text">{{ data.fileName }}({{ data.isFile == 'FOLDER' ? '0' :
data.fileSize + 'MB' }})</span>
</span>
</template>
</el-tree>
<div v-show="contextMenuVisible" class="context-menu" :style="{
left: `${contextMenuPosition.x}px`,
top: `${contextMenuPosition.y}px`
}">
<div class="menu-item" @click="handleMenuClick('backups', 'local')">备份</div>
<div class="menu-item" @click="handleMenuClick('delete', 'local')">删除</div>
<div class="menu-item" @click="handleMenuClick('preview', 'local')">预览</div>
</div>
</el-scrollbar>
</div>
</div>
<div class="tree_left"></div>
<div class="tree_left">
<div class="tree_title">备份空间:</div>
<div>
<el-scrollbar height="73vh">
<el-tree v-if="worktree" style="max-width: 600px" :props="props" :data="backupsdata"
@node-contextmenu="handleRightClick" :expand-on-click-node="false" show-checkbox
v-loading="workloading" @check-change="backupsChange">
<template #default="{ data }">
<span class="custom-tree-node">
<!-- data.children.length -->
<span class="text">{{ data.fileName }}({{ data.isFile == 'FOLDER' ? '0' :
data.fileSize + 'MB' }})</span>
</span>
</template>
</el-tree>
<div v-show="contextMenuVisible" class="context-menu" :style="{
left: `${contextMenuPosition.x}px`,
top: `${contextMenuPosition.y}px`
}">
<div class="menu-item" @click="handleMenuClick('restore', 'minio')">恢复</div>
<div class="menu-item" @click="handleMenuClick('delete', 'minio')">删除</div>
<div class="menu-item" @click="handleMenuClick('preview', 'minio')">预览</div>
</div>
</el-scrollbar>
</div>
</div>
<!-- 文件差异性对比 -->
<el-dialog title="文件差异性对比" v-model="differential" width="50%" :before-close="diffClose" top="30px"
draggable destroy-on-close>
<div>
<el-scrollbar height="400px">
<div class="newContent">
<div class="newContent_title"><span class="newContent_title_text">新增内容：</span>
<el-button type="primary">全部备份</el-button>
</div>
<el-table v-loading="loading" :data="tableData"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
<el-table-column type="selection" width="40" />
<!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
<el-table-column prop="fileName" label="文件名称"></el-table-column>
<el-table-column prop="fileSize" label="文件大小">
<template #default="scope">
{{ scope.row.fileSize + 'MB' }}
</template>
</el-table-column>
<el-table-column prop="workPath" label="路径"></el-table-column>
<el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
<el-table-column fixed="right" label="操作" width="120" align="center">
<template #default="scope">
<span
style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">
</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="newContent">
<div class="newContent_title"><span class="newContent_title_text">变更内容：</span>
<el-button type="primary">全部备份</el-button>
</div>
<el-table v-loading="loading" :data="tableData"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
<el-table-column type="selection" width="40" />
<!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
<el-table-column prop="fileName" label="文件名称"></el-table-column>
<el-table-column prop="fileSize" label="文件大小">
<template #default="scope">
{{ scope.row.fileSize + 'MB' }}
</template>
</el-table-column>
<el-table-column prop="workPath" label="路径"></el-table-column>
<el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
<el-table-column fixed="right" label="操作" width="120" align="center">
<template #default="scope">
<span
style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">
</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="newContent">
<div class="newContent_title"><span class="newContent_title_text">缺失内容：</span> <el-button
type="primary">全部恢复</el-button> </div>
<el-table v-loading="loading" :data="tableData"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
<el-table-column type="selection" width="40" />
<!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
<el-table-column prop="fileName" label="文件名称"></el-table-column>
<el-table-column prop="fileSize" label="文件大小">
<template #default="scope">
{{ scope.row.fileSize + 'MB' }}
</template>
</el-table-column>
<el-table-column prop="workPath" label="路径"></el-table-column>
<el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
<el-table-column fixed="right" label="操作" width="120" align="center">
<template #default="scope">
<span
style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">
</span>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</div>
</el-dialog>
<!-- 组件预览 -->
<!-- 视频播放器 -->
<!-- <el-dialog draggable class="zfile-video-dialog" :destroy-on-close="true" v-model="dialogVideoVisible">
<video-player v-if="dialogVideoVisible" ref="videoPlayer" />
</el-dialog> -->
<!-- 文本编辑器 -->
<!-- <el-dialog draggable class="zfile-text-dialog zfile-dialog-mini-close" :destroy-on-close="true"
:title="filePreview.fileName" v-model="dialogTextVisible">
<TextViewer :file-name="filePreview.fileName" :file-url="filePreview.url"
v-if="dialogTextVisible && filePreview.fileName.indexOf('.md') === -1" />
<MarkdownViewer :file-name="filePreview.fileName" :file-url="filePreview.url"
v-if="dialogTextVisible && filePreview.fileName.indexOf('.md') !== -1" />
</el-dialog> -->
<!-- pdf 在线预览 -->
<!-- <el-dialog draggable class="zfile-pdf-dialog" :title="filePreview.fileName" v-model="dialogPdfVisible">
<PdfViewer :file-name="filePreview.fileName" :file-url="filePreview.url" v-if="dialogPdfVisible" />
</el-dialog> -->
<!-- office 在线预览 -->
<!-- <el-dialog draggable class="zfile-office-dialog zfile-dialog-mini-close zfile-dialog-hidden-title"
:title="filePreview.fileName" v-model="dialogOfficeVisible">
<OfficeViewer :file-name="filePreview.fileName" :file-url="filePreview.url"
v-if="dialogOfficeVisible" />
</el-dialog> -->
<!-- 3d 在线预览 -->
<!-- <el-dialog draggable class="zfile-3d-dialog" :title="filePreview.fileName" v-model="dialog3dVisible">
<Three3dPreview :file-name="filePreview.fileName" :file-url="filePreview.url"
v-if="dialog3dVisible" />
</el-dialog> -->
<!-- 音频播放器 -->
<!-- <AudioPlayer></AudioPlayer> -->
<!-- <Viewfile v-if="isViewfile" :showTime="true" :title="title1" :url="ViewfileUrl" :type="fileType"
@update="CloseView" /> -->
</div>
</section>
@ -249,6 +487,9 @@ const vMove = {
margin-left: 15px;
.tree_button {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 15px;
}
@ -261,7 +502,7 @@ const vMove = {
.tree_left {
width: 49%;
height: calc(78vh);
border: 1px solid red;
.tree_title {
font-size: 20px;
@ -275,10 +516,8 @@ const vMove = {
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
display: inline-block;
width: 100%;
font-size: 14px;
padding: 5px;
}
@ -312,4 +551,43 @@ const vMove = {
padding: 0px !important;
}
}
.context-menu {
position: fixed;
background: #fff;
border: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
z-index: 9999;
min-width: 100px;
border-radius: 10px;
.menu-item {
padding: 8px 16px;
cursor: pointer;
&:hover {
background: #409eff;
color: #fff;
border-radius: 10px;
}
}
}
//文件差异性对比
.newContent {
width: 100%;
.newContent_title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.newContent_title_text {
font-size: 20px;
font-weight: 800;
}
}
}
</style>