OpenTiny组件-nav组件实践经验

一 相关资料

https://opentiny.design/

 

二 实现代码

2.1 header.component.html

<div class="t-pro-header">
  <div class="sj-header-logo" title="甘肃艾康沙棘制品有限公司"></div>
  <div class="sj-header-menus">
    <ti-nav theme="light" class="mt-3">
      <ti-nav-menu
        [items]="menus.items"
        [activeId]="menus.activeId"
        (select)="menus.onSelect($event)">
      </ti-nav-menu>
    </ti-nav>
  </div>
  <div class="sj-header-login" (click)="reLogin()">重新登陆</div>
</div>

2.2 header.component.less

@images:'src/assets/images';
.t-pro-header {
  box-sizing: border-box;
  height: 64px;
  width: 100%;
  padding: 5px 16px 5px 20px;
  display: flex;
  top: 0;
  left: 0;
  z-index: 1002;
  min-width: 1280px;
  align-items: center;
  justify-content: space-between;
  background-color: #282b33;
  color: #adb0b8;

  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: var(--ti-nav-color-bg);
}

.ti3-nav {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2) !important;
}

.sj-header-logo {
  width: 148px;
  height: 102px;
  display: flex;
  background-image: url('@{images}/logo.png');
  zoom: 0.8;
}

.sj-header-menus {
  position: absolute;
  left: 130px;
  top: 0px;
}

.sj-header-login {
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 16px;
  cursor: pointer;
  color: #464C59;
}

2.3 header.component.ts

import {Component, Input, OnInit} from '@angular/core';
import { Router } from '@angular/router';

declare var window:any;

@Component({
  selector: 't-pro-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less'],
})
export class HeaderComponent implements OnInit {
  @Input() shrink: boolean = false;
  public menus: any;
  public reLogin: any;

  constructor(
    private router: Router
  ) {
  }

  ngOnInit(): void {
    this.initMenus();

    this.reLogin = () => {
      this.setCookie('isLogin', false, 0.5);
      this.setCookie('userType', 'guest', 0.5);
      document.location.reload();
    }
  }
  private setCookie(cname: any, cvalue: any, exdays: any) {
    var d:any = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+ d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
  }

  private initMenus(): void {
    this.menus = {};
    this.menus.items = [
      { label: '商机', id: 'shangji' },
      {
        label: '统计信息',
        id: 'statistics',
        disabled: false
      },
      // {
      //   label: '客户池',
      //   id: 'user-center',
      //   disabled: window.sj.userType !== 'adm'
      // },
      {
        label: '管理中心',
        id: 'management-center',
        disabled: window.sj.userType !== 'adm'
      },
      // {
      //   label: '表单文本',
      //   id: 'form-text',
      //   children: [
      //     { label: '文本框', id: 'input-text' },
      //     { label: '多行文本框', id: 'input-textarea' },
      //     { label: '自动补全', id: 'autocomplete' },
      //     { label: '搜索框', id: 'search' },
      //   ],
      // },
    ];
    this.menus.activeId = this.getActiveId();
    this.menus.onSelect = (option: any) => {
      console.log(option);
      this.router.navigate([option.item.id]);

    }
  }

  isCurrentRoute(routeName: any) {
    return document.URL.match(routeName);
  }

  private getActiveId() {
    let activeId = 'shangji';
    this.menus.items.forEach((item: any) => {
      if (this.isCurrentRoute(item.id)) {
        activeId = item.id;
      }
    });

    return activeId;
  }
}

2.4 constants.ts

const Constants: any = {};

Constants.times = [
  { label: '2023.12',},
  { label: '2023.11',},
  { label: '2023.10',},
  { label: '2023.09',},
  { label: '2023.08',},
  { label: '2023.07',},
  { label: '2023.06',},
  { label: '2023.05',},
  { label: '2023.04',},
  { label: '2023.03',},
  { label: '2023.02',},
  { label: '2023.01',},
  { label: '2022.12',},
  { label: '2022.11',},
  { label: '2022.10',},
  { label: '2022.09',},
  { label: '2022.08',},
  { label: '2022.07',},
  { label: '2022.06',},
  { label: '2022.05',},
  { label: '2022.04',},
  { label: '2022.03',},
  { label: '2022.02',},
  { label: '2022.01',},
  { label: '2021.12',},
  { label: '2021.11',},
  { label: '2021.10',},
  { label: '2021.09',},
  { label: '2021.08',},
  { label: '2021.07',},
  { label: '2021.06',},
  { label: '2021.05',},
  { label: '2021.04',},
  { label: '2021.03',},
  { label: '2021.02',},
  { label: '2021.01',},
];

