框架调整

yudao-ui/yudao-ui-admin-vue/src/components/AppList/index.vue

@@ -1,10 +1,10 @@
 <template>
   <el-row>
     <el-col :span="24">
-      <el-card class="el-card-auto">
+      <el-card class="el-card-auto" style="min-height:350px">
       <div slot="header" class="clearfix">
         <span style="font-size: 20px;">我的应用</span>
-        <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text">添加应用</el-button>
+        <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text" @click="childMethod()">新建应用</el-button>
       </div>
       <!-- <div class="appList">
         <div class="typeTitle">OA</div>
@@ -43,13 +43,35 @@
         </div>
       </div> -->
       <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="OA审批" name="first">
+        <el-tab-pane v-for="item in appList" :label="item.name" :name="item.type">
+          <div class="app-item" v-for="(childItem,index) in item.list" :key="index" @click="handleSelect(childItem)" @mouseover="showContent=index" @mouseleave="showContent=null">
+            <svg-icon :icon-class="childItem.icon" style="width: 40px;height: 40px"/>
+            {{ childItem.title }}
+            <div v-if="showContent==index" class="app-item-tools">
+              <!-- <el-popconfirm
+                title="确定删除吗？">
+                <i slot="reference" class="el-icon-delete-solid" @click="removeApp(index)"></i>
+              </el-popconfirm> -->
+              <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i>
+              <!-- <el-popover
+                placement="bottom"
+                width="200"
+                trigger="click"
+                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                <i slot="reference" class="el-icon-delete-solid"></i>
+              </el-popover> -->
+
+              
+            </div>
+          </div>
+        </el-tab-pane>
+        <!-- <el-tab-pane label="OA" name="first">
           <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
             <svg-icon :icon-class="item.meta.icon"/>
             {{ item.meta.title }}
           </div>
         </el-tab-pane>
-        <el-tab-pane label="人事管理" name="second">
+        <el-tab-pane label="人事" name="second">
           <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
             <svg-icon :icon-class="item.meta.icon"/>
             {{ item.meta.title }}
@@ -66,7 +88,7 @@
             <svg-icon :icon-class="item.meta.icon"/>
             {{ item.meta.title }}
           </div>
-        </el-tab-pane>
+        </el-tab-pane> -->
       </el-tabs>
     </el-card>
     </el-col>
@@ -78,7 +100,52 @@
 export default {
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      showContent: null,
+      appList:[
+        {
+          name: 'OA',
+          type: 'first',
+          list: [
+            {
+              type:1,
+              path: 'https://www.baidu.com/',
+              title: '自定义应用',
+              icon: 'zidingyi',
+            },
+            {
+              type:2,
+              path: '/',
+              title: '请假',
+              icon: 'qingjia',
+            },
+            {
+              type:2,
+              path: '/',
+              title: '出差',
+              icon: 'chuchai',
+            },
+          ],
+        },
+        {
+          name: '人事',
+          type: 'second',
+          list: [],
+          
+        },
+        {
+          name: '财务',
+          type: 'third',
+          list: [],
+          
+        },
+        {
+          name: 'CRM',
+          type: 'fourth',
+          list: [],
+          
+        },
+      ]
     };
   },
   computed: {
@@ -103,6 +170,13 @@ export default {
     },
   },
   methods: {
+    childMethod() {
+        this.$parent.openAppList();
+    },
+    //编辑应用
+    editApp(item){
+      this.$parent.editApp(item);
+    },
     // 菜单选择事件
     handleSelect(item) {
       let key = item.path;
@@ -123,8 +197,24 @@ export default {
   },
 };
 </script>
-
+<style>
+  /*去掉切换时el-tab-pane底部的蓝色下划线*/
+  /* .el-tabs__active-bar {
+    background-color: transparent !important;
+  } */
+  
+  /*去掉tabs底部的下划线*/
+  .el-tabs__nav-wrap::after {
+    position: static !important;
+  }
+  .el-tabs__nav-wrap{
+    padding: 0 30px !important;
+  }
+</style>
 <style lang="scss">
+.el-icon-s-tools:hover{
+  color: #00B899;
+}
 .typeTitle{
   font-size: 20px;
   font-weight: 400;
@@ -150,13 +240,11 @@ export default {
     justify-content: center;
     align-items: center;
     float: left;
-    width: 180px;
+    width: 178px;
     height: 150px; 
     color: #999093;
-    // padding: 0 5px;
     margin: 10px 10px 10px 10px;
-    background-color: #e8f4ff;
-    border-radius: 10%;
+    border-radius: 5px;
 }
 .app-item {
     line-height: 50px;
@@ -168,8 +256,18 @@ export default {
     box-sizing: border-box;
     white-space: nowrap;
 }
+.app-item-tools{
+    color: #838892;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 16px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
 .app-item:hover, .app-item:focus {
     outline: none;
-    background-color: #e8f4ff;
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 </style>

yudao-ui/yudao-ui-admin-vue/src/permission.js

@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
 NProgress.configure({ showSpinner: false })
 
 // 增加三方登陆 update by 芋艿
-const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
+const whiteList = ['/login','/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()