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

fix: 首页高级搜索操作优化

Browse Source
This commit is contained in:
汪少伟
2025-03-20 13:41:02 +08:00
parent 08b7dfc450
commit 9a6f40b793
2 changed files with 80 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/AdvanceSearch/index.vue
View File

@@ -5,24 +5,24 @@
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="name" label="软件名称">
<d-input placeholder="请输入软件名称" v-model="formData.softwareName"/>
<d-input placeholder="请输入软件名称" v-model="formData.softwareName" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="version" label="软件版本">
<d-input v-model="formData.softwareVersion"/>
<d-input v-model="formData.softwareVersion" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="license" label="license">
<d-input placeholder="请输入license名称" v-model="formData.licenseName"/>
<d-input placeholder="请输入license名称" v-model="formData.licenseName" />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="dependency" label="依赖软件名称">
<d-input v-model="formData.dependentSoftware"/>
<d-input v-model="formData.dependentSoftware" />
</d-form-item>
</d-col>
<d-col :span="8">
@@ -32,27 +32,30 @@
</d-col>
<d-col :span="8">
<d-form-item field="date" label="版本发布日期">
<d-range-date-picker-pro v-model="formData.dateRange" style="width: 100%;"
:placeholder="['开始日期', '结束日期']"/>
<d-range-date-picker-pro
v-model="formData.dateRange"
style="width: 100%"
:placeholder="['开始日期', '结束日期']"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="interestTag" label="兴趣标签">
<d-input v-model="formData.interestTag"/>
<d-input v-model="formData.interestTag" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="industry" label="行业">
<d-input v-model="formData.industry"/>
<d-input v-model="formData.industry" />
</d-form-item>
</d-col>
</d-row>
<slot name="operation">
<gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
<d-button style="width: 96px; height: 32px;" variant="solid" @click="submitForm">搜索</d-button>
<d-button style="width: 96px; height: 32px;" @click="cancel">取消</d-button>
<gc-form-operation style="display: flex; justify-content: center; gap: 8px">
<d-button style="width: 96px; height: 32px" variant="solid" @click="submitForm">搜索</d-button>
<d-button style="width: 96px; height: 32px" @click="cancel">取消</d-button>
</gc-form-operation>
</slot>
</d-form>
@@ -60,7 +63,7 @@
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps, watch } from 'vue';
import { ref, defineEmits, defineProps, watch, onMounted } from 'vue';
import { searchLanguageList } from '@/api/jyh';
const props = defineProps({
layout: {
@@ -80,27 +83,36 @@ const props = defineProps({
dateRange: ['', '']
})
}
})
});
const emit = defineEmits(['submit', 'cancel', 'update:modelValue']);
const languageList = ref([]);
const formData = ref({...props.modelValue});
const formData = ref({ ...props.modelValue });
watch(() => props.modelValue, (newVal) => {
if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
formData.value = {...newVal};
}
}, { deep: true });
watch(
() => props.modelValue,
(newVal) => {
if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
formData.value = { ...newVal };
}
},
{ deep: true }
);
watch(formData, (newVal) => {
if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
emit('update:modelValue', {...newVal});
}
}, { deep: true });
watch(
formData,
(newVal) => {
if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
emit('update:modelValue', { ...newVal });
localStorage.setItem('searchForm', JSON.stringify(newVal));
}
},
{ deep: true }
);
const submitForm = () => {
emit('submit', formData.value);
}
};
const cancel = () => {
formData.value = {
@@ -112,20 +124,25 @@ const cancel = () => {
interestTag: '',
industry: '',
dateRange: ['', '']
}
};
emit('cancel');
emit('update:modelValue', formData.value);
}
};
const getLanguageList = async() => {
const res:any = await searchLanguageList();
const getLanguageList = async () => {
const res: any = await searchLanguageList();
if (!res.error) {
languageList.value = res.data.data;
}
}
};
getLanguageList();
onMounted(() => {
const _searchForm = localStorage.getItem('searchForm');
if (_searchForm) {
formData.value = JSON.parse(_searchForm);
}
});
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

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

@@ -41,14 +41,14 @@
</d-dropdown>
</template>
<template #append>
<div class="advanced-search" @click="openAdvancedSearch">
<span>高级筛选</span>
<d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
<d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
<div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
<span class="close-isopen">高级筛选</span>
<d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>
<d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
</div>
</template>
</d-input>
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" :offset="offset">
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" :offset="offset" :clickOutside="closeOutside">
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px' }">
<AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'">
<template #title>
@@ -87,7 +87,9 @@
@click="openWarningDetail(item, index)"
>
<span>{{ item.subject }}</span>
<d-tag v-if="item.importance" :color="tagMap[item.importance].color" size="sm">{{ tagMap[item.importance].text }}</d-tag>
<d-tag v-if="item.importance" :color="tagMap[item.importance].color" size="sm">{{
tagMap[item.importance].text
}}</d-tag>
</div>
<div class="time-container">
<d-icon name="icon-time"></d-icon>
@@ -111,7 +113,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAccount } from '@/utils/hooks/useAccount';
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
@@ -132,7 +134,6 @@ const searchOptions = ref(['软件']);
const offset = ref({ mainAxis: 7, crossAxis: -10 });
const isKeepOpen = ref(true);
const isOpen = ref(false);
const rotate = ref(0);
const cateRotate = ref(0);
const infoList = ref([]);
const warningModalVisable = ref(false);
@@ -142,28 +143,31 @@ const homeSearch = ref(null);
const dropdownWidth = ref(0);
const selectedCate = ref('软件');
const tagMap = {
'Critical': {
Critical: {
text: '致命',
color: '#c7000b'
},
'High': {
High: {
text: '高',
color: '#f66f6a'
},
'Medium': {
Medium: {
text: '中',
color: '#fac20a'
},
'Low': {
Low: {
text: '低',
color: '#5e7ce0'
}
}
};
const rotate = computed(() => {
return isOpen.value ? 180 : 0;
});
const searchInput = ref(null);
const openAdvancedSearch = () => {
isOpen.value = !isOpen.value;
rotate.value = isOpen.value ? 180 : 0;
inputGlow.value = isOpen.value;
};
@@ -198,7 +202,7 @@ const updateDropdownWidth = () => {
};
const search = () => {
updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value })
updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value });
router.push({ name: 'Search' });
};
@@ -236,6 +240,17 @@ onMounted(() => {
}
updateDropdownWidth();
document.querySelector('body').onclick = (e) => {
const className = e.target.className;
if (
!className.includes('close-isopen') &&
!className.includes('devui-badge__content') &&
!className.includes('advanced-search')
) {
isOpen.value = false;
}
};
});
onBeforeUnmount(() => {