feat: 搜索选项可搜索挂载目录

This commit is contained in:
jmal 2025-04-19 15:18:56 +08:00
parent 226864f91f
commit 6b103af57e
4 changed files with 642 additions and 529 deletions

View File

@ -1,469 +0,0 @@
<template>
<div
v-show="dialogVisible"
:show-close="false"
custom-class="no-header-dialog"
class="file-search-dialog">
<div class="search-bar">
<div class="search-input-wrapper">
<div class="search-filters">
<el-dropdown @command="handleFileType" trigger="click" class="filter-dropdown">
<el-button type="text" class="filter-btn">
<i class="el-icon-document"></i>
<span>文件类型</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="modern-dropdown">
<el-dropdown-item command="all">
<i class="el-icon-document"></i> 全部文件
</el-dropdown-item>
<el-dropdown-item command="document">
<i class="el-icon-document"></i> 文档
</el-dropdown-item>
<el-dropdown-item command="image">
<i class="el-icon-picture"></i> 图片
</el-dropdown-item>
<el-dropdown-item command="video">
<i class="el-icon-video-camera"></i> 视频
</el-dropdown-item>
<el-dropdown-item command="audio">
<i class="el-icon-headset"></i> 音频
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click" class="filter-dropdown">
<el-button type="text" class="filter-btn">
<i class="el-icon-coin"></i>
<span>文件大小</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="modern-dropdown size-filter-dropdown">
<div class="size-slider-container">
<div class="size-slider-labels">
<span>{{ formatFileSize(sizeRange[0]) }}</span>
<span>{{ formatFileSize(sizeRange[1]) }}</span>
</div>
<el-slider
v-model="sizeRange"
range
:min="sliderConfig.min"
:max="sliderConfig.max"
:step="sliderConfig.step"
@change="handleSizeRangeChange">
</el-slider>
<div class="size-slider-presets">
<el-button size="mini" @click="setSizePreset([0, 1048576])">≤ 1MB</el-button>
<el-button size="mini" @click="setSizePreset([1048576, 10485760])">1-10MB</el-button>
<el-button size="mini" @click="setSizePreset([10485760, 104857600])">10-100MB</el-button>
<el-button size="mini" @click="setSizePreset([104857600, 1073741824])">100MB-1GB</el-button>
<el-button size="mini" @click="setSizePresetLarge()">≥ 1GB</el-button>
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click" class="filter-dropdown">
<el-button type="text" class="filter-btn">
<i class="el-icon-date"></i>
<span>修改时间</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="modern-dropdown time-filter-dropdown">
<div class="time-picker-container">
<div class="time-presets">
<el-button size="mini" @click="setTimePreset('today')">今天</el-button>
<el-button size="mini" @click="setTimePreset('yesterday')">昨天</el-button>
<el-button size="mini" @click="setTimePreset('thisWeek')">本周</el-button>
<el-button size="mini" @click="setTimePreset('lastWeek')">上周</el-button>
<el-button size="mini" @click="setTimePreset('thisMonth')">本月</el-button>
<el-button size="mini" @click="setTimePreset('lastMonth')">上个月</el-button>
</div>
<div class="custom-date-range">
<p class="date-range-title">自定义时间范围</p>
<el-date-picker
v-model="timeRange"
type="daterange"
size="small"
class="modern-date-picker"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleTimeChange">
</el-date-picker>
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
<!-- 搜索条件标签 -->
<div class="search-tags" v-if="hasSearchConditions">
<div v-if="keyword !== ''">
<el-tag
closable
@close="resetKeyword">
关键字: {{ keyword }}
</el-tag>
</div>
<div v-if="fileTypeText !== '全部文件'">
<el-tag
closable
@close="resetFileType">
文件类型: {{ fileTypeText }}
</el-tag>
</div>
<div v-if="hasSizeRange">
<el-tag
closable
@close="resetSizeRange">
文件大小: {{ formatSizeRange }}
</el-tag>
</div>
<div v-if="timeRange">
<el-tag
closable
@close="resetTimeRange">
时间范围: {{ formatTimeRange }}
</el-tag>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SearchDialog',
props: {
visible: {
type: Boolean,
default: false
},
keyword: {
type: String,
default: ''
}
},
data() {
return {
dialogVisible: false,
fileType: 'all',
timeRange: null,
sizeRange: [0, -1], // 默认范围:0 到 1GB
fileTypeText: '全部文件',
filterOption: {
type: null,
modifyStart: null,
modifyEnd: null,
sizeMin: null,
sizeMax: null
}
}
},
computed: {
hasSearchConditions() {
return this.keyword || this.fileType !== 'all' || this.timeRange || this.hasSizeRange
},
hasSizeRange () {
return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
},
formatTimeRange() {
if (!this.timeRange) return ''
return `${this.formatDate(this.timeRange[0])} 至 ${this.formatDate(this.timeRange[1])}`
},
formatSizeRange() {
return `${this.formatFileSize(this.sizeRange[0])} - ${this.formatFileSize(this.sizeRange[1])}`
},
sliderConfig() {
// 根据当前范围动态计算滑块配置
if (this.sizeRange[0] >= 1073741824) {
// 大文件模式 (1GB - 10GB)
return {
min: 1073741824,
max: 10737418240,
step: 20971520 // 20MB
}
} else {
// 普通模式 (0 - 1GB)
return {
min: 0,
max: 1073741824,
step: 1024
}
}
}
},
watch: {
visible(val) {
this.dialogVisible = val
},
dialogVisible(val) {
this.$emit('update:visible', val)
}
},
methods: {
// 更新筛选条件并通知父组件
updateFilterOption() {
this.filterOption = {
type: this.fileType === 'all' ? null : this.fileType,
modifyStart: this.timeRange ? new Date(this.timeRange[0]).getTime() : null,
modifyEnd: this.timeRange ? new Date(this.timeRange[1]).getTime() : null,
sizeMin: this.hasSizeRange ? this.sizeRange[0] : null,
sizeMax: this.hasSizeRange ? this.sizeRange[1] : null
}
this.$emit('filter-change', this.filterOption)
},
handleFileType(command) {
this.fileType = command
switch (command) {
case 'all':
this.fileTypeText = '全部文件'
break
case 'document':
this.fileTypeText = '文档'
break
case 'image':
this.fileTypeText = '图片'
break
case 'video':
this.fileTypeText = '视频'
break
case 'audio':
this.fileTypeText = '音频'
break
}
this.updateFilterOption()
},
handleTimeChange() {
this.updateFilterOption()
},
handleSizeRangeChange() {
this.updateFilterOption()
},
setSizePreset(range) {
this.sizeRange = range
this.updateFilterOption()
},
setSizePresetLarge() {
this.sizeRange = [1073741824, 10737418240]
this.updateFilterOption()
},
resetKeyword() {
this.$emit('update:keyword', '')
this.$emit('update:visible', false)
this.updateFilterOption()
},
resetFileType() {
this.handleFileType('all')
},
resetTimeRange() {
this.timeRange = null
this.updateFilterOption()
},
resetSizeRange() {
this.sizeRange = [-1, -1]
this.updateFilterOption()
},
formatDate(date) {
return new Date(date).toLocaleDateString()
},
formatFileSize(size) {
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
if (size === 0) return '0 B';
const i = Math.floor(Math.log(size) / Math.log(1024));
return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
},
setTimePreset(preset) {
const now = new Date()
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let start, end
switch (preset) {
case 'today':
start = today
end = new Date(today)
end.setDate(today.getDate() + 1)
end.setMilliseconds(-1)
break
case 'yesterday':
start = new Date(today)
start.setDate(today.getDate() - 1)
end = new Date(today)
end.setMilliseconds(-1)
break
case 'thisWeek':
start = new Date(today)
start.setDate(today.getDate() - today.getDay()) // 周日为一周第一天
end = new Date(start)
end.setDate(start.getDate() + 7)
end.setMilliseconds(-1)
break
case 'lastWeek':
start = new Date(today)
start.setDate(today.getDate() - today.getDay() - 7)
end = new Date(start)
end.setDate(start.getDate() + 7)
end.setMilliseconds(-1)
break
case 'thisMonth':
start = new Date(today.getFullYear(), today.getMonth(), 1)
end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999)
break
case 'lastMonth':
start = new Date(today.getFullYear(), today.getMonth() - 1, 1)
end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999)
break
}
this.timeRange = [start, end]
this.updateFilterOption()
}
}
}
</script>
<style lang="scss" scoped>
.file-search-dialog {
display: flex;
justify-content: center;
gap: 16px;
.search-bar {
display: flex;
align-content: center;
align-items: center;
}
>>> .el-dialog {
margin-top: 6vh !important;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
overflow: hidden;
margin-right: 160px;
}
>>> .el-dialog__header {
padding: 0;
height: 0;
}
>>> .el-dialog__body {
padding: 20px 24px;
}
.search-filters {
display: flex;
align-items: center;
flex-direction: column;
gap: 8px;
.el-divider--vertical {
height: 24px;
margin: 0;
}
.filter-dropdown {
.filter-btn {
display: flex;
align-items: center;
gap: 4px;
color: #606266;
font-size: 14px;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
background-color: #f5f7fa;
}
i {
font-size: 16px;
}
}
}
>>> .modern-date-picker {
.el-range-editor {
border: none;
background: transparent;
.el-range-input {
background: transparent;
color: #606266;
}
.el-range-separator {
color: #909399;
}
}
}
}
>>> .modern-dropdown {
border-radius: 8px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
.el-dropdown-menu__item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 6px;
margin: 2px 0;
font-size: 14px;
i {
font-size: 16px;
}
&:hover {
background-color: #f5f7fa;
}
}
}
.search-tags {
display: flex;
justify-content: center;
flex-direction: column;
gap: 8px;
min-width: 250px;
>>> .el-tag {
border-radius: 6px;
padding: 0 10px;
margin: 0;
background-color: #f5f7fa;
border-color: transparent;
color: #606266;
.el-tag__close {
background-color: transparent;
color: #909399;
&:hover {
background-color: #909399;
color: #fff;
}
}
}
}
}
</style>

