cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 高级搜索表单

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/AdvanceSearch/index.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div style="padding: 12PX;">
<span class="title">高级筛选</span>
<d-form style="margin-top: 20px" layout="vertical">
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="license" label="license">
<d-input placeholder="请输入license" v-model="formData.license"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="name" label="软件/组件名称">
<d-input placeholder="请输入软件/组件名称" v-model="formData.name"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="licenseStrength" label="license强弱" help-tips="license强弱说明">
<d-input v-model="formData.licenseStrength"/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="version" label="软件版本">
<d-input v-model="formData.version"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="dependency" label="依赖软件">
<d-input v-model="formData.dependency"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="language" label="编程语言">
<d-input v-model="formData.language"/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="date" label="版本发布日期">
<d-input v-model="formData.date"/>
</d-form-item>
</d-col>
</d-row>
<gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
<d-button variant="solid" @click="submitForm">搜索</d-button>
<d-button @click="cancel">取消</d-button>
</gc-form-operation>
</d-form>
</div>
</template>
<script setup lang="ts">
import { ref, defineEmits } from 'vue';
const emit = defineEmits(['submit', 'cancel']);
const formData = ref({
license: '',
name: '',
licenseStrength: '',
version: '',
dependency: '',
language: '',
date: ''
});
const submitForm = () => {
emit('submit', formData.value);
}
const cancel = () => {
formData.value = {
license: '',
name: '',
licenseStrength: '',
version: '',
dependency: '',
language: '',
date: ''
}
emit('cancel');
}
</script>
<style scoped lang="scss">
.title {
font-size: 16px;
font-weight: bold;
}
</style>

57
src/views/Jyh/Home/index.vue
View File

@@ -22,56 +22,7 @@
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'" <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
:offset="offset"> :offset="offset">
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}"> <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
<div style="padding: 12PX;"> <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false"/>
<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>
</div> </div>
</d-dropdown-menu> </d-dropdown-menu>
<d-button color="primary" variant="solid" @click="search">搜索</d-button> <d-button color="primary" variant="solid" @click="search">搜索</d-button>
@@ -112,6 +63,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@@ -154,6 +106,11 @@ const openAdvancedSearch = () => {
inputGlow.value = isOpen.value; inputGlow.value = isOpen.value;
}; };
const submit = (formData) => {
isOpen.value = false;
router.push({ name: 'Search', query: { ...formData }});
};
const inputFocus = () => { const inputFocus = () => {
inputGlow.value = true; inputGlow.value = true;
}; };