利用管道动态配置并维护数据字典

想要让用户(系统管理员)可以在页面上动态维护数据字典,而不是前端程序员将下拉选项等写死在页面上,那么就需要用到管道,通过标识符唯一定位到相应的字段上的下拉选项等中的内容。

第一步，首先在系统的“数据字典”页面配置数据字典的名称、代码编号、便签和键值等信息：

记住代码编号，这里以PUR_TYPE为例，这是要在 sys-status.pipe.ts中进行配置的唯一标识符：

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';
import { NoticeProvider } from '../../providers/common/utils/notice';
import { GlobalProvider } from '../../providers/common/global-provider';
import { DictCommonProvider } from '../../providers/system/common/dict-common.provider';


@Pipe({
  name: 'dictStatus'
})


export class StatusPipe implements PipeTransform {
  statusData = [];

  constructor(
    private globalProvider: GlobalProvider,
    private dictCommonProvider: DictCommonProvider,
    private notice: NoticeProvider,
  ) { }

  transform(value: any, bizType?: any): any {
    //  数据字典项加载
    this.dictCommonProvider.getLovListByNames(
      ['OFFICE_TYPE', 'COMMON_STATUS', 'REGION_TYPE', 'REGION_ZONE', 'CLIENT_STATUS',
        'DATA_RULE', 'SYSTEM_NAME', 'COMMON_YN', 'APPROVAL_STATUS', 'PUR_TYPE']).subscribe(res => {
          if (res.status === 0) {
            switch (bizType) {
              case 'orgType':
                this.statusData = res.datas[0];
                break;
              case 'status':
                this.statusData = res.datas[1];
                break;
              case 'regionType':
                this.statusData = res.datas[2];
                break;
              case 'regionZone':
                this.statusData = res.datas[3];
                break;
              case 'clientStatus':
                this.statusData = res.datas[4];
                break;
              case 'dataRuleOptions':
                this.statusData = res.datas[5];
                break;
              case 'systemName':
                this.statusData = res.datas[6];
                break;
              case 'isActive':
                this.statusData = res.datas[7];
                break;
              case 'approvalStatus':
                this.statusData = res.datas[8];
                break;
              case 'purType':
                this.statusData = res.datas[9];
                break;
              default:
                this.statusData = [];
                break;
            }
          } else {
            this.notice.error(res.message);
          }
        });

    const filter = this.statusData.filter(item => {
      if (_.isNumber(value)) {
        value = value + '';
      }
      return item.value === value;
    });

    if (filter.length > 0) {
      return filter[0].label;
    } else {
      return value;
    }
  }
.......
}

注意上面的PUR_TYPE，这个是需要在使用这个数据字典的页面配置的名称，用于查询这个选项下面的所有选项的标签和内容：

在页面上通过管道，取到这个数据字典中的内容：

<td>
     <div class="editable-cell">
     <div class="editable-cell-text-wrapper">
          <ng-container *ngIf="!editCache[index].edit">
             {{data?.purType | dictStatus:'purType'}}
                <i class="anticon anticon-edit editable-cell-icon" 
                   (click)="startEdit(index)">
                </i>
          </ng-container>
          <ng-container *ngIf="editCache[index].edit">
              <nz-select style="width: 100%" nzAllowClear="true">
              <nz-option *ngFor="let option of purTypeList" [nzLabel]="option.value" 
                    [nzValue]="option.value"></nz-option>
              </nz-select>
                 <i class="anticon anticon-check editable-cell-icon-check" 
                     (click)="saveEdit(index)">
                 </i>
         </ng-container>
       </div>
       </div>
</td>

在{{data?.purType | dictStatus:'purType'}}这里使用了管道，使用purType这个标识符。

最后，在组建中，先初始化选项列表purTypeList = [];  然后在ngOnInit()中进行数据字典的加载：

//  数据字典项加载
    this.dictCommonProvider.getLovListByNames(['PUR_TYPE']).subscribe(res => {
      if (res.status === 0) {
        this.purTypeList = res.datas[0];
      } else {
        this.notice.error(res.message);
      }
    });

这里使用的是PUR_TYPE这个标识符。

这样就可以实现动态维护purType这个下拉选项的数据字典。