From bda30dd647ca802949c663ae708204a8c301559e Mon Sep 17 00:00:00 2001
From: dragon <3013557874@qq.com>
Date: Fri, 5 Jul 2024 19:46:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=85=A5=E5=AD=90=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E5=8A=A0=E8=BD=BD=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/maintainer/index.vue | 401 +++++++++++++++++-----------
 1 file changed, 242 insertions(+), 159 deletions(-)

diff --git a/src/components/maintainer/index.vue b/src/components/maintainer/index.vue
index 4a35115..8393eb6 100644
--- a/src/components/maintainer/index.vue
+++ b/src/components/maintainer/index.vue
@@ -1,177 +1,260 @@
 <template>
-    <!-- Left side column. contains the logo and sidebar -->
-    <aside class="main-sidebar" style="height: 100%; overflow: hidden; overflow: scroll;">
-        <!-- sidebar: style can be found in sidebar.less -->
-        <section class="sidebar">
-            <!-- Sidebar user panel (optional) -->
-            <div class="user-panel">
-                <div class="pull-left image">
-                    <img :src="avatar" class="img-circle" :alt="username">
-                </div>
-                <div class="pull-left info">
-                    <p>{{ username }}</p>
-                    <!-- Status -->
-                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
-                </div>
-            </div>
-            <!-- search form (Optional) -->
-            <form method="get" class="sidebar-form" onsubmit="return false;">
-                <div class="input-group">
-                    <input type="text" name="q" class="form-control" placeholder="Search..." @input="search">
-                    <span class="input-group-btn">
-                        <button name="search" id="search-btn" class="btn btn-flat" @click="search">
-                            <i class="fa fa-search"></i>
-                        </button>
-                    </span>
-                </div>
-            </form>
-            <!-- /.search form -->
-            <!-- Sidebar Menu -->
-            <ul class="sidebar-menu">
-                <li class="header">主导航</li>
-                <!-- Optionally, you can add icons to the links -->
-                <li v-for="(parent, parentIndex) in parentMenus" :key="parent" :data-index="parentIndex" class="treeview">
-                    <a>
-                        <i :class="[parent.icon ? parent.icon : 'fa fa-link']"></i>
-                        <span>{{ parent.name }}</span>
-                        <span class="label pull-right bg-yellow" :id="['ic' + parent.id]">
-                            {{ getChildLength(parent.id) }}
-                        </span>
-                    </a>
-                    <ul class="treeview-menu" :id="['menu' + parent.id]">
-                        <li v-for="(child, childIndex) in getChilds(parent.id)" :key="child" :data-index="childIndex">
-                            <a :data-url="child.path" @click="handleClick(child)">
-                                <i
-                                    :class="[child.icon && child.icon != '' ? child.icon : 'fa fa-circle-o text-yellow']"></i>
-                                <span>{{ child.name }}</span>
-                            </a>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-            <!-- /.sidebar-menu -->
-        </section>
-        <!-- /.sidebar -->
-    </aside>
-    <!-- Content Wrapper. Contains page content -->
-    <div class="content-wrapper" style="height: 100%;">
-        <!-- Content Header (Page header) -->
-        <section class="content-header"
-            :style="[childMenu.name && childMenu.name != '' ? 'display:block;' : 'display:none;']">
-            <h1>
-                {{ childMenu.name }}
-                <small>{{ childMenu.description }}</small>
-            </h1>
-            <ol class="breadcrumb">
-                <li><a href="#"><i class="fa fa-dashboard"></i> {{ childMenu.parentName }}</a></li>
-                <li class="active">{{ childMenu.name }}</li>
-            </ol>
-        </section>
-        <!-- Main content -->
-        <section class="content">
-        <!-- <section class="content" style="height: 100%; overflow: hidden; overflow: scroll;"> -->
-            <!-- Your Page Content Here -->
-            <component :is="componentName"></component>
-        </section>
-        <!-- /.content -->
-    </div>
-    <!-- /.content-wrapper -->
-    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title">提示信息</h4>
-                </div>
-                <div class="modal-body" id="tipMsg"></div>
-            </div>
+  <!-- Left side column. contains the logo and sidebar -->
+  <aside
+    class="main-sidebar"
+    style="height: 100%; overflow: hidden; overflow: scroll"
+  >
+    <!-- sidebar: style can be found in sidebar.less -->
+    <section class="sidebar">
+      <!-- Sidebar user panel (optional) -->
+      <div class="user-panel">
+        <div class="pull-left image">
+          <img :src="avatar" class="img-circle" :alt="username" />
         </div>
