feat: 高级搜索表单

This commit is contained in:
@user8949
2025-03-14 20:35:13 +08:00
parent c1a1b8d1f6
commit 31fbe58902
2 changed files with 99 additions and 50 deletions

View File

@@ -22,56 +22,7 @@
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
:offset="offset">
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
<div style="padding: 12PX;">
<span>高级筛选</span>
<d-form style="margin-top: 20px" layout="vertical">
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="name" label="license">
<d-input placeholder="请输入license"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="select" label="软件/组件名称">
<d-input placeholder="请输入软件/组件名称"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="multiSelect" label="license强弱" help-tips="license强弱说明">
<d-input />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="executionDay" label="软件版本">
<d-input />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="radio" label="依赖软件">
<d-input />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="switch" label="编程语言">
<d-input />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="date" label="版本发布日期">
<d-input />
</d-form-item>
</d-col>
</d-row>
<gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
<d-button variant="solid">搜索</d-button>
<d-button>取消</d-button>
</gc-form-operation>
</d-form>
</div>
<AdvanceSearch @submit="submit($event)" @cancel="isOpen = false"/>
</div>
</d-dropdown-menu>
<d-button color="primary" variant="solid" @click="search">搜索</d-button>
@@ -112,6 +63,7 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
const route = useRoute();
const router = useRouter();
@@ -154,6 +106,11 @@ const openAdvancedSearch = () => {
inputGlow.value = isOpen.value;
};
const submit = (formData) => {
isOpen.value = false;
router.push({ name: 'Search', query: { ...formData }});
};
const inputFocus = () => {
inputGlow.value = true;
};