選人

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

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	全部顯示:垂直、沒有分隔號(、用於模擬流程)

透過 UofxUserSetPluginHelper 取得 UserSetModel 結構

欄位 module providers

請於欄位的 module.ts 檔案中（例如：advanced-field.module.ts）的 providers 區段加入：

import { UofxUserSetPluginHelper, UofxUserSetPluginService } from '@uofx/web-components/user-select';

providers: [
  UofxUserSetPluginHelper,
  UofxUserSetPluginService,
]

可用方法

• getUserSet(model: UofxPluginBeforeUserSetModel): 任意選。
• getUserSetByType(type: UofxUserSetItemType,data): 指定類型。

使用方式

import {
  UofxUserSetPluginHelper,
  UofxPluginBeforeUserSetModel,
  UofxUserSetItemType,
} from "@uofx/web-components/user-select";

// 任意選
const model = <UofxPluginBeforeUserSetModel>{
  items: [
    { itemType: UofxUserSetItemType.Empl, emplItem: { account: "John" } },
    { itemType: UofxUserSetItemType.Dept, deptItem: { code: "HR" } },
    { itemType: UofxUserSetItemType.JobTitle, jobTitleItem: { code: "Manager" } },
    { itemType: UofxUserSetItemType.JobFunc, jobFuncItem: { code: "Developer" } },
    {
      itemType: UofxUserSetItemType.DeptJobTitle,
      deptJobTitleItem: { deptCode: "HR", jobTitleCode: "Manager" },
    },
    {
      itemType: UofxUserSetItemType.DeptJobFunc,
      deptJobFuncItem: { deptCode: "HR", jobFuncCode: "Developer" },
    },
    { itemType: UofxUserSetItemType.DeptSupervisor, deptSupervisorItem: { code: "HR" } },
    {
      itemType: UofxUserSetItemType.DeptEmployee,
      deptEmplItem: { deptCode: "HR", account: "John" },
    },
  ],
};
this.pluginHelper.getUserSet(model).subscribe({
  next: (model) => {
    console.log("選人元件model:", model);
  },
});

// 指定類型:人員
this.pluginHelper.getUserSetByType(UofxUserSetItemType.Empl, ["John", "Kim"]);

UofxPluginBeforeUserSetModel

/** 選人元件-轉換前model */
export interface UofxPluginBeforeUserSetModel {
  items: [
    {
      itemType: UofxUserSetItemType.Empl;
      emplItem: {
        /** 人員帳號 */
        account: string;
      };
    },
    {
      itemType: UofxUserSetItemType.Dept;
      /** 部門資訊 */
      deptItem: {
        /** 部門代號 */
        code: string;
      };
    },
    {
      itemType: UofxUserSetItemType.JobTitle;
      /** 職稱資訊 */
      jobTitleItem: {
        /** 職稱代號 */
        code: string;
      };
    },
    {
      itemType: UofxUserSetItemType.JobFunc;
      /** 職務資訊 */
      jobFuncItem: {
        /** 職務代號 */
        code: string;
      };
    },
    {
      itemType: UofxUserSetItemType.DeptJobTitle;
      /** 部門資訊 */
      deptItem: {
        /** 部門代號 */
        code: string;
      };
      /** 職稱資訊 */
      jobTitleItem: {
        /** 職稱代號 */
        code: string;
      };
    },
    {
      itemType: UofxUserSetItemType.DeptJobFunc;
      /** 部門資訊 */
      deptItem: {
        /** 部門代號 */
        code: string;
      };
      /** 職務資訊 */
      jobFuncItem: {
        /** 職務代號 */
        code: string;
      };
    },
    {
      itemType: UofxUserSetItemType.DeptSupervisor;
      /** 部門資訊 */
      deptItem: {
        /** 部門代號 */
        code: string;
      };
    },
    {
      itemType: UofxUserSetItemType.DeptEmployee;
      /** 部門資訊 */
      deptItem: {
        /** 部門代號 */
        code: string;
      };
      /** 人員資訊 */
      emplItem: {
        /** 人員帳號 */
        account: string;
      };
    }
  ];
}