Skip to content

Commit e5e0b5c

Browse files
author
levy
committed
Merge branch 'dev'
2 parents 6e13aae + 4106a23 commit e5e0b5c

File tree

11 files changed

+164
-2
lines changed

11 files changed

+164
-2
lines changed

template.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const common = {
3333
const desktop = {
3434
...common,
3535
ui: 'element-ui',
36+
breadcrumb: 'breadcrumb',
3637
stylesDesktop: 'styles-desktop',
3738
componentsDesktop: 'components-desktop',
3839
}

template/framework-multiple/layouts/default.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<div :class="{spreadContainer: setting.collapse}" class="main-container">
77
<scrollbar :noresize="false" wrap-class="main-scrollbar">
88
<el-container direction="vertical">
9+
<bread-crumb />
910
<el-main class="nuxt-main">
1011
<nuxt class="nuxt-container"></nuxt>
1112
</el-main>
@@ -25,13 +26,15 @@ import LayoutHead from '@/components/layout-head.vue'
2526
import {mapState, mapGetters} from 'vuex'
2627
import Sidebar from '@/components/sidebar.vue'
2728
import Scrollbar from '@/components/scrollbar/index.js'
29+
import BreadCrumb from '@/components/breadcrumb'
2830
2931
export default {
3032
components: {
3133
Copyright,
3234
LayoutHead,
3335
Sidebar,
3436
Scrollbar,
37+
BreadCrumb,
3538
},
3639
computed: {
3740
...mapState(['permission', 'setting']),
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<p>uid</p>
3+
</template>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<p>staff</p>
3+
</template>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div>account</div>
3+
</template>
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const HOME = { name: '首页' }
2+
const ACCOUNT = { name: '账户管理' }
3+
const STAFF = { name: '员工管理' }
4+
5+
const ACCOUNT_TYPE = {
6+
disabled: true,
7+
action: 'getAccountTypeInfo',
8+
}
9+
10+
const USER_TYPE = {
11+
disabled: true,
12+
action: 'getUserTypeInfo',
13+
}
14+
15+
export default [
16+
{
17+
name: 'index',
18+
breadcrumb: [HOME]
19+
},
20+
{
21+
name: 'account',
22+
breadcrumb: [ACCOUNT]
23+
},
24+
{
25+
name: "account-id",
26+
breadcrumb: [ACCOUNT, ACCOUNT_TYPE]
27+
},
28+
{
29+
name: "account-id-staff",
30+
breadcrumb: [ACCOUNT, ACCOUNT_TYPE, STAFF]
31+
},
32+
{
33+
name: "account-id-staff-uid",
34+
breadcrumb: [ACCOUNT, ACCOUNT_TYPE, STAFF, USER_TYPE]
35+
},
36+
]
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<el-header class="breadcrumb-header">
3+
<el-breadcrumb class="bread-crumb">
4+
<el-breadcrumb-item v-for="(item, index) of breads" :key="index" :to="item.to">{{ item.name }}</el-breadcrumb-item>
5+
</el-breadcrumb>
6+
</el-header>
7+
</template>
8+
9+
<script>
10+
import {mapGetters} from 'vuex'
11+
12+
export default {
13+
name: 'BreadCrumb',
14+
computed: {
15+
...mapGetters('bread', ['breads']),
16+
},
17+
watch: {
18+
'$route.fullPath': {
19+
handler() {
20+
this.$store.dispatch('bread/generateBreadcrumb', this.$route)
21+
},
22+
immediate: true,
23+
},
24+
},
25+
}
26+
</script>
27+
28+
<style>
29+
.breadcrumb-header {
30+
display: flex;
31+
align-items: center;
32+
}
33+
</style>
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import breadData from '@/components/breadcrumb/bread-data'
2+
3+
export const state = () => ({
4+
breads: [],
5+
})
6+
7+
export const mutations = {
8+
setBreads(state, breads) {
9+
state.breads = breads
10+
},
11+
}
12+
13+
export const getters = {
14+
breads(state) {
15+
return state.breads.filter(item => item.name)
16+
},
17+
}
18+
19+
export const actions = {
20+
async generateBreadcrumb({ commit, dispatch }, route) {
21+
const { path: routePath, name, meta } = route
22+
23+
const setBreads = async breadcrumb => {
24+
const paths = routePath.split('/')
25+
const allPromise = breadcrumb.map(async (item, index) => {
26+
const path = paths.slice(0, index + 2).join('/')
27+
const matchComps = this.$router.getMatchedComponents(path)
28+
let to = ''
29+
30+
if (item.action) {
31+
const name = await dispatch(item.action, route)
32+
item.name = name || ''
33+
}
34+
35+
if (!item.disabled && matchComps.length) {
36+
to = path
37+
}
38+
39+
return { name: item.name, to }
40+
})
41+
42+
const breads = await Promise.all(allPromise)
43+
commit('setBreads', breads)
44+
}
45+
46+
if (meta && meta.breadcrumb) {
47+
setBreads(meta.breadcrumb)
48+
} else {
49+
const found = breadData.find(item => item.name === name)
50+
51+
if (found) {
52+
setBreads(found.breadcrumb)
53+
}
54+
}
55+
},
56+
async getAccountTypeInfo(_, route) {
57+
const id = route.params.id
58+
const result = await this.$axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
59+
60+
return result.data.name
61+
},
62+
async getUserTypeInfo(_, route) {
63+
const id = route.params.uid
64+
const result = await this.$axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
65+
66+
return result.data.name
67+
},
68+
}

template/modules/element-ui/plugins/element.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,14 @@ import {
3333
DropdownItem,
3434
Row,
3535
Col,
36+
Breadcrumb,
37+
BreadcrumbItem
3638
} from '@femessage/element-ui'
3739
import ElFormRenderer from '@femessage/el-form-renderer'
3840
import ElDataTable from '@femessage/el-data-table'
3941
import Vimg from '@femessage/v-img';
4042

41-
Vue.prototype.$ELEMENT = {size: 'medium'}
43+
Vue.prototype.$ELEMENT = { size: 'medium' }
4244

4345
Vue.use(Button)
4446
Vue.use(Select)
@@ -72,7 +74,8 @@ Vue.use(Tooltip)
7274
// Vue.use(Cascader)
7375
// Vue.use(Autocomplete)
7476
Vue.use(Vimg)
75-
77+
Vue.use(Breadcrumb)
78+
Vue.use(BreadcrumbItem)
7679
// steps
7780
// Vue.use(Steps)
7881
// Vue.use(Step)

test/snapshots/index.test.js.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,8 @@ Generated by [AVA](https://ava.li).
192192
'src/assets/reset.less',
193193
'src/assets/var.less',
194194
'src/components/README.md',
195+
'src/components/breadcrumb/bread-data.js',
196+
'src/components/breadcrumb/index.vue',
195197
'src/components/copyright.vue',
196198
'src/components/go-back.vue',
197199
'src/components/icon-font.vue',
@@ -219,6 +221,9 @@ Generated by [AVA](https://ava.li).
219221
'src/middleware/meta.js',
220222
'src/pages/README.md',
221223
'src/pages/_.vue',
224+
'src/pages/account/_id/staff/_uid.vue',
225+
'src/pages/account/_id/staff/index.vue',
226+
'src/pages/account/index.vue',
222227
'src/pages/index.vue',
223228
'src/pages/login.vue',
224229
'src/plugins/README.md',
@@ -230,6 +235,7 @@ Generated by [AVA](https://ava.li).
230235
'src/static/favicon.ico',
231236
'src/static/icon.png',
232237
'src/store/README.md',
238+
'src/store/bread.js',
233239
'src/store/index.js',
234240
'src/utils/index.js',
235241
'test/filters.test.js',
@@ -359,6 +365,8 @@ Generated by [AVA](https://ava.li).
359365
'src/assets/reset.less',
360366
'src/assets/var.less',
361367
'src/components/README.md',
368+
'src/components/breadcrumb/bread-data.js',
369+
'src/components/breadcrumb/index.vue',
362370
'src/components/copyright.vue',
363371
'src/components/go-back.vue',
364372
'src/components/icon-font.vue',
@@ -388,6 +396,7 @@ Generated by [AVA](https://ava.li).
388396
'src/static/favicon.ico',
389397
'src/static/icon.png',
390398
'src/store/README.md',
399+
'src/store/bread.js',
391400
'src/store/index.js',
392401
'src/utils/index.js',
393402
'test/filters.test.js',

0 commit comments

Comments
 (0)