tableheader

src/components/table/header/index.vue

@@ -1,32 +1,51 @@
 <template>
-    <div ref="tableHeader">
+    <div ref="tableHeader" class="cn-table-header">
         <!-- 通用搜索 -->
-        <transition name="el-zoom-in-bottom" mode="out-in" v-if="$slots.select">
-            <div class="table-com-search" v-if="showSelect">
-                <el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
+        <transition name="el-zoom-in-bottom" mode="out-in">
+            <div class="table-com-search" v-show="showSelect">
+                <el-form
+                    @submit.prevent=""
+                    @keyup.enter="onComSearch"
+                    label-position="left"
+                    :inline="true"
+                    class="table-com-search-form"
+                    :label-width="90"
+                >
                     <slot name="select"></slot>
                     <el-form-item label="日期" v-if="datePicker">
                         <DatePicker v-model="date" @change="dateChange"></DatePicker>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button @click="onComSearch" type="primary">查询</el-button>
-                        <el-button @click="onResetForm">重置</el-button>
-                    </el-form-item>
                 </el-form>
             </div>
         </transition>
-
-        <div class="table-header ba-scroll-style" v-if="showOperation">
-            <slot name="operation"></slot>
-            <!-- 右侧搜索框和工具按钮 -->
-            <div class="table-search">
-                <slot name="right"></slot>
-                <div class="table-search-button-group" v-if="$slots.select">
+        <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">
+                        <DatePicker v-model="date" @change="dateChange"></DatePicker>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <template v-if="$slots.select">
+                <el-button @click="onComSearch" type="primary">查询</el-button>
+                <el-button @click="onResetForm">重置</el-button>
+                <div class="table-search-button-group" v-if="showUnfoldButton">
                     <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
                         <Icon size="14" name="el-icon-Search" />
                     </el-button>
                 </div>
-            </div>
+            </template>
+            <slot name="operation"></slot>
         </div>
     </div>
 </template>
@@ -45,15 +64,10 @@ const date = ref([
 ])
 
 interface Props {
-    // 默认展开
-    showSelect?: boolean
-    showOperation?: boolean // 是否显示operation
     datePicker?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    showSelect: true,
-    showOperation: true,
     datePicker: false
 })
 if (props.datePicker) {
@@ -66,8 +80,16 @@ const resizeObserver = new ResizeObserver(entries => {
         handlerHeight()
     }
 })
+const showUnfoldButton = ref(false)
 onMounted(() => {
-    resizeObserver.observe(tableHeader.value)
+    nextTick(() => {
+        resizeObserver.observe(tableHeader.value)
+        const dom = document.getElementById('header-form')
+        console.log(dom.offsetHeight,'123123')
+        if (dom.offsetHeight > 50) {
+            showUnfoldButton.value = true
+        }
+    })
 })
 onUnmounted(() => {
     resizeObserver.disconnect()
@@ -78,7 +100,7 @@ const handlerHeight = () => {
         tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
     ).height as string
 }
-const showSelect = ref(props.showSelect)
+const showSelect = ref(false)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
     nextTick(() => {
@@ -124,41 +146,44 @@ const dateChange = () => {
     background-color: var(--ba-bg-color-overlay);
     border: 1px solid var(--ba-border-color);
     border-bottom: none;
-    padding: 13px 15px 0 15px;
+    padding: 13px 15px 20px 15px;
     font-size: 14px;
-
-    .com-search-col {
-        display: flex;
-        align-items: center;
-        padding-top: 8px;
-        color: var(--el-text-color-regular);
-        font-size: 13px;
+}
+.table-com-search-form,
+.table-com-search-form2 {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(5, 1fr);
+    :deep(.el-select),
+    :deep(.el-cascader),
+    :deep(.el-input) {
+        width: 100%;
     }
-
-    .com-search-col-label {
-        width: 33.33%;
-        padding: 0 15px;
-        text-align: right;
-        overflow: hidden;
-        white-space: nowrap;
+    :deep(.el-form-item) {
+        max-width: 600px;
+        margin-right: 0;
+        margin-bottom: 0;
     }
+}
 
-    .com-search-col-input {
-        padding: 0 15px;
-        width: 66.66%;
+@media screen and (max-width: 2600px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(4, 1fr);
     }
-
-    .com-search-col-input-range {
-        display: flex;
-        align-items: center;
-        padding: 0 15px;
-        width: 66.66%;
-
-        .range-separator {
-            padding: 0 5px;
-        }
+}
+@media screen and (max-width: 2000px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(3, 1fr);
     }
 }
+@media screen and (max-width: 1400px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+.table-com-search-form2 {
+    grid-template-columns: repeat(auto-fit, 400px);
+}
 
 .mlr-12 {
     margin-left: 12px;

src/views/voltage/sags/operationsManagement/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main">
-        <TableHeader date-picker :showOperation="false">
+        <TableHeader date-picker>
             <template v-slot:select>
                 <el-form-item label="区域">
                     <Area v-model="tableStore.table.params.deptIndex" />
@@ -46,7 +46,6 @@
                     <el-input
                         v-model="tableStore.table.params.searchValue"
                         placeholder="根据变电站,终端编号,型号或网络参数查询"
-                        style="width: 300px"
                     />
                 </el-form-item>
             </template>

src/views/voltage/sags/operationsManagement/point.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main">
-        <TableHeader date-picker :showOperation="false">
+        <TableHeader date-picker>
             <template v-slot:select>
                 <el-form-item label="区域"><Area v-model="tableStore.table.params.deptIndex" /></el-form-item>
                 <el-form-item label="干扰源类型">
@@ -48,7 +48,6 @@
                     <el-input
                         v-model="tableStore.table.params.searchValue"
                         placeholder="根据变电站,终端编号,型号或网络参数查询"
-                        style="width: 300px"
                     />
                 </el-form-item>
             </template>

src/views/voltage/sags/operationsManagement/statistics.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main">
-        <TableHeader date-picker :showOperation="false" showSelect>
+        <TableHeader date-picker  >
             <template v-slot:select>
                 <el-form-item label="区域">
                     <Area v-model="tableStore.table.params.deptIndex" />