a
This commit is contained in:
guochunsi
@@ -1,48 +1,47 @@
|
||||
<template>
|
||||
<div class="search-form-container">
|
||||
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
|
||||
<!-- 直接展示的表单项 -->
|
||||
<slot :visible="true" :expanded="isExpanded"></slot>
|
||||
|
||||
<!-- 可折叠的表单项区域 - 使用 display: contents 确保不影响布局 -->
|
||||
<div v-show="isExpanded" class="collapsible-content">
|
||||
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
|
||||
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
|
||||
<div class="search-form__bar" :class="{ 'search-form__bar--no-title': !filterTitle }">
|
||||
<span v-if="filterTitle" class="search-form__title">
|
||||
<el-icon class="search-form__title-icon"><Search /></el-icon>
|
||||
{{ filterTitle }}
|
||||
</span>
|
||||
<div class="search-form-container">
|
||||
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
|
||||
<slot :visible="true" :expanded="isExpanded"></slot>
|
||||
<div v-show="isExpanded" class="collapsible-content">
|
||||
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
|
||||
</div>
|
||||
<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
|
||||
<slot :visible="false" :expanded="true"></slot>
|
||||
</div>
|
||||
<slot name="actions"></slot>
|
||||
<el-form-item v-if="hasCollapsibleItems" class="collapse-trigger-item">
|
||||
<el-button link type="primary" @click="toggleExpand" class="toggle-btn">
|
||||
<el-icon style="margin-right: 4px">
|
||||
<ArrowUp v-if="isExpanded" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
{{ isExpanded ? '收起' : '展开更多' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的检测元素，用于检测是否有可折叠内容 -->
|
||||
<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
|
||||
<slot :visible="false" :expanded="true">
|
||||
<!-- 如果插槽有内容，这里会被渲染，我们可以通过检查这个元素来判断 -->
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮插槽（查询、重置等） -->
|
||||
<slot name="actions"></slot>
|
||||
|
||||
<!-- 展开/收起按钮（在操作按钮之后） -->
|
||||
<el-form-item v-if="hasCollapsibleItems" class="collapse-trigger-item">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="toggleExpand"
|
||||
class="toggle-btn"
|
||||
>
|
||||
<el-icon style="margin-right: 4px">
|
||||
<ArrowUp v-if="isExpanded" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
{{ isExpanded ? '收起' : '展开更多' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="search-form">
|
||||
import { ref, watch, computed, onMounted, nextTick } from 'vue';
|
||||
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 筛选标题（如「筛选」），传入时在表单左侧显示标题+竖线，与表单项同一行
|
||||
*/
|
||||
filterTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* 表单数据模型
|
||||
*/
|
||||
@@ -77,6 +76,7 @@ const props = defineProps({
|
||||
const emit = defineEmits(['expand-change', 'keyup-enter']);
|
||||
|
||||
const formModel = props.model;
|
||||
const { filterTitle } = props;
|
||||
const formRef = ref();
|
||||
const isExpanded = ref(props.defaultExpanded);
|
||||
const hasCollapsibleContent = ref(false);
|
||||
@@ -183,9 +183,58 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form__bar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 0;
|
||||
min-height: 32px;
|
||||
|
||||
&--no-title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form__title {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
padding-right: 14px;
|
||||
margin-right: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: var(--el-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.search-form__title-icon {
|
||||
font-size: 15px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.search-form-container {
|
||||
// 直接使用全局样式 el-form--inline，只需要覆盖特殊样式
|
||||
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
:deep(.el-form-item:not(:has(.el-button))) {
|
||||
margin-bottom: 14px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-form--inline) {
|
||||
.collapse-trigger-item {
|
||||
margin-left: 0;
|
||||
@@ -196,21 +245,8 @@ defineExpose({
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// 如果需要自定义宽度，可以覆盖全局样式（默认使用全局的 240px）
|
||||
// 如果需要改为 200px，取消下面的注释
|
||||
// .el-form-item {
|
||||
// & > .el-input,
|
||||
// .el-cascader,
|
||||
// .el-select,
|
||||
// .el-date-editor,
|
||||
// .el-autocomplete {
|
||||
// width: 200px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// 可折叠内容区域 - 使用 contents 让包装器不影响布局
|
||||
.collapsible-content {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user