feat: 侧边栏及桌面整合

src/components/work-desktop/CommonUse.vue

@@ -6,8 +6,8 @@
     </div>
     <div class="common-lists">
       <div class="list-item" v-for="(item, index) in commonList" :key="index" @click="openRouter(item.url)">
-        <img class="item-img" :src="item.img" alt="">
-        <span class="item-name">{{item.name}}</span>
+        <img class="item-img" :src="item.img" alt="常用功能">
+        <span v-html="item.name" class="item-name"></span>
       </div>
       <div v-if="commonList && commonList.length < 8" class="list-add" @click="setFunctions">
         <span class="icon-add"></span>
@@ -77,6 +77,11 @@ export default {
     getCanUseFunctions () {
       getCanUseFunctions().then(res => {
         if (res.error_code === 0 && res.data) {
+          res.data.forEach(v => {
+            if (v.name.indexOf('/') > -1) {
+              v.name = v.name.replace('/', '/<br>')
+            }
+          })
           this.commonList = res.data
         } else {
           this.commonList = []

src/components/work-desktop/Slidebar.vue

@@ -2,57 +2,31 @@
   <div class="work-slidebar">
     <el-menu
       default-active="0"
-      active-text-color="#2CB7CA"
       class="el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose">
-      <el-menu-item index="0">
+      :default-openeds="defalutOpends"
+    >
+      <el-menu-item index="0" class="is-active">
         <i class="iconfont icon-hui7"></i>
         <span slot="title">我的主页</span>
       </el-menu-item>
-      <el-submenu :index="index + '1'" v-for="(item, index) in menus" :key="'0'+index">
+      <el-submenu :index="(index + 1) + ''" v-for="(item, index) in menus" :key="'0'+index">
         <template slot="title">
           <i class="iconfont" :class="item.icon"></i>
           <span>{{item.firstlevel}}</span>
         </template>
         <el-menu-item-group>
           <el-menu-item :index="(index+1) +'-'+j" v-for="(v, j) in item.secondarylevel" :key="'00' + j">
-            <span style="padding-left:30px;" :style="{display:v.name.indexOf('/') > -1 ? 'inline-block' : 'inline'}">{{v.name}}</span>
+            <span class="router-name" v-html="v.name" @click="goRouteItem(v)"></span>
           </el-menu-item>
         </el-menu-item-group>
       </el-submenu>
-      <!-- <el-submenu index="2">
-        <template slot="title">
-          <i class="iconfont icon-hui2"></i>
-          <span>导航一</span>
-        </template>
-        <el-menu-item-group>
-          <el-menu-item index="1-1">
-            <span style="padding-left:30px;">企业情报监控</span>
-          </el-menu-item>
-          <el-menu-item index="1-2">
-            <span style="padding-left:30px;">中标企业预测</span>
-          </el-menu-item>
-          <el-menu-item index="1-3">
-            <span style="padding-left:30px;display:inline-block;">潜在竞争对手/<br>合作伙伴挖掘</span>
-          </el-menu-item>
-        </el-menu-item-group>
-      </el-submenu>
-      <el-menu-item index="3">
-        <i class="iconfont icon-hui"></i>
-        <span slot="title">导航三</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <i class="iconfont icon-hui4"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item> -->
     </el-menu>
   </div>
 </template>
 
 <script>
 import '@/assets/style/iconfont.css'
-import { Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'
+import { Menu, Submenu, MenuItem, MenuItemGroup, MessageBox } from 'element-ui'
 import { getLeftMenu } from '@/api/modules'
 export default {
   name: 'work-slidebar',
@@ -61,39 +35,53 @@ export default {
     [Menu.name]: Menu,
     [Submenu.name]: Submenu,
     [MenuItem.name]: MenuItem,
-    [MenuItemGroup.name]: MenuItemGroup
+    [MenuItemGroup.name]: MenuItemGroup,
+    [MessageBox.name]: MessageBox
   },
   data () {
     return {
-      menus: []
+      menus: [],
+      defalutOpends: []
     }
   },
   created () {
     this.getHomeLeftMenu()
   },
   methods: {
-    handleOpen (key, keyPath) {
-      console.log(key, keyPath)
-    },
-    handleClose (key, keyPath) {
-      console.log(key, keyPath)
-    },
     getHomeLeftMenu () {
       getLeftMenu().then(res => {
         if (res.error_code === 0 && res.data) {
-          res.data.forEach(v => {
-            if (v.firstlevel === '我的订阅') {
-              v.icon = 'icon-hui2'
-            } else if (v.firstlevel === '我的关注') {
-              v.icon = 'icon-hui'
-            } else if (v.firstlevel === '我的收藏') {
-              v.icon = 'icon-hui3'
-            } else if (v.firstlevel === '会员服务') {
-              v.icon = 'icon-hui4'
-            } else if (v.firstlevel === '我的资产') {
-              v.icon = 'icon-hui5'
-            } else if (v.firstlevel === '交易管理') {
-              v.icon = 'icon-hui6'
+          res.data.forEach((v, i) => {
+            switch (v.firstlevel) {
+              case '我的订阅':
+                v.icon = 'icon-hui2'
+                break
+              case '我的关注':
+                v.icon = 'icon-hui'
+                break
+              case '我的收藏':
+                v.icon = 'icon-hui3'
+                break
+              case '会员服务':
+                v.icon = 'icon-hui4'
+                break
+              case '我的资产':
+                v.icon = 'icon-hui5'
+                break
+              case '交易管理':
+                v.icon = 'icon-hui6'
+                break
+              default:
+                v.icon = 'icon-hui2'
+                break
+            }
+            if (v.firstlevel === '会员服务') {
+              this.defalutOpends.push(i + 1 + '') // 加空字符串
+              v.secondarylevel.forEach(s => {
+                if (s.name.indexOf('/') > -1) {
+                  s.name = s.name.replace('/', '/<br>')
+                }
+              })
             }
           })
           this.menus = res.data
@@ -101,6 +89,23 @@ export default {
           this.menus = []
         }
       })
+    },
+    goRouteItem (item) {
+      if (item.isusable) {
+        window.open(item.url)
+      } else {
+        MessageBox.confirm('您未购买此服务，如需使用请联系您的销售人员或客服升级套餐，谢谢！', '提示信息', {
+          customClass: 'custom-message-box',
+          confirmButtonText: '我知道了',
+          confirmButtonClass: 'custom-confirm-btn',
+          showClose: false,
+          showCancelButton: false,
+          closeOnClickModal: false,
+          center: true
+        }).then(() => {
+          console.log('关闭')
+        })
+      }
     }
   }
 }
@@ -109,8 +114,9 @@ export default {
 <style lang="scss" scoped>
 .work-slidebar{
   .iconfont{
-    margin-right: 10px;
+    margin-right: 8px;
     font-size: 18px;
+    color: #1D1D1D;
   }
   ::v-deep{
     .el-menu{
@@ -120,6 +126,8 @@ export default {
       width: 100%;
     }
     .el-menu-item{
+      height: 42px;
+      line-height: 42px;
       min-width: 0;
       padding: 0 10px!important;
       width: 100%;
@@ -131,8 +139,15 @@ export default {
           color: #2CB7CA;
         }
       }
+      &.is-active{
+        .iconfont{
+          color: #2CB7CA;
+        }
+      }
     }
     .el-submenu__title{
+      height: 42px;
+      line-height: 42px;
       padding: 0 10px!important;
       color: #1D1D1D;
       &:hover{
@@ -162,6 +177,13 @@ export default {
     .el-menu-item-group__title{
       padding: 0;
     }
+    .el-submenu__icon-arrow{
+      display: none;
+    }
+    .router-name{
+      padding-left: 36px;
+      display: inline-block;
+    }
   }
 }
 </style>

src/components/work-desktop/Transfer.vue

@@ -51,12 +51,11 @@ export default {
   },
   methods: {
     allData () {
-      console.log(this.right)
       const allData = this.left
       const rightData = this.right.map(s => {
         return s.name
       })
-      console.log(rightData)
+      // console.log(rightData)
       const data = []
       allData.forEach((v, i) => {
         if (rightData.length >= 8) {
@@ -108,7 +107,6 @@ export default {
       }
     },
     onChange (val) {
-      // console.log(val, this.checked)
       if (val.length < 8) {
         this.transferData.forEach((v, i) => {
           v.disabled = false
@@ -119,7 +117,7 @@ export default {
         arr.push(this.transferData[val[i]].label)
       }
       this.needData = arr
-      console.log(this.needData, '要提交的数据')
+      // console.log(this.needData, '要提交的数据')
       this.$emit('onSave', this.needData)
     }
   }

src/router/routers.js

@@ -1,6 +1,13 @@
 export default [
+  // 工作台桌面
   {
     path: '/',
+    name: 'desktop',
+    component: () => import('@/views/work-desktop/WorkDesktop.vue')
+  },
+  // 原大会员首页
+  {
+    path: '/free/home',
     name: 'home',
     component: () => import('@/views/Home.vue')
   },
@@ -126,11 +133,5 @@ export default [
     path: '/free/project_progress',
     name: 'project_progress',
     component: () => import('@/views/ProjectProgress.vue')
-  },
-  // 工作台桌面
-  {
-    path: '/free/desktop',
-    name: 'desktop',
-    component: () => import('@/views/work-desktop/WorkDesktop.vue')
   }
 ]

src/views/work-desktop/WorkDesktop.vue

@@ -33,7 +33,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .work-desktop {
   padding-bottom: 78px;
   .desktop-bg{
@@ -58,4 +58,21 @@ export default {
     }
   }
 }
+.custom-message-box{
+  width: 380px!important;
+  border-radius: 8px;
+  .custom-confirm-btn{
+    margin-top: 12px;
+    width: 132px;
+    height: 36px;
+    background: #2cb7ca;
+    border-radius: 6px;
+    border: 0;
+    font-size: 16px;
+  }
+  .el-message-box__message{
+    font-size: 14px;
+    color: #686868;
+  }
+}
 </style>