From 3b97d6ed1a423d735f762fe4b82d8cac552ea582 Mon Sep 17 00:00:00 2001
From: windfloat2019 <windfloat2019@163.com>
Date: Tue, 21 Jun 2022 15:29:10 +0800
Subject: [PATCH] =?UTF-8?q?wzf=E9=83=A8=E5=88=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 | 46 +++++++++++++--------
 src/components/container/SideBar.vue        | 19 ++++++---
 src/components/container/Tags.vue           | 34 ++++++++++++---
 src/components/container/Top.vue            | 13 ++++--
 src/components/page/account/Login.vue       |  2 +
 src/components/page/dashBoard/WorkBench.vue | 15 +++----
 6 files changed, 89 insertions(+), 40 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5d5ed41..5cc29be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,16 @@
 <template>
-    <SideBar v-if="account"/>
-    <div v-if="account" class="app_right">
-        <Top/>
-        <router-view></router-view>
-    </div>
+  <SideBar v-if="account" />
+  <div class="app_right">
+    <Top v-if="account"/>
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
 import SideBar from './components/container/SideBar.vue'
 import Top from './components/container/Top.vue'
-import {ref} from 'vue'
+import {ref, onMounted} from 'vue'
+import {useRoute} from 'vue-router'
 export default {
   name: "App",
   components: {
@@ -18,19 +19,28 @@ export default {
   },
   setup(){
     let account = ref(true)
+    const route = useRoute()
+    // const uid = route
+    // let routeScan = reactive({routescan:this.$route.path})
+    onMounted(()=>{
+      // if(localStorage.getItem()){
+
+      // }
+      console.log(route.path);
+      // if (this.$route.path.includes('account')) {
+      //   console.log('false');
+      //   this.account = false
+      // }else{
+      //   this.account = true
+      //   console.log('true');
+      // }
+    }) 
     return {
-      account
+      account,
+      // routeScan
+      route
     }
   },
-  updated() {
-    if (this.$route.path.includes('account')) {
-      console.log('false');
-      this.account = false
-    }else{
-      this.account = true
-      console.log('true');
-    }
-  }
 };
 </script>
 
@@ -39,14 +49,14 @@ export default {
   margin: 0;
   padding: 0;
 }
-#app{
+#app {
   display: flex;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  .app_right{
+  .app_right {
     flex: 1;
   }
 }
diff --git a/src/components/container/SideBar.vue b/src/components/container/SideBar.vue
index 35e9370..db84373 100644
--- a/src/components/container/SideBar.vue
+++ b/src/components/container/SideBar.vue
@@ -19,7 +19,7 @@
               <el-icon><icon-menu /></el-icon>
               <span>Dashboard</span>
             </template>
-            <el-menu-item index="/dash_board/work_bench">
+            <el-menu-item index="/dash_board/work_bench" @click="click($event,'工作台')">
               <span>工作台</span>
             </el-menu-item>
           </el-sub-menu>
@@ -29,10 +29,10 @@
               <el-icon><setting /></el-icon>
               <span>系统管理</span>
             </template>
-            <el-menu-item index="/system_manage/account_manage">
+            <el-menu-item index="/system_manage/account_manage" @click="click($event,'账号管理')">
               <span>账号管理</span>
             </el-menu-item>
-            <el-menu-item index="/system_manage/menu_manage">
+            <el-menu-item index="/system_manage/menu_manage" @click="click($event,'菜单管理')">
               <span>菜单管理</span>
             </el-menu-item>
           </el-sub-menu>
@@ -45,10 +45,19 @@
 import { Menu as IconMenu, Setting } from "@element-plus/icons-vue";
 import { ref,onMounted } from "vue";
 import mitt from '../../mitt'
+import { useRouter } from 'vue-router';
 export default {
   setup() {
     let isCollapse = ref(false);
-
+    let router = useRouter()
+    function click(e,tagname){
+      router.replace(e.index)
+      mitt.emit('navitem',{
+        path:e.index,
+        tagname
+      })
+      
+    }
     onMounted(()=>{
       mitt.on('isfold',()=>{
         isCollapse.value = !isCollapse.value
@@ -57,7 +66,7 @@ export default {
     })
     return {
       isCollapse,
-
+      click
     };
   },
   components: {
diff --git a/src/components/container/Tags.vue b/src/components/container/Tags.vue
index c630434..d911438 100644
--- a/src/components/container/Tags.vue
+++ b/src/components/container/Tags.vue
@@ -1,22 +1,46 @@
 // 顶部标签组件
 <template>
   <el-row class="Tags_P">
-    <el-check-tag :checked="checkedArr" @change="onChange">Tog</el-check-tag>
-    <el-check-tag :checked="checkedArr" @change="onChange">Tog</el-check-tag>
-    <el-check-tag :checked="checkedArr" @change="onChange">Tog</el-check-tag>
+    <el-check-tag :checked="checkedArr[index]" @change="onChange" v-for="(item,index) in tags" :key="index">
+      <router-link to="">{{item.tagname}}</router-link>
+    </el-check-tag>
   </el-row>
 </template>
 
 <script>
+import { onMounted, reactive } from '@vue/runtime-core';
+import mitt from '../../mitt'
 export default {
   setup() {
-    const checkedArr = []; //未代理
+    const checkedArr = reactive([]);
     const onChange = (status) => {
-      checked.value = status;
+      console.log(status);
+      // checked.value = status;
     };
+    let tags = reactive([
+      {
+        path:'dash_board/work_bench',
+        tagname:'工作台'
+      }
+    ])
+    onMounted(()=>{
+      mitt.on('navitem',(obj)=>{
+        /* tags数量无需限制 */
+        console.log(tags,obj);
+        if(tags.some(item=>{
+          return item.path == obj.path
+        })){
+          checkedArr[tags.indexOf(obj)] = true
+        }else{
+          tags.push(obj)
+          checkedArr[tags.length] = true
+        }
+      })
+    })
     return {
       checkedArr,
       onChange,
+      tags
     };
   },
 };
diff --git a/src/components/container/Top.vue b/src/components/container/Top.vue
index b6360f3..3f1a71d 100644
--- a/src/components/container/Top.vue
+++ b/src/components/container/Top.vue
@@ -16,7 +16,15 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>工作台</el-dropdown-item>
+              <el-dropdown-item>
+                <router-link to="/dash_board/work_bench">工作台</router-link>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <router-link to="/dash_board/work_bench">工作台</router-link>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <router-link to="/dash_board/work_bench">工作台</router-link>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -28,7 +36,6 @@
 
       <div class="right">
         <div class="icons">
-          <el-icon size="20px"><search /></el-icon>
           <el-icon size="20px"><bell /></el-icon>
         </div>
       <el-dropdown>
@@ -98,7 +105,7 @@ export default {
     .right{
       display: flex;
       .user{
-        padding-right: 20px;
+        padding-right: 30px;
         display: flex;
         .avatar {
           padding:11px;
diff --git a/src/components/page/account/Login.vue b/src/components/page/account/Login.vue
index 963c1ba..518e4ef 100644
--- a/src/components/page/account/Login.vue
+++ b/src/components/page/account/Login.vue
@@ -50,6 +50,7 @@
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { ElMessage } from "element-plus";
+import req from '../../../request'
 export default {
   setup() {
     const router = useRouter();
@@ -60,6 +61,7 @@ export default {
     }
     function login() {
       // 调用登录接口
+      // let res = await req()
       ElMessage({
         message: "登录成功",
         type: "success",
diff --git a/src/components/page/dashBoard/WorkBench.vue b/src/components/page/dashBoard/WorkBench.vue
index ca43b50..f5d04e9 100644
--- a/src/components/page/dashBoard/WorkBench.vue
+++ b/src/components/page/dashBoard/WorkBench.vue
@@ -4,22 +4,22 @@
       <div class="welcome">
         <img src="../../../assets/avatar.jpg" alt="" class="avatar" />
         <div class="moment">
-          <p>{{ moment }},{{ user }},{{ tpis }}</p>
-          <span>{{ weather }}</span>
+          <p>早安, Vben Admin, 开始您一天的工作吧！</p>
+          <span>今日晴，20℃ - 32℃！</span>
         </div>
       </div>
       <div class="overview">
         <div class="overview_items">
           <span class="overview_item">待办</span>
-          <span class="show">{{ done }}/{{ total }}</span>
+          <span class="show">2/10</span>
         </div>
         <div class="overview_items">
           <span class="overview_item">项目</span>
-          <span class="show">{{ projectNum }}</span>
+          <span class="show">8</span>
         </div>
         <div class="overview_items">
           <span class="overview_item">团队</span>
-          <span class="show">{{ teamNum }}</span>
+          <span class="show">26</span>
         </div>
       </div>
     </div>
@@ -84,14 +84,12 @@ export default {};
    height: 116px;
    padding: 0 40px;
    align-items: center;
-    justify-content: space-between;
+   justify-content: space-between;
     .welcome {
       display: flex;
-      
       .avatar {
         width: 72px;
         height: 72px;
-      //   margin:22px 0;
         border-radius: 50%;
       }
     }
@@ -109,7 +107,6 @@ export default {};
     * section {
       margin-left: 15px;
       margin-top: 15px;
-
       background-color: #fff;
     }
     .section_header {
-- 
Gitee