tableheader
This commit is contained in:
仲么了
@@ -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(() => {
|
||||
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,40 +146,43 @@ 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;
|
||||
}
|
||||
|
||||
.com-search-col-label {
|
||||
width: 33.33%;
|
||||
padding: 0 15px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.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-input {
|
||||
padding: 0 15px;
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.com-search-col-input-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
width: 66.66%;
|
||||
|
||||
.range-separator {
|
||||
padding: 0 5px;
|
||||
: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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user