-    </div>
-    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
-         data-backdrop="static">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title">确认信息</h4>
-                </div>
-                <div class="modal-body" id="confirmMsg"></div>
-            </div>
+        <div class="pull-left info">
+          <p>{{ username }}</p>
+          <!-- Status -->
+          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
         </div>
+      </div>
+      <!-- search form (Optional) -->
+      <form method="get" class="sidebar-form" onsubmit="return false;">
+        <div class="input-group">
+          <input
+            type="text"
+            name="q"
+            class="form-control"
+            placeholder="Search..."
+            @input="search"
+          />
+          <span class="input-group-btn">
+            <button
+              name="search"
+              id="search-btn"
+              class="btn btn-flat"
+              @click="search"
+            >
+              <i class="fa fa-search"></i>
+            </button>
+          </span>
+        </div>
+      </form>
+      <!-- /.search form -->
+      <!-- Sidebar Menu -->
+      <ul class="sidebar-menu">
+        <li class="header">主导航</li>
+        <!-- Optionally, you can add icons to the links -->
+        <li
+          v-for="(parent, parentIndex) in parentMenus"
+          :key="parent"
+          :data-index="parentIndex"
+          class="treeview"
+        >
+          <a>
+            <i :class="[parent.icon ? parent.icon : 'fa fa-link']"></i>
+            <span>{{ parent.name }}</span>
+            <span class="label pull-right bg-yellow" :id="['ic' + parent.id]">
+              {{ getChildLength(parent.id) }}
+            </span>
+          </a>
+          <ul class="treeview-menu" :id="['menu' + parent.id]">
+            <li
+              v-for="(child, childIndex) in getChilds(parent.id)"
+              :key="child"
+              :data-index="childIndex"
+            >
+              <a :data-url="child.path" @click="handleClick(child)">
+                <i
+                  :class="[
+                    child.icon && child.icon != ''
+                      ? child.icon
+                      : 'fa fa-circle-o text-yellow',
+                  ]"
+                ></i>
+                <span>{{ child.name }}</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <!-- /.sidebar-menu -->
+    </section>
+    <!-- /.sidebar -->
+  </aside>
+  <!-- Content Wrapper. Contains page content -->
+  <div class="content-wrapper" style="height: 100%">
+    <!-- Content Header (Page header) -->
+    <section
+      class="content-header"
+      :style="[
+        childMenu.name && childMenu.name != ''
+          ? 'display:block;'
+          : 'display:none;',
+      ]"
+    >
+      <h1>
+        {{ childMenu.name }}
+        <small>{{ childMenu.description }}</small>
+      </h1>
+      <ol class="breadcrumb">
+        <li>
+          <a href="#"
+            ><i class="fa fa-dashboard"></i> {{ childMenu.parentName }}</a
+          >
+        </li>
+        <li class="active">{{ childMenu.name }}</li>
+      </ol>
+    </section>
+    <!-- Main content -->
+    <section class="content">
+      <!-- <section class="content" style="height: 100%; overflow: hidden; overflow: scroll;"> -->
+      <!-- Your Page Content Here -->
+      <component :is="componentName"></component>
+    </section>
+    <!-- /.content -->
+  </div>
+  <!-- /.content-wrapper -->
+  <div
+    class="modal fade"
+    id="tipModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="modalLabel"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">提示信息</h4>
+        </div>
+        <div class="modal-body" id="tipMsg"></div>
+      </div>
     </div>
-    <div class="modal fade loading" style="background: #00000040;" tabindex="-1" role="dialog"
-         aria-labelledby="loadingModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
-        <div class="loadingGif" style="position: fixed; left:50%; top:50%;"><img src="https://img.zcool.cn/community/0111345d94b0b8a801211d53cbd04d.gif" style="width: 10%;"></div>
+  </div>
+  <div
+    class="modal fade"
+    id="confirmModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="modalLabel"
+    data-backdrop="static"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">确认信息</h4>
+        </div>
+        <div class="modal-body" id="confirmMsg"></div>
+      </div>
     </div>
+  </div>
+  <div
+    class="modal fade loading"
+    style="background: #00000040"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="loadingModalLabel"
+    aria-hidden="true"
+    data-backdrop="static"
+    data-keyboard="false"
+  >
+    <div class="loadingGif" style="position: fixed; left: 50%; top: 50%">
+      <img
+        src="https://img.zcool.cn/community/0111345d94b0b8a801211d53cbd04d.gif"
+        style="width: 10%"
+      />
+    </div>
+  </div>
 </template>
   
 <script>
