From 3fea14129e4ffc0e4e68e9f6f6ac1d282525d5b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Fri, 5 Jan 2024 10:02:18 +0800
Subject: [PATCH] =?UTF-8?q?headerdom=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/header/index.vue | 49 +++++++++++----------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue
index f5113bb..acf5b8a 100644
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -2,8 +2,13 @@
     <div ref="tableHeader" class="cn-table-header">
         <!-- 通用搜索 -->
         <transition name="el-zoom-in-bottom" mode="out-in">
-            <div class="table-com-search" v-show="showSelect">
+            <div id="table-com-search1" class="table-com-search" v-show="showSelect">
+            </div>
+        </transition>
+        <div class="table-header ba-scroll-style">
+            <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
                 <el-form
+                    id="header-form"
                     @submit.prevent=""
                     @keyup.enter="onComSearch"
                     label-position="left"
@@ -11,31 +16,10 @@
                     class="table-com-search-form"
                     :label-width="90"
                 >
-                    <el-form-item label="日期" v-if="datePicker">
-                        <DatePicker fef="Picker"></DatePicker>
-                    </el-form-item>
-                    <slot name="select"></slot>
-                </el-form>
-            </div>
-        </transition>
-        <div class="table-header ba-scroll-style">
-            <div style="flex: 1; height: 32px; overflow: hidden">
-                <el-form
-                    v-show="!showSelect"
-                    id="header-form"
-                    @submit.prevent=""
-                    @keyup.enter="onComSearch"
-                    label-position="left"
-                    :inline="true"
-                    class="table-com-search-form2"
-                    :label-width="100"
-                >
-                   
-                    <slot name="select"></slot>
-                    
-                    <el-form-item label="日期" v-if="datePicker">
+                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
                         <DatePicker ref="Picker"></DatePicker>
                     </el-form-item>
+                    <slot name="select"></slot>
                 </el-form>
             </div>
             <template v-if="$slots.select">
@@ -89,8 +73,7 @@ onMounted(() => {
     tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
     nextTick(() => {
         resizeObserver.observe(tableHeader.value)
-        const dom = document.getElementById('header-form')
-        console.log(dom.offsetHeight, '123123')
+        const dom = document.getElementById('header-form') as HTMLElement
         if (dom.offsetHeight > 50) {
             showUnfoldButton.value = true
         }
@@ -108,9 +91,15 @@ const handlerHeight = () => {
 const showSelect = ref(false)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
-    nextTick(() => {
-        handlerHeight()
-    })
+    // 把dom(id=header-form)插入到table-com-search1或者table-com-search2
+    const dom = document.getElementById('header-form') as HTMLElement
+    if (showSelect.value) {
+        const dom1 = document.getElementById('table-com-search1') as HTMLElement
+        dom1.appendChild(dom)
+    }else{
+        const dom2 = document.getElementById('table-com-search2') as HTMLElement
+        dom2.appendChild(dom)
+    }
 }
 const onComSearch = async () => {
     console.log('时间1233123')
@@ -190,7 +179,7 @@ const dateChange = () => {
         grid-template-columns: repeat(2, 1fr);
     }
 }
-.table-com-search-form2 {
+.table-header .table-com-search-form2 {
     grid-template-columns: repeat(auto-fit, 400px);
 }