View File

@ -0,0 +1,545 @@
<template>
<div class="search-option-wrapper">
<div class="search-option-result">
<div>
<span>搜索:</span>
<span>{{ keyword }}</span>
</div>
<div>
<span>{{searchResultCount}}</span>
<span>个结果</span>
</div>
</div>
<div class="file-search-option">
<div class="search-bar">
<div class="search-input-wrapper">
<div class="search-filters">
<el-dropdown @command="handleFileType" trigger="click" class="filter-dropdown">
<el-button type="text" class="filter-btn">
<i class="el-icon-document"></i>
<span>文件类型</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="modern-dropdown">
<el-dropdown-item command="all">
<i class="el-icon-document"></i> 全部文件
</el-dropdown-item>
<el-dropdown-item command="document">
<i class="el-icon-document"></i> 文档
</el-dropdown-item>
<el-dropdown-item command="image">
<i class="el-icon-picture"></i> 图片
</el-dropdown-item>
<el-dropdown-item command="video">
<i class="el-icon-video-camera"></i> 视频
</el-dropdown-item>
<el-dropdown-item command="audio">
<i class="el-icon-headset"></i> 音频
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click" class="filter-dropdown">
<el-button type="text" class="filter-btn">
<i class="el-icon-coin"></i>
<span>文件大小</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="modern-dropdown size-filter-dropdown">
<div class="size-slider-container">
<div class="size-slider-labels">
<span>{{ formatFileSize(sizeRange[0]) }}</span>
<span>{{ formatFileSize(sizeRange[1]) }}</span>
</div>
<el-slider
v-model="sizeRange"
range
:min="sliderConfig.min"
:max="sliderConfig.max"
:step="sliderConfig.step"
@change="handleSizeRangeChange">
</el-slider>
<div class="size-slider-presets">
<el-button size="mini" @click="setSizePreset([0, 1048576])">≤ 1MB</el-button>
<el-button size="mini" @click="setSizePreset([1048576, 10485760])">1-10MB</el-button>
<el-button size="mini" @click="setSizePreset([10485760, 104857600])">10-100MB</el-button>
<el-button size="mini" @click="setSizePreset([104857600, 1073741824])">100MB-1GB</el-button>
<el-button size="mini" @click="setSizePresetLarge()">≥ 1GB</el-button>
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click" class="filter-dropdown">
<el-button type="text" class="filter-btn">
<i class="el-icon-date"></i>
<span>修改时间</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="modern-dropdown time-filter-dropdown">
<div class="time-picker-container">
<div class="time-presets">
<el-button size="mini" @click="setTimePreset('today')">今天</el-button>
<el-button size="mini" @click="setTimePreset('yesterday')">昨天</el-button>
<el-button size="mini" @click="setTimePreset('thisWeek')">本周</el-button>
<el-button size="mini" @click="setTimePreset('lastWeek')">上周</el-button>
<el-button size="mini" @click="setTimePreset('thisMonth')">本月</el-button>
<el-button size="mini" @click="setTimePreset('lastMonth')">上个月</el-button>
</div>
<div class="custom-date-range">
<p class="date-range-title">自定义时间范围</p>
<el-date-picker
v-model="timeRange"
type="daterange"
size="small"
class="modern-date-picker"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleTimeChange">
</el-date-picker>
</div>
</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">
<el-tag
@close="resetSearchPath">
路径: {{ searchPath }}
</el-tag>
</div>
<div v-if="fileTypeText !== '全部文件'">
<el-tag
closable
@close="resetFileType">
文件类型: {{ fileTypeText }}
</el-tag>
</div>
<div v-if="hasSizeRange">
<el-tag
closable
@close="resetSizeRange">
文件大小: {{ formatSizeRange }}
</el-tag>
</div>
<div v-if="timeRange">
<el-tag
closable
@close="resetTimeRange">
时间范围: {{ formatTimeRange }}
</el-tag>
</div>
<div v-if="searchMount">
<el-tag
closable
@close="resetSearchMount">
包含挂载目录
</el-tag>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SearchOption',
props: {
visible: {
type: Boolean,
default: false
},
keyword: {
type: String,
default: ''
},
hasSearchConditionsParam: {
type: Boolean,
default: false
},
filterOptionParam: {
type: Object,
default: function() {}
},
searchPath: {
type: String,
default: '/'
},
searchResultCount: {
type: Number,
default: 0
}
},
data() {
return {
fileType: 'all',
timeRange: null,
sizeRange: [0, -1], // 默认范围:0 到 1GB
fileTypeText: '全部文件',
searchMount: false,
filterOption: {
type: null,
modifyStart: null,
searchMount: false,
modifyEnd: null,
sizeMin: null,
sizeMax: null
}
}
},
computed: {
hasSearchConditions() {
return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount
},
hasSizeRange () {
return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
},
formatTimeRange() {
if (!this.timeRange) return ''
return `${this.formatDate(this.timeRange[0])} 至 ${this.formatDate(this.timeRange[1])}`
},
formatSizeRange() {
return `${this.formatFileSize(this.sizeRange[0])} - ${this.formatFileSize(this.sizeRange[1])}`
},
sliderConfig() {
// 根据当前范围动态计算滑块配置
if (this.sizeRange[0] >= 1073741824) {
// 大文件模式 (1GB - 10GB)
return {
min: 1073741824,
max: 10737418240,
step: 20971520 // 20MB
}
} else {
// 普通模式 (0 - 1GB)
return {
min: 0,
max: 1073741824,
step: 1024
}
}
}
},
watch: {
},
methods: {
// 更新筛选条件并通知父组件
updateFilterOption() {
this.filterOption = {
type: this.fileType === 'all' ? null : this.fileType,
modifyStart: this.timeRange ? new Date(this.timeRange[0]).getTime() : null,
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
}
this.$emit('filter-change')
this.$emit('update:filter-option-param', this.filterOption)
this.$emit('update:has-search-conditions-param', this.hasSearchConditions)
},
handleFileType(command) {
this.fileType = command
switch (command) {
case 'all':
this.fileTypeText = '全部文件'
break
case 'document':
this.fileTypeText = '文档'
break
case 'image':
this.fileTypeText = '图片'
break
case 'video':
this.fileTypeText = '视频'
break
case 'audio':
this.fileTypeText = '音频'
break
}
this.updateFilterOption()
},
handleTimeChange() {
this.updateFilterOption()
},
handleSizeRangeChange() {
this.updateFilterOption()
},
setSizePreset(range) {
this.sizeRange = range
this.updateFilterOption()
},
setSizePresetLarge() {
this.sizeRange = [1073741824, 10737418240]
this.updateFilterOption()
},
resetSearchPath() {
this.updateFilterOption()
},
resetSearchMount() {
this.searchMount = false
this.updateFilterOption()
},
resetKeyword() {
this.$emit('update:keyword', '')
this.$emit('update:visible', false)
this.updateFilterOption()
},
resetFileType() {
this.handleFileType('all')
},
resetTimeRange() {
this.timeRange = null
this.updateFilterOption()
},
resetSizeRange() {
this.sizeRange = [-1, -1]
this.updateFilterOption()
},
formatDate(date) {
return new Date(date).toLocaleDateString()
},
formatFileSize(size) {
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
if (size === 0) return '0 B';
const i = Math.floor(Math.log(size) / Math.log(1024));
return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
},
setTimePreset(preset) {
const now = new Date()
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let start, end
switch (preset) {
case 'today':
start = today
end = new Date(today)
end.setDate(today.getDate() + 1)
end.setMilliseconds(-1)
break
case 'yesterday':
start = new Date(today)
start.setDate(today.getDate() - 1)
end = new Date(today)
end.setMilliseconds(-1)
break
case 'thisWeek':
start = new Date(today)
start.setDate(today.getDate() - today.getDay()) // 周日为一周第一天
end = new Date(start)
end.setDate(start.getDate() + 7)
end.setMilliseconds(-1)
break
case 'lastWeek':
start = new Date(today)
start.setDate(today.getDate() - today.getDay() - 7)
end = new Date(start)
end.setDate(start.getDate() + 7)
end.setMilliseconds(-1)
break
case 'thisMonth':
start = new Date(today.getFullYear(), today.getMonth(), 1)
end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999)
break
case 'lastMonth':
start = new Date(today.getFullYear(), today.getMonth() - 1, 1)
end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999)
break
}
this.timeRange = [start, end]
this.updateFilterOption()
},
handleSearchMountChange() {
this.updateFilterOption()
}
}
}
</script>
<style lang="scss" scoped>
.search-option-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.search-option-result {
padding: 12px 24px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f0f2f5;
div {
display: flex;
align-items: center;
gap: 8px;
span:first-child {
color: #909399;
font-size: 14px;
}
span:last-child {
color: #303133;
font-weight: 500;
font-size: 14px;
}
&:last-child {
span:first-child {
color: #409EFF;
font-weight: 600;
font-size: 16px;
}
}
}
}
}
.file-search-option {
display: flex;
justify-content: center;
gap: 16px;
padding: 12px 10px;
.search-bar {
display: flex;
align-content: center;
align-items: center;
}
.search-filters {
display: flex;
align-items: center;
flex-direction: column;
gap: 8px;
.el-divider--vertical {
height: 24px;
margin: 0;
}
.filter-dropdown {
.filter-btn {
display: flex;
align-items: center;
gap: 4px;
color: #606266;
font-size: 14px;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
background-color: #f5f7fa;
}
i {
font-size: 16px;
}
}
}
>>> .modern-date-picker {
.el-range-editor {
border: none;
background: transparent;
.el-range-input {
background: transparent;
color: #606266;
}
.el-range-separator {
color: #909399;
}
}
}
.search-mount-checkbox {
padding: 8px 12px;
cursor: pointer;
}
}
>>> .modern-dropdown {
border-radius: 8px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
.el-dropdown-menu__item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 6px;
margin: 2px 0;
font-size: 14px;
i {
font-size: 16px;
}
&:hover {
background-color: #f5f7fa;
}
}
}
.search-tags {
display: flex;
justify-content: center;
flex-direction: column;
gap: 8px;
min-width: 250px;
>>> .el-tag {
border-radius: 6px;
padding: 0 10px;
margin: 0;
background-color: #f5f7fa;
border-color: transparent;
color: #606266;
.el-tag__close {
background-color: transparent;
color: #909399;
&:hover {
background-color: #909399;
color: #fff;
}
}
}
}
}
</style>

