From ac214a8b5243596cdc8a297aa4b65860ae4a616c Mon Sep 17 00:00:00 2001
From: wangyufei <2267742828@qq.com>
Date: Mon, 5 Aug 2024 10:52:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=B1=E6=99=A8=EF=BC=9A=E5=9C=A8=E9=87=87?=
 =?UTF-8?q?=E8=B4=AD=E6=94=B6=E8=B4=A7=E7=94=B3=E8=AF=B7=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=EF=BC=8C=E8=BF=9B=E8=A1=8C=E6=96=B0=E5=A2=9E=E5=8D=95=E6=8D=AE?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=A6=82=E5=AD=98=E5=9C=A8=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E6=98=8E=E7=BB=86=E6=97=B6=EF=BC=8C=E4=B8=8B=E6=96=B9=E2=80=9C?=
 =?UTF-8?q?=E6=BB=91=E6=9D=86=E2=80=9D=E4=B8=8D=E6=98=BE=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E5=8F=8D=E5=A4=8D=E6=BB=91=E5=8A=A8=E6=BB=9A?=
 =?UTF-8?q?=E8=BD=AE=E8=BF=9B=E8=A1=8C=E6=9F=A5=E7=9C=8B=E8=A1=A8=E5=A4=B4?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BasicForm/src/BasicForm.vue | 12 ++++++---
 src/components/TableForm/src/TableForm.vue | 15 ++++++++---
 src/directives/permission/clientTable.ts   | 31 ++++++++++++++++++++++
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/components/BasicForm/src/BasicForm.vue b/src/components/BasicForm/src/BasicForm.vue
index 943891d72..57b8ee523 100644
--- a/src/components/BasicForm/src/BasicForm.vue
+++ b/src/components/BasicForm/src/BasicForm.vue
@@ -7,7 +7,7 @@
     :vLoading="formLoading"
     @updateFullscreen="updateFullscreen"
   >
-    <div style="overflow-y: auto" :style="{ 'max-height': formHeight }">
+    <div style="overflow-y: auto" :style="formHeight">
       <Form
         ref="formRef"
         :rules="rules"
@@ -79,7 +79,6 @@
         <TableForm
           ref="tableFormRef"
           class="w-[100%]"
-          :maxHeight="490"
           :tableFields="tableAllSchemas.tableFormColumns"
           :tableData="tableData"
           :tableFormRules="tableFormRules"
@@ -351,9 +350,14 @@ if (props.basicFormWidth) {
 } else {
   dialogWidth.value = props.isBusiness ? '60%' : '40%'
 }
-const formHeight = ref('60vh')
+const formHeight = ref({
+  height:'60vh'
+})
 const updateFullscreen = (isFullscreen) => {
-  formHeight.value = isFullscreen ? 'auto' : '60vh'
+  formHeight.value.height = isFullscreen ? 'auto' : '60vh'
+  nextTick(()=>{
+    tableFormRef.value.reloadFullscreen(isFullscreen)
+  })
 }
 
 const dialogVisible = ref(false) // 弹窗的是否展示
diff --git a/src/components/TableForm/src/TableForm.vue b/src/components/TableForm/src/TableForm.vue
index c839d2937..57cabc4f5 100644
--- a/src/components/TableForm/src/TableForm.vue
+++ b/src/components/TableForm/src/TableForm.vue
@@ -1,12 +1,15 @@
 <!-- 附件组件 -->
 <template>
   <div class="table-form">
-    <el-table
+    <el-table v-clientTableForm="{
+      isShowPagination:tableData.length > 10,
+      isShowButton: isShowButton || isShowReduceButtonSelection,
+      isFullscreen:isFullscreen
+    }"
       class="multipleTableComponents"
       ref="TableBaseComponents_Ref"
       v-loading="tableLoading"
       :data="showTableData()"
-      :max-height="maxHeight"
       row-key="id"
       :border="border"
       @selection-change="tableSelectionChange"
@@ -725,11 +728,17 @@ if(headerItem?.tableForm?.valueField){
   return op.value
 }
 }
+
+const isFullscreen = ref(false)
+const reloadFullscreen = (fullscreen)=>{
+  isFullscreen.value = fullscreen
+}
 // setup 语法糖 抛出方法
 defineExpose({
   TableBaseComponents_Ref,
   validateForm,
-  keyWord
+  keyWord,
+  reloadFullscreen
 })
 </script>
 
diff --git a/src/directives/permission/clientTable.ts b/src/directives/permission/clientTable.ts
index 9c12028ce..bf41a8f2c 100644
--- a/src/directives/permission/clientTable.ts
+++ b/src/directives/permission/clientTable.ts
@@ -41,4 +41,35 @@ export function clientTable(app: App<Element>) {
       }
     })
   })
+  app.directive('clientTableForm', (el, binding) => {
+    nextTick(() => {
+      let {isShowPagination,isShowButton,isFullscreen} = binding.value
+      console.log('clientTableForm')
+      let footerHeight = 0
+      let headerHeight = 0
+      el.offsetParent.children.forEach(element => {
+        if(element.className=='el-dialog__footer'){
+          footerHeight = element.clientHeight
+        }
+        if(element.className=='el-dialog__header'){
+          headerHeight = element.clientHeight
+        }
+      });
+      console.dir(el)
+      let top = el.getBoundingClientRect().top
+      let tableFormTop = top - el.offsetParent.offsetTop
+      console.log(top)
+      console.log(el.offsetParent.offsetTop)
+      console.log(el.offsetParent.clientHeight)
+      let height = el.offsetParent.clientHeight - tableFormTop - footerHeight - 30
+      if(isShowPagination){
+        height = height- 34
+      }
+      if(isShowButton){
+        height = height- 50
+      }
+      console.log(height)
+      el.style.height = height + 'px'
+    })
+  })
 }