跳轉到

User Select 選人

這個元件可以使用快篩搜尋,也可以點開視窗進行多種分類查詢,其中包含部門人員、部門、職稱、職務、部門+職稱、部門+職務和部門主管,也可以新增「我的常用」。

Import 相依

import { UofxToastModule } from '@uofx/web-components/toast';
import { UofxUserSelectModule } from '@uofx/web-components/user-select';

基礎使用方式

設定可編輯的選人元件基本需要提供公司別和進階選人時所顯示的類別,設定和取得選人結果的方式是當作 form control 來使用。

import { UofxUserSetItemType } from '@uofx/web-components/user-select';

/** 公司別 */
corpId = Settings.UserInfo.corpId;
types: Array<UofxUserSetItemType> = [2];
agent: Array<UofxUserSetModel> = [...];
<uofx-user-select [corpId]="corpId" [types]="types"
    [(ngModel)]="agent">
</uofx-user-select>

以下為UofxUserSetItemType中所包含的可選類別。

export enum UofxUserSetItemType {
  /** 人員 */
  Empl = 0,
  /** 部門 */
  Dept = 1,
  /** 職級 */
  JobTitle = 2,
  /** 職務 */
  JobFunc = 3,
  /** 部門+職級 */
  DeptJobTitle = 4,
  /** 部門+職務 */
  DeptJobFunc = 5,
  /** 部門主管 */
  DeptSupervisor = 6,
  /** 部門+人員 */
  DeptEmployee = 7,
  /** 我的常用 */
  Commonuse = 99
}

可設定的參數

參數名稱 說明
disabled 是否為允許編輯
multiple 是否為多選模式,預設為true
expandToUser 選取後的結果是否展成人
allowFiltering 是否允許快篩,預設為true
allowChoiceCompany 是否允許選擇公司
placeholder 要顯示在元件上的未填寫狀態提示文字,預設為請選擇

使用純觀看模式

選人還有另外提供純觀看模式,因為不需要操作,所以僅提供要顯示的人員資訊就能完成。

import { UofxUserSetModel } from '@uofx/web-components/user-select';

selectedUserSet: Array<UofxUserSetModel> = [...];
<uofx-user-select-view [uofUserSet]="selectedUserSet"></uofx-user-select-view>