【前端】ionic4 人员组织结构实现

        前言

效果图  

层级结构实现

一、HTML代码

二、代码逻辑分析

 三、ts变量定义与调用后端接口思路

小结

---

前言

     小编最近做手机端项目时，遇到了显示层级结构的业务需求，在手机端使用箭头图标加上层级数据判断，即可实现，在这个实现过程中，需要确认每次点击的数据箭头索引，调用修改ts文件中的变量值，在调用后端变量时，需要在HTML页面拼接变量名，但这种方法不能奏效，最终通过大神的指引，明白了前端的集合、数据获取指定索引位置的元素的方法使用。

效果图  

   

                                                           

层级结构实现

一、HTML代码

 <ion-item-group>
    <div style="border-radius: 8px; font-size: 18px;margin-top:3% ;padding-top:5%;width:95% ">      
      <div *ngIf="isShowOne" >
        <ion-list *ngFor="let twoDepart of oneDepartInfo.children;let i=index;">
          <ion-item  *ngIf="twoDepart.children!=undefined">
            <div style="padding-left:4%" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')">{{twoDepart.name}}</div>
            <div style="padding-left:4%" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')">{{twoDepart.name}}</div>         
            <ion-icon style="float:right;" slot="end" name="ios-arrow-down" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')"></ion-icon>
            <ion-icon style="float:right;" slot="end" name="ios-arrow-forward" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')"></ion-icon>    
          </ion-item>        
            <div *ngIf="isShowAll[i]=='show'" style="margin-top:5%;padding-left:10%;padding-right:5%;">
              <ion-list *ngFor="let threeDepart of twoDepart.children">
                <div>
                  <ion-item (click)="gotoDepartPeo(uId,uName)">
                    <span #uId style="display: none">{{threeDepart.id}}</span>
                    <span #uName>{{threeDepart.name}}</span>
                  </ion-item>
                </div>
              </ion-list>
            </div>
          <ion-item *ngIf="twoDepart.children == undefined" (click)="gotoDepartPeo(uId,uName)">
            <span #uId style="display: none">{{twoDepart.id}}</span>
            <span #uName style="padding-left:4%">{{twoDepart.name}}</span>
          </ion-item>
        </ion-list>
      </div>
    </div>
  </ion-item-group>

二、代码逻辑分析

1.层级结构判断

  如果有子级内容，则显示子级目录；否则直接跳转到人员页面。

 <ion-item *ngIf="twoDepart.children == undefined" (click)="gotoDepartPeo(uId,uName)">
            <span #uId style="display: none">{{twoDepart.id}}</span>
            <span #uName style="padding-left:4%">{{twoDepart.name}}</span>
 </ion-item>

2.点击机构名称或箭头，显示隐藏子级内容

   通过isShowAll数组变量判断是否点击具体的元素

 <div style="padding-left:4%" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')">{{twoDepart.name}}</div>
            <div style="padding-left:4%" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')">{{twoDepart.name}}</div>         
            <ion-icon style="float:right;" slot="end" name="ios-arrow-down" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')"></ion-icon>
            <ion-icon style="float:right;" slot="end" name="ios-arrow-forward" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')"></ion-icon>    
         

 三、ts变量定义与调用后端接口思路

1.通过后端查询出所有的人员组织机构的树级目录

   思路出炉的过程：

   （1）目前这个思路，只调用一次便可查询出所有的组织结构信息，是我们项目组的大神告诉我的思路。

   （2）之前我的想法是每一个父级结构点击时去调用查询子级目录的接口，这样判断逻辑复杂，请求后端的次数也多，比较不成熟。

this.http.get(dataUrl).subscribe(
      res => {
        this.Department = res.json();
        if (this.Department.length > 0) {
          this.oneDepartInfo.children = this.Department[0].children;
          this.oneDepartInfo.name = this.Department[0].name;
          this.oneDepartInfo.id = this.Department[0].id;
          this.oneDepartInfo.pid = this.Department[0].pid;

        } else {
          super.showToast(this.toastCtrl, '抱歉出错啦，请反馈给积分项目组吧！');
        }

2.数组变量isShowAll定义

     数组的使用，获取具体索引的变量 isShowAll[0]；

     之前的思路：定义isShow0、isShow2，HTML去拼接字符串，奈何无法通过*ngIf="‘isShow’+i"拼接出来，却可以通过{{‘isShow’+i}}差值表达式拼接出来，解决无果，便采用了上面数组的方法，这个方法是前端大神指引我，实现的。非常感谢我的大神师父。

// 数组变量的声明
  isShowAll = [
    'hide',
    'hide',
    'hide',
    'hide',
    'hide',
    'hide',
    'hide',
    'hide',
    'hide',
    'hide'
  ];
 /**
   * 是否显示子级结构
   * @param isShow
   * @author 冯浩月
   * @since 2019年3月1日16:45:37
   */
  isShowI(i: any, isShow: any) {
    switch (i) {
      case 0:
        this.isShowAll[0] = isShow;
        break;
      case 1:
        this.isShowAll[1] = isShow;
        break;
      case 2:
        this.isShowAll[2] = isShow;
        break;
      case 3:
        this.isShowAll[3] = isShow;
        break;
      case 4:
        this.isShowAll[4] = isShow;
        break;
      case 5:
        this.isShowAll[5] = isShow;
        break;
      case 6:
        this.isShowAll[6] = isShow;
        break;
      case 7:
        this.isShowAll[7] = isShow;
        break;
      case 8:
        this.isShowAll[8] = isShow;
        break;
      case 9:
        this.isShowAll[9] = isShow;
        break;

    }
  }

 

小结

    做项目的过程中，也是不同思路碰撞的过程，做得多了，自然会有经验，同时基础知识也是必不可少，例如前端数组利用索引取值的方法，很基础，却没有想起来。总归来说是一些经验，分享给大家，希望对你们有所帮助！

                                                                           感谢您的访问！