MoSelectUser

This library was generated with Angular CLI version 13.3.0.

安装

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

修改 SharedModule

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

1const MODULES = [MoSelectUser]
2
3
4@NgModule({
5  exports: [
6    ...MODULES,
7  ]
8})
9export class SharedModule {}
10

全局定义接口 CommonService

1
2  get userApiOptions() {
3    return {
4      url: '',// 用户列表接口
5    };
6  }
7
8  get userAndDeptApiOptions() {
9    return {
10      url: '',// 用户列表接口
11      departmentUrl: '' // 部门列表接口
12    };
13  }
14

使用

1import { CommonService } from '@core';
2
3export class SearchBarComponent {
4
5  userApiOptions = this.commonSrv.userAndDeptApiOptions; // 接口地址
6
7  constructor(private commonSrv: CommonService,) {}
8
9
10  this.form = this.fb.group({
11    owners: [{id:'id',lable:'label'}] // value必须是数组
12  });
13
14}

1<mo-select-user
2  [apiOptions]="userApiOptions"
3  placeholder="请选择负责人"
4  formControlName="owners"
5></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 值变化后回掉