VberAdminPlusV3/UI/VAP_V3.VUE/src/components/table/partials/toolbar/TableSearchFrom.vue

<script setup lang="ts">
import { VbUtil } from "@@/vb-dom"
import { symbolKeys } from "./../../models"

// 从统一上下文获取数据
const context = inject(symbolKeys.tableContext)!

// 解构配置和状态
const {
	showSearchBtn,
	showSearchBtnText,
	searchLabelWidth,
	closeAdvancedSearchAfterQuery,
	advancedSearchWidth
} = context.config

// 从 context 获取高级搜索面板显示状态
const advancedSearchVisible = context.state.advancedSearchVisible

// 处理宽度值，如果是数字则添加 px 单位
const panelWidth = computed(() => {
	if (typeof advancedSearchWidth === "number") {
		return `${advancedSearchWidth}px`
	}
	return advancedSearchWidth
})

// searchFormRowItems 和 searchFormItems 现在是响应式计算属性
const searchFormRowItems = context.config.searchFormRowItems
const searchFormItems = context.config.searchFormItems

const queryParams = context.state.innerQueryParams
const tableBox = context.refs.tableBox
const formSlotSuffix = context.constants.formSlotSuffix

const searchFormRef = ref<any>()

// 关闭面板
function closePanel() {
	advancedSearchVisible.value = false
}

const _searchFormItems = computed(() => {
	if (searchFormItems.value || searchFormRowItems.value) {
		const items = searchFormItems.value || []
		items.forEach((v) => {
			// 纵向布局：每个字段独占一行
			v.span = 24
		})
		return items as any
	}
	return searchFormItems.value as any
})

// form表单的插槽 需要tool-form_开头,并去除tool-form_传递给VbForm组件
function formatterFormSlot(v: string | number): string | undefined {
	v = v as string
	if (v.search(formSlotSuffix) == 0) {
		return v.substring(formSlotSuffix.length)
	}
	return undefined
}

function query() {
	VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.query")
	if (closeAdvancedSearchAfterQuery) {
		setTimeout(() => closePanel(), 300) // 延迟关闭，让用户看到反馈
	}
}
function resetForm() {
	searchFormRef.value.clearValidate()
	searchFormRef.value.resetFields()
	VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.reset")
}
</script>

<template>
	<div
		v-if="showSearchBtn"
		ref="panelRef"
		class="advanced-search-panel"
		:class="{ 'panel-hidden': !advancedSearchVisible }"
		:style="{ width: panelWidth }">
		<div class="panel-header">
			<span class="panel-title">高级搜索</span>
			<vb-tooltip class="item" content="关闭" placement="top" :delay="1000">
				<div
					class="btn btn-sm btn-light-primary w-25px h-25px p-0 d-flex align-items-center justify-content-center"
					@click="closePanel">
					<span class="bi bi-x-circle fs-5"></span>
				</div>
			</vb-tooltip>
		</div>

		<div class="panel-content">
			<div class="w-100">
				<VbForm
					v-if="searchFormRowItems || searchFormItems"
					ref="searchFormRef"
					v-model:data="queryParams"
					:row-items="searchFormRowItems"
					:items="_searchFormItems"
					:label-width="searchLabelWidth">
					<template v-for="(_, name) in $slots" #[`${formatterFormSlot(name)}`]>
						<slot v-if="name.toString().search(formSlotSuffix) == 0" :name="name" />
					</template>
				</VbForm>
				<el-form
					v-else-if="$slots['table-search-form']"
					ref="searchFormRef"
					:inline="false"
					:model="queryParams"
					:label-width="searchLabelWidth"
					class="el-form-vertical">
					<slot name="table-search-form" />
				</el-form>
			</div>
			<div class="search-buttons d-flex mt-3">
				<slot v-if="$slots.searchbtn" name="searchbtn"></slot>
				<template v-else>
					<el-button class="btn btn-primary" @click="query">
						<VbIcon icon-name="magnifier" icon-type="solid"></VbIcon>
						<span class="ms-2" v-if="showSearchBtnText">搜索</span>
					</el-button>
					<el-button class="btn btn-light-primary" @click="resetForm">
						<VbIcon icon-name="arrows-loop" icon-type="solid"></VbIcon>
						<span class="ms-2" v-if="showSearchBtnText">重置</span>
					</el-button>
				</template>
			</div>
		</div>
	</div>
</template>