Plugin 套件指南¶

必要安裝項目

範例專案裡已經有預設安裝

此套件為開發外掛模組的必要安裝項目，包含所有核心功能和工具。

安裝指令¶

在外掛模組的 Angular 專案中執行下列指令：

npm install @uofx/plugin

版本相容性對照¶

版本相容性警告

不同版本可能造成安裝或更新後出現內容錯誤或遺失的狀況。請依照下表確認套件版本與配置檔版本的相容性。

套件版本 (`@uofx/plugin`)	配置檔版本 (`plugin-manifest.json`)
`4.3.3`	`112`
`4.1.0`	`104`

該套件有什麼可使用?¶

主要功能¶

功能	說明
UofxPluginPage	用於開發外掛頁面
UofxPluginPanel	用於開發外掛面板
UofxPluginAuthorize	用於開發外掛頁面，權限控制裝飾器，限制特定使用者才能存取頁面或功能
UofxPluginApiService	用於開發外掛頁面、面板、欄位，透過呼叫 api 提供取得使用者資訊、公司資訊

可用方法與屬性¶

UofxPluginPage、UofxPluginPanel 可用屬性UofxPluginApiService 可用方法UofxPluginAuthorize 使用方式

屬性名稱	類型	說明
`pluginSetting.entryHost`	`string`	外掛模組的根路徑與版本號組合
`pluginSetting.pluginCode`	`string`	外掛模組代號
`baseUrl.admin`	`string`	管理者大廳路徑 `/admin`
`baseUrl.adminPlugin`	`string`	管理者外掛模組路徑 `/admin/plugin/{codePath}`
`baseUrl.user`	`string`	使用者大廳路徑 `/user`
`baseUrl.userPlugin`	`string`	使用者外掛模組路徑 `/user/plugin/{codePath}`
`baseUrl.appPlugin`	`string`	APP 外掛模組路徑 `/home/plugin/{codePath}`

方法名稱	參數	回傳類型	功能說明
`getUserInfo(userId)`	`userId: string`	`Observable<UserInfo>`	取得指定使用者的員工資訊
`getCorpInfo()`	無	`Observable<CorpInfo>`	取得公司基本資訊

使用方式	語法	說明
類別裝飾器	`@UofxPluginAuthorize('FUNCTION_ID')`	限制整個元件的存取權限
方法裝飾器	`@UofxPluginAuthorize('METHOD_ID')`	限制特定方法的執行權限

使用範例¶

頁面工具 (UofxPluginPage)面板工具 (UofxPluginPanel)權限控制 (UofxPluginAuthorize)API 服務 (UofxPluginApiService)

Import 相依¶

import { UofxPluginPage } from '@uofx/plugin';

取得 Entry Host¶

取得 Entry Host 設定為 API Service 的 Server Url。

import { UofxPluginPage } from '@uofx/plugin'

@Component({
  selector: 'uofx-web-setting',
  templateUrl: './setting-page.component.html'
})
export class SettingPage extends UofxPluginPage implements OnInit {
  constructor(private apiService: APIService) { 
    super(); 
  }

  ngOnInit() {
    // 取得 Entry Host
    console.log(this.pluginSetting.entryHost);
    this.apiService.serverUrl = this.entryHost;
  }
}

麵包屑導覽¶

透過取得的路徑可在routerLink上組合使用，使用此方法方便直接指定對應的路徑，不必擔心相對路徑問題。

@Component({
  selector: 'uofx-web-setting',
  template: `
    <uofx-breadcrumb [items]="breadCrumbItems"></uofx-breadcrumb>
  `
})
export class SettingPage extends UofxPluginPage implements OnInit {
  /** 麵包屑清單 */
  breadCrumbItems: Array<MenuItem> = [
    { label: '大廳', routerLink: [this.baseUrl.admin] },
    { label: '內容置中' }
  ];

  ngOnInit() {
    console.log(this.baseUrl.adminPlugin);
    // 輸出: /admin/plugin/edesampleplugin
  }
}

Import 相依¶

import { UofxPluginPanel } from '@uofx/plugin';

取得 Entry Host¶

取得 Entry Host 設定為 API Service 的 Server Url。

import { UofxPluginPanel } from '@uofx/plugin'

@Component({
  selector: 'uofx-web-panel',
  templateUrl: './panel.component.html'
})
export class PanelComponent extends UofxPluginPanel implements OnInit {
  constructor(private apiService: APIService) { 
    super(); 
  }

  ngOnInit() {
    // 設定 API 服務的伺服器 URL
    this.apiService.serverUrl = this.pluginSetting.entryHost;
    console.log('目前外掛模組代號:', this.pluginSetting.pluginCode);
  }
}

取得路徑¶

透過取得的路徑可在routerLink上組合使用，使用此方法方便直接指定對應的路徑，不必擔心相對路徑問題。

@Component({
  selector: 'uofx-web-panel',
  template: `
    <a [routerLink]="adminUrl">前往管理頁面</a>
  `
})
export class PanelComponent extends UofxPluginPanel implements OnInit {
  adminUrl: string;

  ngOnInit() {
    this.adminUrl = this.baseUrl.adminPlugin;
    // 輸出: /admin/plugin/edesampleplugin
  }
}

Import 相依¶

import { UofxPluginAuthorize } from '@uofx/plugin';

權限設定為用來限制可存取的使用者¶

可自訂functionId名稱。

@UofxPluginAuthorize({ functionId: 'LOBBY' })
export class LobbyPage extends UofxPluginPage { }

Import 相依¶

import { UofxPluginApiService } from '@uofx/plugin/api'

@NgModule({
  imports: [/* 其他匯入 */],
  providers: [
    UofxPluginApiService
  ]
})
export class YourPluginModule { }

advance-field.write.component.ts

import { UofxPluginApiService } from '@uofx/plugin/api'
import { zip } from 'rxjs';

@Component({
  selector: 'app-data-component',
  templateUrl: './data.component.html'
})
export class DataComponent implements OnInit {
  empNo: string;
  companyInfo: PlugCorpInfoModel;

  constructor(
    private pluginService: UofxPluginApiService,
    private cdr: ChangeDetectorRef
  ) { }

  ngOnInit() {
    this.loadCorpInfo();
    this.loadSpecificUserInfo();
  }

  /** 取得公司資訊 */
  loadCorpInfo() {
    this.pluginService.getCorpInfo().subscribe({
      next: (corpInfo) => {
        this.companyInfo = corpInfo;
        console.log('公司資訊:', corpInfo);
      }
    });
  }

  /** 載入特定使用者資訊 */
  loadSpecificUserInfo() {
    const targetUserId = 'USER001';

    this.pluginService.getUserInfo(targetUserId).subscribe({
      next: (userInfo) => {
        if (userInfo.employeeNumber) {
          this.empNo = userInfo.employeeNumber;
          console.log('使用者員工編號:', this.empNo);
        }
      }
    });
  }
}

下一步¶

回到開發地圖