perf: 优化门户站点选择

portal-manager-ui/admin/src/store/modules/user.js

@@ -26,6 +26,9 @@ export default {
     routerList(state) {
       return state.routerList;
     },
+    siteTreeList(state) {
+      return state.siteList;
+    },
   },
   mutations: {
     SET_routerList(state, routerList) {

portal-manager-ui/admin/src/utils/index.js

@@ -95,3 +95,22 @@ export function filterarrays(arr, field = "children") {
   recursiveSearch(arr);
   return data;
 }
+
+// 找出目标站点
+export function findSitesById(data, targetId) {
+  let result = {};
+
+  function search(items) {
+    for (let item of items) {
+      if (item.type === "site" && item.id == targetId) {
+        result = item;
+      }
+      if (item.children && item.children.length > 0) {
+        search(item.children);
+      }
+    }
+  }
+
+  search(data);
+  return result;
+}

portal-manager-ui/admin/src/views/home/components/HeaderSite.vue

+<template>
+  <div :trigger="['click']" class="trigger" @click="ontrigger">
+    <slot>
+      <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
+        {{ siteName }} <a-icon type="down-circle" class="icon" />
+      </a>
+    </slot>
+    <div
+      slot="overlay"
+      class="select-site"
+      :style="{ left: `${offsetLeft}px` }"
+      v-if="show"
+    >
+      <div class="flex items-center primary-color name">
+        <a-icon type="environment" style="margin-right: 10px" />
+        <span style="">{{ siteName }}</span>
+      </div>
+      <div class="site-list">
+        <span
+          v-for="(item, index) in sitelist"
+          :key="index"
+          :class="{ 'primary-color': item.id == checkid }"
+          @click="setSite(item)"
+          >{{ item.label }}</span
+        >
+      </div>
+      <div class="check-site">
+        <span>您的选择是：</span>
+        <span
+          class="check-item"
+          v-for="(item, index) in checkarr"
+          :key="index"
+          @click="updataSite(item)"
+          >{{ index > 0 ? ">" : "" }}{{ item.label }}</span
+        >
+      </div>
+      <div class="site-btn">
+        <a-button @click="show = false" style="margin-right: 10px"
+          >取消</a-button
+        >
+
+        <a-button type="primary" @click="onSucessSite" :disabled="isSite"
+          >确定</a-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+import storage from "@/utils/js/Storage";
+export default {
+  data() {
+    return {
+      show: false,
+      offsetLeft: 0,
+      checkarr: [], //选中站点
+      checkid: undefined, //最终选中站点
+      siteName: "",
+      isSite: true,
+      sitelist: [],
+    };
+  },
+  computed: {
+    ...mapGetters("user", ["siteTreeList"]),
+  },
+  created() {
+    this.getwaitedListdata();
+  },
+  mounted() {
+    const { offsetLeft } = this.$el;
+    this.offsetLeft = offsetLeft;
+  },
+  methods: {
+    // 确认站点
+    onSucessSite() {
+      if (this.checkarr.length == 0) return;
+      let obj = this.checkarr[this.checkarr.length - 1];
+
+      this.clickSite(obj);
+    },
+    // 选中
+    setSite(obj) {
+      this.checkid = undefined;
+      // 为子节点不添加数据
+      let data = this.checkarr[this.checkarr.length - 1];
+
+      if (data && (data.isLeaf || data.children.length == 0)) {
+        // 如果为子节点更新最后一个数据
+        this.checkid = obj.id;
+        this.checkarr[this.checkarr.length - 1] = obj;
+        // 如果选中数据有子集更新站点列表
+        if (obj.children && obj.children.length > 0) {
+          this.sitelist = obj.children;
+        }
+      } else {
+        this.checkarr.push(obj);
+        if (obj.children && obj.children.length > 0) {
+          this.sitelist = obj.children;
+        }
+      }
+
+      if (obj && obj.type == "site") {
+        this.isSite = false;
+      } else {
+        this.isSite = true;
+      }
+    },
+    // 更新选中
+    updataSite(row) {
+      const { id } = row;
+      this.checkid = undefined;
+      let index = this.checkarr.findIndex((v) => v.id == id);
+
+      if (index > -1) {
+        this.checkarr.splice(index + 1, this.checkarr.length - (index + 1));
+      }
+      if (row.children && row.children.length > 0) {
+        this.sitelist = row.children;
+      }
+
+      if (row && row.type == "site") {
+        this.isSite = false;
+      } else {
+        this.isSite = true;
+      }
+      // this.getwaitedListdata(id);
+    },
+    getwaitedListdata() {
+      this.sitelist = this.siteTreeList;
+      let arr = [];
+      const treeFn = function (e) {
+        e.forEach((element) => {
+          arr.push(element);
+          if (element.children && element.children.length > 0) {
+            treeFn(element.children);
+          }
+        });
+      };
+      const siteid = storage.get(2, "siteId");
+      treeFn(this.siteTreeList);
+      const siteObj = arr.find((v) => v.id == siteid);
+      this.siteName = siteObj ? siteObj.label : "请选择站点";
+    },
+    clickSite(obj) {
+      storage.set(2, "siteId", obj.id);
+      storage.set(2, "siteName", obj.label);
+      this.show = false;
+      if (location.href.search(/token/gi) >= 0) {
+        this.$router.push({ path: "/resource/advimg" });
+        setTimeout(() => {
+          location.reload();
+        });
+      } else {
+        location.reload();
+      }
+    },
+    ontrigger(e) {
+      if (e.target && e.target.nodeName == "A") {
+        this.show = !this.show;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.trigger {
+  display: inline-block;
+  position: relative;
+  line-height: 64px;
+}
+.ant-dropdown-link {
+  color: #fff;
+  padding: 0 20px;
+  font-size: 16px;
+  min-width: 200px;
+  display: inline-block;
+  .icon {
+    font-size: 12px;
+  }
+}
+.primary-color {
+  color: #1890ff;
+}
+.select-site {
+  position: fixed;
+  left: 0;
+  top: 65px;
+  background: #fff;
+  border-radius: 6px;
+  padding: 10px;
+  min-width: 60%;
+  max-width: 70%;
+  z-index: 9;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 14px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  .name {
+    font-size: 20px;
+  }
+  .site-list {
+    // padding: 10px 0;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    overflow: hidden;
+    span {
+      float: left;
+      line-height: 1.5;
+      padding: 10px 20px;
+      display: inline-block;
+      cursor: pointer;
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+  .check-site,
+  .site-btn {
+    padding: 0 20px;
+  }
+  .check-item {
+    cursor: pointer;
+  }
+}
+</style>

portal-manager-ui/admin/src/views/home/home.vue

@@ -15,12 +15,13 @@
           {{ sysName }}
         </h1>
         <div class="selectOnptions">
-          <a-select v-model="siteInfo" labelInValue @change="handleChange">
+          <HeaderSite></HeaderSite>
+          <!-- <a-select v-model="siteInfo" labelInValue @change="handleChange">
             <a-icon slot="suffixIcon" type="down-circle" />
             <a-select-option v-for="v in siteList" :key="v.id" :value="v.id">
               {{ v.siteName }}
             </a-select-option>
-          </a-select>
+          </a-select> -->
         </div>
       </a-space>
       <!-- 菜单 -->
@@ -84,10 +85,12 @@
 import { mapState, mapMutations, mapGetters } from "vuex";
 import { LogoutInterface } from "@/api/user";
 import changePassword from "./components/changePassword.vue";
+import HeaderSite from "./components/HeaderSite.vue";
 import storage from "@/utils/js/Storage";
 export default {
   components: {
     changePassword,
+    HeaderSite,
   },
   data() {
     return {

portal-manager-ui/admin/src/views/signIn/signIn.vue

@@ -251,7 +251,7 @@ import Swiper from "swiper";
 import { LoginInterface, changeForgotPassword, getSlogan } from "@/api/user.js";
 import { mapMutations, mapState } from "vuex";
 import { changeAccount, changePassWord } from "@/utils/js/validate";
-import { encrypt } from "@/utils";
+import { encrypt, findSitesById } from "@/utils";
 import storage from "@/utils/js/Storage";
 export default {
   data() {
@@ -332,7 +332,12 @@ export default {
     this.initSwiper();
   },
   methods: {
-    ...mapMutations("user", ["set_token", "SET_USERDATA", "set_siteList"]),
+    ...mapMutations("user", [
+      "set_token",
+      "SET_USERDATA",
+      "set_siteList",
+      "SET_routerList",
+    ]),
     getTitle() {
       getSlogan("signImg").then((res) => {
         if (res.code == 1) {
@@ -399,12 +404,17 @@ export default {
           let { code, data, msg } = res;
           if (code == 1) {
             let { siteList, user, token } = data;
+            let { siteIds } = user;
             this.set_token(token);
             this.SET_USERDATA(user);
             this.set_siteList(siteList);
-            if (siteList.length) {
-              storage.set(2, "siteId", siteList[0].id);
-              storage.set(2, "siteName", siteList[0].siteName);
+            this.SET_routerList(this.getUrl(user.menuList));
+            if (siteList.length && siteIds) {
+              let siteId = siteIds.split(",")[0];
+              let firstSite = findSitesById(siteList, 20);
+              let siteName = firstSite.label;
+              storage.set(2, "siteId", siteId);
+              storage.set(2, "siteName", siteName);
             }
             setTimeout(() => {
               this.$router.push("/home");
@@ -445,6 +455,20 @@ export default {
         }
       });
     },
+    // 递归获取菜单url
+    getUrl(menus = []) {
+      let urls = [];
+      let fn = (arr) => {
+        arr.forEach((v) => {
+          urls.push(v.url);
+          if (v.childList && v.childList.length) {
+            fn(v.childList);
+          }
+        });
+      };
+      fn(menus);
+      return urls;
+    },
   },
 };
 </script>