update 用户管理
Cette révision appartient à :
Parent
82aeb2818f
révision
59d90eabb3
52
src/views/UserPage/TestMenuItem.vue
Fichier normal
52
src/views/UserPage/TestMenuItem.vue
Fichier normal
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<el-submenu v-if="menuItem.children" :index="level ? level + '-' + index : '' + index">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>{{ menuItem.label }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 主体 -->
|
||||
<template v-for="(submenuItem, idx) in menuItem.children">
|
||||
<TestMenuItem :menuItem="submenuItem" :level="level + '-' + index" :index="idx" />
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestMenuItem',
|
||||
props: {
|
||||
level: {
|
||||
type: String,
|
||||
default: 1
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
menuItem: {
|
||||
default: () => ({})
|
||||
},
|
||||
defaultActive: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -28,62 +28,38 @@
|
||||
<span class="title-content">合肥新能源工厂</span>
|
||||
</section>
|
||||
<section class="routes-area">
|
||||
<ul class="root-routes">
|
||||
<li class="parent-route">
|
||||
<div class="route-title">
|
||||
<div>
|
||||
<span class="menu-icon">
|
||||
<span class="line" />
|
||||
<span class="line" />
|
||||
<span class="line" />
|
||||
</span>
|
||||
<span>制造部</span>
|
||||
</div>
|
||||
<span class="arrow-icon rotate-down">
|
||||
<span class="arrow-line1" />
|
||||
<span class="arrow-line2" />
|
||||
</span>
|
||||
</div>
|
||||
<ul class="children-routes">
|
||||
<li class="parent-route">
|
||||
<div class="route-title" style="padding-left: 16px;">
|
||||
<div>
|
||||
<span class="menu-icon">
|
||||
<!-- level - 2 -->
|
||||
<span class="circle" />
|
||||
</span>
|
||||
<span>人力资源</span>
|
||||
</div>
|
||||
<span class="arrow-icon">
|
||||
<span class="arrow-line1" />
|
||||
<span class="arrow-line2" />
|
||||
</span>
|
||||
</div>
|
||||
<ul class="children-routes">
|
||||
<li class="leaf-route" style="padding-left: 32px;">小组1</li>
|
||||
<li class="leaf-route" style="padding-left: 32px;">小组2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="leaf-route" style="padding-left: 16px;">小组2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="leaf-route">财政部</li>
|
||||
</ul>
|
||||
<el-menu default-active="1-0-0" @select="handleSelect">
|
||||
<template v-for="(menuItem, index) in testData">
|
||||
<TestMenuItem :index="index" level="1" :menuItem="menuItem" />
|
||||
</template>
|
||||
</el-menu>
|
||||
</section>
|
||||
<section class="footer-area" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TestMenuItem from './TestMenuItem.vue'
|
||||
export default {
|
||||
name: 'TestTree',
|
||||
props: {},
|
||||
components: { TestMenuItem },
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
testData: [
|
||||
{ id: 0, label: '制造部', children: [{ label: '小组1' }, { label: '小组2' }] },
|
||||
{ id: 1, label: '综合管理部' },
|
||||
{ id: 2, label: '销售部' }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
methods: {
|
||||
handleSelect(index, indexPath) {
|
||||
console.log('key, keyPath:', index, indexPath)
|
||||
this.$emit('getOrganization', { id, name: label })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -91,7 +67,7 @@ export default {
|
||||
.test-tree {
|
||||
background: lightblue;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
@ -101,6 +77,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.routes-area {
|
||||
@ -120,113 +97,4 @@ export default {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.parent-route div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.route-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
span.menu-icon {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.508);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.arrow-line1,
|
||||
.arrow-line2 {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
border-radius: 1px;
|
||||
background-color: #000a;
|
||||
transform-origin: top 50% left 0;
|
||||
}
|
||||
|
||||
.arrow-line1 {
|
||||
top: 1px;
|
||||
left: 0;
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
|
||||
.arrow-line2 {
|
||||
left: 0;
|
||||
bottom: 1px;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
.rotate-down {
|
||||
/* transform-origin: top 50%; */
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.circle {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background-color: #000c;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
border-radius: 50%;
|
||||
top: 15%;
|
||||
left: 15%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* span.arrow-icon {
|
||||
background: url('./right.png') 100% 100% / contain no-repeat;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
} */
|
||||
|
||||
li.parent-route {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* background: lightpink; */
|
||||
}
|
||||
|
||||
li.leaf-route::before {
|
||||
content: '\25E6';
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
li.parent-route div.route-title:hover,
|
||||
li.parent-route div.route-title:hover .circle::after,
|
||||
li.leaf-route:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
<div class="app-container system-manage-landpage">
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
|
||||
<TestTree />
|
||||
<!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-form
|
||||
@ -69,6 +70,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TestTree from './TestTree.vue'
|
||||
import sideTree from '../system-manage/sideTree'
|
||||
import { getOrgList } from '@/api/org'
|
||||
import AddUserForm from './AddUserForm'
|
||||
@ -157,7 +159,7 @@ const tableProps = [
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
|
||||
components: { TestTree, sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
@ -223,6 +225,7 @@ export default {
|
||||
const res1 = await getOrgList(params)
|
||||
if (res1.code === 0) {
|
||||
this.menuList = res1.data.records
|
||||
console.log('menulist===>', this.menuList)
|
||||
}
|
||||
},
|
||||
getOrganization(data) {
|
||||
|
||||
Chargement…
Référencer dans un nouveau ticket
Block a user