文件同步管理页面

web/src/views/testdata/datamanagement/index.vue

@@ -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

web/src/views/testdata/fileSynchronization/index.vue

@@ -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()
+    getWorkData()
-}
-//工作空间数据处理
-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)
-
 }
 //工作空间树点击
 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
+                        <el-scrollbar height="73vh">
-                            show-checkbox v-loading="workloading" @check-change="handleCheckChange" />
+                            <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: inline-block;
-    display: flex;
+    width: 100%;
-    align-items: center;
-    justify-content: space-between;
     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>