From 127fea77343d2b23411a899962a2b0df09170daf Mon Sep 17 00:00:00 2001
From: yufei0306 <13417315+yufei0306@user.noreply.gitee.com>
Date: Mon, 1 Apr 2024 15:05:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=84=E4=BB=B6=20=E5=A4=87=E6=B3=A8=20?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=E8=AE=B0=E5=BD=95=20=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Detail/src/Detail.vue | 56 ++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/components/Detail/src/Detail.vue b/src/components/Detail/src/Detail.vue
index 790198bfc..4b0b7512f 100644
--- a/src/components/Detail/src/Detail.vue
+++ b/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=='附件'"
-            :annexData="annexData"
-            @handleAnnexSuccess="handleAnnexSuccess"
-            @deleteAnnexSuccess="deleteAnnexSuccess"
-            :upData="remarksData.data"
-          />
-          <!-- 备注组件 -->
-          <Remarks v-show="tabsList[current].label=='备注'"
-            :remarksData="remarksData"
-            class="mt-20px"
-            @remarksSubmitScuess="remarksSubmitScuess"
-          />
-          <!-- 变更记录组件 -->
-          <ChangeRecord v-show="tabsList[current].label=='变更记录'" :changeRecordData="changeRecordData" class="mt-20px" />        </ContentWrap>
+          <ElScrollbar ref="scrollbar" :style="{height:(remarkHeight-40)+'px'}">
+            <Annex  v-show="tabsList[current].label=='附件'"
+              :annexData="annexData"
+              @handleAnnexSuccess="handleAnnexSuccess"
+              @deleteAnnexSuccess="deleteAnnexSuccess"
+              :upData="remarksData.data"
+            />
+            <!-- 备注组件 -->
+            <Remarks v-show="tabsList[current].label=='备注'"
+              :remarksData="remarksData"
+              class="mt-20px"
+              @remarksSubmitScuess="remarksSubmitScuess"
+            />
+            <!-- 变更记录组件 -->
+            <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});
+  }
+      
 }
 
 //主表所需的参数