From 8f99871ad710d48506e61dcc1e626e882dd4076a Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 11 Dec 2024 17:55:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/main.css       |  23 ----
 src/components/Navbar.vue     | 146 ++++++++++++++++++++++++
 src/components/Sidebar.vue    | 204 +++++++++++++++++++++-------------
 src/views/Home.vue            |  52 +++++++--
 src/views/serve/Configure.vue |  11 +-
 src/views/workbench/index.vue |  12 +-
 6 files changed, 322 insertions(+), 126 deletions(-)
 create mode 100644 src/components/Navbar.vue

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ec42243..1bc4f51 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -60,30 +60,7 @@ li {
 .el-table th > .cell {
     font-size: 14px;
 }
-.content-box {
-    -webkit-transition: left 0.3s ease-in-out;
-    transition: left 0.3s ease-in-out;
-    background: #f0f0f0;
-    flex: 1;
-}
-
-.content {
-    width: auto;
-    min-height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-.content-collapse {
-    left: 65px;
-}
 
-.container {
-    padding: 30px;
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-}
 .p-title {
     padding-left: 5px;
     margin-bottom: 24px;
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..cc66b04
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="menus">
+    <el-menu class="nav" :default-active="onRoutes" background-color="#062c87" text-color="#fff"
+      active-text-color="#333" unique-opened mode="horizontal" router @select="handleSelect">
+      <template v-for="item in menus">
+        <template v-if="item.subs">
+          <el-submenu :index="item.index" :key="item.index">
+            <template slot="title">
+              <!-- <i :class="item.icon"></i> -->
+              <span slot="title">{{ item.title }}</span>
+            </template>
+            <template v-for="subItem in item.subs">
+              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                <template slot="title">{{ subItem.title }}</template>
+                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
+                  threeItem.title
+                }}</el-menu-item>
+              </el-submenu>
+              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="item.index" :key="item.index">
+            <!-- <i :class="item.icon"></i> -->
+            <span slot="title">{{ item.title }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import addRoutes from '@/libs/route/addRoutes'
+export default {
+  data () {
+    return {
+      menuList: [
+        {
+          icon: 'el-icon-school',
+          index: '/workbench',
+          title: '工作台'
+        },
+        {
+          icon: 'el-icon-user',
+          index: '/customer',
+          title: '客户管理'
+        },
+        {
+          icon: 'el-icon-shopping-bag-2',
+          index: '/user',
+          title: '用户管理'
+        },
+        {
+          icon: 'el-icon-document-checked',
+          index: '/order',
+          title: '订单管理'
+        },
+        {
+          icon: 'el-icon-office-building',
+          index: '/system',
+          title: '系统配置'
+        },
+      ],
+      menus: [],
+      onRoutes: this.$route.path
+    };
+  },
+  watch: {
+    "$route.path": function (val) {
+      this.menuList.map(e => {
+        if (val.replace('/', '') === e.index) {
+          this.handleSelect(val.replace('/', ''))
+          this.$forceUpdate();
+        }
+      })
+    }
+  },
+  mounted () {
+    // sessionStorage.getItem('sideBar') && this.handleSelect(sessionStorage.getItem('sideBar'))
+    sessionStorage.getItem('token') && this.getPer() // 登录了才获取权限
+  },
+  methods: {
+    handleSelect (index) {
+      this.onRoutes = index
+      this.$store.commit('setInfoTab', '1')
+      this.$store.commit('setColumnId', '')
+      this.$store.commit('setCompetitionCache', null)
+      sessionStorage.setItem('sideBar', index)
+    },
+    initMenu () {
+      if (Setting.dynamicRoute) {
+        const routes = this.$store.state.routes
+        const menus = []
+        this.menuList.map(e => {
+          routes.find(n => n.path === e.index) && menus.push(e)
+        })
+        this.menus = menus
+      } else {
+        this.menus = this.menuList
+      }
+    },
+    // 获取权限列表
+    getPer () {
+      this.$get(`${this.api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`).then(res => {
+        const routes = res.permissionMenu[0].children
+        addRoutes(routes)
+        this.initMenu()
+        this.$store.commit('setDataPer', res.dataPermissionList)
+      }).catch(err => {
+        if (err.status === 500) {
+          localStorage.removeItem('ms_username');
+          sessionStorage.clear()
+          location.reload()
+        }
+      })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.menus {
+  display: flex;
+  justify-content: center;
+  background-color: #062c87;
+
+  /deep/.nav {
+    border-bottom: 0;
+
+    &>.el-menu-item {
+      height: 56px;
+      padding: 0 30px;
+      line-height: 56px;
+    }
+
+    &>.el-menu-item.is-active {
+      background-color: #fff !important;
+      border-bottom: 0;
+    }
+  }
+
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 2a01a31..b131e0a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,18 +1,17 @@
 <template>
-  <div class="menus">
-    <el-menu class="sidebar" :default-active="onRoutes" background-color="#062c87" text-color="#fff"
-      active-text-color="#333" unique-opened mode="horizontal" router @select="handleSelect">
+  <div class="sidebar">
+    <el-menu :default-active="active" :default-openeds="['1', '2', '3', '4']" background-color="#fff" text-color="#333"
+      active-text-color="#062c87" :collapse="collapse" :collapse-transition="false" router @select="menuSelect">
       <template v-for="item in menus">
-        <template v-if="item.subs">
+        <template v-if="item.children">
           <el-submenu :index="item.index" :key="item.index">
             <template slot="title">
-              <!-- <i :class="item.icon"></i> -->
               <span slot="title">{{ item.title }}</span>
             </template>
-            <template v-for="subItem in item.subs">
-              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+            <template v-for="subItem in item.children">
+              <el-submenu v-if="subItem.children" :index="subItem.index" :key="subItem.index">
                 <template slot="title">{{ subItem.title }}</template>
-                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
+                <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.index">{{
                   threeItem.title
                 }}</el-menu-item>
               </el-submenu>
@@ -22,7 +21,6 @@
         </template>
         <template v-else>
           <el-menu-item :index="item.index" :key="item.index">
-            <!-- <i :class="item.icon"></i> -->
             <span slot="title">{{ item.title }}</span>
           </el-menu-item>
         </template>
@@ -32,39 +30,99 @@
 </template>
 
 <script>
-import Setting from '@/setting'
-import addRoutes from '@/libs/route/addRoutes'
 export default {
   data () {
     return {
-      menuList: [
+      menus: [
         {
-          icon: 'el-icon-school',
-          index: '/workbench',
-          title: '工作台'
+          index: '1',
+          title: '系统后台',
+          children: [
+            {
+              index: '/configure?id=1',
+              title: 'Python系统'
+            },
+            {
+              index: '/theoryExam',
+              title: '理论考试系统'
+            },
+            {
+              index: '/configure?id=3',
+              title: '金融产品设计及数字化营销沙盘系统'
+            },
+            {
+              index: '/configure?id=4',
+              title: '银行综合系统'
+            },
+            {
+              index: '/configure?id=5',
+              title: '众筹系统'
+            },
+          ]
         },
         {
-          icon: 'el-icon-user',
-          index: '/customer',
-          title: '客户管理'
+          index: '2',
+          title: '职站教学后台',
+          children: [
+            {
+              index: '/curriculum',
+              title: '教学课程管理'
+            },
+            {
+              index: '/theoreticalCourse',
+              title: '精品课程管理'
+            },
+            {
+              index: '/information',
+              title: '资讯管理'
+            },
+            // {
+            //   index: '/curriculum',
+            //   title: '资源库'
+            // },
+          ]
         },
         {
-          icon: 'el-icon-shopping-bag-2',
-          index: '/user',
-          title: '用户管理'
+          index: '3',
+          title: '职站商城后台',
+          children: [
+            {
+              index: '/shop',
+              title: '产品管理'
+            },
+            {
+              index: '/market',
+              title: '营销管理'
+            },
+            {
+              index: '/parnerOperation',
+              title: '小程序内容管理'
+            },
+            {
+              index: '/parner',
+              title: '销售代理人管理'
+            },
+          ]
         },
         {
-          icon: 'el-icon-document-checked',
-          index: '/order',
-          title: '订单管理'
-        },
-        {
-          icon: 'el-icon-office-building',
-          index: '/system',
-          title: '系统配置'
+          index: '4',
+          title: '运营后台',
+          children: [
+            {
+              index: '/match',
+              title: '大赛管理'
+            },
+            {
+              index: '/data',
+              title: '数据管理'
+            },
+            {
+              index: '/review',
+              title: '评阅管理'
+            },
+          ]
         },
       ],
-      menus: [],
       onRoutes: this.$route.path
     };
   },
@@ -79,68 +137,60 @@ export default {
     }
   },
   mounted () {
-    // sessionStorage.getItem('sideBar') && this.handleSelect(sessionStorage.getItem('sideBar'))
-    sessionStorage.getItem('token') && this.getPer() // 登录了才获取权限
+
   },
   methods: {
     handleSelect (index) {
-      this.onRoutes = index
-      this.$store.commit('setInfoTab', '1')
-      this.$store.commit('setColumnId', '')
-      this.$store.commit('setCompetitionCache', null)
-      sessionStorage.setItem('sideBar', index)
-    },
-    initMenu () {
-      if (Setting.dynamicRoute) {
-        const routes = this.$store.state.routes
-        const menus = []
-        this.menuList.map(e => {
-          routes.find(n => n.path === e.index) && menus.push(e)
-        })
-        this.menus = menus
-      } else {
-        this.menus = this.menuList
-      }
-    },
-    // 获取权限列表
-    getPer () {
-      this.$get(`${this.api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`).then(res => {
-        const routes = res.permissionMenu[0].children
-        addRoutes(routes)
-        this.initMenu()
-        this.$store.commit('setDataPer', res.dataPermissionList)
-      }).catch(err => {
-        if (err.status === 500) {
-          localStorage.removeItem('ms_username');
-          sessionStorage.clear()
-          location.reload()
-        }
-      })
+
     },
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.menus {
-  display: flex;
-  justify-content: center;
-  background-color: #062c87;
+.sidebar {
+  width: 200px;
+  height: calc(100vh - 116px);
+  overflow: auto;
+  transition: .5s;
+  transform: translateX(-200px);
 
-  /deep/.sidebar {
-    border-bottom: 0;
+  &.show {
 
-    &>.el-menu-item {
-      height: 56px;
-      padding: 0 30px;
-      line-height: 56px;
+    transform: translateX(0);
+  }
+
+  /deep/.el-menu {
+    border-right: 0 !important;
+
+    .el-menu-item,
+    .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+
+      &.is-active {
+        font-weight: 600;
+      }
     }
 
-    &>.el-menu-item.is-active {
-      background-color: #fff !important;
-      border-bottom: 0;
+    .el-menu .el-menu-item {
+      padding: 0 20px 0 40px !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 0;
+}
+
+.sidebar-el-menu:not(.el-menu--collapse) {
+  width: 100%;
+}
 
+.sidebar>ul {
+  height: 100%;
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c9682d4..04a5f60 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="wrapper">
     <v-head></v-head>
-    <v-sidebar></v-sidebar>
-    <div class="content-box">
-      <div class="content">
+    <Navbar></Navbar>
+    <div class="layout">
+      <Sidebar :class="{ show: showSidebar }" />
+      <div class="content-box">
         <transition name="move" mode="out-in">
-          <!-- <keep-alive> -->
           <router-view></router-view>
-          <!-- </keep-alive> -->
         </transition>
         <el-backtop target=".content"></el-backtop>
       </div>
@@ -16,22 +15,33 @@
 </template>
 
 <script>
-import vHead from '../components/Header.vue';
-import vSidebar from '../components/Sidebar.vue';
-import Setting from "@/setting";
-import util from "@/libs/util";
+import vHead from '../components/Header.vue'
+import Navbar from '../components/Navbar.vue'
+import Sidebar from '../components/Sidebar.vue'
+import Setting from "@/setting"
+import util from "@/libs/util"
 export default {
   data () {
     return {
-      tagsList: [],
+      showSidebar: false,
     };
   },
   components: {
     vHead,
-    vSidebar,
+    Navbar,
+    Sidebar,
+  },
+  watch: {
+    '$route.path': {
+      handler (val) {
+        // 是否显示左侧导航
+        this.showSidebar = ['/configure', '/curriculum', '/information', '/shop', '/market', '/parnerOperation', '/parner', '/match', '/data', '/review', '/theoreticalCourse'].includes(val)
+      },
+      immediate: true
+    }
   },
   created () {
-    // this.autoLogout()
+
   },
   methods: {
     // 长时间未操作,自动退出登录
@@ -57,3 +67,21 @@ export default {
   }
 };
 </script>
+
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  background: #f5f7fa;
+
+  .content-box {
+    flex: 1;
+    height: calc(100vh - 116px);
+    padding: 20px;
+    box-sizing: border-box;
+    -webkit-transition: left 0.3s ease-in-out;
+    transition: left 0.3s ease-in-out;
+    overflow: auto;
+  }
+}
+</style>
diff --git a/src/views/serve/Configure.vue b/src/views/serve/Configure.vue
index 6766a48..2c0af20 100644
--- a/src/views/serve/Configure.vue
+++ b/src/views/serve/Configure.vue
@@ -16,13 +16,6 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="4">
-                <el-form-item label="系统类型">
-                  <el-select v-model="form.type" clearable placeholder="请选择系统类型" @change="initData">
-                    <el-option v-for="(item, i) in types" :key="i" :label="item" :value="i"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
             </div>
             <el-col :span="6">
               <el-form-item>
@@ -94,6 +87,7 @@ import qs from 'qs'
 export default {
   data () {
     return {
+      id: this.$route.query.id || '',
       userId: this.$store.state.userLoginId,
       token: btoa(sessionStorage.getItem('token')),
       form: {
@@ -141,7 +135,8 @@ export default {
         ...this.form,
         pageNum: this.page,
         pageSize: this.pageSize,
-        supplierId: sid ? sid.supplierId : ''
+        supplierId: sid ? sid.supplierId : '',
+        systemTypeId: this.id,
       };
       this.$post(this.api.queryServiceConfig, data).then(res => {
         this.list = res.serviceList.records;
diff --git a/src/views/workbench/index.vue b/src/views/workbench/index.vue
index 63539a3..73e4ee5 100644
--- a/src/views/workbench/index.vue
+++ b/src/views/workbench/index.vue
@@ -3,9 +3,9 @@
     <div class="block block1">
       <div class="title">系统后台</div>
       <div class="apps">
-        <div v-for="(item, i) in systems" :key="i" class="app" @click="toSystem()">
+        <div v-for="(item, i) in systems" :key="i" class="app" @click="toSystem(item)">
           <img :src="require(`@/assets/img/workbench/${i + 1}.png`)" alt="">
-          <p class="name">{{ item.systemTypeName }}</p>
+          <p class="name">{{ item.systemType }}</p>
         </div>
       </div>
     </div>
@@ -24,10 +24,10 @@
           <img src="@/assets/img/workbench/8.png" alt="">
           <p class="name">资讯管理</p>
         </div>
-        <div class="app" @click="to('/curriculum')">
+        <!-- <div class="app" @click="to('/curriculum')">
           <img src="@/assets/img/workbench/9.png" alt="">
           <p class="name">资源库</p>
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -85,8 +85,8 @@ export default {
       const res = await this.$get(this.api.workbenchSystemDemonstration)
       this.systems = res.serviceConfigurationList
     },
-    toSystem (item) {
-      this.$router.push(`/configure`)
+    toSystem ({ id }) {
+      this.$router.push(id === 2 ? '/theoryExam' : `/configure?id=${id}`)
     },
     to (path) {
       this.$router.push(path)