mirror of
https://github.com/eyebluecn/tank-front
synced 2024-04-21 12:31:55 +00:00
Finish the breadcrumbs.
This commit is contained in:
+60
-60
@@ -1,58 +1,58 @@
|
||||
<template>
|
||||
|
||||
<div id="body">
|
||||
<div id="body">
|
||||
|
||||
<div>
|
||||
<SideNavigation/>
|
||||
<div id="page-wrapper" :class="{'show-drawer':$store.state.config.showDrawer}" @click="blankClick">
|
||||
<div>
|
||||
<div>
|
||||
<SideNavigation/>
|
||||
<div id="page-wrapper" :class="{'show-drawer':$store.state.config.showDrawer}" @click="blankClick">
|
||||
<div>
|
||||
|
||||
<div class="mb10">
|
||||
<div class="mb10">
|
||||
|
||||
<router-link to="/" v-if="$store.state.breadcrumbs && $store.state.breadcrumbs.length">
|
||||
<i class="fa fa-home f16"></i>
|
||||
</router-link>
|
||||
<router-link to="/" v-if="$store.state.breadcrumbs && $store.state.breadcrumbs.length">
|
||||
<i class="fa fa-home f16"></i>
|
||||
</router-link>
|
||||
|
||||
<span v-for="b in $store.state.breadcrumbs">
|
||||
<span v-for="b in $store.state.breadcrumbs">
|
||||
<span>/</span>
|
||||
<router-link v-if="b.name !== $store.state.route.name" :to="b">
|
||||
<router-link v-if="(b.name || b.path) && b.name !== $store.state.route.name" :to="b">
|
||||
{{b.title}}
|
||||
</router-link>
|
||||
<span v-if="b.name === $store.state.route.name">
|
||||
<span v-else>
|
||||
{{b.title}}
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<TopNavigation/>
|
||||
</div>
|
||||
<TopNavigation/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Notification } from 'element-ui'
|
||||
import {Notification} from 'element-ui'
|
||||
import SideNavigation from './layout/SideNavigation.vue'
|
||||
import TopNavigation from './layout/TopNavigation.vue'
|
||||
import enquire from 'enquire.js/dist/enquire'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
member: this.$store.state.member
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
config () {
|
||||
config() {
|
||||
return this.$store.state.config
|
||||
}
|
||||
},
|
||||
@@ -61,14 +61,14 @@
|
||||
TopNavigation
|
||||
},
|
||||
methods: {
|
||||
blankClick () {
|
||||
blankClick() {
|
||||
if (this.config.mobile) {
|
||||
if (this.config.showDrawer) {
|
||||
this.$store.state.config.showDrawer = false
|
||||
}
|
||||
}
|
||||
},
|
||||
listenResponsiveEvent () {
|
||||
listenResponsiveEvent() {
|
||||
let that = this
|
||||
enquire.register('(max-width: 768px)', {
|
||||
match: function () {
|
||||
@@ -81,10 +81,10 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
let that = this
|
||||
this.$store.state.environment = 'backyard'
|
||||
this.listenResponsiveEvent()
|
||||
@@ -93,47 +93,47 @@
|
||||
</script>
|
||||
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
@import "../assets/css/global/variables";
|
||||
@import "../assets/css/global/variables";
|
||||
|
||||
#page-wrapper {
|
||||
#page-wrapper {
|
||||
|
||||
position: fixed;
|
||||
left: @sidebar-width;
|
||||
top: @top-navigation-height;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
left: @sidebar-width;
|
||||
top: @top-navigation-height;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
|
||||
background-color: #f3f3f4;
|
||||
background-color: #f3f3f4;
|
||||
|
||||
//大屏幕
|
||||
@media (min-width: @screen-sm-min) {
|
||||
left: @sidebar-width;
|
||||
}
|
||||
//小屏幕
|
||||
@media (max-width: @screen-xs-max) {
|
||||
left: 0;
|
||||
}
|
||||
//大屏幕
|
||||
@media (min-width: @screen-sm-min) {
|
||||
left: @sidebar-width;
|
||||
}
|
||||
//小屏幕
|
||||
@media (max-width: @screen-xs-max) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.show-drawer {
|
||||
//大屏幕
|
||||
@media (min-width: @screen-sm-min) {
|
||||
left: @sidebar-width;
|
||||
}
|
||||
&.show-drawer {
|
||||
//大屏幕
|
||||
@media (min-width: @screen-sm-min) {
|
||||
left: @sidebar-width;
|
||||
}
|
||||
|
||||
//小屏幕
|
||||
@media (max-width: @screen-xs-max) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
//小屏幕
|
||||
@media (max-width: @screen-xs-max) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -43,8 +43,11 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//当前文件夹信息。
|
||||
matter: new Matter(),
|
||||
pager: new Pager(Matter, 50),
|
||||
user: this.$store.state.user
|
||||
user: this.$store.state.user,
|
||||
breadcrumbs: this.$store.state.breadcrumbs
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -67,15 +70,90 @@
|
||||
this.refresh()
|
||||
},
|
||||
refresh() {
|
||||
|
||||
//刷新面包屑
|
||||
this.refreshBreadcrumbs()
|
||||
|
||||
this.pager.httpFastPage();
|
||||
},
|
||||
goToDirectory(uuid) {
|
||||
this.pager.setFilterValue("puuid", uuid)
|
||||
this.search()
|
||||
this.refreshBreadcrumbs()
|
||||
},
|
||||
refreshBreadcrumbs() {
|
||||
|
||||
let that = this
|
||||
|
||||
let uuid = that.pager.getFilterValue("puuid")
|
||||
|
||||
|
||||
//根目录简单处理即可。
|
||||
if (!uuid || uuid === "root") {
|
||||
that.breadcrumbs.splice(0, that.breadcrumbs.length);
|
||||
that.breadcrumbs.push({
|
||||
title: '全部文件'
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
this.matter.uuid = uuid
|
||||
this.matter.httpDetail(function () {
|
||||
|
||||
let arr = []
|
||||
let cur = that.matter.parent
|
||||
while (cur) {
|
||||
arr.push(cur)
|
||||
cur = cur.parent;
|
||||
}
|
||||
|
||||
that.breadcrumbs.splice(0, that.breadcrumbs.length);
|
||||
let query = that.pager.getParams()
|
||||
query["puuid"] = "root"
|
||||
query["_t"] = new Date().getTime()
|
||||
that.breadcrumbs.push({
|
||||
title: '全部文件',
|
||||
path: '/matter/list',
|
||||
query: query
|
||||
})
|
||||
|
||||
for (let i = arr.length - 1; i >= 0; i--) {
|
||||
let m = arr[i]
|
||||
let query = that.pager.getParams()
|
||||
query["puuid"] = m.uuid
|
||||
query["_t"] = new Date().getTime()
|
||||
that.breadcrumbs.push({
|
||||
title: m.name,
|
||||
path: '/matter/list',
|
||||
query: query
|
||||
})
|
||||
}
|
||||
|
||||
//第一个文件
|
||||
that.breadcrumbs.push({
|
||||
title: that.matter.name
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'(newVal, oldVal) {
|
||||
|
||||
let puuid = this.$route.query.puuid
|
||||
if (puuid) {
|
||||
this.pager.setFilterValue("puuid", puuid)
|
||||
} else {
|
||||
this.pager.setFilterValue("puuid", "root")
|
||||
}
|
||||
|
||||
this.refresh()
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
@@ -83,9 +161,17 @@
|
||||
|
||||
let that = this
|
||||
this.pager.enableHistory();
|
||||
this.pager.setFilterValue("puuid", "root")
|
||||
|
||||
let puuid = this.$route.query.puuid
|
||||
if (puuid) {
|
||||
this.pager.setFilterValue("puuid", puuid)
|
||||
} else {
|
||||
this.pager.setFilterValue("puuid", "root")
|
||||
}
|
||||
|
||||
this.refresh();
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -250,7 +250,7 @@
|
||||
cancelButtonText: '关闭',
|
||||
callback: (action, instance) => {
|
||||
if (action === 'confirm') {
|
||||
that.matter.httpMatterMove(that.moveUuids.join(','), that.destMatter.uuid, function (response) {
|
||||
that.matter.httpMove(that.moveUuids.join(','), that.destMatter.uuid, function (response) {
|
||||
Message.success('移动成功!')
|
||||
that.refresh()
|
||||
})
|
||||
@@ -299,7 +299,7 @@
|
||||
uuids += i.uuid
|
||||
}
|
||||
})
|
||||
that.matter.httpMatterDeleteBatch(uuids, function (response) {
|
||||
that.matter.httpDeleteBatch(uuids, function (response) {
|
||||
Message.success('删除成功!')
|
||||
that.refresh()
|
||||
}, function (response) {
|
||||
@@ -343,7 +343,7 @@
|
||||
let that = this
|
||||
let puuid = this.matter.uuid //父级uuid
|
||||
row.loading = true
|
||||
row.httpMatterCreateDirectory(this.currentUser.uuid, puuid, function (response) {
|
||||
row.httpCreateDirectory(this.currentUser.uuid, puuid, function (response) {
|
||||
Message.success('创建文件夹成功!')
|
||||
row.newFolderStatus = false
|
||||
}, function (response) {
|
||||
@@ -393,7 +393,7 @@
|
||||
if (row.renameStatus) {
|
||||
let that = this
|
||||
row.name = $('#modify').val()
|
||||
row.httpMatterRename(function (response) {
|
||||
row.httpRename(function (response) {
|
||||
Message.success('重命名成功!')
|
||||
row.renameStatus = false
|
||||
}, function (response) {
|
||||
@@ -416,7 +416,7 @@
|
||||
type: 'warning',
|
||||
callback: function (action, instance) {
|
||||
if (action === 'confirm') {
|
||||
row.httpMatterDelete(function (response) {
|
||||
row.httpDelete(function (response) {
|
||||
Message.success('删除成功!')
|
||||
that.refresh()
|
||||
})
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
uuids += i.uuid
|
||||
}
|
||||
})
|
||||
that.matter.httpMatterDeleteBatch(uuids, function (response) {
|
||||
that.matter.httpDeleteBatch(uuids, function (response) {
|
||||
Message.success('删除成功!')
|
||||
that.refresh()
|
||||
}, function (response) {
|
||||
@@ -256,7 +256,7 @@
|
||||
if (row.renameStatus) {
|
||||
let that = this
|
||||
row.name = $('#modify').val()
|
||||
row.httpMatterRename(function (response) {
|
||||
row.httpRename(function (response) {
|
||||
Message.success('重命名成功!')
|
||||
row.renameStatus = false
|
||||
}, function (response) {
|
||||
@@ -281,7 +281,7 @@
|
||||
type: 'warning',
|
||||
callback: function (action, instance) {
|
||||
if (action === 'confirm') {
|
||||
row.httpMatterDelete(function (response) {
|
||||
row.httpDelete(function (response) {
|
||||
Message.success('删除成功!')
|
||||
that.refresh()
|
||||
})
|
||||
|
||||
@@ -56,7 +56,6 @@
|
||||
},
|
||||
methods: {
|
||||
clickRow() {
|
||||
console.log("click name?")
|
||||
let that = this
|
||||
if (this.matter.dir) {
|
||||
this.$emit("goToDirectory", that.matter.uuid)
|
||||
|
||||
@@ -99,7 +99,7 @@ export default class BaseEntity extends Base {
|
||||
let that = this
|
||||
if (!this.uuid) {
|
||||
|
||||
this.errorMessage = '没有详情!'
|
||||
this.errorMessage = '没有定义uui,没有详情!'
|
||||
|
||||
this.defaultErrorHandler(this.errorMessage, errorCallback)
|
||||
|
||||
|
||||
@@ -129,6 +129,39 @@ export default class Pager extends Base {
|
||||
}
|
||||
};
|
||||
|
||||
//根据一个key来获取某个filter
|
||||
getFilterValue(key) {
|
||||
let filter = this.getFilter(key)
|
||||
if (!filter) {
|
||||
return null
|
||||
} else {
|
||||
return filter.getParam()
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//获取所有的filter参数,键值对形式
|
||||
getParams() {
|
||||
|
||||
let params = {
|
||||
page: this.page,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
if (!this.FILTERS || !this.FILTERS.length) {
|
||||
return params
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.FILTERS.length; i++) {
|
||||
let filter = this.FILTERS[i]
|
||||
|
||||
if (filter.getParam() !== null && filter.getParam() !== '') {
|
||||
params[filter.key] = filter.getParam()
|
||||
}
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
//获取当前pager中的list
|
||||
getList() {
|
||||
return this.data
|
||||
@@ -220,18 +253,7 @@ export default class Pager extends Base {
|
||||
this.pageSize = 10
|
||||
}
|
||||
|
||||
let params = {
|
||||
page: this.page,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.FILTERS.length; i++) {
|
||||
let filter = this.FILTERS[i]
|
||||
|
||||
if (filter.getParam() !== null && filter.getParam() !== '') {
|
||||
params[filter.key] = filter.getParam()
|
||||
}
|
||||
}
|
||||
let params = this.getParams()
|
||||
|
||||
this.httpCustomPage(this.URL_PAGE, params, successCallback, errorCallback)
|
||||
|
||||
|
||||
@@ -79,7 +79,7 @@ export default class Matter extends BaseEntity {
|
||||
|
||||
|
||||
|
||||
httpMatterCreateDirectory(userUuid, puuid, successCallback, errorCallback) {
|
||||
httpCreateDirectory(userUuid, puuid, successCallback, errorCallback) {
|
||||
let that = this
|
||||
let form = {'userUuid': userUuid, 'name': this.name}
|
||||
if (puuid) {
|
||||
@@ -93,19 +93,19 @@ export default class Matter extends BaseEntity {
|
||||
}, errorCallback)
|
||||
}
|
||||
|
||||
httpMatterDelete(successCallback, errorCallback) {
|
||||
httpDelete(successCallback, errorCallback) {
|
||||
this.httpPost(Matter.URL_MATTER_DELETE, {'uuid': this.uuid}, function (response) {
|
||||
typeof successCallback === 'function' && successCallback(response)
|
||||
}, errorCallback)
|
||||
}
|
||||
|
||||
httpMatterDeleteBatch(uuids, successCallback, errorCallback) {
|
||||
httpDeleteBatch(uuids, successCallback, errorCallback) {
|
||||
this.httpPost(Matter.URL_MATTER_DELETE_BATCH, {'uuids': uuids}, function (response) {
|
||||
typeof successCallback === 'function' && successCallback(response)
|
||||
}, errorCallback)
|
||||
}
|
||||
|
||||
httpMatterRename(successCallback, errorCallback) {
|
||||
httpRename(successCallback, errorCallback) {
|
||||
let that = this
|
||||
this.httpPost(Matter.URL_MATTER_RENAME, {'uuid': this.uuid, 'name': this.name}, function (response) {
|
||||
that.render(response.data.data)
|
||||
@@ -113,7 +113,7 @@ export default class Matter extends BaseEntity {
|
||||
}, errorCallback)
|
||||
}
|
||||
|
||||
httpMatterMove(srcUuids, destUuid, successCallback, errorCallback) {
|
||||
httpMove(srcUuids, destUuid, successCallback, errorCallback) {
|
||||
let form = {'srcUuids': srcUuids}
|
||||
if (destUuid) {
|
||||
form.destUuid = destUuid
|
||||
@@ -125,7 +125,7 @@ export default class Matter extends BaseEntity {
|
||||
}, errorCallback)
|
||||
}
|
||||
|
||||
httpMatterDownload(successCallback, errorCallback) {
|
||||
httpDownload(successCallback, errorCallback) {
|
||||
this.httpPost(Matter.URL_MATTER_DOWNLOAD, {'uuid': this.uuid}, function (response) {
|
||||
typeof successCallback === 'function' && successCallback(response)
|
||||
}, errorCallback)
|
||||
|
||||
@@ -209,7 +209,8 @@ const router = new Router({
|
||||
{
|
||||
name: 'PreferenceIndex',
|
||||
title: '网站偏好'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'PreferenceEdit',
|
||||
title: '网站偏好设置'
|
||||
}
|
||||
@@ -224,11 +225,11 @@ const router = new Router({
|
||||
//add global interceptor.
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
//handle breadcrumbs things.
|
||||
//清空数组
|
||||
store.state.breadcrumbs.splice(0, store.state.breadcrumbs.length);
|
||||
if (to.meta.breadcrumbs) {
|
||||
store.state.breadcrumbs = to.meta.breadcrumbs
|
||||
} else {
|
||||
store.state.breadcrumbs = []
|
||||
//追加一个数组
|
||||
store.state.breadcrumbs.push.apply(store.state.breadcrumbs, to.meta.breadcrumbs)
|
||||
}
|
||||
|
||||
if (to.meta.title) {
|
||||
|
||||
Reference in New Issue
Block a user