MoSelectUser

This library was generated with Angular CLI version 13.3.0.

安装

npm i -S mo-select-user -registry https://registry.npmjs.org

修改 SharedModule

import { MoSelectUser } from 'mo-select-user';

const MODULES = [MoSelectUser]


@NgModule({
  exports: [
    ...MODULES,
  ]
})
export class SharedModule {}

全局定义接口 CommonService

  get userApiOptions() {
    return {
      url: '',// 用户列表接口
    };
  }

  get userAndDeptApiOptions() {
    return {
      url: '',// 用户列表接口
      departmentUrl: '' // 部门列表接口
    };
  }

使用

import { CommonService } from '@core';

export class SearchBarComponent {

  userApiOptions = this.commonSrv.userAndDeptApiOptions; // 接口地址

  constructor(private commonSrv: CommonService,) {}


  this.form = this.fb.group({
    owners: [{id:'id',lable:'label'}] // value必须是数组
  });

}

<mo-select-user
  [apiOptions]="userApiOptions"
  placeholder="请选择负责人"
  formControlName="owners"
></mo-select-user>

属性说明

• apiOptions 接口地址，传入部门列表接口，自动显示部门筛选

• mode 多选：multiple，单选：default，默认单选

• queryOptions 用户列表默认的筛选条件

• mValue 用户value的key值，不填写为：id

• mLabel 用户名称的key值，默认：label

• placeholder placeholder

• size 尺寸，NzSelectSizeType

• departmentId 默认选中的部门ID

• switchDept 部门是否可以切换

• disabled 是否禁用

• allowClear 是否显示清空图标

• moOnChange 值变化后回掉