admin-govern/src/components/table/header/index.vue

<template>
    <div ref="tableHeader" class="cn-table-header">
        <!-- 通用搜索 -->
        <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>
            </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">
                        <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>
            </template>
            <slot name="operation"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
import type TableStore from '@/utils/tableStore'
import DatePicker from '@/components/form/datePicker/index.vue'
import { mainHeight } from '@/utils/layout'

const tableStore = inject('tableStore') as TableStore
const tableHeader = ref()
const date = ref([
    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),
    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
])

interface Props {
    datePicker?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    datePicker: false
})
if (props.datePicker) {
    tableStore.table.params.searchBeginTime = date.value[0]
    tableStore.table.params.searchEndTime = date.value[1]
}
// 动态计算table高度
const resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
        handlerHeight()
    }
})
const showUnfoldButton = ref(false)
onMounted(() => {
    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()
})

const handlerHeight = () => {
    tableStore.table.height = mainHeight(
        tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
    ).height as string
}
const showSelect = ref(false)
const showSelectChange = () => {
    showSelect.value = !showSelect.value
    nextTick(() => {
        handlerHeight()
    })
}
const onComSearch = () => {
    tableStore.onTableAction('search', {})
}
const onResetForm = () => {
    tableStore.onTableAction('reset', {})
}
const dateChange = () => {
    tableStore.table.params.searchBeginTime = date.value[0]
    tableStore.table.params.searchEndTime = date.value[1]
}
</script>

<style scoped lang="scss">
.table-header {
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;

    .table-header-operate-text {
        margin-left: 6px;
    }
}

.table-com-search {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px 20px 15px;
    font-size: 14px;
}
.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%;
    }
    :deep(.el-form-item) {
        max-width: 600px;
        margin-right: 0;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 2600px) {
    .table-com-search-form {
        grid-template-columns: repeat(4, 1fr);
    }
}
@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;
}

.mlr-12 + .el-button {
    margin-left: 12px;
}

.table-search {
    display: flex;
    margin-left: auto;

    .quick-search {
        width: auto;
    }
}

.table-search-button-group {
    display: flex;
    margin-left: 12px;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
    overflow: hidden;

    button:focus,
    button:active {
        background-color: var(--ba-bg-color-overlay);
    }

    button:hover {
        background-color: var(--el-color-info-light-7);
    }

    .table-search-button-item {
        height: 30px;
        border: none;
        border-radius: 0;
    }

    .el-button + .el-button {
        margin: 0;
    }

    .right-border {
        border-right: 1px solid var(--el-border-color);
    }
}

html.dark {
    .table-search-button-group {
        button:focus,
        button:active {
            background-color: var(--el-color-info-dark-2);
        }

        button:hover {
            background-color: var(--el-color-info-light-7);
        }

        button {
            background-color: var(--ba-bg-color-overlay);

            el-icon {
                color: white !important;
            }
        }
    }
}
</style>