jmal
GitHub
commit
2d40ee0f5b
@ -1,146 +1,469 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog style="{'font-weight': 600}" :show-close="false" :visible.sync="searchDialogVisible" @close="searchDialogClose">
|
||||
<div class="search-container">
|
||||
<div class="header column">
|
||||
header
|
||||
</div>
|
||||
<div class="operation column">
|
||||
operation
|
||||
</div>
|
||||
<div class="content column">
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div><div>
|
||||
content1
|
||||
</div><div>
|
||||
content1
|
||||
</div>
|
||||
<div>
|
||||
content1
|
||||
</div>
|
||||
<div
|
||||
v-show="dialogVisible"
|
||||
:show-close="false"
|
||||
custom-class="no-header-dialog"
|
||||
class="file-search-dialog">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="footer column">
|
||||
footer
|
||||
<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>
|
||||
</el-dialog>
|
||||
</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>
|
||||
|
||||
import IconFile from "@/components/Icon/IconFile";
|
||||
import Icon from "@/components/Icon/Icon.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "SearchDialog",
|
||||
components: {
|
||||
Icon,
|
||||
IconFile
|
||||
},
|
||||
name: 'SearchDialog',
|
||||
props: {
|
||||
status: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
keyword: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
|
||||
audioCoverUrl: `${process.env.VUE_APP_BASE_API}/view/cover?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
|
||||
searchDialogVisible: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
status(visible) {
|
||||
if (visible) {
|
||||
this.searchDialogVisible = true
|
||||
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: {
|
||||
searchDialogClose() {
|
||||
this.$emit('update:status', this.searchDialogVisible)
|
||||
// 更新筛选条件并通知父组件
|
||||
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 {
|
||||
|
||||
>>> .el-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
max-width: 460px;
|
||||
|
||||
.el-dialog__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.column {
|
||||
padding: 20px;
|
||||
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>
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
slot="reference"
|
||||
:name="''"
|
||||
@click.native="upload"
|
||||
style="margin-right: 5px"
|
||||
style="margin-right: 10px"
|
||||
></button-upload>
|
||||
</el-popover>
|
||||
|
||||
@ -161,16 +161,24 @@
|
||||
ref="searchInput"
|
||||
placeholder="搜索"
|
||||
v-model="searchFileName"
|
||||
:clearable="true"
|
||||
@keyup.enter.native="searchFileEnter(searchFileName)"
|
||||
@focus="setInputFocus"
|
||||
@input="searchFileEnter(searchFileName)"
|
||||
@blur="setInputBlur()"
|
||||
@clear="searchFileEnter(searchFileName)"
|
||||
>
|
||||
<el-button slot="prepend" @click="searchFileEnter(searchFileName)">
|
||||
<svg-icon icon-class="search" style="font-size: 22px" />
|
||||
</el-button>
|
||||
<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>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown
|
||||
size="medium"
|
||||
@ -468,6 +476,7 @@
|
||||
<!--grid布局-->
|
||||
<div
|
||||
v-show="grid"
|
||||
ref="gridDiv"
|
||||
v-loading="tableLoading"
|
||||
element-loading-text="文件加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
@ -494,7 +503,6 @@
|
||||
>
|
||||
<van-grid-item
|
||||
v-for="(item, index) in fileList"
|
||||
ref="gridItem"
|
||||
:key="item.id"
|
||||
:title="
|
||||
'大小：' +
|
||||
@ -819,8 +827,6 @@
|
||||
</el-dialog>
|
||||
|
||||
<file-clipboard ref="fileClipboard" v-if="showClipboard && fileClipboard.length > 0" :file-list="fileClipboard" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" :target-path="path" :target-folder="currentFolder" @onCopy="onCopy" @onMove="onMove"></file-clipboard>
|
||||
|
||||
<search-dialog :status.sync="searchDialogVisible"></search-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1155,6 +1161,8 @@ export default {
|
||||
debounceSearch: null,// 搜索防抖
|
||||
debounceGetFileList: null,// 获取文件列表防抖
|
||||
searchDialogVisible: false,
|
||||
filterOption: {}, // 搜索选项
|
||||
hasSearchFilterOption: false, // 是否有搜索选项
|
||||
fileUsername: '', // 一般用于挂载文件
|
||||
}
|
||||
},
|
||||
@ -1175,6 +1183,16 @@ export default {
|
||||
return '名称'
|
||||
}
|
||||
},
|
||||
searchOptionBtnClass() {
|
||||
if (this.hasSearchFilterOption) {
|
||||
return 'search-option-btn search-option-btn-active'
|
||||
} else {
|
||||
return 'search-option-btn'
|
||||
}
|
||||
},
|
||||
cmdKey() {
|
||||
return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
|
||||
},
|
||||
fileClipboard() {
|
||||
return store.getters.fileClipboard
|
||||
},
|
||||
@ -1493,12 +1511,10 @@ export default {
|
||||
event.stopPropagation()
|
||||
}
|
||||
// ctrl + P / cmd + P
|
||||
// if (isCmd && keyCode === 80) {
|
||||
// if (!this.inputting && this.editingIndex === -1) {
|
||||
// this.searchDialogVisible = true
|
||||
// event.preventDefault()
|
||||
// event.stopPropagation()
|
||||
// }
|
||||
// if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
|
||||
// this.searchDialogVisible = true
|
||||
// event.preventDefault()
|
||||
// event.stopPropagation()
|
||||
// }
|
||||
},
|
||||
keyup(event) {
|
||||
@ -1628,11 +1644,10 @@ export default {
|
||||
},
|
||||
// 画矩形选区
|
||||
darwRectangle() {
|
||||
let scrollDiv = document.querySelector('.el-table__body-wrapper')
|
||||
let scrollDiv = this.$refs.fileListTableContainer.querySelector('.el-table__body-wrapper')
|
||||
if (this.grid) {
|
||||
scrollDiv = document.querySelector('.van-grid')
|
||||
scrollDiv = this.$refs.gridDiv.querySelector('.van-grid')
|
||||
}
|
||||
|
||||
// 添加scroll事件
|
||||
scrollDiv.onscroll = e => {
|
||||
this.tableBodyScroll(null, e)
|
||||
@ -2918,10 +2933,15 @@ export default {
|
||||
tagId: this.$route.query.tagId,
|
||||
isFolder: this.queryCondition.isFolder,
|
||||
isFavorite: this.queryCondition.isFavorite,
|
||||
queryFileType: this.queryFileType,
|
||||
queryFileType: this.filterOption.type || this.queryFileType,
|
||||
pageIndex: this.pagination.pageIndex,
|
||||
pageSize: this.pagination.pageSize,
|
||||
showFolderSize: localStorage.getItem('showFolderSize'),
|
||||
type: this.filterOption.type,
|
||||
queryModifyStart: this.filterOption.modifyStart,
|
||||
queryModifyEnd: this.filterOption.modifyEnd,
|
||||
querySizeMin: this.filterOption.sizeMin,
|
||||
querySizeMax: this.filterOption.sizeMax,
|
||||
}).then(res => {
|
||||
this.loadData(res, onLoad)
|
||||
this.listModeSearch = true
|
||||
@ -4455,7 +4475,26 @@ 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
|
||||
|
||||
this.debounceSearch(this.searchFileName, false)
|
||||
},
|
||||
checkPreviewVisible() {
|
||||
if (this.searchDialogVisible) {
|
||||
return true
|
||||
}
|
||||
if (this.iframePreviewVisible) {
|
||||
return true
|
||||
}
|
||||
@ -4718,4 +4757,14 @@ export default {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.search-option-btn {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.search-option-btn-active {
|
||||
padding: 8px;
|
||||
background: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -16,6 +16,77 @@ body {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.time-filter-dropdown {
|
||||
min-width: 280px;
|
||||
padding: 15px;
|
||||
|
||||
.time-picker-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.time-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.el-button {
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
flex: 1 0 calc(33% - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-date-range {
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
padding-top: 10px;
|
||||
|
||||
.date-range-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.modern-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size-filter-dropdown {
|
||||
min-width: 280px;
|
||||
padding: 15px;
|
||||
|
||||
.size-slider-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.size-slider-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.size-slider-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button {
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>>>::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 12px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user