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

merge junjie_dev into master

Browse Source 
feat: 高级搜索表单

Created-by: user8949
Commit-by: @user8949
Merged-by: user8949
Description: update: 修复头部底色切换
feat: 高级搜索表单

See merge request: hk_openRepo/OpenRepo_Portal!5
This commit is contained in:
user8949
2025-03-14 20:36:48 +08:00
parent e94e233937 31fbe58902
commit 2974d35726
3 changed files with 105 additions and 57 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>

13
src/components/Header/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="full-w" :style="{ height: `${height}px` }">
<div class="g-header fixed z-20" ref="headerRef" :class="{'home-background': isHome, 'normal-background': !isHome}">
<div class="g-header fixed z-20" ref="headerRef" :class="{'home-background': isHome}">
<div class="g-toolbar w-full overflow-hidden" :class="[searchClass, route?.meta?.headerClassName]">
<div class="g-toolbar-left flex-shrink items-center">
<div class="flex-center gap-[16px]" v-if="!isHome">
@@ -133,6 +133,10 @@ $radius: 4px;
$add-radius: 48px;
$header-bg: #fff;
.home-background {
background-color: #fff0 !important;
}
.g-header {
// overflow: hidden;
width: 100%;
@@ -140,12 +144,7 @@ $header-bg: #fff;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
.home-background {
background-color: #fff0;
}
.normal-background {
background-color: $header-bg;
}
background-color: $header-bg;
:deep(.g-link) {
color: $devui-text-weak;
}

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'"
: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;
};