附件 备注 变更记录 高度调整

src/components/Detail/src/Detail.vue

@@ -25,7 +25,7 @@
         />
       </ContentWrap>
 
-      <Tabs :tabsList="tabsList" :current="current" @change="change" />
+      <Tabs ref="tabRef" :tabsList="tabsList" :current="current" @change="change" />
       <div class="flex">
         <!-- 详情 -->
         <ContentWrap class="w-[100%]" v-show="tabsList[current].label!='附件'&&tabsList[current].label!='备注'&&tabsList[current].label!='变更记录'">          <!-- 列表头部 -->
@@ -97,22 +97,25 @@
           </DetailTable>
         </ContentWrap>
         <!-- 附件/备注/变更记录 -->
-        <ContentWrap class="w-[100%]" v-show="tabsList[current].label=='附件'||tabsList[current].label=='备注'||tabsList[current].label=='变更记录'">
+        <ContentWrap class="w-[100%]" v-show="tabsList[current].label=='附件'||tabsList[current].label=='备注'||tabsList[current].label=='变更记录'" :style="{height:remarkHeight+'px'}">
           <!-- 附件组件 -->
-          <Annex  v-show="tabsList[current].label=='附件'"
+          <ElScrollbar ref="scrollbar" :style="{height:(remarkHeight-40)+'px'}">
-            :annexData="annexData"
+            <Annex  v-show="tabsList[current].label=='附件'"
-            @handleAnnexSuccess="handleAnnexSuccess"
+              :annexData="annexData"
-            @deleteAnnexSuccess="deleteAnnexSuccess"
+              @handleAnnexSuccess="handleAnnexSuccess"
-            :upData="remarksData.data"
+              @deleteAnnexSuccess="deleteAnnexSuccess"
-          />
+              :upData="remarksData.data"
-          <!-- 备注组件 -->
+            />
-          <Remarks v-show="tabsList[current].label=='备注'"
+            <!-- 备注组件 -->
-            :remarksData="remarksData"
+            <Remarks v-show="tabsList[current].label=='备注'"
-            class="mt-20px"
+              :remarksData="remarksData"
-            @remarksSubmitScuess="remarksSubmitScuess"
+              class="mt-20px"
-          />
+              @remarksSubmitScuess="remarksSubmitScuess"
-          <!-- 变更记录组件 -->
+            />
-          <ChangeRecord v-show="tabsList[current].label=='变更记录'" :changeRecordData="changeRecordData" class="mt-20px" />        </ContentWrap>
+            <!-- 变更记录组件 -->
+            <ChangeRecord v-show="tabsList[current].label=='变更记录'" :changeRecordData="changeRecordData" class="mt-20px" />
+          </ElScrollbar> 
+        </ContentWrap>
       </div>
     </el-drawer>
     <!-- 表格弹窗 -->
@@ -142,6 +145,7 @@
 </template>
 
 <script lang="ts" setup>
+
 import Annex from '@/components/Annex/src/Annex.vue'
 import Remarks from '@/components/Remarks/src/Remarks.vue'
 import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
@@ -350,6 +354,21 @@ if (!tabsList.value || tabsList.value && tabsList.value.length == otherList.leng
   })
 }
 
+//  Tabs 
+const tabRef = ref()
+//滚动条
+const scrollbar = ref() 
+//附件 备注 变更记录 高度计算
+const remarkHeight = computed(() => { 
+  const tab = unref(tabRef)
+  const tabTop = tab?.$el.getBoundingClientRect().top
+  const tabHeight = tab?.$el.getBoundingClientRect().height
+  console.log('tabTop',tabTop)
+  const height = window.innerHeight - (tabTop) - (tabHeight) - 60
+  return height
+})
+
+
 // 附件默认数据
 const annexData = reactive({
   annexList: []
@@ -391,6 +410,11 @@ const current = ref(0)
 const change = (item, index) => {
   current.value = index
   emit('changeTabs', item)
+  if(otherList.find(other=>other.label==item.label)){
+    // 附件/备注/变更记录 -- 点击回到顶部
+    scrollbar.value.scrollTo({ top: 0});
+  }
+      
 }
 
 //主表所需的参数