1

src/utils/model/observerDom/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="width:100%;height:100%" ref="observerDom">
+    <div style="width:100%;height:100%" :ref="'observerDom'+key">
         <div v-if="show" v-html="html" v-bind="$attrs" v-on='$listeners' style="width:100%;height:100%"></div> 
         <div v-else style="width:100%;height:100%" v-loading="true"></div>
     </div>
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import commonJS from '@/utils/common.js'
 export default {
   components: {},
   props: {
@@ -27,12 +28,18 @@ export default {
     fun:{
         type:Function,
         default:null
+    },
+    keys:{
+        type:String,
+        default:''
     }
   },
   data() {
     return {
         show:true,
-        html:''
+        html:'',
+        observer:null,
+        key:this.keys || commonJS.uuid(24)
     };
   },
   watch: {
@@ -42,6 +49,12 @@ export default {
   mounted() {
     this.init()
   },
+  beforeDestroy() {
+    // 取消对元素的观察
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   methods: {
     init(){
         if(!this.url && !this.fun){
@@ -53,13 +66,14 @@ export default {
         }
         var that = this
         // 创建一个 Intersection Observer 实例
-        let observer = new IntersectionObserver((entries, observer) => {
+        this.observer = new IntersectionObserver((entries, observer) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     // 当元素进入视口时执行的逻辑
                     that.getHtml()
                     // 可以在这里执行懒加载、动画触发等操作
                     observer.unobserve(entry.target); // 如果只需要触发一次，可以取消观察
+                    that.observer.disconnect();
                 }
             });
         }, {
@@ -69,8 +83,8 @@ export default {
         });
 
         // 选择需要观察的元素
-        const elements = this.$refs.observerDom;
-        observer.observe(elements);
+        const elements = this.$refs['observerDom'+this.key];
+        this.observer.observe(elements);
     },
     async getHtml(){
         if(!this.url && !this.fun){

src/views/patentMining/components/fileMessage.vue

@@ -26,8 +26,8 @@
           </el-table-column>
 
 
-          <el-table-column v-for="item in columnList" :key="item.value" :prop="item.value"
-            :render-header="$commonJS.renderHeaderMethods" :label="item.name" sortable align="center">
+          <el-table-column v-for="item in columnList" :key="item.value" :prop="item.value" v-loading="loading"
+            :render-header="$commonJS.renderHeaderMethods" :label="item.name" :sortable="item.ifSort?'custom':false" align="center">
             <template slot-scope="scope">
               <div v-if="['name'].includes(item.value)">
                 <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
@@ -35,7 +35,7 @@
               <div v-else-if="['ifFinal'].includes(item.value)"
                 v-html="$commonJS.getColumnData(scope.row, item, null, { data: ifFinal })"></div>
               <div v-else-if="['statusOrResult'].includes(item.value)">
-                <observerDom url="getExamineHistory" :params="{fileGuid:scope.row.fileGuid,ifGetLast:true}" :fun="getData"></observerDom>
+                <observerDom v-if="!loading" url="getExamineHistory" :params="{fileGuid:scope.row.fileGuid,ifGetLast:true}" :fun="getData"></observerDom>
               </div>
               <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
             </template>
@@ -91,6 +91,7 @@ export default {
         false: '否',
         true: '是',
       },
+      loading:false,
       // 数据源
       tableData: [],
       // table栏位信息
@@ -267,15 +268,17 @@ export default {
         searchQuery: this.$commonJS.objectToString(searchOption || {}),//检索条件
         orderDTOList: this.sort,//排序信息
       }
-
+      this.loading = true
       this.$api.queryPatentDigProjectFiles(searchOption2).then(res => {
         if (res.code == 200) {
           this.tableData = res.data.data
           this.queryParams.total = this.tableData.length
+          this.loading = false
         }
       }).catch(error => {
         this.tableData = []
         this.queryParams.total = 0
+        this.loading = false
       })
     },
     // 搜索

src/views/report/components/reportFile/reportFileTable.vue

@@ -37,7 +37,7 @@
                 </el-tooltip>
               </div>
               <div v-else-if="['statusOrResult'].includes(item.value)">
-                <observerDom url="getExamineHistory" :params="{fileGuid:scope.row.fileGuid,ifGetLast:true}" :fun="getData"></observerDom>
+                <observerDom v-if="!loading" url="getExamineHistory" :params="{fileGuid:scope.row.fileGuid,ifGetLast:true}" :fun="getData"></observerDom>
               </div>
               <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
             </template>