历史版本

src/components/historyList/index.vue

@@ -1,94 +1,165 @@
 <template>
+  <div>
     <el-dialog v-model="isOpen" append-to-body width="700">
       <template #header>
         <div class="my-header">
-          <div class="title">历史版本列表</div>
+          <div class="title">历史版本列表 — {{ name }}</div>
         </div>
       </template>
-      <div class="main-cont">
-        <!-- v-for="(item,index) in treeData.data" :key="index" -->
-        <div class="main-cont-left" >
-            <el-tree-v2
-          ref="treeRef"
-          :data="treeData.data"
-          :show-checkbox="false"
-          :height="320"
-          :props="defaultProps"
-          @node-click="handleNodeClick"
+      <div class="main-conts">
+        <div
+          class="main-cont-left"
+          style="display: flex; flex-direction: column; margin-top: 16px"
         >
-          <template #default="{ node }">
-            <span style="display: flex;align-items: center;">
-              <img :src="fileImg" alt="" style="width: 20px;height: 20px;margin-right: 5px;"/>
-              <!-- 放置图片 -->
-              <span>{{ node.label }}</span>
+          <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 }"
+              @click="clickList(index)"
+            >
+              <div>
+                <span style="padding-left: 24px">{{ item.createTime }}</span>
+              </div>
               <!-- 显示节点标签 -->
-            </span>
-          </template>
-        </el-tree-v2>
+              <img :src="eyes" @click="previewFileClick(index)" class="eyes" />
+            </div>
+          </div>
         </div>
       </div>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="isOpen = false" class="cancel-button"
-            >取消</el-button
+            >关闭</el-button
           >
-          <el-button type="primary" @click="confirm" class="sure-button">
-            确认
-          </el-button>
         </span>
       </template>
     </el-dialog>
-  </template>
+    <!-- <FileEdit :docId="docId" :copyRow="copyRow"></FileEdit> -->
+  </div>
+</template>
     <script setup>
-  import { reactive, ref, toRaw, toRefs, watch } from "vue";
-  import { ElMessage } from "element-plus";
-  import fileImg from "@/assets/images/file-img.png";
-  import useUserStore from "@/store/modules/user";
-  import { defineEmits } from "vue";
-  const opent = ref(true);
-  const props = defineProps({
-    openFile: {
-      type: Boolean,
-      default: false,
-    },
-    fileUserTreeData: {
-      type: Object,
-      default: () => {},
-    },
-    docId:{
-      type:String,
-      default: '',
-    }
-  });
-  const defaultProps = {
-    children: "",
-    label: "createTime",
-    value: "docId",
-  };
-  const isOpen = ref(props.openFile);
-  watch(
-    () => props.openFile,
-    (newValue) => {
-      isOpen.value = newValue;
-    }
-  );
-  const treeData = reactive({ data: [] });
-  watchEffect(() => {
-    treeData.data=props.fileUserTreeData
-    toRaw(treeData.data);
-  });
-  
-  //树
-  const clickData = ref({});
-  const handleNodeClick = (data) => {
-    clickData.value = data;
-  };
-  //确定按钮
-    const emit = defineEmits(["fileChangeMsg"]);
-  const confirm = () => {
-      isOpen.value  = false
-  };
-  </script>
+import { reactive, ref, toRaw, toRefs, watch } from "vue";
+import FileEdit from "../../views/myfile/components/FileEdit.vue";
+import { ElMessage } from "element-plus";
+import fileImg from "@/assets/images/file-img.png";
+import activeCircle from "@/assets/images/active-circle.png";
+import morenCircle from "@/assets/images/moren-circle.png";
+
+import eyes from "@/assets/images/eyes.png";
+import useUserStore from "@/store/modules/user";
+import { defineEmits } from "vue";
+const opent = ref(true);
+const props = defineProps({
+  openFile: {
+    type: Boolean,
+    default: false,
+  },
+  fileUserTreeData: {
+    type: Object,
+    default: () => {},
+  },
+  docId: {
+    type: Number,
+    default: 0,
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  copyRow: {
+    type: Object,
+    required: true,
+  },
+});
+const defaultProps = {
+  children: "",
+  label: "createTime",
+  value: "docId",
+};
+const isOpen = ref(props.openFile);
+watch(
+  () => props.openFile,
+  (newValue) => {
+    isOpen.value = newValue;
+  }
+);
+const treeData = reactive({ data: [] });
+watchEffect(() => {
+  treeData.data = props.fileUserTreeData;
+  toRaw(treeData.data);
+});
+
+//树
+const clickData = ref({});
+const handleNodeClick = (data) => {
+  clickData.value = data;
+};
+const clickIndex = ref("");
+const previewFileClick = (index) => {
+  clickIndex.value = index;
+};
+const clickList = (index) => {
+  clickIndex.value = index;
+};
+</script>
   <style lang="scss" scoped>
-  @import "@/assets/styles/tree-common.scss";
-  </style>
+@import "@/assets/styles/tree-common.scss";
+.main-conts {
+  height: 348px;
+  border: 1px solid #c1cce3;
+  display: flex;
+
+  .main-cont-left,
+  .main-cont-right {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+  .main-cont-right {
+    border-left: 1px solid #c1cce3;
+  }
+}
+.eyes {
+  width: 22px;
+  height: 22px;
+}
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 16px;
+  height: 46px;
+  background: #fff;
+}
+
+.list-item-dot {
+  position: relative;
+}
+.list-item-dot::before {
+  content: "";
+  background-image: url("@/assets/images/moren-circle.png");
+  background-size: 14px;
+  position: absolute;
+  top: 50%;
+  left: 33.5;
+  transform: translate(-50%, -50%);
+  width: 14px;
+  height: 14px;
+}
+
+.list-item-dot::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 32;
+  transform: translate(0, -50%);
+  width: 1px;
+  height: 100%;
+  background-color: #c1cce3; /* 连线的颜色 */
+}
+.active-list-item {
+  background: #f5f7f9;
+}
+</style>

src/views/myfile/MyFile.vue

@@ -423,10 +423,11 @@
     <!-- 历史版本 -->
     <historyList
     :openFile="openForwardFile"
-    :docId="clickRowId.toString()"
+    :docId="clickRowId"
+    :name="nameForm.name"
+    :copyRow="copyRow"
     @close="openForwardFile = false"
     :fileUserTreeData="fileUserTreeData.data"
-    @forwardChangeMsg="forwardChangeMsg"
   ></historyList>
   <!-- 历史版本 -->
 </template>
@@ -480,7 +481,7 @@ export default {
         let tagCollect = ref(false)//添加收藏标签时显示
         let selectedBox = ref(-1)
         let newName = ref('')
-        let clickRowId = ref("")
+        let clickRowId = ref(0)
         let trandata = ref()
         let folderId = ref('')
         let fileId = ref('')
@@ -1218,9 +1219,6 @@ export default {
         //历史版本
         // 点击转存
         const forwardTreeData = reactive({ data: {} });
-        function forwardChangeMsg(val){
-
-        }
         onMounted(() => {
             getAllTop()
             getAllUser()
@@ -1345,7 +1343,6 @@ export default {
             impSpaceId,
             openForwardFile,//历史版本
             forwardTreeData,
-            forwardChangeMsg,
             fileUserTreeData
         }