Log8000v3 NPM | npm.io

1. 安裝部屬

將建置後檔案直接架設至 Web Server 後，即可使用
無須安裝其餘套件及配置
對應的 WebApi 需能透過相同 IP:Port 呼叫，並且 WebApi根目錄為 /log8000webapi_v3

在 IIS 的 Web 底下 新增應用程式，別名固定設為 log8000webapi_v3，實體路徑指向對應的公版 WebAPI

2. 開發

以下指令皆由 VSCode Console 輸入，或者命令提示字元 cd 至專案目錄後輸入

2.1. 事前安裝

需安裝 VSCode 進行開發
需安裝 NodeJS 來使用 npm 功能
下指令 npm install 來安裝所有使用到的套件

2.2. 執行程式

下指令 npm start 來執行程式，並透過 http://localhost:3000 開啟網頁

2.3. 偵錯

在執行程式狀態下按 F5，開啟偵錯模式

2.4. 發佈

下指令 npm run build 將程式編譯並打包至 build 目錄

3. 提供定義資料

3.1. 頁面代碼

hypermediaDemo : Hypermedia 展示 (試做頁面)
versionHistory : 版本歷程頁面
systemConfig : 系統參數頁面
department : 組織清單
employee : 人員清單
employeeProxy : 代理人清單
role : 角色管理
employeeFileImport : 人員匯出與匯出
record : 索引管理
recordParameter : 錄音參數管理
recordGroup : 調聽群組清單及調聽群組設定
recordQuery : 錄音查詢
recordPlayer : 錄音播放順序
audit : 稽核紀錄
licenseManagement : 授權管理
serverManagement : 伺服器管理
alarmTemplate : 告警範本清單
alarmLog : 告警查詢
hypermediaViewer : Hypermedia 預覽畫面
recordSaveManagement: 音檔儲存管理
scheduleTemplate: 錄音排程設定
cti: 分機設定
channelFormwork: 頻道樣板
rec: 頻道設定
channelGroup: 頻道監控群組
ctiGroup: 分機監控群組
domainServer: 網域登入
channelMonitor: 頻道監控
ctiMonitor: 分機監控
channelFileImport: 頻道匯入匯出
keyStore: 密碼清單
emailManagement: 電子郵件告警參數管理
recordExpiredate: 音檔保存年限
extensionManagement: 組織所屬分機清單
extensionCallStatistics: 分機通話統計報表
employeeReport: 人員帳號權限報表
systemState: 系統狀態
channelStatistics: 頻道使用峰值統計報表

3.2. 語系代碼結構

直接參考 LanguageStructure.ts 檔

3.3. 動態載入Icon代碼

organizationIcon :
staffIcon :
rulesIcon :
configIcon :
tableIcon :
monitorIcon :
reportIcon :
licensesIcon :

3.4. HypermediaDemo 相關設定

Menu 需設定 parameter.hypermediaUrl 為取得 Hypermedia 模板的 URL，page 為 HypermediaDemo，範例如下 :

{
	"prompt": "",
	"auditId": 0,
	"page": "HypermediaDemo",
	"key": 0,
	"path": "",
	"scopes": [],
	"parameter": {
		"hypermediaUrl": "test/Hypermedia.json"
	}
}

模板的 events 提供的狀態點為 :

loaded : 頁面載入時執行
saved : 編輯畫面儲存時執行

模板的 links 提供的 actionTag 為 :

query : 分為兩步驟，第一步驟需透過 POST 取得 uid，第二步驟需透過 GET 在 URL 帶入 uid 取得查詢結果
edit : 只有一個步驟，透過 GET 帶入項目資訊取得詳細資料
save : 只有一個步驟，透過 PUT 帶入修改結果，更新資料
cancelEdit : 暫無作用

3.5 Hypermedia 元件定義

Template :

systemConfig
serviceSetting

Component :

card
區塊容器

{
	"component": "card",
	"dataProps": {
		"informationMessage": [
			{
				"key": "[欄位順序，數值格式]",
				"value": "[說明訊息，畫面上需點+(加號)才能展開訊息]"
			}
		],
		"importantMessage": [
			{
				"key": "[欄位順序，數值格式]",
				"value": "[重要訊息，畫面上顯著圖示，滑鼠移入才會呈現訊息]"
			}
		],
		"testButton": {
			"columnName": "[測試功能名稱]",
			"prompt": "[語系標籤]",
			"dataProps": {
				"isDisplay": "[是否顯示，布林格式，true:顯示，預設值:false]",
				"isVerification": "[是否驗證通過才能儲存，布林格式，true:測試連線收到成功訊息才能儲存，預設值:false]"
			}
		},
		"content": [{"[內容元件]"}]
	},
}

input(TXT-01、TXT-04)
輸入框

{
	"component": "input",
	"dataProps":{
		"isMasking":"[是否隱碼，布林格式，true:隱碼，預設值:false]",
		"isReadOnly":"[是否唯讀，布林格式，true:唯讀，預設值:false]"
	},
	"rule":[{"Ant Design檢驗規則"}]                    
}

textarea(TXT-03)
輸入區塊，寬度滿版

{
	"component": "textarea",
	"dataProps":{
		"isReadOnly":"[是否唯讀，布林格式，true:唯讀，預設值:false]"
	},
	"rule":[{"Ant Design檢驗規則"}]                    
}

select(SEL-01)
下拉式選單

{
	"component": "select",
	"dataProps":{
		"mode":"[下拉選單模式，'multiple':多選(SEL-02)，'tags':自行輸入內容並可透過逗號分隔(TXT-05)，null:單選(SEL-01)，預設值:null]",
		"items":{
			"[顯示文字]":"[實際值]"
		}
	}                  
}

switch(SEL-04)
開關

{
	"component": "switch",
	"dataProps":{
		"items":{
			"enable":"[啟用時的實際值，預設值:'true']",
			"disable":"[停用時的實際值，預設值:'false']",
			"enablePrompt":"[啟用時顯示的文字語系標籤，預設值:'components.switch.enable'(啟用)]",
			"disablePrompt":"[停用時顯示的文字語系標籤，預設值:'components.switch.disable'(停用)]"
		}
	}                  
}

timeRange(DT-05)
時間區間

{
	"component": "timeRange",
	"dataProps":{
		"format":"[時間顯示格式，可參照 moment.js 官方格式設定，預設值:'HH:mm:ss']",
		"valueFormat":"[傳輸值時間格式，可參照 moment.js 官方格式設定，預設值:依 format 當前值]"
	}                  
}