添加文件搜索功能
This commit is contained in:
jmal
parent
60ebb70bc1
commit
95b7136f2d
@ -65,6 +65,22 @@ export default {
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 搜索文件🔍
|
||||
searchFile: function(params) {
|
||||
return request({
|
||||
url: 'search-file',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 搜索文件🔍
|
||||
searchFileAndOpenDir: function(params) {
|
||||
return request({
|
||||
url: 'search-file-open',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg t="1581426219746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22333" width="200" height="200"><path d="M475.664516 328.670968h-3.303226c-1.651613 0-3.303226 0-4.954838 1.651613-4.954839 23.122581-1.651613 47.896774 8.258064 69.367742 6.606452-23.122581 8.258065-47.896774 0-71.019355z m9.909678 196.541935l-1.651613 3.303226-1.651613-1.651613c-11.56129 31.380645-26.425806 62.76129-41.290323 92.490323l3.303226-1.651613v3.303226c29.729032-11.56129 61.109677-19.819355 92.490323-26.425807l-1.651613-1.651613h3.303225c-18.167742-21.470968-36.335484-44.593548-52.851612-67.716129zM295.63871 734.967742l3.303225-1.651613c18.167742-6.606452 34.683871-19.819355 44.593549-37.987097-19.819355 8.258065-34.683871 21.470968-47.896774 39.63871z m374.916129-138.735484c-11.56129 0-23.122581 0-34.683871 3.303226 13.212903 6.606452 26.425806 9.909677 41.290322 11.56129 9.909677 1.651613 19.819355 0 26.425807-3.303226-1.651613-4.954839-6.606452-11.56129-33.032258-11.56129zM733.316129 16.516129h-545.032258c-46.245161 0-82.580645 36.335484-82.580645 82.580645v825.806452c0 46.245161 36.335484 82.580645 82.580645 82.580645h644.129032c46.245161 0 82.580645-36.335484 82.580645-82.580645V198.193548l-181.677419-181.677419z m9.909677 587.974194c0 46.245161-44.593548 46.245161-67.716129 46.245161-36.335484-1.651613-72.670968-16.516129-100.748387-41.290323-56.154839 11.56129-109.006452 29.729032-161.858064 51.2-41.290323 74.322581-80.929032 112.309677-115.612903 112.309678-6.606452 0-14.864516-1.651613-19.819355-4.954839-14.864516-6.606452-23.122581-21.470968-23.122581-36.335484 0-11.56129 3.303226-46.245161 132.129032-102.4 29.729032-52.851613 52.851613-110.658065 71.019355-168.464516-16.516129-33.032258-51.2-112.309677-26.425806-153.6 8.258065-14.864516 24.774194-23.122581 41.290322-21.470968 13.212903 0 26.425806 6.606452 34.683871 18.167742 18.167742 24.774194 16.516129 75.974194-6.606451 151.948387 21.470968 41.290323 49.548387 77.625806 84.232258 109.006452 28.077419-4.954839 56.154839-9.909677 85.883871-9.909678 64.412903 3.303226 74.322581 33.032258 72.670967 49.548388z" fill="#FF5B5A" p-id="22334"></path><path d="M736.619355 14.864516h-3.303226v132.129032c0 16.516129 8.258065 52.851613 57.806452 52.851613h127.174193L736.619355 14.864516z" fill="#FFADAD" p-id="22335"></path></svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
1
src/icons/svg/search.svg
Normal file
1
src/icons/svg/search.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1581835595637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18798" width="32" height="32"><path d="M694.3 430.2c0-65.6-22.3-126.1-59.7-174.3 29.5 83.1-28.6 245-95.7 308.9-74.6 71.1-223.2 120.8-303 91.7 48.1 36.9 108.1 58.9 173.2 58.9 157.3-0.1 285.2-128 285.2-285.2z" fill="#FFD524" p-id="18799"></path><path d="M951.6 893L740.4 681.8c-11.7-11.7-30.6-11.7-42.3 0-11.7 11.7-11.7 30.6 0 42.3l211.2 211.2c5.8 5.8 13.5 8.8 21.1 8.8 7.7 0 15.3-2.9 21.1-8.8 11.8-11.7 11.8-30.6 0.1-42.3zM409.1 85.2c-38.5 0-76.3 6.3-112.3 18.7-15.6 5.4-23.9 22.4-18.5 38s22.4 23.9 38 18.5c29.8-10.3 61-15.5 92.9-15.5 91.6 0 173.2 43.5 225.4 110.9 37.4 48.2 59.7 108.7 59.7 174.3 0 157.2-127.9 285.2-285.2 285.2-65.1 0-125.2-22-173.2-58.9-68-52.1-111.9-134.1-111.9-226.2 0-55.1 15.7-108.5 45.4-154.5 9-13.9 5-32.4-8.9-41.3-13.9-9-32.4-5-41.3 8.9-36 55.7-55 120.3-55 186.9 0 190.2 154.7 344.9 344.9 344.9S754 620.4 754 430.2s-154.7-345-344.9-345z" fill="#333333" p-id="18800"></path><path d="M204.2 220.8c6.9 0 13.8-2.4 19.4-7.2 5-4.2 10.1-8.4 15.4-12.3 13.2-9.9 16-28.6 6.1-41.8-9.9-13.3-28.6-16-41.8-6.1-6.4 4.8-12.6 9.8-18.6 14.9-12.5 10.7-14 29.6-3.2 42.1 5.9 6.8 14.3 10.4 22.7 10.4z" fill="#333333" p-id="18801"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -3,9 +3,9 @@
|
||||
<el-breadcrumb class="app-breadcrumb" separator="">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in pathList" :key="item.index">
|
||||
<a v-if="index===0" @click.prevent="handleLink(item.folder,index)"><svg-icon icon-class="home" /></a>
|
||||
<a v-if="index===0" @click.prevent="handleLink(item,index)"><svg-icon icon-class="home" /></a>
|
||||
<span v-if="index===pathList.length-2" class="no-redirect">{{ item.folder }}</span>
|
||||
<a v-if="index!==pathList.length-2 && index!==pathList.length-1" class="redirect" @click.prevent="handleLink(item.folder,index)">{{ item.folder }}<svg-icon style="font-size: 20px;" icon-class="breadcrumb-right" /></a>
|
||||
<a v-if="index!==pathList.length-2 && index!==pathList.length-1" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 20px;" icon-class="breadcrumb-right" /></a>
|
||||
<el-popover
|
||||
v-if="index===pathList.length-1"
|
||||
v-model="isShowNewFolder"
|
||||
@ -48,6 +48,13 @@
|
||||
</el-popover>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
<div class="search-content">
|
||||
<el-input placeholder="搜索您的文件" class="searchClass" v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
|
||||
<el-button slot="append" @click="searchFile(searchFileName)">
|
||||
<svg-icon icon-class="search" />
|
||||
</el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-breadcrumb>
|
||||
|
||||
<e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
|
||||
@ -73,7 +80,8 @@
|
||||
</ul>
|
||||
</e-vue-contextmenu>
|
||||
|
||||
<!--<div class="dashboard-text">path: {{ path }}</div>-->
|
||||
<div class="dashboard-text">path: {{ path }}</div>
|
||||
|
||||
|
||||
<el-table
|
||||
ref="fileListTable"
|
||||
@ -235,8 +243,10 @@ export default {
|
||||
path: getPath(),
|
||||
showNewFolder: false,
|
||||
isShowNewFolder: false,
|
||||
listModeSearch: false,
|
||||
newFolderName: '新建文件夹',
|
||||
renameFileName: '',
|
||||
searchFileName: '',
|
||||
pathList: [
|
||||
{ 'folder': '', index: 0 },
|
||||
{ 'folder': '+', index: 1 }
|
||||
@ -382,20 +392,28 @@ export default {
|
||||
})
|
||||
},
|
||||
handleLink(item, index) {
|
||||
this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
|
||||
this.pathList.forEach((p, number) => {
|
||||
if (number === 0) {
|
||||
this.path = ''
|
||||
} else if (number === this.pathList.length - 1) {
|
||||
} else {
|
||||
this.path += '/' + this.pathList[number].folder
|
||||
if(item.search){
|
||||
if(item.searchKey){
|
||||
this.searchFileByKeyWord(item.searchKey)
|
||||
} else if(item.fileId){
|
||||
this.searchFileAndOpenDir(item.fileId)
|
||||
}
|
||||
})
|
||||
setPath(this.path, this.pathList)
|
||||
this.getFileList()
|
||||
this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
|
||||
} else {
|
||||
this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
|
||||
this.pathList.forEach((p, number) => {
|
||||
if (number === 0) {
|
||||
this.path = ''
|
||||
} else if (number === this.pathList.length - 1) {
|
||||
} else {
|
||||
this.path += '/' + this.pathList[number].folder
|
||||
}
|
||||
})
|
||||
setPath(this.path, this.pathList)
|
||||
this.getFileList()
|
||||
}
|
||||
},
|
||||
newFolder() {
|
||||
console.log(879)
|
||||
this.newFolderName = '新建文件夹'
|
||||
let append = 0
|
||||
let filenameList = []
|
||||
@ -455,6 +473,56 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
searchFileByKeyWord(key) {
|
||||
this.searchFile(key)
|
||||
},
|
||||
searchFile(key) {
|
||||
if(key){
|
||||
|
||||
this.pathList = [{ 'folder': '', index: 0 }]
|
||||
const item1 = {}
|
||||
item1['folder'] = '搜索: ' + '"'+ key +'"'
|
||||
item1['search'] = true
|
||||
item1['searchKey'] = key
|
||||
item1['index'] = 1
|
||||
const item2 = {}
|
||||
item2['folder'] = '+'
|
||||
item2['index'] = 2
|
||||
this.pathList.push(item1)
|
||||
this.pathList.push(item2)
|
||||
|
||||
this.tableLoading = true
|
||||
api.searchFile({
|
||||
userId: this.$store.state.user.userId,
|
||||
keyword: key,
|
||||
currentDirectory: getPath(),
|
||||
pageIndex: 1,
|
||||
pageSize: 30
|
||||
}).then(res => {
|
||||
this.fileList = res.data
|
||||
this.tableLoading = false
|
||||
this.clientHeight = document.documentElement.clientHeight - 150
|
||||
this.listModeSearch = true
|
||||
}).catch(e => {})
|
||||
}else{
|
||||
this.handleLink('',0)
|
||||
}
|
||||
},
|
||||
searchFileAndOpenDir(fileId) {
|
||||
this.tableLoading = true
|
||||
api.searchFileAndOpenDir({
|
||||
userId: this.$store.state.user.userId,
|
||||
id: fileId,
|
||||
currentDirectory: getPath(),
|
||||
pageIndex: 1,
|
||||
pageSize: 30
|
||||
}).then(res => {
|
||||
this.fileList = res.data
|
||||
this.tableLoading = false
|
||||
this.clientHeight = document.documentElement.clientHeight - 150
|
||||
this.listModeSearch = true
|
||||
}).catch(e => {})
|
||||
},
|
||||
getFileList() {
|
||||
this.tableLoading = true
|
||||
api.fileList({
|
||||
@ -466,6 +534,7 @@ export default {
|
||||
this.fileList = res.data
|
||||
this.tableLoading = false
|
||||
this.clientHeight = document.documentElement.clientHeight - 150
|
||||
this.listModeSearch = false
|
||||
}).catch(e => {})
|
||||
},
|
||||
getSummaries(param) {
|
||||
@ -895,21 +964,36 @@ export default {
|
||||
fileClick(row) {
|
||||
console.log(row)
|
||||
if (row.isFolder) {
|
||||
// 打开文件
|
||||
this.path += '/' + row.name
|
||||
// 打开文件夹
|
||||
if (this.listModeSearch) {
|
||||
|
||||
const item1 = {}
|
||||
item1['folder'] = row.name
|
||||
item1['index'] = this.pathList.length - 1
|
||||
const item1 = {}
|
||||
item1['folder'] = row.name
|
||||
item1['search'] = true
|
||||
item1['fileId'] = row.id
|
||||
item1['index'] = this.pathList.length - 1
|
||||
const item2 = {}
|
||||
item2['folder'] = '+'
|
||||
item2['index'] = this.pathList.length
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
|
||||
const item2 = {}
|
||||
item2['folder'] = '+'
|
||||
item2['index'] = this.pathList.length
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
setPath(this.path, this.pathList)
|
||||
this.getFileList()
|
||||
this.searchFileAndOpenDir(row.id)
|
||||
} else {
|
||||
this.path += '/' + row.name
|
||||
const item1 = {}
|
||||
item1['folder'] = row.name
|
||||
item1['index'] = this.pathList.length - 1
|
||||
const item2 = {}
|
||||
item2['folder'] = '+'
|
||||
item2['index'] = this.pathList.length
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
setPath(this.path, this.pathList)
|
||||
this.getFileList()
|
||||
}
|
||||
} else {
|
||||
// 打开文件
|
||||
const fileIds = [row.id]
|
||||
const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
||||
window.open(url, '_blank')
|
||||
@ -1104,5 +1188,10 @@ export default {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.searchClass{
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user