Constants.source = [
  { label : '阿里'},
  { label : '百度'},
  { label : '自开发'},
  { label : '其它'},
];

export { Constants };

2.5 management-center.component.html

<div class="sj-mc-item-container" style="width:1000px">
  <div class="sj-mc-item-title">
    账号管理
  </div>
  <div class="sj-mc-item-title-2">现有普通账号：</div>
  <ng-container *ngFor="let list of user.lists; index as i">
    <div class="sj-mc-item-user">
      <div class="sj-mc-item-user-index">{{i}}.</div>

      <div class="sj-mc-item-user-name">
        <div class="sj-mc-item-user-name-key">用户名：</div>
        {{list.name}}
      </div>
      <div class="sj-mc-item-user-name">
        <div class="sj-mc-item-user-name-key">密码：</div>
        {{list.password}}
      </div>
      <button  tiButton (click)="user.del(list)">删除</button>
    </div>
  </ng-container>
  <div class="sj-mc-item-user-add">
    <div class="sj-mc-item-title-2">新增用户：</div>
    <div class="sj-mc-item-user-add-item">
      <div  class="sj-mc-item-user-add-label">用户名：</div>
      <input type="text" tiText class="sj-mc-item-user-add-input" [(ngModel)]="user.add.name">
    </div>
    <div class="sj-mc-item-user-add-item">
      <div  class="sj-mc-item-user-add-label">密码：</div>
      <input type="text" tiText class="sj-mc-item-user-add-input" [(ngModel)]="user.add.password">
    </div>
    <div class="sj-mc-item-user-add-item">
      <button class="sj-mc-item-user-add-ok ti3-btn-danger" tiButton (click)="user.add.ok()">添加</button>
    </div>
  </div>
</div>

<div class="sj-mc-item-container"  style="width:1000px">
  <div class="sj-mc-item-title">
    区域经理管理
  </div>
  <div class="sj-mc-item-title-2">省份和区域经理对应关系：</div>
  <ng-container *ngFor="let list of provinceAndManager.lists; index as i">
    <div class="sj-mc-item-user">
      <div class="sj-mc-item-user-index">{{i}}.</div>

      <div class="sj-mc-item-user-name">
        <div class="sj-mc-item-user-name-key">省份：</div>
        {{list.province}}
      </div>
      <div class="sj-mc-item-user-name">
        <div class="sj-mc-item-user-name-key">区域经理：</div>
        <input type="text" tiText class="sj-mc-item-p-manager-input" [(ngModel)]="list.regionalManager">
      </div>
      <div class="sj-mc-item-user-name">
        <div class="sj-mc-item-user-name-key">执行时间：</div>
        {{list.time}}
      </div>

      <button  tiButton (click)="provinceAndManager.edit(list)">修改确认</button>
    </div>
  </ng-container>
  <div class="sj-mc-item-title-2" style="margin-top: 30px;">各个区域经理负责地方统计：</div>
  <ng-container *ngFor="let list of provinceAndManager.managers; index as i">
    <div class="sj-mc-item-user">
      <div class="sj-mc-item-user-index">{{i}}.</div>

      <div class="sj-mc-item-user-name">
        <div class="sj-mc-item-user-name-key">区域经理：</div>
        {{list.manager}}
      </div>
      <div class="sj-mc-item-user-name" style="width: 500px">
        <div class="sj-mc-item-user-name-key">负责的地区：</div>
        {{list.province}}
      </div>
    </div>
  </ng-container>
</div>

2.6 management-center.component.less

