feat: 新增搜索记录
This commit is contained in:
jmal
parent
6b103af57e
commit
ba1ea93a4a
@ -137,6 +137,22 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 最近搜索记录🔍
|
||||
recentlySearchHistory: function(params) {
|
||||
return request({
|
||||
url: '/search/recentlySearchHistory',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 删除搜索记录🔍
|
||||
deleteSearchHistory: function(params) {
|
||||
return request({
|
||||
url: '/search/deleteSearchHistory',
|
||||
method: 'delete',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 搜索文件🔍
|
||||
searchFile: function(params) {
|
||||
return request({
|
||||
|
||||
@ -15,6 +15,22 @@
|
||||
<div class="search-bar">
|
||||
<div class="search-input-wrapper">
|
||||
<div class="search-filters">
|
||||
<div>
|
||||
<el-checkbox
|
||||
v-model="searchOverall"
|
||||
class="search-option-checkbox"
|
||||
@change="handleSearchOverallChange"
|
||||
>全盘搜索
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox
|
||||
v-model="searchMount"
|
||||
class="search-option-checkbox"
|
||||
@change="handleSearchMountChange"
|
||||
>挂载目录
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<el-dropdown @command="handleFileType" trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-document"></i>
|
||||
@ -101,22 +117,31 @@
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-checkbox
|
||||
v-model="searchMount"
|
||||
class="search-mount-checkbox"
|
||||
@change="handleSearchMountChange"
|
||||
>包含挂载目录</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索条件标签 -->
|
||||
<div class="search-tags">
|
||||
<div v-if="searchPath.length > 1">
|
||||
<div v-if="searchPath.length > 1 && !searchOverall">
|
||||
<el-tag
|
||||
@close="resetSearchPath">
|
||||
路径: {{ searchPath }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="searchOverall">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSearchOverall">
|
||||
全盘搜索
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="searchMount">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSearchMount">
|
||||
包含挂载目录
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="fileTypeText !== '全部文件'">
|
||||
<el-tag
|
||||
closable
|
||||
@ -138,13 +163,6 @@
|
||||
时间范围: {{ formatTimeRange }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="searchMount">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSearchMount">
|
||||
包含挂载目录
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -187,19 +205,24 @@ export default {
|
||||
sizeRange: [0, -1], // 默认范围：0 到 1GB
|
||||
fileTypeText: '全部文件',
|
||||
searchMount: false,
|
||||
filterOption: {
|
||||
type: null,
|
||||
modifyStart: null,
|
||||
searchMount: false,
|
||||
modifyEnd: null,
|
||||
sizeMin: null,
|
||||
sizeMax: null
|
||||
}
|
||||
searchOverall: false,
|
||||
filterOption: this.emptyFilterOption
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasSearchConditions() {
|
||||
return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount
|
||||
return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount || this.searchOverall
|
||||
},
|
||||
emptyFilterOption() {
|
||||
return {
|
||||
type: null,
|
||||
modifyStart: null,
|
||||
modifyEnd: null,
|
||||
sizeMin: null,
|
||||
sizeMax: null,
|
||||
searchMount: false,
|
||||
searchOverall: false,
|
||||
}
|
||||
},
|
||||
hasSizeRange () {
|
||||
return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
|
||||
@ -231,6 +254,9 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterOption(newValue) {
|
||||
console.log('filterOption changed', newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新筛选条件并通知父组件
|
||||
@ -241,12 +267,52 @@ export default {
|
||||
modifyEnd: this.timeRange ? new Date(this.timeRange[1]).getTime() : null,
|
||||
sizeMin: this.hasSizeRange ? this.sizeRange[0] : null,
|
||||
sizeMax: this.hasSizeRange ? this.sizeRange[1] : null,
|
||||
searchMount: this.searchMount
|
||||
searchMount: this.searchMount,
|
||||
searchOverall: this.searchOverall
|
||||
}
|
||||
|
||||
this.$emit('filter-change')
|
||||
this.$emit('update:filter-option-param', this.filterOption)
|
||||
this.$emit('update:has-search-conditions-param', this.hasSearchConditions)
|
||||
localStorage.setItem('searchFilterOption', JSON.stringify(this.filterOption))
|
||||
},
|
||||
|
||||
clearFilterOption() {
|
||||
this.filterOption = this.emptyFilterOption
|
||||
console.log('clearFilterOption')
|
||||
this.setFilterOption(this.filterOption)
|
||||
},
|
||||
|
||||
setFilterOption(filterOption) {
|
||||
if (!filterOption) return
|
||||
|
||||
// 设置文件类型
|
||||
this.handleFileType(filterOption.type || 'all')
|
||||
|
||||
// 设置时间范围
|
||||
if (filterOption.modifyStart && filterOption.modifyEnd) {
|
||||
this.timeRange = [
|
||||
new Date(filterOption.modifyStart),
|
||||
new Date(filterOption.modifyEnd)
|
||||
]
|
||||
} else {
|
||||
this.timeRange = null
|
||||
}
|
||||
|
||||
// 设置文件大小范围
|
||||
if (filterOption.sizeMin !== null && filterOption.sizeMax !== null) {
|
||||
this.sizeRange = [filterOption.sizeMin, filterOption.sizeMax]
|
||||
} else {
|
||||
this.sizeRange = [-1, -1]
|
||||
}
|
||||
|
||||
// 设置搜索选项
|
||||
this.searchMount = !!filterOption.searchMount
|
||||
this.searchOverall = !!filterOption.searchOverall
|
||||
|
||||
// 更新过滤条件
|
||||
console.log('setFilterOption')
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleFileType(command) {
|
||||
@ -298,9 +364,8 @@ export default {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetKeyword() {
|
||||
this.$emit('update:keyword', '')
|
||||
this.$emit('update:visible', false)
|
||||
resetSearchOverall() {
|
||||
this.searchOverall = false
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
@ -376,12 +441,15 @@ export default {
|
||||
|
||||
handleSearchMountChange() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
handleSearchOverallChange() {
|
||||
this.updateFilterOption()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/custom-ui.scss";
|
||||
.search-option-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -439,7 +507,7 @@ export default {
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
@ -485,7 +553,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.search-mount-checkbox {
|
||||
.search-option-checkbox {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -156,17 +156,20 @@
|
||||
></button-upload>
|
||||
</el-popover>
|
||||
|
||||
<el-input
|
||||
<el-autocomplete
|
||||
ref="searchInput"
|
||||
:class="searchInputClass"
|
||||
v-show="showSearchButton"
|
||||
ref="searchInput"
|
||||
:fetch-suggestions="queryRecentlySearchHistory"
|
||||
hide-loading
|
||||
:debounce="300"
|
||||
:popper-append-to-body="false"
|
||||
:placeholder="`搜索 ${cmdKey} P`"
|
||||
v-model="searchFileName"
|
||||
@keyup.enter.native="searchFileEnter(searchFileName)"
|
||||
@focus="searchInputFocus"
|
||||
@input="searchFileEnter(searchFileName)"
|
||||
@blur="searchInputBlur"
|
||||
@clear="searchFileEnter(searchFileName)"
|
||||
@select="handleSelectSearchHistory"
|
||||
>
|
||||
<template v-slot:suffix>
|
||||
<div>
|
||||
@ -174,11 +177,12 @@
|
||||
<i class="el-icon-circle-close"></i>
|
||||
</el-button>
|
||||
<el-popover
|
||||
v-if="searchFileName"
|
||||
v-show="searchFileName"
|
||||
placement="bottom-end"
|
||||
popper-class="search-filter-popover"
|
||||
trigger="click">
|
||||
<search-option
|
||||
ref="searchOption"
|
||||
:has-search-conditions-param.sync="hasSearchFilterOption"
|
||||
:keyword.sync="searchFileName"
|
||||
:filter-option-param.sync="filterOption"
|
||||
@ -186,13 +190,27 @@
|
||||
:search-result-count="pagination['total']"
|
||||
@filter-change="searchFilterChange" >
|
||||
</search-option>
|
||||
<el-button slot="reference" type="text" :class="searchOptionBtnClass">
|
||||
<el-button slot="reference" type="text" :class="searchOptionBtnClass" @click.native="showSearchOption">
|
||||
<i class="el-icon-s-operation"></i>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- 自定义提示项 -->
|
||||
<template #default="{ item }" class="autocomplete-suggestion-custom">
|
||||
<div class="suggestion-item">
|
||||
<div class="suggestion-item-title">
|
||||
<i class="el-icon-time"></i>
|
||||
<span class="suggestion-item-text">{{ item.keyword }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="text" icon="el-icon-close" class="clear-search-history-btn" @click.native.prevent="clearSearchHistory(item, $event)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-autocomplete>
|
||||
<el-dropdown
|
||||
size="medium"
|
||||
style="height: 40px;"
|
||||
@ -1175,6 +1193,7 @@ export default {
|
||||
debounceSearch: null,// 搜索防抖
|
||||
debounceGetFileList: null,// 获取文件列表防抖
|
||||
filterOption: {}, // 搜索选项
|
||||
searchHistoryList: [],// 搜索历史列表
|
||||
hasSearchFilterOption: false, // 是否有搜索选项
|
||||
fileUsername: '', // 一般用于挂载文件
|
||||
searchInputClass: 'search-input' // 搜索输入框样式
|
||||
@ -1313,6 +1332,7 @@ export default {
|
||||
searchFileName(newValue) {
|
||||
if (!newValue) {
|
||||
this.hasSearchFilterOption = false
|
||||
this.$refs.searchOption.clearFilterOption()
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -1380,6 +1400,11 @@ export default {
|
||||
this.$router.replace({ query })
|
||||
}
|
||||
|
||||
if (this.$route.query.keyword) {
|
||||
this.filterOption = localStorage.getItem('searchFilterOption') ? JSON.parse(localStorage.getItem('searchFilterOption')) : {}
|
||||
this.$refs.searchOption.setFilterOption(this.filterOption)
|
||||
}
|
||||
|
||||
let that = this
|
||||
window.onresize = function() {
|
||||
that.clientHeight =
|
||||
@ -2938,6 +2963,7 @@ export default {
|
||||
this.vmode
|
||||
}&path=${path}${keyword}${searchOpenFolder}${queryTagId}${basePath}${folder}`
|
||||
)
|
||||
console.log('this.filterOption', this.filterOption)
|
||||
api.searchFile({
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
@ -2959,6 +2985,7 @@ export default {
|
||||
querySizeMin: this.filterOption.sizeMin,
|
||||
querySizeMax: this.filterOption.sizeMax,
|
||||
searchMount: this.filterOption.searchMount,
|
||||
searchOverall: this.filterOption.searchOverall,
|
||||
}).then(res => {
|
||||
this.loadData(res, onLoad)
|
||||
this.listModeSearch = true
|
||||
@ -4511,6 +4538,38 @@ export default {
|
||||
searchFilterChange() {
|
||||
this.debounceSearch(this.searchFileName, false)
|
||||
},
|
||||
showSearchOption() {
|
||||
},
|
||||
queryRecentlySearchHistory(queryString, cb) {
|
||||
if (this.searchFileName) {
|
||||
cb([])
|
||||
return
|
||||
}
|
||||
api.recentlySearchHistory({keyword: queryString}).then(res => {
|
||||
this.searchHistoryList = res.data || []
|
||||
console.log('clearSearchHistory1', this.searchHistoryList)
|
||||
cb(this.searchHistoryList)
|
||||
}).catch(error => {
|
||||
console.error("Error fetching search history:", error)
|
||||
this.searchHistoryList = []
|
||||
cb([])
|
||||
});
|
||||
},
|
||||
handleSelectSearchHistory(item) {
|
||||
this.searchFileName = item.keyword
|
||||
this.filterOption = item
|
||||
this.debounceSearch(this.searchFileName, false)
|
||||
this.$refs.searchOption.setFilterOption(item)
|
||||
},
|
||||
clearSearchHistory(itemToDelete, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const idToDelete = itemToDelete.id
|
||||
api.deleteSearchHistory({id: idToDelete}).then(() => {
|
||||
const index = this.searchHistoryList.findIndex(item => item.id === idToDelete)
|
||||
this.searchHistoryList.splice(index, 1)
|
||||
})
|
||||
},
|
||||
checkPreviewVisible() {
|
||||
if (this.iframePreviewVisible) {
|
||||
return true
|
||||
@ -4775,12 +4834,15 @@ export default {
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
width: 230px;
|
||||
transition: width 0.3s ease-in-out;
|
||||
>>> .el-input--suffix .el-input__inner {
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-focus {
|
||||
width: 240px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.search-close-btn {
|
||||
@ -4808,4 +4870,39 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
>>> .el-autocomplete-suggestion li {
|
||||
padding: 0 5px 0 15px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.suggestion-item-title {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.suggestion-item-text {
|
||||
width: 152px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-search-history-btn {
|
||||
padding: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.clear-search-history-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
31
src/styles/custom-ui.scss
Normal file
31
src/styles/custom-ui.scss
Normal file
@ -0,0 +1,31 @@
|
||||
>>> .el-checkbox {
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.el-checkbox__inner {
|
||||
background-color: #f0f0f0; /* 浅灰色背景 */
|
||||
border-color: #dcdcdc; /* 浅灰色边框 */
|
||||
border-radius: 4px; /* 圆角 */
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #a0a0a0; /* 深灰色背景 */
|
||||
border-color: #a0a0a0; /* 深灰色边框 */
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
border-color: #ffffff; /* 白色勾号 */
|
||||
}
|
||||
|
||||
.el-checkbox__inner:hover {
|
||||
//border-color: #b0b0b0; /* hover 时边框颜色 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user