From 552ee6446688d6c768f4d6df2b4058dea4a59f40 Mon Sep 17 00:00:00 2001
From: pengjun <158915633@qq.com>
Date: Sun, 28 Apr 2024 16:51:06 +0800
Subject: [PATCH] home

---
 src/views/Home.vue | 274 ++++++++++++++++++---------------------------
 1 file changed, 111 insertions(+), 163 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5c6b1e1..06317c2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -26,111 +26,70 @@
             </div>
           </div>
           -->
-          <!--动态生成菜单支持多级 add by pengj -->
-          <div
-            :style="
-              'display:flex;justify-content:center;width:' +
-              (window.pageWidth - 200) +
-              'px;'
-            "
-          >
-            <el-menu
-              :default-active="activeIndex"
-              class="el-menu-demo"
-              mode="horizontal"
-              @select="handleSelect"
-              style="display: flex"
-            >
-              <!--1级菜单-->
-              <template v-for="menu1 in menuPriv">
-                <el-menu-item
-                  :key="menu1.id"
-                  v-if="menu1.menuType == '1'"
-                  :index="menu1.id"
-                >
-                  {{ menu1.displayName }}
-                </el-menu-item>
-              </template>
-              <template v-for="menu1 in menuPriv">
-                <el-submenu
-                  :popper-append-to-body="false"
-                  :key="menu1.id"
-                  v-if="menu1.menuType == '0'"
-                  :index="menu1.id"
-                >
-                  <template slot="title">{{ menu1.displayName }}</template>
-                  <!--2级菜单-->
-                  <template v-for="menu2 in menu1.treeChildren">
-                    <el-menu-item
-                      :key="menu2.id"
-                      v-if="menu2.menuType == '1'"
-                      :index="menu2.id"
-                      >{{ menu2.displayName }}</el-menu-item
-                    >
-                  </template>
-                  <template v-for="menu2 in menu1.treeChildren">
-                    <el-submenu
-                      :popper-append-to-body="false"
-                      :key="menu2.id"
-                      v-if="menu2.menuType == '0'"
-                      :index="menu2.id"
-                      class="submenutitle"
-                    >
-                      <template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{ menu2.displayName }}</div></template>
-                      <!--3级菜单-->
-                      <template v-for="menu3 in menu2.treeChildren">
-                        <el-menu-item
-                          :key="menu3.id"
-                          v-if="menu3.menuType == '1'"
-                          :index="menu3.id"
-                          >{{ menu3.displayName }}</el-menu-item
-                        >
-                      </template>
-                      <template v-for="menu3 in menu2.treeChildren">
-                        <el-submenu
-                          :popper-append-to-body="false"
-                          :key="menu3.id"
-                          v-if="menu3.menuType == '0'"
-                          :index="menu3.id"
-                        >
-                          <template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{menu3.displayName}}</div></template>
-                          <!--4级菜单-->
-                          <template v-for="menu4 in menu3.treeChildren">
-                            <el-menu-item
-                              :key="menu4.id"
-                              v-if="menu4.menuType == '1'"
-                              :index="menu4.id"
-                              >{{ menu4.displayName }}</el-menu-item
-                            >
-                          </template>
-                          <template v-for="menu4 in menu3.treeChildren">
-                            <el-submenu
-                              :popper-append-to-body="false"
-                              :key="menu4.id"
-                              v-if="menu4.menuType == '0'"
-                              :index="menu4.id"
-                            >
-                              <template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{menu4.displayName}}</div></template>
-                            </el-submenu>
-                          </template>
-                        </el-submenu>
-                      </template>
-                    </el-submenu>
-                  </template>
-                </el-submenu>
-              </template>
-            </el-menu>
-          </div>
-          <!--  -->
-          <div class="btn">
-            <img src="@/assets/images/me.png" alt="" class="currentuser" />
-            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
-            <el-dropdown>
-              <span
-                class="el-dropdown-link"
-                style="color: #222531; font-weight: 700"
-              >
-                <!-- <img
+            <!--动态生成菜单支持多级 add by pengj -->
+            <div :style="`display:flex;justify-content:center;width: ${(window.pageWidth - 350)}px;`">
+              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
+                style="display: flex">
+                <!--1级菜单-->
+                <template v-for="menu1 in menuPriv">
+                  <el-menu-item :key="menu1.id" v-if="menu1.menuType == '1'" :index="menu1.id">
+                    {{ menu1.displayName }}
+                  </el-menu-item>
+                </template>
+                <template v-for="menu1 in menuPriv">
+                  <el-submenu :popper-append-to-body="false" :key="menu1.id" v-if="menu1.menuType == '0'"
+                    :index="menu1.id">
+                    <template slot="title">{{ menu1.displayName }}</template>
+                    <!--2级菜单-->
+                    <template v-for="menu2 in menu1.treeChildren">
+                      <el-menu-item :key="menu2.id" v-if="menu2.menuType == '1'" :index="menu2.id">{{ menu2.displayName
+                      }}</el-menu-item>
+                    </template>
+                    <template v-for="menu2 in menu1.treeChildren">
+                      <el-submenu :popper-append-to-body="false" :key="menu2.id" v-if="menu2.menuType == '0'"
+                        :index="menu2.id" class="submenutitle">
+                        <template slot="title">
+                          <div style="padding:0 10px;margin-right: 8px;">{{ menu2.displayName }}</div>
+                        </template>
+                        <!--3级菜单-->
+                        <template v-for="menu3 in menu2.treeChildren">
+                          <el-menu-item :key="menu3.id" v-if="menu3.menuType == '1'" :index="menu3.id">{{
+                            menu3.displayName }}</el-menu-item>
+                        </template>
+                        <template v-for="menu3 in menu2.treeChildren">
+                          <el-submenu :popper-append-to-body="false" :key="menu3.id" v-if="menu3.menuType == '0'"
+                            :index="menu3.id">
+                            <template slot="title">
+                              <div style="padding:0 10px;margin-right: 8px;">{{ menu3.displayName }}</div>
+                            </template>
+                            <!--4级菜单-->
+                            <template v-for="menu4 in menu3.treeChildren">
+                              <el-menu-item :key="menu4.id" v-if="menu4.menuType == '1'" :index="menu4.id">{{
+                                menu4.displayName }}</el-menu-item>
+                            </template>
+                            <template v-for="menu4 in menu3.treeChildren">
+                              <el-submenu :popper-append-to-body="false" :key="menu4.id" v-if="menu4.menuType == '0'"
+                                :index="menu4.id">
+                                <template slot="title">
+                                  <div style="padding:0 10px;margin-right: 8px;">{{ menu4.displayName }}</div>
+                                </template>
+                              </el-submenu>
+                            </template>
+                          </el-submenu>
+                        </template>
+                      </el-submenu>
+                    </template>
+                  </el-submenu>
+                </template>
+              </el-menu>
+            </div>
+            <!--  -->
+            <div class="btn">
+              <img src="@/assets/images/me.png" alt="" class="currentuser" />
+              <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
+              <el-dropdown>
+                <span class="el-dropdown-link" style="color: #222531; font-weight: 700">
+                  <!-- <img
                   src="@/assets/images/frame.png"
                   alt=""
                   style="width: 20px; height: 20px"
