群发新通讯录懒加载

zhouwx

2024-08-30 1f6893d24ba87313d4114c68813073ead53b2e12

 src/views/Home.vue

@@ -2,7 +2,8 @@
   <div>

      <a-layout id="components-layout-demo-custom-trigger" :style="{ height: '100vh' }">

         <a-layout-sider v-model="collapsed" :trigger="null" collapsible>

            <div class="logo">{{ collapsed ? collapsed : '预警响应系统' }}</div>

        <div class="logo" v-if="!collapsed">{{ '预警响应系统' }}</div>

        <div class="logo" v-else><a-icon type="alert" /></div>

            <menuSider />

         </a-layout-sider>

         <a-layout>

@@ -31,9 +32,11 @@
          margin: '15px 16px 24px 16px',

        }">

               <!-- Content -->

               <router-view ref="tabContent"></router-view>

          <keep-alive include="notice">

                 <router-view ref="tabContent"></router-view>

          </keep-alive>

               <div style="height: 30px;text-align: center;line-height: 30px">

            技术支持：中国科学院

            技术支持：技术保障部

          </div>

            </a-layout-content>

         </a-layout>

@@ -53,11 +56,12 @@
  import { loginOut, getDistrictInfo } from "@/api/login";

  import { Session, getUserInfo} from '@/util/storage';

  import Cookies from "js-cookie";

  import {getAreaWithUserIfo} from "@/api/user";

   export default {

      name: "Home",

      data() {

         return {

        userInfo: {},

        userInfo: getUserInfo(),

            collapsed: false, //返回logo图片或表述

            pageList: [],

            activePage: '',

@@ -70,8 +74,6 @@
      pwdMod

      },

      created() {

      this.userInfo = getUserInfo()

      // this.getDistrictInfo()

         const route = this.$route

         if (this.pageList.findIndex(item => item.path === route.path) === -1) {

            this.pageList.push(this.createPage(route))

@@ -83,6 +85,7 @@
            })

            this.addListener()

         }

      this.getAreaUsers(getUserInfo().districtId)

      },

      watch: {

         '$route': function(newRoute) {

@@ -122,16 +125,17 @@
          cancelText: '取消',

          okText: '确认',

          centered: true,

          async onOk() {

            const res = await loginOut()

            if (res.data.code === 100) {

              Session.clear(); // 清除缓存/token等

              // 使用 reload 时，不需要调用 resetRoute() 重置路由

              t.$router.push('/')

              // window.location.reload();

            } else {

              this.$message.warning(res.data.msg);

            }

          onOk() {

            loginOut().then(res=>{

              if (res.data.code === 100) {

                Session.clear(); // 清除缓存/token等

                // 使用 reload 时，不需要调用 resetRoute() 重置路由

                t.$router.push('/')

                // window.location.reload();

              } else {

                this.$message.warning(res.data.msg);

              }

            })

          },

          onCancel() {

            console.log('Cancel');

@@ -215,6 +219,59 @@
            const path = closePath && closePath.split('?')[0]

            this.remove(path, nextRoute)

         },

      async getAreaUsers(districtId) {

        let t = this

        let res = await getAreaWithUserIfo()

        if (res.data.code == 100) {

          if (res.data.data) {

            t.userTitTree(res.data.data)

            const areaUsers = t.findNodeById(res.data.data, districtId).children

            localStorage.removeItem('areaUsers')

            localStorage.setItem('areaUsers',JSON.stringify(areaUsers))

          } else {

            console.log('暂无数据')

          }

        } else {

          this.$message.warning(res.data.msg);

        }

      },



      // 根据id查对象

      findNodeById(data, value) {

        for (const node of data) {

          if (node.id === value) {

            return node;

          }

          if (node.children) {

            const foundNode = this.findNodeById(node.children, value);

            if (foundNode) {

              return foundNode;

            }

          }

        }

        return null;

      },



      // 将树状数据name字段放入users的姓名电话

      userTitTree(treeData) {

        for (const node of treeData) {

          if (node.users) {

            node.users = node.users.filter(i => i.roleId == 3)

            node.users = node.users.map((i) => {

              return {

                ...i,

                unittype: node.type,

                districtId: node.id

              }

            })

            node.name = node.name + '(' + node.users.map(i => i.realName + ' ' + i.phone).join(',') + ')'

          }

          if (node.children) {

            this.userTitTree(node.children)

          }

        }

        return treeData

      }

      }

   };

</script>