Finish the breadcrumbs.

This commit is contained in:
zicla
2017-12-25 18:47:43 +08:00
parent d329e79447
commit f7e3a830b4
9 changed files with 204 additions and 96 deletions
+60 -60
View File
@@ -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>
+89 -3
View File
@@ -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>
+5 -5
View File
@@ -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)
+1 -1
View File
@@ -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)
+34 -12
View File
@@ -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)
+6 -6
View File
@@ -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)
+6 -5
View File
@@ -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) {