From 9c385c412cdf6db77e643f32a4fbf50f281f07da Mon Sep 17 00:00:00 2001
From: ColorWhiteDeveloper <2632970487@qq.com>
Date: 星期一, 19 九月 2022 11:25:49 +0800
Subject: [PATCH] 系统设置侧边栏路由搭建

---
 src/views/systemSetting/baseSetting/department/index.vue |  124 +++++++++++++++++
 src/views/layout/components/AsideBar/index.vue           |   11 +
 src/views/systemSetting/baseSetting/authority/index.vue  |  124 +++++++++++++++++
 src/views/layout/components/Header/index.vue             |    4 
 src/router/index.js                                      |   15 ++
 src/views/systemSetting/baseSetting/role/index.vue       |  116 ++++++++++++++++
 6 files changed, 392 insertions(+), 2 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index bd70fcf..7d3de8d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,6 +26,21 @@
             path: 'userList',
             name: 'userList',
             component: () => import('@/views/systemSetting/baseSetting/user/userList')
+          },
+          {
+            path:'role',
+            name:'role',
+            component: () => import('@/views/systemSetting/baseSetting/role')
+          },
+          {
+            path:'authority',
+            name:'authority',
+            component: () => import('@/views/systemSetting/baseSetting/authority')
+          },
+          {
+            path:'department',
+            name:'department',
+            component: () => import('@/views/systemSetting/baseSetting/department')
           }
         ]
       },
diff --git a/src/views/layout/components/AsideBar/index.vue b/src/views/layout/components/AsideBar/index.vue
index cb972c5..e40732e 100644
--- a/src/views/layout/components/AsideBar/index.vue
+++ b/src/views/layout/components/AsideBar/index.vue
@@ -30,7 +30,16 @@
                   name: '鐢ㄦ埛绠$悊', index: '/home/system/userList',
                 },
                 {
-                  name: '鏂板鐢ㄦ埛', index: '/home/system/createUser'
+                  name: '鏂板鐢ㄦ埛', index: '/home/system/createUser',
+                },
+                {
+                  name:'瑙掕壊绠$悊', index:'/home/system/role',
+                },
+                {
+                  name:'鏉冮檺绠$悊',index:'/home/system/authority',
+                },
+                {
+                  name:'閮ㄩ棬绠$悊',index:'/home/system/department',
                 }
               ]
             },
diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue
index 57e97b0..c2255db 100644
--- a/src/views/layout/components/Header/index.vue
+++ b/src/views/layout/components/Header/index.vue
@@ -60,7 +60,9 @@
   },
   methods: {
     loginout() {
-      this.$router.push({ path: "/login" })
+      // 娓呴櫎token
+      localStorage.clear();
+      this.$router.push({ path: "/login" });
     },
     handleChange(idx){
       // 璁剧疆nav婵�娲�
diff --git a/src/views/systemSetting/baseSetting/authority/index.vue b/src/views/systemSetting/baseSetting/authority/index.vue
new file mode 100644
index 0000000..1a3b79f
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/authority/index.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="userList">
+        <header>
+            <div class="headerTitle">鏁版嵁绛涢��</div>
+            <div class="headerContent">
+                <div class="search">
+                    <span>绛涢�夋潯浠�:</span>
+                    <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                </div>
+                <div class="addUser">
+                    <el-button type="primary">娣诲姞鐢ㄦ埛</el-button>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鏁版嵁鍒楄〃</div>
+            <div class="mainContent">
+                <el-table border ref="multipleTable"
+                    :header-cell-style="{background:'#f5f5f5','font-size':'12px',color:'#666666','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" tooltip-effect="dark" style="width: 100%">
+                    <el-table-column type="selection" width="55">
+                    </el-table-column>
+                    <el-table-column label="鐢ㄦ埛ID" width="67">
+                        <template slot-scope="scope">{{ scope.row.id }}</template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="鐢ㄦ埛鍚嶇О" width="82">
+                    </el-table-column>
+                    <el-table-column prop="true_name" label="鎵�灞炲鍚�" width="76">
+                    </el-table-column>
+                    <el-table-column prop="phone" label="鑱旂郴鏂瑰紡" width="81">
+                    </el-table-column>
+                    <el-table-column prop="role" label="鎵�灞炶鑹�" width="87">
+                    </el-table-column>
+                    <el-table-column prop="department" label="鎵�灞為儴闂�" width="80">
+                    </el-table-column>
+                    <el-table-column prop="work" label="鎵�灞炶亴鍔�" width="83">
+                    </el-table-column>
+                    <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="128">
+                    </el-table-column>
+                    <el-table-column prop="is_open" label="鍚敤" width="90">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
+                            </el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="operation" label="鎿嶄綔" width="246">
+                        <template slot-scope="scope">
+                            <el-button size="mini">缂栬緫</el-button>
+                            <el-button size="mini" type="danger">鍒犻櫎</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </main>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [
+                {
+                    createTime: '2016-05-02',
+                    name: 'admin',
+                    address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+                    role: '瓒呯骇绠$悊鍛�',
+                    is_open: true,
+                }
+            ]
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+.userList {
+    text-align: left;
+    margin: 10px 20px;
+
+    header {
+        background-color: #fff;
+
+        .headerTitle {
+            font-weight: 600;
+            padding: 0 20px;
+            color: #666;
+            line-height: 50px;
+            border-bottom: 1px solid #f0f2f5;
+        }
+
+        .headerContent {
+            padding: 0 40px;
+            display: flex;
+            line-height: 100px;
+            justify-content: space-between;
+
+            .search {
+                display: flex;
+                justify-content: flex-start;
+
+                span {
+                    flex: 1;
+                }
+
+                .el-input {
+                    flex: 2;
+                }
+            }
+        }
+    }
+
+    main {
+        background-color: #fff;
+        margin-top: 20px;
+        padding: 0 10px;
+
+        .mainTitle {
+            line-height: 60px;
+        }
+        .el-table{
+            font-size: 10px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/department/index.vue b/src/views/systemSetting/baseSetting/department/index.vue
new file mode 100644
index 0000000..1a3b79f
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/department/index.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="userList">
+        <header>
+            <div class="headerTitle">鏁版嵁绛涢��</div>
+            <div class="headerContent">
+                <div class="search">
+                    <span>绛涢�夋潯浠�:</span>
+                    <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                </div>
+                <div class="addUser">
+                    <el-button type="primary">娣诲姞鐢ㄦ埛</el-button>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鏁版嵁鍒楄〃</div>
+            <div class="mainContent">
+                <el-table border ref="multipleTable"
+                    :header-cell-style="{background:'#f5f5f5','font-size':'12px',color:'#666666','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" tooltip-effect="dark" style="width: 100%">
+                    <el-table-column type="selection" width="55">
+                    </el-table-column>
+                    <el-table-column label="鐢ㄦ埛ID" width="67">
+                        <template slot-scope="scope">{{ scope.row.id }}</template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="鐢ㄦ埛鍚嶇О" width="82">
+                    </el-table-column>
+                    <el-table-column prop="true_name" label="鎵�灞炲鍚�" width="76">
+                    </el-table-column>
+                    <el-table-column prop="phone" label="鑱旂郴鏂瑰紡" width="81">
+                    </el-table-column>
+                    <el-table-column prop="role" label="鎵�灞炶鑹�" width="87">
+                    </el-table-column>
+                    <el-table-column prop="department" label="鎵�灞為儴闂�" width="80">
+                    </el-table-column>
+                    <el-table-column prop="work" label="鎵�灞炶亴鍔�" width="83">
+                    </el-table-column>
+                    <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="128">
+                    </el-table-column>
+                    <el-table-column prop="is_open" label="鍚敤" width="90">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
+                            </el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="operation" label="鎿嶄綔" width="246">
+                        <template slot-scope="scope">
+                            <el-button size="mini">缂栬緫</el-button>
+                            <el-button size="mini" type="danger">鍒犻櫎</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </main>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [
+                {
+                    createTime: '2016-05-02',
+                    name: 'admin',
+                    address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+                    role: '瓒呯骇绠$悊鍛�',
+                    is_open: true,
+                }
+            ]
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+.userList {
+    text-align: left;
+    margin: 10px 20px;
+
+    header {
+        background-color: #fff;
+
+        .headerTitle {
+            font-weight: 600;
+            padding: 0 20px;
+            color: #666;
+            line-height: 50px;
+            border-bottom: 1px solid #f0f2f5;
+        }
+
+        .headerContent {
+            padding: 0 40px;
+            display: flex;
+            line-height: 100px;
+            justify-content: space-between;
+
+            .search {
+                display: flex;
+                justify-content: flex-start;
+
+                span {
+                    flex: 1;
+                }
+
+                .el-input {
+                    flex: 2;
+                }
+            }
+        }
+    }
+
+    main {
+        background-color: #fff;
+        margin-top: 20px;
+        padding: 0 10px;
+
+        .mainTitle {
+            line-height: 60px;
+        }
+        .el-table{
+            font-size: 10px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/role/index.vue b/src/views/systemSetting/baseSetting/role/index.vue
new file mode 100644
index 0000000..5e9e096
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/role/index.vue
@@ -0,0 +1,116 @@
+<template>
+    <div class="userList">
+        <header>
+            <div class="headerTitle">鏁版嵁绛涢��</div>
+            <div class="headerContent">
+                <div class="search">
+                    <span>绛涢�夋潯浠�:</span>
+                    <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                </div>
+                <div class="addUser">
+                    <el-button type="primary">鏂板缓瑙掕壊</el-button>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鏁版嵁鍒楄〃</div>
+            <div class="mainContent">
+                <el-table border ref="multipleTable"
+                    :header-cell-style="{background:'#f5f5f5','font-size':'12px',color:'#666666','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" tooltip-effect="dark" style="width: 100%">
+                    <el-table-column type="selection" width="55">
+                    </el-table-column>
+                    <el-table-column prop="name" label="鐢ㄦ埛鍚嶇О" width="82">
+                    </el-table-column>
+                    <el-table-column prop="true_name" label="瑙掕壊绫诲瀷" width="76">
+                    </el-table-column>
+                    <el-table-column prop="phone" label="榛樿瑙掕壊" width="81">
+                    </el-table-column>
+                    <el-table-column prop="role" label="澶囨敞" width="87">
+                    </el-table-column>
+                    <el-table-column prop="is_open" label="鐘舵��" width="90">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
+                            </el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="operation" label="鎿嶄綔" width="246" class="operation">
+                        <template slot-scope="scope">
+                            <span>鏌ョ湅</span>
+                            <span>鏉冮檺璁剧疆</span>
+                            <span>鍋滅敤</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </main>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [
+                {
+                    createTime: '2016-05-02',
+                    name: 'admin',
+                    address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+                    role: '瓒呯骇绠$悊鍛�',
+                    is_open: true,
+                }
+            ]
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+.userList {
+    text-align: left;
+    margin: 10px 20px;
+
+    header {
+        background-color: #fff;
+
+        .headerTitle {
+            font-weight: 600;
+            padding: 0 20px;
+            color: #666;
+            line-height: 50px;
+            border-bottom: 1px solid #f0f2f5;
+        }
+
+        .headerContent {
+            padding: 0 40px;
+            display: flex;
+            line-height: 100px;
+            justify-content: space-between;
+
+            .search {
+                display: flex;
+                justify-content: flex-start;
+
+                span {
+                    flex: 1;
+                }
+
+                .el-input {
+                    flex: 2;
+                }
+            }
+        }
+    }
+
+    main {
+        background-color: #fff;
+        margin-top: 20px;
+        padding: 0 10px;
+
+        .mainTitle {
+            line-height: 60px;
+        }
+        .el-table{
+            font-size: 10px;
+        }
+    }
+}
+</style>
\ No newline at end of file

--
Gitblit v1.8.0