update 系统管理ui
This commit is contained in:
@@ -1,22 +1,101 @@
|
||||
<template>
|
||||
<el-submenu v-if="menuItem.children" :index="level ? level + '-' + index : '' + index">
|
||||
<el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>{{ menuItem.label }}</span>
|
||||
<!-- <i class="el-icon-menu"></i> -->
|
||||
<i style="line-height: 1;">
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>菜单</title>
|
||||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
|
||||
<g id="编组-7" transform="translate(376.000000, 200.000000)">
|
||||
<g id="菜单" transform="translate(0.000000, 2.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path
|
||||
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
|
||||
id="形状"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</i>
|
||||
<span>{{ menuItem.name }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 主体 -->
|
||||
<template v-for="(submenuItem, idx) in menuItem.children">
|
||||
<TestMenuItem :menuItem="submenuItem" :level="level + '-' + index" :index="idx" />
|
||||
<TestMenuItem :menuItem="submenuItem" :level="level + 1" />
|
||||
</template>
|
||||
</el-submenu>
|
||||
|
||||
<!-- 一级菜单 -->
|
||||
<el-menu-item v-else :index="level ? level + '-' + index : '' + index">
|
||||
<i v-if="+level !== 1" class="el-icon-aim"></i>
|
||||
<i v-else class="el-icon-menu"></i>
|
||||
<span slot="title">{{ menuItem.label }}</span>
|
||||
<el-menu-item v-else :index="constructIndex(menuItem)">
|
||||
<!-- <i v-if="level !== 1" class="el-icon-aim"></i>
|
||||
<i v-else class="el-icon-menu"></i> -->
|
||||
<i style="line-height: 1px" v-if="level !== 1">
|
||||
<svg
|
||||
width="8px"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>椭圆形</title>
|
||||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g
|
||||
id="质量追溯_设备参数追溯"
|
||||
transform="translate(-396.000000, -246.000000)"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="编组-3" transform="translate(396.000000, 240.000000)">
|
||||
<path
|
||||
d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z"
|
||||
id="椭圆形"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</i>
|
||||
<i style="line-height: 1;" v-else>
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>菜单</title>
|
||||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
|
||||
<g id="编组-7" transform="translate(376.000000, 200.000000)">
|
||||
<g id="菜单" transform="translate(0.000000, 2.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path
|
||||
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
|
||||
id="形状"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</i>
|
||||
<span slot="title">{{ menuItem.name }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
@@ -25,12 +104,12 @@ export default {
|
||||
name: 'TestMenuItem',
|
||||
props: {
|
||||
level: {
|
||||
type: String,
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
menuItem: {
|
||||
default: () => ({})
|
||||
@@ -45,7 +124,11 @@ export default {
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
methods: {
|
||||
constructIndex(menuItem) {
|
||||
return menuItem.id + '$--$' + menuItem.name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user