通讯录-选择角色

src/pages/home/contact-list/contact-list.html

 <ion-header>
     <ion-navbar>
         <ion-title text-center>
-            <span>{{area?.name}}</span>
+            <span>{{area?.name}}({{roleName}})</span>
         </ion-title>
     </ion-navbar>
 </ion-header>
@@ -24,6 +24,22 @@
                 </div>
             </ion-item>
         </ng-container>
+        <ng-container *ngFor="let person of page.noNumList">
+            <ion-item (click)="goToInfo(person)">
+                <div class="contact-box">
+                    <img src="./assets/imgs/man.png" class="contact-img">
+                    <div class="contact-box-right">
+                        <div>
+                            <span class="contact-name">{{person.name}}</span>
+                        </div>
+                        <div>
+                            <span class="contact-handphone">手机：{{person.mobilePhone || "-"}}</span>
+                            <span class="contact-telphone">座机：{{person.telPhone || "-"}}</span>
+                        </div>
+                    </div>
+                </div>
+            </ion-item>
+        </ng-container>
     </ion-list>
     <ion-list text-center style="margin-top: 10rem" *ngIf="page.list.length == 0 && page.isLoad">
         <img style="width: 20%;" src="./assets/imgs/no-data.png" alt="">

src/pages/home/contact-list/contact-list.ts

@@ -11,16 +11,21 @@ import {GlobalData} from "../../../core/GlobleData";
 })
 export class ContactListPage {
 
+    role;
     area;
     page = {
         list: [],
+        noNumList: [],
         isLoad: false
-    }
+    };
+    roleName;
 
     constructor(public navCtrl: NavController, public navParams: NavParams,
-                private globle:GlobalData,
+                private globle: GlobalData,
                 private homeSer: HomeService) {
+        this.role = this.navParams.get('role');
         this.area = this.navParams.get('area');
+        this.roleName = this.navParams.get('roleName');
     }
 
     ionViewDidLoad() {
@@ -32,11 +37,16 @@ export class ContactListPage {
         const data = {
             page: 1,
             limit: 1000,
-            areacode:this.area.code
+            areacode: this.area.code,
+            role: this.role,
         };
         this.homeSer.getOrgList(data).subscribe(
             (res) => {
-                this.page.list = res.list.user.filter(e => e.areacode == this.area.code);
+                this.page.list = res.list.user.filter(e => e.orderNum != "" && e.areacode == this.area.code);
+                this.page.noNumList = res.list.user.filter(e => e.orderNum == "" && e.areacode == this.area.code);
+                this.page.list.sort((a, b) => a.orderNum - b.orderNum);
+                console.log(this.page.list);
+                console.log(this.page.noNumList);
                 this.page.isLoad = true;
             }
         )

src/pages/home/contact-role/contact-role.html

+<ion-header>
+    <ion-navbar>
+        <ion-title text-center>
+            <span>用户角色</span>
+        </ion-title>
+    </ion-navbar>
+</ion-header>
+
+<ion-content direction="y" scrollbar-y="true">
+    <ion-list>
+        <ion-item *ngFor="let item of roleList">
+            <div class="contact-box" (click)="goToList(item)">
+                <img src="./assets/imgs/man.png" class="contact-img">
+                <div class="contact-box-right">
+                    <div>
+                        <span class="contact-name">{{item.label}}</span>
+                    </div>
+                </div>
+            </div>
+        </ion-item>
+    </ion-list>
+</ion-content>

src/pages/home/contact-role/contact-role.scss

+page-contact-role {
+  .searchToolBar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+  }
+
+  .list-ios .item-block .item-inner {
+    border-bottom: 1px solid #dadada;
+  }
+
+  .search {
+    float: right;
+    color: #72a4fe;
+    font-size: 24px;
+    margin-right: 10px;
+  }
+
+  .contact-box {
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+  }
+
+  .contact-box-right {
+    margin-left: 10px;
+  }
+
+  .contact-img {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 2px;
+  }
+
+  .contact-name {
+    font-size: 16px;
+  }
+
+  .contact-sex {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .male {
+    color: #72a4fe;
+  }
+
+  .female {
+    color: #f09ae5;
+  }
+
+  .contact-organization {
+    color: #808080;
+    font-size: 12px;
+  }
+
+  .contact-telphone {
+    color: #808080;
+    font-size: 12px;
+  }
+
+  .contact-handphone {
+    color: #808080;
+    font-size: 12px;
+    margin-right: 10px;
+  }
+
+  .back-btn {
+    width: 30px;
+    height: 30px;
+  }
+}

src/pages/home/contact-role/contact-role.ts

+import {Component} from '@angular/core';
+import {IonicPage, NavController, NavParams} from 'ionic-angular';
+import {ContactListPage} from "../contact-list/contact-list";
+
+@Component({
+    selector: 'page-contact-role',
+    templateUrl: 'contact-role.html',
+})
+export class ContactRolePage {
+
+    roleList = [
+        {value: 0, label: '管理员'},
+        {value: 1, label: '单位领导'},
+        {value: 2, label: '工作人员'},
+        {value: 3, label: '其他人员'},
+    ];
+
+    area;
+
+    constructor(public navCtrl: NavController, public navParams: NavParams) {
+        this.area = this.navParams.get('area');
+    }
+
+    ionViewDidLoad() {
+        console.log('ionViewDidLoad ContactRolePage');
+    }
+
+    goToList(item) {
+        this.navCtrl.push(ContactListPage, {role: item.value, area: this.area, roleName: item.label});
+    }
+}

src/pages/home/contact/contact.ts

@@ -5,6 +5,7 @@ import {ContactListPage} from "../contact-list/contact-list";
 import * as Mock from "mockjs"
 import {HomeService} from "../home.service";
 import {LoginService} from "../../login/login.service";
+import {ContactRolePage} from "../contact-role/contact-role";
 
 @Component({
     selector: 'page-contact',
@@ -43,7 +44,7 @@ export class ContactPage {
 
     //人员列表
     goToList(area) {
-        this.navCtrl.push(ContactListPage, {area: area});
+        this.navCtrl.push(ContactRolePage, {area: area});
     }
 
     //查询人员

src/pages/home/home.module.ts

@@ -12,6 +12,7 @@ import {InfoDetailPage} from "./report-info/info-detail/info-detail";
 import {InfoListPage} from "./report-info/info-list/info-list";
 import {YearReportPage} from "./report-info/year-report/year-report";
 import {PipesModule} from "../../pipes/pipes.module";
+import {ContactRolePage} from "./contact-role/contact-role";
 
 @NgModule({
     declarations: [
@@ -25,6 +26,7 @@ import {PipesModule} from "../../pipes/pipes.module";
         InfoDetailPage,
         InfoListPage,
         YearReportPage,
+        ContactRolePage,
     ],
     imports: [
         IonicPageModule.forChild(HomePage),
@@ -40,6 +42,7 @@ import {PipesModule} from "../../pipes/pipes.module";
         DoVerityPage,
         InfoDetailPage,
         InfoListPage,
+        ContactRolePage,
         YearReportPage,
     ]
 })