@@ -139,21 +98,14 @@
                   {{ user }} <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item @click.native="logout"
-                  >退出登录</el-dropdown-item
-                >
-                  <el-dropdown-item @click.native="editpassword"
-                  >修改密码</el-dropdown-item
-                >
+                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
+                  <el-dropdown-item @click.native="editpassword">修改密码</el-dropdown-item>
 
-                  <el-dropdown-item @click.native="localSet">本地设置</el-dropdown-item>                  
-                  <el-dropdown-item v-if="LocalConfig.normal.isDevTool" @click.native="toggleDevTools"
-                  >调试工具</el-dropdown-item
-                >
+                  <el-dropdown-item @click.native="localSet">本地设置</el-dropdown-item>
+                  <el-dropdown-item v-if="LocalConfig.normal.isDevTool"
+                    @click.native="toggleDevTools">调试工具</el-dropdown-item>
                   <el-dropdown-item @click.native="clientConfigShow">客户端参数</el-dropdown-item>
-                  <el-dropdown-item @click.native="windowMin"
-                  >最小化</el-dropdown-item
-                >
+                  <el-dropdown-item @click.native="windowMin">最小化</el-dropdown-item>
                   <!--
                   <el-dropdown-item @click.native="windowMax"
                   >最大化</el-dropdown-item
@@ -168,39 +120,16 @@
           </div>
         </el-header>
         <!-- 修改密码弹框 -->
-        <el-dialog
-        title="修改密码"
-        :visible.sync="dialogVisible"
-        width="30%"
-        :close-on-click-modal="false"
-      >
-          <el-form
-          :model="form"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-        >
+        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
+          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
             <el-form-item label="旧密码" prop="oldPassWord">
-              <el-input
-              v-model="form.oldPassWord"
-              autocomplete="new-password"
-              show-password
-            ></el-input>
+              <el-input v-model="form.oldPassWord" autocomplete="new-password" show-password></el-input>
             </el-form-item>
             <el-form-item label="新密码" prop="newPassWord">
-              <el-input
-              v-model="form.newPassWord"
-              autocomplete="new-password"
-              show-password
-            ></el-input>
+              <el-input v-model="form.newPassWord" autocomplete="new-password" show-password></el-input>
             </el-form-item>
             <el-form-item label="确认密码" prop="newPassWord">
-              <el-input
-              v-model="confirmpassword"
-              type="password"
-              autocomplete="new-password"
-              show-password
-            ></el-input>
+              <el-input v-model="confirmpassword" type="password" autocomplete="new-password" show-password></el-input>
             </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
@@ -266,7 +195,7 @@ export default {
           isDevTool: false, // 壳端是否显示打开调试工具的按钮
         }
       },
