历史版本的预览

src/components/historyList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog v-model="isOpen" append-to-body width="700">
+    <el-dialog v-model="isOpen" append-to-body width="700" @close="closeOpen">
       <template #header>
         <div class="my-header">
           <div class="title">历史版本列表 — {{ name }}</div>
@@ -11,32 +11,30 @@
           class="main-cont-left"
           style="display: flex; flex-direction: column; margin-top: 16px"
         >
-          <div class="main-line">
             <div
               v-for="(item, index) in treeData.data"
               :key="index"
               class="list-item list-item-dot"
-              :class="{ 'active-list-item': clickIndex == index }"
+              :class="{ 'active-list-item list-item-dot-active': clickIndex == index }"
               @click="clickList(index)"
             >
               <div>
                 <span style="padding-left: 24px">{{ item.createTime }}</span>
               </div>
               <!-- 显示节点标签 -->
-              <img :src="eyes" @click="previewFileClick(index)" class="eyes" />
+              <img :src="eyes" @click="previewFileClick(item)" class="eyes"/>
             </div>
-          </div>
         </div>
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="isOpen = false" class="cancel-button"
+          <el-button @click="closeOpen" class="cancel-button"
             >关闭</el-button
           >
         </span>
       </template>
     </el-dialog>
-    <!-- <FileEdit :docId="docId" :copyRow="copyRow"></FileEdit> -->
+    <FileEdit :docId="docId" :copyRow="copyRow" :isEdit="false"></FileEdit>
   </div>
 </template>
     <script setup>
@@ -97,12 +95,20 @@ const handleNodeClick = (data) => {
   clickData.value = data;
 };
 const clickIndex = ref("");