View File

@ -157,27 +157,40 @@
</el-popover>
<el-input
:class="searchInputClass"
v-show="showSearchButton"
ref="searchInput"
placeholder="搜索"
:placeholder="`搜索 ${cmdKey} P`"
v-model="searchFileName"
@keyup.enter.native="searchFileEnter(searchFileName)"
@focus="setInputFocus"
@focus="searchInputFocus"
@input="searchFileEnter(searchFileName)"
@blur="setInputBlur()"
@blur="searchInputBlur"
@clear="searchFileEnter(searchFileName)"
>
<template v-slot:suffix>
<el-popover
v-if="searchFileName"
placement="bottom-end"
popper-class="search-filter-popover"
trigger="click">
<search-dialog :visible.sync="searchDialogVisible" :keyword.sync="searchFileName" @filter-change="searchFilterChange"></search-dialog>
<el-button slot="reference" type="text" :class="searchOptionBtnClass" @click="searchDialogVisible = true">
<i class="el-icon-s-operation"></i>
<div>
<el-button v-if="searchFileName" type="text" class="search-close-btn" @click="searchClose">
<i class="el-icon-circle-close"></i>
</el-button>
</el-popover>
<el-popover
v-if="searchFileName"
placement="bottom-end"
popper-class="search-filter-popover"
trigger="click">
<search-option
:has-search-conditions-param.sync="hasSearchFilterOption"
:keyword.sync="searchFileName"
:filter-option-param.sync="filterOption"
:search-path="currentDirectory"
:search-result-count="pagination['total']"
@filter-change="searchFilterChange" >
</search-option>
<el-button slot="reference" type="text" :class="searchOptionBtnClass">
<i class="el-icon-s-operation"></i>
</el-button>
</el-popover>
</div>
</template>
</el-input>
<el-dropdown
@ -831,7 +844,7 @@
</template>
<script>
import SearchDialog from '@/components/SearchDialog/index.vue'
import SearchOption from '@/components/SearchOption/index.vue'
import DialogFileList from '@/components/ShowFile/DialogFileList.vue'
import FileClipboard from '@/components/ShowFile/FileClipboard.vue'
import store from '@/store'
@ -872,7 +885,7 @@ export default {
components: {
FileClipboard,
DialogFileList,
SearchDialog,
SearchOption,
FileDetails,
TagDialog,
ShareDialog,
@ -1018,6 +1031,7 @@ export default {
renameFileName: '',
searchFileName: '',
pathList: [{ folder: '' }],
currentDirectory: '/', // 当前路径
fileList: [],
pageLoadCompleteList: [],
pagination: {
@ -1160,10 +1174,10 @@ export default {
deleteLoading: false, // 删除loading
debounceSearch: null,// 搜索防抖
debounceGetFileList: null,// 获取文件列表防抖
searchDialogVisible: false,
filterOption: {}, // 搜索选项
hasSearchFilterOption: false, // 是否有搜索选项
fileUsername: '', // 一般用于挂载文件
searchInputClass: 'search-input' // 搜索输入框样式
}
},
computed: {
@ -1184,11 +1198,7 @@ export default {
}
},
searchOptionBtnClass() {
if (this.hasSearchFilterOption) {
return 'search-option-btn search-option-btn-active'
} else {
return 'search-option-btn'
}
return this.hasSearchFilterOption ? 'search-option-btn search-option-btn-active' : 'search-option-btn'
},
cmdKey() {
return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
@ -1300,6 +1310,11 @@ export default {
break
}
},
searchFileName(newValue) {
if (!newValue) {
this.hasSearchFilterOption = false
}
}
},
mounted() {
// 监听返回
@ -1511,11 +1526,11 @@ export default {
event.stopPropagation()
}
// ctrl + P / cmd + P
// if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
// this.searchDialogVisible = true
// event.preventDefault()
// event.stopPropagation()
// }
if (isCmd && keyCode === 80 && !checkPreviewVisible) {
this.$refs.searchInput.focus()
event.preventDefault()
event.stopPropagation()
}
},
keyup(event) {
const { keyCode } = event
@ -2795,6 +2810,7 @@ export default {
} else {
this.pagination.pageIndex = 1
}
this.currentDirectory = decodeURIComponent(this.getQueryPath())
this.pageLoadCompleteList[this.pagination.pageIndex] = false
this.tableLoading = true
this.finished = false
@ -2942,6 +2958,7 @@ export default {
queryModifyEnd: this.filterOption.modifyEnd,
querySizeMin: this.filterOption.sizeMin,
querySizeMax: this.filterOption.sizeMax,
searchMount: this.filterOption.searchMount,
}).then(res => {
this.loadData(res, onLoad)
this.listModeSearch = true
@ -3016,6 +3033,7 @@ export default {
if (this.$route.query.keyword !== 'undefined') {
this.searchFileName = this.$route.query.keyword
}
this.searchInputBlur()
const searchPathIndex = this.pathList.findIndex(item => item.search)
if (this.$route.query.searchOpenFolder && searchPathIndex > -1) {
this.searchFileAndOpenDir(this.$route.query.searchOpenFolder, onLoad)
@ -3413,7 +3431,8 @@ export default {
this.menus = JSON.parse(JSON.stringify(this.singleMenus))
// 挂载的文件
const owner = localStorage.getItem('mountFileOwner')
if (this.$route.query.folder && owner) {
const notSelf = row.userId && row.userId !== this.$store.getters.userId
if ((this.$route.query.folder && owner) || notSelf) {
// 根据权限设置菜单
this.setMenusByPermission(row)
} else {
@ -3453,14 +3472,14 @@ export default {
)
this.shareToken = undefined
// 在download之前添加复制下载链接选项
this.addMenusCopyDownLoadLinks(downloadIndex)
if (row.isPrivacy) {
// 如果是私密分享需要先获取shareToken
api.generateShareToken({fileId: row.id}).then(res => {
this.shareToken = res.data
this.addMenusCopyDownLoadLinks(downloadIndex)
}).catch(() => {
this.menus.splice(downloadIndex, 1)
})
} else {
this.addMenusCopyDownLoadLinks(downloadIndex)
}
}
},
@ -3498,6 +3517,7 @@ export default {
},
// 鼠标右击
rowContextmenu(row) {
console.log('rowContextmenu', row, row.userId, this.$store.getters.userId)
if (this.selectFile) {
return
}
@ -3520,8 +3540,8 @@ export default {
this.menuTriangle = ''
const e = {}
e.pageX = event.pageX + 5
e.pageY = event.pageY + 2
e.clientX = event.clientX + 5
e.pageY = event.pageY + 20
e.clientX = event.clientX + 50
e.clientY = event.clientY + 2
this.$refs.contextShow.showMenu(e)
this.cellMouseIndex = -1
@ -4475,26 +4495,23 @@ export default {
this.fileHandler = {}
this.specifyPreviewer = 'office'
},
searchFilterChange(filterOption) {
this.filterOption = filterOption
let hasSearchFilterOption = false
if (filterOption.type !== 'all' && filterOption.type !== null) {
hasSearchFilterOption = true
}
if (filterOption.modifyStart !== null && filterOption.modifyEnd !== null) {
hasSearchFilterOption = true
}
if (filterOption.sizeMin !== null && filterOption.sizeMax !== null) {
hasSearchFilterOption = true
}
this.hasSearchFilterOption = hasSearchFilterOption
searchClose() {
this.searchFileName = ''
this.searchInputBlur()
this.searchFileEnter()
},
searchInputFocus() {
this.searchInputClass = 'search-input search-input-focus'
this.setInputFocus()
},
searchInputBlur() {
this.searchInputClass = this.searchFileName ? 'search-input search-input-focus' : 'search-input'
this.setInputBlur()
},
searchFilterChange() {
this.debounceSearch(this.searchFileName, false)
},
checkPreviewVisible() {
if (this.searchDialogVisible) {
return true
}
if (this.iframePreviewVisible) {
return true
}
@ -4757,14 +4774,38 @@ export default {
margin-top: 5px;
}
.search-input {
width: 150px;
transition: width 0.3s ease-in-out;
}
.search-input-focus {
width: 240px;
}
.search-close-btn {
padding: 4px;
color: #C0C4CC;
:hover {
color: #409EFF;
}
}
.search-option-btn {
padding: 8px;
padding: 4px;
margin-right: 4px;
color: #606266;
:hover {
color: #409EFF;
}
}
.search-option-btn-active {
padding: 8px;
background: #409EFF;
color: #fff;
:hover {
color: #fff;
}
}
</style>

View File

@ -29,19 +29,15 @@ export default {
},
// 预览文件的url
previewUrl: function(username, file, token, shareToken, serverUrl) {
let owner = null
if (username !== store.getters.name || localStorage.getItem('mountFileOwner') !== null) {
owner = localStorage.getItem('mountFileOwner')
} else {
owner = username
}
if (owner == null) {
owner = store.getters.name
}
let baseUrl = serverUrl || this.baseUrl
let fileUrl = `${baseUrl}/file/${owner}${encodeURI(file.path)}${encodeURI(file.name)}`
let fileUrl = `${baseUrl}/file/${store.getters.name}${encodeURI(file.path)}${encodeURI(file.name)}`
fileUrl = fileUrl.replaceAll('#', '%23')
fileUrl = fileUrl.replaceAll(/%5C/g, '/')
if (file.userId !== store.getters.userId) {
return `${baseUrl}/pre-file/${file.id}/${encodeURI(file.name)}?jmal-token=${token}&name=${username}`
}
if (token) {
return `${fileUrl}?jmal-token=${token}&name=${username}`
}