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