修改历史版本

src/components/historyList/index.vue

@@ -9,28 +9,36 @@
       <div class="main-conts">
         <div
           class="main-cont-left"
-          style="display: flex; flex-direction: column; margin-top: 16px"
+          style="display: flex; flex-direction: column"
         >
-            <div
-              v-for="(item, index) in treeData.data"
-              :key="index"
-              class="list-item list-item-dot"
-              :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(item)" class="eyes"/>
+          <div
+            v-for="(item, index) in treeData"
+            :key="index"
+            class="list-item list-item-dot"
+            :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(item)" class="eyes" />
+          </div>
         </div>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="pageNum"
+          v-model:limit="pageSize"
+          @pagination="getList"
+          style="width: 70%;height: 62px;"
+        />
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="closeOpen" class="cancel-button"
-            >关闭</el-button
-          >
+          <el-button @click="closeOpen" class="cancel-button">关闭</el-button>
         </span>
       </template>
     </el-dialog>
@@ -38,17 +46,16 @@
   </div>
 </template>
     <script setup>
-import { reactive, ref, toRaw, toRefs, watch } from "vue";
+import { nextTick, 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 { listVersion } from "@/api/biz/version";
 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,
@@ -62,6 +69,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  historyTotal: {
+    type: Number,
+    default: 0,
+  },
   name: {
     type: String,
     default: "",
@@ -71,6 +82,14 @@ const props = defineProps({
     required: true,
   },
 });
+const opent = ref(true);
+const total = ref(0);
+watchEffect(() => {
+  total.value=props.historyTotal
+});
+
+const pageNum=ref(1)
+const pageSize=ref(10)
 const defaultProps = {
   children: "",
   label: "createTime",
@@ -83,12 +102,22 @@ watch(
     isOpen.value = newValue;
   }
 );
-const treeData = reactive({ data: [] });
-watchEffect(() => {
-  treeData.data = props.fileUserTreeData;
-  toRaw(treeData.data);
-});
+const treeData =ref([])
+// watchEffect(() => {
+//   treeData.value = props.fileUserTreeData;
+//   toRaw(treeData.value);
+// });
+const getList=async()=>{
+  console.log('page', pageNum.value)
+  nextTick(async ()=>{
+    const resHistory = await listVersion({pageNum:pageNum.value,pageSize:pageSize.value,docId: props.docId })
+  treeData.value =resHistory.rows
+  console.log('toRaw(treeData.value)', toRaw(treeData.value))
+  total.value=resHistory.total
 
+  })
+}
+getList()
 //树
 const clickData = ref({});
 const handleNodeClick = (data) => {
@@ -98,24 +127,28 @@ const clickIndex = ref("");
 const emit = defineEmits(["changeMsgClose"]);
 //点击预览
 const previewFileClick = (item) => {
-  emit("changeMsgClose", true,item);
-  isOpen.value= false
+  emit("changeMsgClose", true, item);
+  isOpen.value = false;
 };
 const clickList = (index) => {
   clickIndex.value = index;
 };
 
-const closeOpen=()=>{
-  isOpen.value= false
-  emit("changeMsgClose", false,'');
-}
+const closeOpen = () => {
+  isOpen.value = false;
+  emit("changeMsgClose", false, "");
+};
 </script>
   <style lang="scss" scoped>
 @import "@/assets/styles/tree-common.scss";
+// .footer-main{
+//   display: flex;
+//   align-items: center;
+// }
 .main-conts {
   height: 348px;
   border: 1px solid #c1cce3;
-  display: flex;
+  // display: flex;
 
   .main-cont-left,
   .main-cont-right {
@@ -136,7 +169,7 @@ const closeOpen=()=>{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0px 16px;
+  padding: 12px 16px;
   height: 46px;
   background: #fff;
 }
@@ -156,7 +189,7 @@ const closeOpen=()=>{
   height: 14px;
 }
 
-.list-item:not(:first-child)::after  {
+.list-item:not(:first-child)::after {
   content: "";
   position: absolute;
   top: 1%;
@@ -166,21 +199,26 @@ const closeOpen=()=>{
   height: 60%;
   background-color: #c1cce3; /* 连线的颜色 */
 }
-.list-item-dot-active::before{
+.list-item-dot-active::before {
   background-image: url("@/assets/images/active-circle.png");
 }
 
 .active-list-item {
   background: #f5f7f9;
 }
-.cancel-button{
-  background: #2E6BC8;
+.cancel-button {
+  background: #2e6bc8;
   color: #fff;
   border: none;
   width: 120px;
   height: 32px;
 }
-.main-conts{
+.main-conts {
   border: none;
+  // overflow: auto;
+}
+:deep(.pagination-container .el-pagination){
+left:25px;
+bottom: 22px;
 }
 </style>

src/views/myfile/MyFile.vue

@@ -332,7 +332,7 @@
     <!-- 图片预览 -->
     <!-- 历史版本 -->
     <historyList :openFile="openForwardFile" :docId="clickRowId" :name="nameForm.name" :copyRow="copyRow"
-        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose">
+        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose" :historyTotal="historyTotal">
     </historyList>
     <!-- 历史版本 -->
 </template>
@@ -412,6 +412,7 @@ export default {
         let folderTotal = ref(0)//文件夹total
         let fileTotal = ref(0)//文件total
         const openForwardFile = ref(false)   //历史版本展示
+        const historyTotal=ref(0)
         const historyPrew = ref(false)
         const fileUserTreeData = reactive({ data: {} });
         let fileList = ref([
@@ -730,7 +731,8 @@ export default {
                 const res = await preview(copyFileId.value)
                 previewData.value = URL.createObjectURL(res)
             } else if (row.name === "历史版本") {
-                const resHistory = await listVersion({ docId: clickRowId.value })
+                const resHistory = await listVersion({docId: clickRowId.value })
+                historyTotal.value= resHistory.total
                 fileUserTreeData.data = resHistory.rows;
                 openForwardFile.value = true
             }
@@ -1161,6 +1163,7 @@ export default {
             folderRClick,
             closeRMenu,
             cancleHistoryPrew,
+            historyTotal,
             //历史版本=========
             fileUserTreeData,
             thanks,

src/views/myfile/components/FileEdit.vue

@@ -87,7 +87,6 @@ export default {
                     id: useUserStore().uid, //用户ID
                     name: useUserStore().uname //用户姓名
                 };
-                console.log('333333')
                 // const emit = defineEmits(["cancleHistoryPrew"]);
                 // emit("cancleHistoryPrew",false);
                 // console.log(option.value,'option3===');