kongdeqiang
2023-06-06 e8d2fb192894d42d5cf00c8699e5d0ec5ce710a4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.children">
                    <el-submenu :index="item.indexUrl" :key="item.indexUrl">
                        <template slot="title">
                            <i :class="item.icon"></i><span slot="title">{{ item.name }}</span>
                        </template>
                        <template v-for="subItem in item.children">
                            <!--<el-submenu v-if="subItem.children" :index="subItem.indexUrl" :key="subItem.indexUrl">-->
                                <!--<template slot="title">-->
                                    <!--<i :class="subItem.icon"></i><span slot="title">{{ subItem.name }}</span>-->
                                <!--</template>-->
                                <!--<el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.indexUrl">-->
                                    <!--<template slot="title">-->
                                        <!--<i :class="threeItem.icon"></i><span slot="title">{{ threeItem.name }}</span>-->
                                    <!--</template>-->
                                <!--</el-menu-item>-->
                            <!--</el-submenu>-->
                            <el-menu-item :index="subItem.indexUrl" :key="subItem.indexUrl">
                                <template slot="title">
                                    <i :class="subItem.icon"></i><span slot="title">{{ subItem.name }}</span>
                                </template>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.indexUrl" :key="item.indexUrl">
                        <template slot="title">
                            <i :class="item.icon"></i><span slot="title">{{ item.name }}</span>
                        </template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>
 
<script>
    import bus from '../common/bus';
    export default {
        data() {
            return {
                collapse: false,
                items: [
                  {
                    id:1,
                    icon: 'el-icon-folder-opened',
                    indexUrl: '1',
                    name: '系统管理',
                    children:[
                      {
                        id:1,
                        icon: 'el-icon-user-solid',
                        name: '人员管理',
                        parentId: 1,
                        indexUrl: 'user'
                      }
                    ]
                  },
                  {
                      id:2,
                      icon: 'el-icon-folder-opened',
                      indexUrl: '2',
                      name: '智慧泊车管理',
                      children:[
                          {
                              icon: 'el-icon-document',
                              name: '停车场管理',
                              parentId: 2,
                              indexUrl: "park"
                          },
                          {
                              icon: 'el-icon-document',
                              name: '收费规则管理',
                              parentId: 2,
                              indexUrl: "costRule"
                          },
                          {
                            icon: 'el-icon-document',
                            name: '车辆入场管理',
                            parentId: 2,
                            indexUrl: "enterPark"
                          },
                          {
                            icon: 'el-icon-document',
                            name: '车辆出场管理',
                            parentId: 2,
                            indexUrl: "outPark"
                          },
                          {
                            icon: 'el-icon-document',
                            name: '白名单管理',
                            parentId: 2,
                            indexUrl: "whiteList"
                          },
                          {
                            icon: 'el-icon-document',
                            name: '泊车发票管理',
                            parentId: 2,
                            indexUrl: "parkticket"
                          },
                          {
                            icon: 'el-icon-document',
                            name: '订单统计',
                            parentId: 2,
                            indexUrl: "orderRecord"
                          },
                      ]
                  },
                  {
                    id:3,
                    icon: 'el-icon-folder-opened',
                    indexUrl: '3',
                    name: '智慧罚没管理',
                    children:[
                      {
                        icon: 'el-icon-document',
                        name: '违章类型管理',
                        parentId: 3,
                        indexUrl: "violationType"
                      },
                      {
                        icon: 'el-icon-document',
                        name: '街道管理',
                        parentId: 3,
                        indexUrl: "street"
                      },
                      {
                        icon: 'el-icon-document',
                        name: '罚单管理',
                        parentId: 3,
                        indexUrl: "ticket"
                      },
                      {
                        icon: 'el-icon-document',
                        name: '罚没发票管理',
                        parentId: 3,
                        indexUrl: "zfticket"
                      },
                    ]
                  },
                ]
            }
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        created(){
            // 通过 Event Bus 进行组件间通信,来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
        },
        mounted(){
            // var url = this.$systemconfig.basePath + '/menuList';
            // this.$byutil.postData(this,url,{},res=>{
            //     this.items = res.obj.menuList;
            // })
        }
    }
</script>
 
<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom:0;
        overflow-y: scroll;
    }
    .sidebar::-webkit-scrollbar{
        width: 0;
    }
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 250px;
    }
    .sidebar > ul {
        height:100%;
    }
</style>