-import store from '@/store';
-import { getStore } from '@/utils/store';
+import store from "@/store";
+import Vue from "vue";
+import { getStore } from "@/utils/store";
 
 export default {
-    name: 'MaintainerView',
-    data() {
-        return {
-            componentName: "",
-            username: "",
-            avatar: "",
-            parentMenus: [],
-            childMenus: [],
-            childMenu: {
-                name: "",
-                parentName: "",
-                description: "",
-            }
-        };
+  name: "MaintainerView",
+  data() {
+    return {
+      componentName: "",
+      username: "",
+      avatar: "",
+      parentMenus: [],
+      childMenus: [],
+      childMenu: {
+        name: "",
+        parentName: "",
+        description: "",
+      },
+    };
+  },
+  created() {
+    this.getMenu();
+    this.username = store.getters.username;
+    this.avatar = store.getters.avatar;
+  },
+  methods: {
+    getMenu() {
+      this.parentMenus = getStore({ name: "parent_menus" });
+      this.childMenus = getStore({ name: "child_menus" });
+      store.dispatch("getMenu").then((res) => {
+        this.parentMenus = res.parents;
+        this.childMenus = res.childs;
+      });
     },
-    created() {
-        this.getMenu();
-        this.username = store.getters.username;
-        this.avatar = store.getters.avatar;
+    getChilds(parentId) {
+      return this.childMenus.filter((v) => v.parentid == parentId);
     },
-    methods: {
-        getMenu() {
-            this.parentMenus = getStore({ name: 'parent_menus' });
-            this.childMenus = getStore({ name: 'child_menus' });
-            store.dispatch('getMenu').then(res => {
-                this.parentMenus = res.parents;
-                this.childMenus = res.childs;
-            });
-        },
-        getChilds(parentId) {
-            return this.childMenus.filter(v => v.parentid == parentId);
-        },
-        getChildLength(parentId) {
-            return this.childMenus.filter(v => v.parentid == parentId).length;
-        },
-        handleClick(menu) {
-            this.childMenu.name = menu.name;
-            this.childMenu.parentName = menu.parentstr;
-            this.childMenu.description = menu.description;
-            store.dispatch('getViewComponent', menu.path).then(componentName => {
-                console.log(componentName);
-                this.componentName = componentName;
-            });
-        },
-        search() {
-            let text = $("input[type='text']").val();
-            this.childMenus = store.getters.childMenus.filter(v => v.name.indexOf(text) >= 0);
-            if (!this.childMenus.length || this.childMenus.length == 0) {
-                this.parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 0);
-            } else {
-                let parentIds = this.childMenus.map(v => v.parentid);
-                let parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 0);
-                if (parentMenus && parentMenus.length > 0) {
-                    parentMenus.forEach(v => {
-                        parentIds.push(v.id);
-                    });
-                }
-                this.parentMenus = store.getters.parentMenus.filter(v1 => parentIds.filter(v2 => v1.id == v2).length > 0);
-            }
+    getChildLength(parentId) {
+      return this.childMenus.filter((v) => v.parentid == parentId).length;
+    },
+    handleClick(menu) {
+      this.childMenu.name = menu.name;
+      this.childMenu.parentName = menu.parentstr;
+      this.childMenu.description = menu.description;
+      store.dispatch("getViewComponent", menu.path).then((componentName) => {
+        console.log(componentName);
+        this.componentName = componentName;
+        const files = require.context("@/views", true, /\.vue$/);
+        let components = {};
+        files.keys().forEach((key) => {
+          components[key.replace(/(\.\/|\.vue)/g, "")] = files(key).default;
+        });
+        Object.keys(components).forEach((item) => {
+          if (components[item].name == componentName) {
+            Vue.component(components[item].name, components[item]);
+            return;
+          }
+        });
+      });
+    },
+    search() {
+      let text = $("input[type='text']").val();
+      this.childMenus = store.getters.childMenus.filter(
+        (v) => v.name.indexOf(text) >= 0
+      );
+      if (!this.childMenus.length || this.childMenus.length == 0) {
+        this.parentMenus = store.getters.parentMenus.filter(
+          (v) => v.name.indexOf(text) >= 0
+        );
+      } else {
+        let parentIds = this.childMenus.map((v) => v.parentid);
+        let parentMenus = store.getters.parentMenus.filter(
+          (v) => v.name.indexOf(text) >= 0
+        );
+        if (parentMenus && parentMenus.length > 0) {
+          parentMenus.forEach((v) => {
+            parentIds.push(v.id);
+          });
         }
+        this.parentMenus = store.getters.parentMenus.filter(
+          (v1) => parentIds.filter((v2) => v1.id == v2).length > 0
+        );
+      }
     },
-}
+  },
+};
 </script>
   
 <style scoped>
-@import '@/css/main.css';
+@import "@/css/main.css";
 </style>
\ No newline at end of file