優維低代碼技術專欄，是一個全新的、技術為主的專欄，由優維技術委員會成員執筆，基于優維7年低代碼技術研發及運維成果，主要介紹低代碼相關的技術原理及架構邏輯，目的是給廣大運維人提供一個技術交流與學習的平台。
優維低代碼實踐連載第⑤期
《編排優化Plus》
▽
在上一章節中，我們編排完成了任務清單的查詢，以及新增任務執行個體這兩功能，在本章節中，我們将對其進行功能的完善，包括：任務修改，任務删除，點選任務跳轉至任務詳情頁面，搜尋查詢能力完善等，那麼下面讓我們開始學習吧！
一、任務修改
在上一章節的最後一點我們完成了任務執行個體的新增，接下來我們要用對任務進行修改，需要我們在編排開辟新的入口（Tabel增加操作列），并調用相關的Proivder接口進行修改，下面跟着我的編排快速過下吧～
Table屬性參數修改
屬性面闆-屬性:
# ...
columns:
- dataIndex: name
key: name
title: 任務名稱
- dataIndex: state
key: state
title: 狀态
- dataIndex: assignee
key: assignee
title: 負責人
# 新增項
- dataIndex: operator
title: 操作
key: operator
# useChildren&useBrick用法，後續章節會展開講解
useChildren: '[operator]'
# ... Table下新增構件并進行屬性修改
将滑鼠移入構件樹上的Table構件，右側将出現+圖示， 點選圖示添加構件, 将出現新增構件彈窗，參數如下：
# 父節點預設不可修改
父節點: Table
# 挂載點等于useChildren的值，useChildren的值需要大括号包裹
挂載點: [operator]
# 選擇構件
構件: basic-bricks.general-button
示例(選擇可快速建立構件): 随便選擇一個 新增完構件後，我們需要對這個構件進行屬性編輯
資料名稱: isEdit
類型: Value
Value: false 然後對我們剛剛新增的構件進行屬性編輯
屬性面闆-屬性:
buttonIcon:
lib: easyops
category: default
icon: edit
color: blue
buttonType: text
# 構件樣式，設定為行内元素
style:
display: inline-block
事件面闆-生命周期:
general.button.click:
# 将 CTX.isEdit 設定為true，涉及資料邏輯關聯，下面會有說明
- action: context.replace
args:
- isEdit
- true
# 設定表單的靜态值
- target: '#AddTaskForm'
properties:
staticValues:
# 說明一下表達式含義：設定執行個體ID字段等于行數組的執行個體ID
# DATA為特殊表達式，盡在useChildren或useBrick下面進行使用
# 可以擷取其父元素傳遞的值
# 這裡 DATA = {
# rowData: { instanceId: 'xxx', name: 'xxx', ... },
# ...
# }
# 是以可以使用以下表達式擷取該行的執行個體ID
instanceId: <% DATA.rowData.instanceId %>
- target: '#AddTaskForm'
method: setInitValue
args:
# 設定表單初始值
- <% DATA.rowData %>
# 打開彈窗
- target: '#modalAddTask'
method: open
彈窗&添加按鈕修改
屬性面闆-屬性:
id: modalAddTask
# 修改此行資料
# "track context" 為特殊表達式，用以監聽使用者自定義變量的值
# 若監聽的值發生更新，則會更新後續表達式中的内容
# 進而引起構件的變化
# 下方為三元表達式文法，含義為：
# 當 CTX.isEdit 等于 true 時，彈窗名稱為：編輯任務
# 當 CTX.isEdit 等于 false 時， 彈窗名稱為：添加任務
modalTitle: '<% "track context", CTX.isEdit ? "編輯任務" : "添加任務" %>'
closeWhenOk: false
maskClosable: false 事件面闆-事件:
general.button.click:
# 新增項
- action: context.replace
args:
- isEdit
- false
# ... Form表單修改
事件面闆-事件:
validate.error:
- action: message.error
args:
- 表單填寫失敗
validate.success:
- target: '#modalAddTask'
properties:
okDisabled: true
# 新增if邏輯，這裡表示，如果 CTX.isEdit是false的話，則代表是建立狀态
# 調用建立執行個體接口
- if: <% !CTX.isEdit %>
useProvider: providers-of-cmdb.instance-api-create-instance
# 上個章節的内容，這裡不做展開
# ...
# ======== 分割線 ==============
# 新增if邏輯，這裡表示，如果 CTX.isEdit是true的話，則代表是編輯狀态
# 調用編輯執行個體接口
- if: <% CTX.isEdit %>
useProvider: providers-of-cmdb.instance-api-update-instance
args:
- TASK_FOR_VB_LESSON
- <% EVENT.detail.instanceId %>
- |-
# 這裡是入參，擷取表單暴露的資料中指定的字段
# _.pick 是第三方工具庫 lodash 提供的處理資料的函數
# 在表達式中可以直接使用，用以處理資料
<%
_.pick(EVENT.detail, [
"name",
"state",
"assignee",
"reporter",
"time",
"description",
])
%>
callback:
success:
# 回調方法，同新增邏輯一緻
- action: message.success
args:
- 任務修改成功
- target: '#modalAddTask'
properties:
okDisabled: false
- action: context.refresh
args:
- taskList
- target: '#modalAddTask'
method: close
error:
- action: handleHttpError
二、任務删除
為Table新增删除按鈕
在做完修改功能後，增删改查我們就剩最後一個删除功能了，我們就已最簡單的實作結束這塊功能吧～
我們要在剛剛Table操作列新增的編輯按鈕後面加上一個删除按鈕；在構件樹上找到 Table 下挂在點為: [operator], 然後在它下面新增構件, 彈窗參數如下：
# 父節點預設不可修改
父節點: Table
# 挂載點等于useChildren的值，useChildren的值需要大括号包裹
挂載點: [operator]
# 選擇構件
構件: basic-bricks.general-button
示例(選擇可快速建立構件): 随便選擇一個 删除按鈕入參修改
屬性面闆-屬性:
buttonIcon:
lib: easyops
category: default
icon: delete
color: red
buttonType: text
style:
display: inline-block
事件面闆-事件:
general.button.click:
# 這裡簡單實作，點選删除按鈕，直接調用删除接口，進行删除
# 然後觸發 taskList 重新請求資料，完成渲染
- useProvider: providers-of-cmdb.instance-api-delete-instance
args:
- TASK_FOR_VB_LESSON
- <% DATA.rowData.instanceId %>
callback:
success:
- action: message.success
args:
- 任務删除成功
- action: context.refresh
args:
- taskList
error:
action: handleHttpError 三、任務詳情頁面跳轉
URL動态參數詳解
在完成了增删改查之後，我們要對我們的功能進一步完善，現在我們需要一個任務詳情頁面，入口是從任務清單頁面進行跳轉，那麼我們要怎麼做呢？首先我們要思考一個問題，一個詳情頁面，我們要怎麼知道目前頁面是哪一條執行個體的詳情呢？
最常用的方式就是在 URL 上面攜帶資訊，然後詳情頁面從 URL 中擷取資訊，然後進行接口請求，擷取資訊後再渲染頁面上，編排也是如此；在之前的章節中，我們已經介紹了一種方式，通過 QUERY 表達式，可以擷取 URL 上面的參數，現在我們介紹另外一種可以從 URL 上面動态參數的表達式 PATH，他們的使用示例如下：
QUERY表達式擷取參數:
# 路由 page1 參數設定
path: '${APP.homepage}/page1'
# 實際渲染時，使用者根據自己需求，添加動态參數 { a:1, b:2, c: helloWorld }
# URL将識别成以下格式
URL: 'https://admin.easyops.local/next/page1?a=1&b=2&c=helloWorld'
# 則 QUERY.a = 1, QUERY.b = 2, QUERY.c = helloWorld
# =========== 分割線 ===========
PATH表達式擷取參數:
# 路由 page2 參數設定
# 請注意 path 上面的 :a, :b, :c, 這幾個就是我們認為的動态路由參數
path: '${APP.homepage}/page2/:a/task/:b/detail/:c/edit'
# 實際渲染時，使用者根據自己需求，添加動态參數 { a:1, b:2, c: helloWorld }
# URL将識别成以下格式
URL: 'https://admin.easyops.local/next/page2/1/task/2/detail/helloWorld/edit'
# 則 PATH.a = 1, PATH.b = 2, PATH.c = helloWorld 新增路由頁面(任務詳情)
在介紹完這兩個表達式之後，我們将使用 PATH 的方式，建立新的路由頁面，并完成任務詳情跳轉這個功能，下面進入編排步驟:
别名: 任務詳情
path: "${APP.homepage}/task/:instanceId/detail"
選擇主題: UI8.0主題下的詳情頁 DATA面闆添加資料
在新增完路由後，打開在左側 DATA 面闆，添加資料 taskDetail，入參如下:
資料名稱: taskDetail
類型: Provider
Provider(接口): providers-of-cmdb.instance-api-get-detail
Args(參數):
- TASK_FOR_VB_LESSON
# 這裡路徑上面已經配置了 :instanceId, 是以我們可以根據通過 PATH 表達式擷取到具體的值
- <% PATH.instanceId %> 構件屬性修改
然後從構件樹上找到 brick-descriptions 構件，将其屬性修改如下：
屬性面闆-屬性:
column: 4
dataSource: <% CTX.taskDetail %>
itemList:
- label: 任務名稱
field: name
- label: 任務描述
field: description
- label: 狀态
useChildren: '[tag]'
- label: 工時
field: time
- label: 負責人
field: assignee
- label: 彙報人
field: reporter
任務清單頁面編排修改
在做完這一切之後，我們回到任務清單的編排頁面中，進行頁面編排修改，首先定位到 Table 構件，将其屬性入參修改為如下:
columns:
- dataIndex: name
key: name
title: 任務名稱
# 新增項
useChildren: '[name]'
# 其他不做修改，隻需要增加這一行屬性即可
# ... 然後在 TABLE 的節點下新增 Link 構件
# 父節點預設不可修改
父節點: Table
# 挂載點等于useChildren的值，useChildren的值需要大括号包裹
挂載點: [name]
# 選擇構件
構件: presentational-bricks.brick-link
示例(選擇可快速建立構件): 随便選擇一個 并将新增 Link 構件的屬性修改為:
屬性面闆-屬性:
label: <% DATA.rowData.name %>
# url由動态參數由清單行資料提供
url: '<% `${APP.homepage}/task/${DATA.rowData.instanceId}/detail` %>'
hideExternalIcon: true 四、為Table增加查詢條件
之前我們做的查詢其實隻是批量地将資料查詢回來并進行展示，相對來說還比較粗糙，現在我們需要将查詢細緻化，增加多一些查詢條件，友善能夠精準定位到我們需要的資料，那麼接下來也開始關于這塊的編排吧！
相信大家看到左側DATA面闆一直有兩個參數filters跟query，但是我們之前的章節一直沒有提及；本節課将利用這兩個參數，結合taskList，進行資料查詢，那麼我們要怎麼做呢？跟着我一起修改編排吧
DATA屬性修改
資料名: filters
類型: Value
Args(參數):
assignee: <% QUERY.assignee %>
name: <% QUERY.name %> 資料名: query
類型: Value
Args(參數):
|-
<%
{
$and: [
{
...(CTX.filters.name
? {
name: {
$like: `%${CTX.filters.name}%`,
},
}
: {}),
...(CTX.filters.assignee
? {
assignee: {
$eq: `${CTX.filters.assignee}`,
},
}
: {}),
},
],
}
%>
資料名稱: taskList
類型: Provider
Provider(接口): providers-of-cmdb.instance-api-post-search-v3
Args(參數):
- TASK_FOR_VB_LESSON
- fields:
- name
- state
- assignee
- reporter
- description
page: '${QUERY.page=1|number}'
pageSize: '${QUERY.pageSize=20|number}'
# 新增項
query: <% CTX.query %>
Extra provider settings(額外的接口配置):
lazy: true
Extra basic settings(額外的基礎配置):
track: true 構件屬性修改
找到 Table 上放的兩個構件，Input & Select, 分别對他們進行修改，如下
屬性面闆-屬性:
placeholder: 輸入任務名稱
q: <% CTX.filters.name %>
shouldUpdateUrlParams: false
事件面闆-事件:
filter.update:
# history.pushQuery 為系統提供的方法，用以更新 URL 上的動态參數
# 若原先 url: http://admin.easyop.local/next/page1?name=1
# 執行完下面事件後，url将變為:
# http://admin.easyops.local/next/page1?name=xxx&page=1
- action: history.pushQuery
args:
- name: <% EVENT.detail.query %>
page: 1
# history.pushQuery 第二個入參，notify預設為true
# 設定成false代表更新完URL後不觸發頁面更新
- notify: false
# context的文法之一，表示更新 CTX.filters 中的 name
- action: context.assign
args:
- filters
- name: <% EVENT.detail.query %> 屬性面闆-屬性:
placeholder: 篩選負責人
objectId: USER
inputBoxStyle:
width: 200px
instanceQuery:
state: valid
fields:
label:
- name
value: name
labelTemplate: '#{name}'
value: <% CTX.filters.assignee %>
allowClear: true
事件面闆-事件:
forms.cmdb-instance-select.change:
# 邏輯同上，不做展開
- action: history.pushQuery
args:
- assignee: '${EVENT.detail}'
page: 1
- notify: false
- action: context.assign
args:
- filters
- assignee: '${EVENT.detail}' 做完這一切編排修改後，我們的查詢功能也就豐富完善啦！
五、結語
通過本章節，您已學會查詢，編輯，删除，路由頁面跳轉等進階操作啦，這已經能夠滿足日常編排工作的大部分場景啦！