-      LocalConfigInit:{},
+      LocalConfigInit: {},
     };
   },
   computed: {
@@ -303,7 +232,7 @@ export default {
       // console.log(key, keyPath);
       // tree: any, childNodeName: any, idName: any, idVal: any
       let node = getTreeNode(this.menuPriv, "treeChildren", "id", key);
-      if (node&&this.$route.path!=='/'+node.routeUrl) this.$router.push({ path: node.routeUrl });
+      if (node && this.$route.path !== '/' + node.routeUrl) this.$router.push({ path: node.routeUrl });
     },
     //获取用户所有权限
     getUserAllPriv() {
@@ -344,7 +273,7 @@ export default {
             } else {
               e.menuType = "1";
             }
-          }  else  {
+          } else {
             e.menuType = "1";
           }
           return e;
@@ -356,7 +285,7 @@ export default {
       this.className = val.flag;
       if (this.router.path != val.command) {
         this.router.path = val.command;
-        this.$router.push({ path: val.command }).catch(() => {});
+        this.$router.push({ path: val.command }).catch(() => { });
       }
       // let menuId = arguments[1].$parent.$el.id
       // let menuList = document.getElementById(menuId)
@@ -471,6 +400,7 @@ export default {
   font-size: 14px;
   font-family: "NotoSansSC-Bold";
 }
+
 .titleimg :hover {
   width: 30px;
   background-color: rgb(34, 149, 98);
@@ -696,7 +626,7 @@ export default {
   color: #FF0000;
 }
 
-::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
+::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
   font-size: 14px;
   height: 47px;
   line-height: 47px;
@@ -705,6 +635,7 @@ export default {
   color: #52555f;
   border-bottom: 3px solid #396ffa;
 }
+
 /* ::v-deep .submenutitle.is-active .el-submenu__title{
   border-bottom:none
 } */
@@ -712,20 +643,25 @@ export default {
   height: 36px !important;
   line-height: 36px !important;
 }
-::v-deep .el-menu--horizontal > .el-menu-item {
+
+::v-deep .el-menu--horizontal>.el-menu-item {
   height: 40px;
   line-height: 40px;
 }
+
 ::v-deep .el-submenu__title {
   padding: 0 5px 0 5px !important;
 }
+
 ::v-deep .el-menu--popup {
   min-width: auto !important;
   /* padding: 5px 10px !important; */
 }
+
 ::v-deep .el-submenu .el-menu-item {
   min-width: auto !important;
 }
+
 ::v-deep .el-menu--horizontal .el-menu .el-menu-item,
 .el-menu--horizontal .el-menu .el-submenu__title {
   font-size: 14px;
@@ -733,9 +669,11 @@ export default {
   font-family: "NotoSansSC-Regular";
   color: #52555f;
 }
+
 :v-deep .el-menu-item .is-active {
   background-color: #247bb4 !important;
 }
+
 ::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
   background-color: rgba(20, 96, 243, 0.1);
@@ -744,23 +682,26 @@ export default {
   font-family: "NotoSansSC-Bold";
   color: #396ffa;
 }
+
 /* ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
   display: none;
 } */
-::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
+::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
   vertical-align: middle;
-    margin-left: 8px;
-    margin-top: -3px;
-    position: absolute;
-    top: 14px;
-    right: 4px;
+  margin-left: 8px;
+  margin-top: -3px;
+  position: absolute;
+  top: 14px;
+  right: 4px;
 }
+
 ::v-deep .submenutitle .el-submenu__title {
   font-size: 14px !important;
   font-weight: 400 !important;
   font-family: "NotoSansSC-Regular" !important;
   color: #52555f !important;
 }
+
 ::v-deep .submenutitle .el-submenu__title:hover {
   background-color: rgba(20, 96, 243, 0.1) !important;
   font-size: 14px !important;
@@ -768,20 +709,24 @@ export default {
   font-family: "NotoSansSC-Bold" !important;
   color: #396ffa !important;
 }
+
 ::v-deep .submenutitle .el-submenu__title {
   height: 36px !important;
   line-height: 36px !important;
 }
+
 ::v-deep .submenutitle .el-submenu__title .el-submenu__icon-arrow {
-  font-size:14px !important;
+  font-size: 14px !important;
 }
-::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active{
+
+::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active {
   background-color: rgba(20, 96, 243, 0.1) !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   font-family: "NotoSansSC-Bold" !important;
   color: #396ffa !important;
 }
+
 /* ::v-deep .el-menu--horizontal .el-menu .el-submenu.is-active .el-submenu__title{
   background-color: rgba(20, 96, 243, 0.1) !important;
   font-size: 14px !important;
@@ -789,12 +734,15 @@ export default {
   font-family: "NotoSansSC-Bold" !important;
   color: #396ffa !important;
 } */
-::v-deep .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
+::v-deep .el-menu--horizontal .el-menu .el-menu-item,
+.el-menu--horizontal .el-menu .el-submenu__title {
   padding: 0 15px !important;
 }
-::v-deep .el-menu.el-menu--horizontal{
-  border-bottom:none;
+
+::v-deep .el-menu.el-menu--horizontal {
+  border-bottom: none;
 }
+
 /* ::v-deep .el-menu--popup-right-start{
       margin-left: 15px !important;
 } */