.sj-mc-item-container {
  width: 88%;
  height: 100%;
  border-radius: 5px;
  border: solid 1px #8A8E99;
  padding: 20px;
  margin-bottom: 20px;
}

.sj-mc-item-title {
  width: 100%;
  height: 30px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}


.sj-mc-item-title-2 {
  width: 100%;
  height: 25px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.sj-mc-item-user {
  margin-bottom: 5px;
  background-color: #f7f9fd;
}

.sj-mc-item-user-name{
  display: inline-block;
  margin-right: 40px;
  width: 200px;
}
.sj-mc-item-user-add {
  margin-top: 50px;

}

.sj-mc-item-user-add-label {
  display: inline-block;
  width: 50px;
  font-weight: bold;
}
.sj-mc-item-user-add-item {
  margin-bottom: 10px;
}
.sj-mc-item-title1 {

}
.sj-mc-item-title1 {

}

.sj-mc-item-user-name-key {
  font-weight: bold;
  display: inline-block;
  font-size: 14px;
}

.sj-mc-item-user-index {
  display: inline-block;
  width: 20px;
}

.sj-mc-item-p-manager-input{
  display: inline-block;
  width: 100px;
}

2.7 management-center.component.ts

import {Component, Inject, LOCALE_ID, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {formatDate} from "@angular/common";

declare var window: any;

@Component({
  selector: 'app-management-center',
  templateUrl: './management-center.component.html',
  styleUrls: ['./management-center.component.less']
})
export class ManagementCenterComponent implements OnInit{
  public user: any;
  public provinceAndManager: any;
  constructor(
    @Inject(LOCALE_ID) public locale: string,
    private http: HttpClient,
  ) {
  }

  ngOnInit(): void {
    this.initUser();
    this.initProvinceAndManager();
  }

  private initUser() {
    this.user = {};
    this.user.lists = [];
    this.user.del = (list: any) => {
      this.delUser(list);
    };

    this.user.add = {
      name: '',
      password: '',
      ok: () => {
        this.addUser();
      }
    };

    this.http.get('./sj/users', {
      params: { userType : window.sj.userType }
    }).subscribe((data: any) => {
      this.user.lists = data.users.common;
    }, (error: any) => {
    });
  }

  private initProvinceAndManager() {
    this.provinceAndManager = {};
    this.provinceAndManager.lists = [];
    this.provinceAndManager.managers = [];

    this.provinceAndManager.edit = (list: any) => {
      list.time = formatDate(Date.now(), 'yyyy.MM.dd', this.locale);
      const params = {
        "userType" : window.sj.userType,
        "province": list.province,
        "regionalManager": list.regionalManager,
        "time": list.time
      }
      this.http.get('./sj/provinceAndManager/edit', {
        params: params
      }).subscribe((data: any) => {
        this.setManagerProvinces(data.provinceAndManager);
      }, (error: any) => {
      });
    };

    this.http.get('./sj/users', {
      params: { userType : window.sj.userType }
    }).subscribe((data: any) => {
      this.provinceAndManager.lists = data.provinceAndManager;
      this.setManagerProvinces(this.provinceAndManager.lists);
    }, (error: any) => {
    });
  }

  private setManagerProvinces(data: any) {
    const ma = new Map();
    data.forEach((d:any) => {
      if (ma.get(d.regionalManager)) {
        ma.set(d.regionalManager, ma.get(d.regionalManager) + ' ' + d.province);
      } else {
        ma.set(d.regionalManager, d.province);
      }
    });

    this.provinceAndManager.managers = [];
    for( let m of ma.keys()) {
      this.provinceAndManager.managers.push({
        manager: m,
        province: ma.get(m),
      })
    }
  }

  private delUser(list: any) {
    this.http.get('./sj/users/del', {
      params: { userType : window.sj.userType, name: list.name }
    }).subscribe((data: any) => {
      this.user.lists = data.users.common;
    }, (error: any) => {
    });
  }

  private addUser() {
    this.http.get('./sj/users/add', {
      params: { userType : window.sj.userType, name: this.user.add.name, password: this.user.add.password }
    }).subscribe((data: any) => {
      this.user.lists = data.users.common;
    }, (error: any) => {
    });
  }
}