User Select 選人

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

Import 相依¶

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

基礎使用方式¶

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

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

/** 公司別 */
corpId = Settings.UserInfo.corpId;
types: Array<UofxUserSetItemType> = [UofxUserSetItemType.DeptEmployee];
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
}

可設定的參數¶

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

使用純觀看模式¶

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

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

selectedUserSet: Array<UofxUserSetModel> = [...];

<uofx-user-select-view [userSet]="selectedUserSet"></uofx-user-select-view>

可設定的參數¶

參數名稱	說明
`userSet`	傳入的資料
`subUserSet`	代理人資料
`displayMode`	顯示模式
`displayCount`	搭配`displayMode`為`more`模式，限定顯示的數量
`showAvatar`	是否顯示大頭照
`uofSize`	大頭照尺寸

顯示模式¶

模式名稱	說明
`scroll`	卷軸(用於表單檢視)
`more`	顯示`displayCount`設定的數量，其餘顯示其他幾個
`default`	預設只有一筆
`expand`	全部顯示:逗號串接(用於表單列印、退簽dialog、取回dialog)
`vertical`	全部顯示:垂直、沒有分隔號(、用於模擬流程)