-const previewFileClick = (index) => {
-  clickIndex.value = index;
+const emit = defineEmits(["changeMsgClose"]);
+//点击预览
+const previewFileClick = (item) => {
+  emit("changeMsgClose", true,item);
+  isOpen.value= false
 };
 const clickList = (index) => {
   clickIndex.value = index;
 };
+
+const closeOpen=()=>{
+  isOpen.value= false
+  emit("changeMsgClose", false,'');
+}
 </script>
   <style lang="scss" scoped>
 @import "@/assets/styles/tree-common.scss";
@@ -124,6 +130,7 @@ const clickList = (index) => {
 .eyes {
   width: 22px;
   height: 22px;
+  cursor: pointer;
 }
 .list-item {
   display: flex;
@@ -149,17 +156,31 @@ const clickList = (index) => {
   height: 14px;
 }
 
-.list-item-dot::after {
+.list-item:not(:first-child)::after  {
   content: "";
   position: absolute;
-  top: 50%;
-  left: 32;
+  top: 0%;
+  left: 2.3%;
   transform: translate(0, -50%);
   width: 1px;
-  height: 100%;
+  height: 50%;
   background-color: #c1cce3; /* 连线的颜色 */
 }
+.list-item-dot-active::before{
+  background-image: url("@/assets/images/active-circle.png");
+}
+
 .active-list-item {
   background: #f5f7f9;
 }
+.cancel-button{
+  background: #2E6BC8;
+  color: #fff;
+  border: none;
+  width: 120px;
+  height: 32px;
+}
+.main-conts{
+  border: none;
+}
 </style>

src/views/myfile/MyFile.vue

@@ -259,7 +259,7 @@
                 <div>
                     <el-button @click="editOnline = true">返回</el-button>
                 </div>
-                <FileEdit :docId="clickRowId" :copyRow="copyRow"></FileEdit>
+                <FileEdit :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew" :historycopyRow="historycopyRow"></FileEdit>
             </div>
             <!-- 扩容弹窗 -->
             <div>
@@ -428,11 +428,9 @@
     :copyRow="copyRow"
     @close="openForwardFile = false"
     :fileUserTreeData="fileUserTreeData.data"
+    @changeMsgClose="changeMsgClose"
   ></historyList>
   <!-- 历史版本 -->
-    <FileTreeChoice :openFile="openForwardFile" :docId="clickRowId.toString()" @close="openForwardFile = false"
-        :fileUserTreeData="fileUserTreeData.data" @forwardChangeMsg="forwardChangeMsg"></FileTreeChoice>
-    <!-- 历史版本 -->
 </template>
 
 <script>
@@ -509,6 +507,7 @@ export default {
         let copyOrMove = ref(0)//0代表复制，1代表移动
         let sortNum = ref(0)
         const openForwardFile = ref(false)   //历史版本展示
+        const historyPrew=ref(false)
         const fileUserTreeData = reactive({ data: {} });
         let boserForm = ref({
             spaceId: "",//空间id
@@ -1224,9 +1223,17 @@ export default {
 
         }
         //历史版本
-        // 点击转存
         const forwardTreeData = reactive({ data: {} });
-        function forwardChangeMsg(val) {}
+        const historycopyRow=ref({})
+        function changeMsgClose(val,item) { 
+            if(val){              
+                historycopyRow.value=item
+                editOnline.value = false
+                cliCC.value = false
+                historyPrew.value=true
+            }
+            openForwardFile.value=val
+        }
 
         //对mouseCli数组进行筛选，实现菜单的区分显示
         const filterMouseCli = ()=>{
@@ -1362,10 +1369,15 @@ export default {
             impDirId,
             impNum,
             impSpaceId,
-            openForwardFile,//历史版本
+            //历史版本=========
+            openForwardFile,
             forwardTreeData,
             fileUserTreeData,
-            filterMouseCli
+            filterMouseCli,
+            changeMsgClose,
+            historyPrew,
+            historycopyRow
+             //历史版本=========
         }
 
     },

src/views/myfile/components/FileEdit.vue

@@ -24,9 +24,17 @@ export default {
             type: Number, // 这里的类型应该匹配你要传递的数据类型
             required: true, // 如果这个属性是必须的，请添加此项
         },
-        copyRow: {
+        copyRow: {//点击外层列表的哪项数据
             type: Object,
             required: true
+        },
+        historyPrew:{
+            Boolean,
+            default:false
+        },
+        historycopyRow:{//点击历史预览的哪项数据
+            type: Object,
+            default:()=>{}
         }
     },
     setup(props) {
@@ -48,12 +56,13 @@ export default {
         let show = ref(true)
         let newObj = ref({})
         function oo(docId, isEdit) {
-            getInfo(docId).then(response => {
+            if(docId&&!props.historyPrew){ 
+                getInfo(docId).then(response => {
                 const obj = response.data;
-                obj.isEdit = isEdit;
+                obj.isEdit =isEdit;
                 newObj.value = obj
                 option.value.isEdit = obj.isEdit
-                option.value.url = `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/access/${obj.fileId}`;
+                option.value.url=`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/access/${obj.fileId}`;
                 option.value.title = obj.fileName;
                 option.value.key = obj.fileId;
                 option.value.fileType = obj.fileType.replace(".", "");
@@ -63,10 +72,23 @@ export default {
                     name: useUserStore().uname //用户姓名
                 };
             });
-            console.log(option.value,'option');
+            }else if(docId&&props.historyPrew){
+                option.value.isEdit=false
+                option.value.url =`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/access/${props.historycopyRow.fileId}`
+                option.value.title =  props.copyRow.fileName
+                option.value.key =props.historycopyRow.fileId;
+                option.value.fileType = props.copyRow.fileType.replace(".", "");
+                option.value.editUrl = `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/only-office/callback/${props.docId}?name=${useUserStore().uname}`;
+                option.value.user = {
+                    id: useUserStore().uid, //用户ID
+                    name: useUserStore().uname //用户姓名
+                };
+                console.log(option.value,'option3===');
+            }
+            
         }
         /** 修改按钮操作 */
-        function edit() {
+        function edit() { 
             oo(docId, true);
         }
         onMounted(() => {