home/index.vue 提取公共代码
This commit is contained in:
jmal
parent
3dc510409a
commit
15bec9e5cc
103
src/components/Breadcrumb/BreadcrumbFilePath.vue
Normal file
103
src/components/Breadcrumb/BreadcrumbFilePath.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<span>
|
||||
<a v-if="strLength(item.folder) > 10">
|
||||
<el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
|
||||
<a v-if="pathList.length >= 7">
|
||||
<span v-if="index === pathList.length-6" class="redirect" > </span>
|
||||
<a v-if="index === pathList.length-6" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="pathList.length < 7">
|
||||
<a v-if="index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="index===pathList.length-2">
|
||||
<span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
<span v-if="strLength(item.folder) > 10 && !item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</a>
|
||||
<a v-if="strLength(item.folder) <= 10">
|
||||
<a v-if="pathList.length >= 7">
|
||||
<span v-if="index === pathList.length-6" class="redirect" > </span>
|
||||
<a v-if="index === pathList.length-6" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="pathList.length < 7">
|
||||
<a v-if="index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="index===pathList.length-2">
|
||||
<span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
<span v-if="strLength(item.folder) > 10 && !item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
</a>
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import { strlen, substring10 } from '@/utils/number'
|
||||
export default {
|
||||
name: 'BreadcrumbFilePath',
|
||||
props: {
|
||||
pathList: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ 'folder': '', index: 0 },
|
||||
{ 'folder': '+', index: 1 }
|
||||
]
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
strLength(str) {
|
||||
return strlen(str)
|
||||
},
|
||||
substring10(str) {
|
||||
return substring10(str)
|
||||
},
|
||||
handleLink(item, index) {
|
||||
this.$emit('clickLink',item, index)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.redirect {
|
||||
color: #97a8be;
|
||||
}
|
||||
.no-redirect {
|
||||
color: #000000;
|
||||
cursor: text;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/deep/ .el-breadcrumb__separator {
|
||||
margin: 0 0;
|
||||
font-weight: 700;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
font-size: 1rem;
|
||||
line-height: 46px;
|
||||
}
|
||||
</style>
|
||||
41
src/components/Icon/IconFile.vue
Normal file
41
src/components/Icon/IconFile.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<span>
|
||||
<svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
|
||||
<svg-icon v-if="item.isFolder" icon-class="folder" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
|
||||
<el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
|
||||
<svg-icon v-else icon-class="file" />
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'IconFile',
|
||||
props: {
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -4,29 +4,7 @@
|
||||
<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,index)"><svg-icon icon-class="home" style="font-size: 24px;"/></a>
|
||||
<a v-if="pathList.length >= 7">
|
||||
<span v-if="index === pathList.length-6" class="redirect" > </span>
|
||||
<a v-if="index === pathList.length-6" class="redirect" @click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" @click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
</el-tooltip>
|
||||
</a>
|
||||
<a v-if="pathList.length < 7">
|
||||
<a v-if="index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
|
||||
<a v-if="index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" @click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
</el-tooltip>
|
||||
</a>
|
||||
<a v-if="index===pathList.length-2">
|
||||
<span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
|
||||
<el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
|
||||
<span :title="item.folder" v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span>
|
||||
<span :title="item.folder" v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
<span :title="item.folder" v-if="strLength(item.folder) > 10 && !item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
</el-tooltip>
|
||||
</a>
|
||||
|
||||
<breadcrumb-file-path :pathList="pathList" :item="item" :index="index" @clickLink="handleLink"></breadcrumb-file-path>
|
||||
<el-popover
|
||||
v-if="index===pathList.length-1"
|
||||
v-model="isShowNewFolder"
|
||||
@ -140,17 +118,7 @@
|
||||
width="50"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-if="scope.row.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
|
||||
<svg-icon v-if="scope.row.isFolder" icon-class="folder" />
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('video') > -1" icon-class="video" />
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('audio') > -1" icon-class="audio" />
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('text') > -1" icon-class="file-txt" />
|
||||
<el-avatar v-else-if="scope.row.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+scope.row.id"></el-avatar>
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('word') > -1" icon-class="file-word" />
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('excel') > -1" icon-class="file-excel" />
|
||||
<svg-icon v-else-if="scope.row.contentType.indexOf('zip') > -1" icon-class="zip" />
|
||||
<svg-icon v-else icon-class="file" />
|
||||
<icon-file :item="scope.row" :image-url="imageUrl"></icon-file>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -254,17 +222,18 @@
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
// import MenuPopover from '@/components/popover/MenuPopover'
|
||||
import { mapGetters } from 'vuex'
|
||||
// import defaultSettings from '@/settings'
|
||||
import { getPath, getPathList, setPath, removePath } from '@/utils/path'
|
||||
import { strlen, substring10 } from '@/utils/number'
|
||||
import Bus from '@/assets/js/bus'
|
||||
import api from '@/api/upload-api'
|
||||
import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath";
|
||||
import IconFile from "../../components/Icon/IconFile";
|
||||
// import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
components: { },
|
||||
components: {IconFile, BreadcrumbFilePath},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
|
||||
@ -428,12 +397,6 @@ export default {
|
||||
userId: this.$store.state.user.userId
|
||||
})
|
||||
},
|
||||
strLength(str) {
|
||||
return strlen(str)
|
||||
},
|
||||
substring10(str) {
|
||||
return substring10(str)
|
||||
},
|
||||
handleLink(item, index) {
|
||||
if(item.search){
|
||||
if(item.searchKey){
|
||||
@ -453,6 +416,7 @@ export default {
|
||||
}
|
||||
})
|
||||
setPath(this.path, this.pathList)
|
||||
this.pagination.pageIndex = 1
|
||||
this.getFileList()
|
||||
}
|
||||
console.log("this.pathList:", this.pathList)
|
||||
@ -1052,6 +1016,7 @@ export default {
|
||||
item2['index'] = this.pathList.length
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
this.pagination.pageIndex = 1
|
||||
this.searchFileAndOpenDir(row)
|
||||
} else {
|
||||
this.path += '/' + row.name
|
||||
@ -1064,6 +1029,7 @@ export default {
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
setPath(this.path, this.pathList)
|
||||
this.pagination.pageIndex = 1
|
||||
this.getFileList()
|
||||
}
|
||||
} else {
|
||||
@ -1080,7 +1046,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
&-container {
|
||||
min-width: 960px;
|
||||
min-width: 500px;
|
||||
margin: 10px 10px 10px 15px;
|
||||
}
|
||||
&-text {
|
||||
|
||||
@ -8,35 +8,6 @@
|
||||
@load="getFileList(true)"
|
||||
@scroll="swipeUp"
|
||||
>
|
||||
<!-- <van-sticky :offset-top="0">
|
||||
<van-row class="classification">
|
||||
<van-col span="6" align="center">
|
||||
<svg-icon icon-class="image" />
|
||||
<div>图片</div>
|
||||
</van-col>
|
||||
<van-col span="6" align="center">
|
||||
<svg-icon icon-class="document" />
|
||||
<div>文档</div>
|
||||
</van-col>
|
||||
<van-col span="6" align="center">
|
||||
<svg-icon icon-class="video" />
|
||||
<div>视屏</div>
|
||||
</van-col>
|
||||
<van-col span="6" align="center">
|
||||
<svg-icon icon-class="audio" />
|
||||
<div>音乐</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</van-sticky> -->
|
||||
|
||||
<!--<van-nav-bar-->
|
||||
<!--v-if="pathList.length < 3"-->
|
||||
<!--:title="pathList[pathList.length-2].folder"-->
|
||||
<!--:left-text=""-->
|
||||
<!--right-text="选择"-->
|
||||
<!--left-arrow>-->
|
||||
<!--</van-nav-bar>-->
|
||||
|
||||
<van-sticky :offset-top="0">
|
||||
<!-- <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div> -->
|
||||
<van-nav-bar
|
||||
@ -75,17 +46,18 @@
|
||||
<!--<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>-->
|
||||
<van-row>
|
||||
<van-col span="4" align="center" class="list-cell-icon">
|
||||
<svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
|
||||
<svg-icon v-if="item.isFolder" icon-class="folder" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
|
||||
<el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
|
||||
<svg-icon v-else icon-class="file" />
|
||||
<!--<svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />-->
|
||||
<!--<svg-icon v-if="item.isFolder" icon-class="folder" />-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />-->
|
||||
<!--<el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />-->
|
||||
<!--<svg-icon v-else icon-class="file" />-->
|
||||
<icon-file :item="item" :image-url="imageUrl"></icon-file>
|
||||
</van-col>
|
||||
<van-col span="16" class="list-item-content">
|
||||
<van-col span="24">
|
||||
@ -152,8 +124,8 @@
|
||||
v-model="actionSheetShow"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
@cancel="onCancel">
|
||||
</van-action-sheet>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -177,8 +149,10 @@
|
||||
import { getPath, getPathList, setPath, removePath } from '@/utils/path'
|
||||
import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
|
||||
import api from '@/api/upload-api'
|
||||
import IconFile from "../../../components/Icon/IconFile";
|
||||
|
||||
export default {
|
||||
components: {IconFile},
|
||||
data() {
|
||||
return {
|
||||
test: 0,
|
||||
@ -508,7 +482,7 @@
|
||||
}
|
||||
|
||||
}
|
||||
.svg-icon {
|
||||
/deep/ .svg-icon {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user