From f8e4266ca932826164c5b8d3c6436262a27408f1 Mon Sep 17 00:00:00 2001 From: wuxinbo Date: Thu, 24 Aug 2023 17:04:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=B7=A5=E4=BD=9C?= =?UTF-8?q?=E6=B5=81=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...51\241\265 UI \346\236\204\345\273\272.md" | 612 +++++++++++++----- ...44\344\272\222\351\200\273\350\276\221.md" | 278 ++++++-- ...72\346\234\254\347\273\223\346\236\204.md" | 12 + ...56\345\210\235\345\247\213\345\214\226.md" | 45 +- ...65\351\235\242\350\260\203\350\257\225.md" | 17 +- 5 files changed, 737 insertions(+), 227 deletions(-) diff --git "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265 UI \346\236\204\345\273\272.md" "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265 UI \346\236\204\345\273\272.md" index 902fdbe385a0..43ea0d29d278 100644 --- "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265 UI \346\236\204\345\273\272.md" +++ "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265 UI \346\236\204\345\273\272.md" @@ -1,62 +1,99 @@ -数据初始化后已经拿到了足够的数据来进行界面构建了。界面基本布局已经在**审批详情页的基本结构**这一章节描述。以下进行具体模块的介绍。 +本文将针对审批页面中各个具体模块进行关于UI构建方面的介绍。 +> ? 这一环节是在审批详情页面数据初始化完毕的基础上进行。如果不了解这个过程，可参考**审批详情模板介绍** 下的【**审批详情页面数据初始化**】 ## 基本信息 + 这个模块主要使用了**网格布局**组件和**文本**组件，主要呈现流程的基本信息，包含**发起人**、**发起时间**、**结束时间**、**流程状态**。 ### 组件布局描述 + 模块主体是一个**网格布局**组件，其中设置**4**行。每一行有**2**列。每一行的第一列为**信息标题**。第二列为具体信息字段的值。 ![](https://qcloudimg.tencent-cloud.cn/raw/fd836ecf94d9cef31ba43c1c1f1ed118.jpg) ### 具体信息字段取值 -- **发起人** + +#### 发起人 + 在基础属性 > 文本内容中，绑定 `$page.dataset.state?.processInstance` 变量中的 `StartedBy` 这个值。 + ```js - $page.dataset.state?.processInstance?.StartedBy || "-"; +$page.dataset.state?.processInstance?.StartedBy || "-"; ``` -- **发起时间** + +#### 发起时间 + 在基础属性 > 文本内容中，绑定 `$page.dataset.state?.processInstance` 变量中的 `StartTime` 这个值， 其中在表达式中需要通过 `DateText` 这个公式进行时间转换，并且做空值判断。 + ```js - $page.dataset.state?.processInstance?.StartTime - ? DateText( - $page.dataset.state.processInstance?.StartTime, - "YYYY-MM-DD HH:mm:ss" - ) - : "-"; +$page.dataset.state?.processInstance?.StartTime + ? DateText( + $page.dataset.state.processInstance?.StartTime, + "YYYY-MM-DD HH:mm:ss" + ) + : "-"; ``` -- **结束时间** + +#### 结束时间 + 逻辑与发起时间相同，取值为 `EndTime`。 -- **流程状态** + +#### 流程状态 + 流程状态这个信息在 `$page.dataset.state?.processInstance` 这个变量中并未直接返回，需要通过 `$page.dataset.state?.processInstance` 这个变量中几个字段进行计算而来。计算方法为 **getProcessStatusInfo**，此方法返回 `text`（状态名称）和 `color`（状态字段颜色）。最终的文本内容绑定表达式如下： + ```js - $page.handler?.getProcessStatusInfo?.($page.dataset.state.processInstance) - ?.text || "-"; +$page.handler?.getProcessStatusInfo?.($page.dataset.state.processInstance) + ?.text || "-"; ``` + 然后给在流程状态文本组件中的样式 > 高级 > style 绑定中进行如下样式绑定。 + ```js - ({ - color: - $page.handler?.getProcessStatusInfo?.($page.dataset.state.processInstance) - ?.color || "#000", - }); +({ + color: + $page.handler?.getProcessStatusInfo?.($page.dataset.state.processInstance) + ?.color || "#000", +}); ``` ### 涉及到的方法 -#### getProcessStatusInfo -计算当前流程的状态信息，入参为当前流程实例，出参为状态文本（text）和文本颜色（color）。 + + + + + + + + +
方法 + 描述 +
getProcessStatusInfo计算当前流程的状态信息，入参为当前流程实例，出参为状态文本（text）和文本颜色（color）
### 涉及到的变量 -#### processInstance -流程实例信息。 + + + + + + + +
变量 + 描述 +
processInstance流程实例信息
## 流程记录 + ### 组件布局描述 + 流程记录的布局主要由以下几块构成： + - 标题 - 空状态显示文本 - 循环展示组件 循环展示组件中结构如下： + - 普通容器 - 记录顶部容器，其中包含审批节点的标题，节点审批状态以及操作时间。 - 网格布局，包含记录信息。有审批人、加签信息、审批意见、回退信息、抄送信息。 其中针对待审批的节点还有审批策略信息。 @@ -68,24 +105,33 @@ 这个模块使用到的数据都在 `elementInfos` 这个变量中。在 `initApprovalPage` 中，这个变量来源于 `getProcessMetaData` 返回的 `elementInfos`，经由 `transElementInfos` 处理得到。具体转换逻辑可见 `transElementInfos` 这个方法，方法内包含详尽的转换逻辑的注释信息。 在获取到 elementInfos 这个变量后，将此变量跟循环对象进行绑定，利用变量中的循环对象，对循环展示内网格布局中的文本组件进行赋值。 + ```js // 转换流程记录容器所需要显示的数据，并将结果赋值给流程记录变量 $page.dataset.state.elementInfos = $page.handler.transElementInfos(elementInfos); ``` + 最终得到以下的绑定对应关系： -- **审批节点标题** + +#### 审批节点标题 + 绑定循环对象的 title。 + ```js $w.item_listView1.title; ``` -- **审批节点状态** + +#### 审批节点状态 + 绑定循环对象的 status。 + ```js $w.item_listView1.status.text; ``` 针对此字段颜色设置，在状态文本组件中的样式 > 高级 > style 绑定中进行如下样式绑定： + ```js ({ display: "inline-block", @@ -93,79 +139,133 @@ $w.item_listView1.status.text; background: $w.item_listView1.status.backgroundColor, }); ``` -- **操作时间** + +#### 操作时间 + 绑定循环对象的 createTime。 + ```js $w.item_listView1.createTime; ``` -- **发起人/审批人** + +#### 发起人/审批人 + 绑定循环对象的 operaName.value。 + ```js $w.item_listView1.operaName.value; ``` 针对**字段标题**的设置，`operaName` 中包含一个 label 字段，决定这个字段名称显示发起人还是审批人。故给字段标题进行如下绑定。 + ```js $w.item_listView1.operaName.label; ``` -针对**审批策略**的设置，这个字段的值绑定为。另外此字段有值说明该审批节点是待审批状态，待审批状态才显示审批策略。 +#### 审批策略 + +这个字段的值绑定为: + ```js $w.item_listView1.approvalStrategy; ``` -- **加签** + +另外此字段有值说明该审批节点是待审批状态，待审批状态才显示审批策略。 + +#### 加签 + 绑定循环对象的 addAssignee.value。 + ```js $w.item_listView1.addAssignee.value || "-"; ``` -- **回退到指定节点** + +#### 回退到指定节点 + 绑定循环对象的 rollback.value。 + ```js $w.item_listView1.rollback.value || "-"; ``` -- **抄送** + +#### 抄送 + 绑定循环对象的 cc.value。 + ```js $w.item_listView1.cc.value || "-"; ``` -- **审批意见** + +#### 审批意见 + 绑定循环对象的 comment.value。 + ```js $w.item_listView1.comment.value || "-"; ``` - ### 涉及到的方法 -#### transElementInfos -转换批办过程数据。 + + + + + + + + +
方法 + 描述 +
transElementInfos转换批办过程数据
### 涉及到的变量 -#### elementInfos -批办过程数据。 + + + + + + + + +
变量 + 描述 +
elementInfos批办过程数据
## 流程图示 -### 描述 + 流程图示目前使用的是微搭平台中内置的流程图组件。该组件并未开放出来，仅供生成审批详情模板时使用。属性目前也很简约只有一个数据属性。 ![](https://qcloudimg.tencent-cloud.cn/raw/bd1556e67e7afc3aa455ff3f0688aaa1.jpg) ### 数据取值 + 这里用到的数据是在初始化数据请求的时候得到的**流程画布详情**。 + ```js /** initApprovalPage **/ // 将流程画布详情数据赋值给 流程画布详情变量 $page.dataset.state.processCanvasInfo = processCanvasInfo; ``` + 将这个 `processCanvasInfo` 流程画布变量直接绑定到流程图组件上，即可显示图示内容。 ->? 这里的图示也可以自己实现。具体的画布数据格式可以参见 [流程画布详情](https://cloud.tencent.com/document/product/1301/94470#.E6.9F.A5.E8.AF.A2.E6.B5.81.E7.A8.8B.E7.94.BB.E5.B8.83.E8.AF.A6.E6.83.85) 这个接口。根据这个接口返回的数据，并借助其他第三方图表库，实现一个自定义组件，并应用到此模板中。 +> ? 这里的图示也可以自己实现。具体的画布数据格式可以参见 [流程画布详情](https://cloud.tencent.com/document/product/1301/94470#.E6.9F.A5.E8.AF.A2.E6.B5.81.E7.A8.8B.E7.94.BB.E5.B8.83.E8.AF.A6.E6.83.85) 这个接口。根据这个接口返回的数据，并借助其他第三方图表库，实现一个自定义组件，并应用到此模板中。 ### 涉及到的变量 -#### processCanvasInfo -流程画布数据。 + + + + + + + +
变量 + 描述 +
processCanvasInfo流程画布数据
## 流程操作 + ### 组件布局描述 + 操作区域主要的布局是网格布局，在一行之中放置了 11 列。在每一列放置相应的交互按钮或其他交互组件。 每一个操作项都会有显隐控制，具体体现在列的条件展示 > 条件渲染中。 @@ -173,22 +273,42 @@ $page.dataset.state.processCanvasInfo = processCanvasInfo; 以下是各个操作内容的构成、条件渲染逻辑。如果需要重新实现这一套流程操作渲染，可以参考这些内容进行个性化的搭建。 #### 流程操作区域的条件渲染规则 + 如果用户针对自己的审批进行了**回退**操作的话，在回退成功后，用户操作的这条审批任务将被销毁，用户不能再进行任何审批操作。 所以单击回退之后，整个流程操作区域将不再显示。这个条件渲染应用在流程操作所在的网格布局，配置 > 条件展示 > 是否渲染进行如下的表达式绑定： + ```js !$page.dataset.state.hasRollback; ``` `hasRollback` 的赋值过程在请求回退成功之后。具体逻辑见下一章审批阶段 > 回退中。 -#### 抄送 -##### 构成 -抄送这一列放置了一个普通容器。其中包含一个按钮，一个成员选择组件。成员选择组件通过样式定位，覆盖在按钮之上。点击按钮其实是触发了成员选择弹窗。 - - -##### 条件渲染规则 -- 当前的页面类型（变量 `internalPageType`）是 DRAFT（草稿）、CREATEFLOW（创建）、TODO（待办）中的一个。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `Show`、`ShowSubmitApp`、`ShowCarbonCopy` 的值都为**true**。 +#### 各操作的 UI 组件组成以及渲染条件表格 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作名称 + UI组件组成 + 条件渲染规则 + 条件渲染表达式 +
抄送 + 抄送这一列放置了一个普通容器。其中包含一个按钮，一个成员选择组件。成员选择组件通过样式定位，覆盖在按钮之上。点击按钮其实是触发了成员选择弹窗。 +
+ + 		+
    +
  • 当前的页面类型（变量 internalPageType）是 DRAFT（草稿）、CREATEFLOW（创建）、TODO（待办）中的一个。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 Show、ShowSubmitApp、 ShowCarbonCopy 的值都为true。
    • +
+ 		```js ["DRAFT", "CREATEFLOW", "TODO"].includes( @@ -199,11 +319,20 @@ $page.dataset.state.processCanvasInfo = processCanvasInfo; $page.dataset.state.approvalPageDetail?.ShowCarbonCopy; ``` -#### 保存草稿 -##### 条件渲染规则 -- 当前的页面类型（变量 `internalPageType`）是 DRAFT（草稿）、CREATEFLOW（创建）中的一个。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `Show`、`ShowSubmitApp` 的值都为**true**。 -- 审批实例（变量 `processInstance`） 中的 `CanDelete` 的值为**true**。 +
保存草稿按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 DRAFT（草稿）、CREATEFLOW（创建）中的一个。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 Show、ShowSubmitApp 的值都 为 true。
    • +
  • 审批实例（变量 processInstance） 中的 CanDelete 的值为true。
    • +
+ 		```js ["DRAFT", "CREATEFLOW"].includes($page.dataset.state.internalPageType) && @@ -212,12 +341,21 @@ $page.dataset.state.processCanvasInfo = processCanvasInfo; $page.dataset.state.processInstance?.CanDelete; ``` -#### 取消 - -##### 条件渲染规则 -- 当前的页面类型（变量 `internalPageType`）是 DRAFT（草稿）、CREATEFLOW（创建）中的一个。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `Show`、`ShowSubmitApp` 的值都为**true**。 -- 审批实例（变量 `processInstance`）中的 `CanDelete` 的值为**true**。 +
取消按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 DRAFT（草稿）、CREATEFLOW（创建）中的一个。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 Show、ShowSubmitApp + 的值都为true。
    • +
  • 审批实例（变量 processInstance）中的 CanDelete 的值为true。
    • +
+ 		```js ["DRAFT", "CREATEFLOW"].includes($page.dataset.state.internalPageType) && @@ -226,10 +364,20 @@ $page.dataset.state.processCanvasInfo = processCanvasInfo; $page.dataset.state.processInstance?.CanDelete; ``` -#### 提交申请 -##### 条件渲染规则 -- 当前的页面类型（变量 `internalPageType`）是 DRAFT（草稿）、CREATEFLOW（创建）、TODO（待办）中的一个。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `Show`、`ShowSubmitApp` 的值都为**true**。 +
提交申请按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 DRAFT（草稿）、CREATEFLOW（创建）、TODO（待办）中的一个。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 Show、ShowSubmitApp + 的值都为true。
    • +
+ 		```js ["DRAFT", "CREATEFLOW", "TODO"].includes( @@ -239,13 +387,21 @@ $page.dataset.state.processCanvasInfo = processCanvasInfo; $page.dataset.state.approvalPageDetail?.ShowSubmitApp; ``` -#### 回退 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 TODO（待办）。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `ShowRollBack` 的值都为 **true**， `ShowSubmitApp` 为 **false**。 -- 变量 `taskHasEnd` 的值为 **false**。 +
回退按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 TODO（待办）。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 ShowRollBack 的值都为 true， + ShowSubmitApp 为 false。
    • +
  • 变量 taskHasEnd 的值为 false。
    • +
+ 		```js $page.dataset.state.internalPageType === "TODO" && @@ -254,17 +410,21 @@ $page.dataset.state.internalPageType === "TODO" && !$page.dataset.state.taskHasEnd; ``` -#### 加签 - -##### 构成 - -加签的操作布局构成同抄送 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 TODO（待办）。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `ShowAddAssignee` 的值都为 **true**， `ShowSubmitApp` 为 **false**。 -- 变量 `taskHasEnd` 的值为 **false**。 +
加签加签的操作布局构成同抄送 +
    +
  • 当前的页面类型（变量 internalPageType）是 TODO（待办）。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 ShowAddAssignee 的值都为 true， + ShowSubmitApp 为 false。
    • +
  • 变量 taskHasEnd 的值为 false。
    • +
+ 		```js $page.dataset.state.internalPageType === "TODO" && @@ -273,17 +433,21 @@ $page.dataset.state.internalPageType === "TODO" && !$page.dataset.state.taskHasEnd; ``` -#### 转办 - -##### 构成 - -转办的操作布局构成同抄送。 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 TODO（待办）。 -- 审批页面详情（变量 `approvalPageDetail`）中 `ShowTurnToPerson` 的值都为 **true**， `ShowSubmitApp` 为 **false**。 -- 变量 `taskHasEnd` 的值为 **false**。 +
转办转办的操作布局构成同抄送 +
    +
  • 当前的页面类型（变量 internalPageType）是 TODO（待办）。
    • +
  • 审批页面详情（变量 approvalPageDetail）中 ShowTurnToPerson 的值都为 true， + ShowSubmitApp 为 false。
    • +
  • 变量 taskHasEnd 的值为 false。
    • +
+ 		```js $page.dataset.state.internalPageType === "TODO" && @@ -292,14 +456,21 @@ $page.dataset.state.internalPageType === "TODO" && !$page.dataset.state.taskHasEnd; ``` -#### 拒绝 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 TODO（待办）。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `ShowSubmitApp` 的值都为 **false**。 -- 审批实例（变量 `processInstance`）中的 `UserTaskType` 的值**不为 2**。 -- 变量 `taskHasEnd` 的值为 **false**。 +
拒绝按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 TODO（待办）。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 ShowSubmitApp 的值都为 false。
    • +
  • 审批实例（变量 processInstance）中的 UserTaskType 的值不为 2。
    • +
  • 变量 taskHasEnd 的值为 false。
    • +
+ 		```js $page.dataset.state.internalPageType === "TODO" && @@ -308,14 +479,21 @@ $page.dataset.state.internalPageType === "TODO" && !$page.dataset.state.taskHasEnd; ``` -#### 同意 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 TODO（待办）。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `ShowSubmitApp` 的值都为 **false**。 -- 审批实例（变量 `processInstance`）中的 `UserTaskType` 的值**不为 2**。 -- 变量 `taskHasEnd` 的值为 **false**。 +
同意按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 TODO（待办）。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 ShowSubmitApp 的值都为 false。
    • +
  • 审批实例（变量 processInstance）中的 UserTaskType 的值不为 2。
    • +
  • 变量 taskHasEnd 的值为 false。
    • +
+ 		```js $page.dataset.state.internalPageType === "TODO" && @@ -324,14 +502,21 @@ $page.dataset.state.internalPageType === "TODO" && !$page.dataset.state.taskHasEnd; ``` -#### 处理 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 TODO（待办）。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `ShowSubmitApp` 的值都为**false**。 -- 审批实例（变量 `processInstance`）中的 `UserTaskType` 的值**为 2**。 -- 变量 `taskHasEnd` 的值为 **false**。 +
处理按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 TODO（待办）。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 ShowSubmitApp 的值都为false。
    • +
  • 审批实例（变量 processInstance）中的 UserTaskType 的值为 2。
    • +
  • 变量 taskHasEnd 的值为 false。
    • +
+ 		```js $page.dataset.state.internalPageType === "TODO" && @@ -340,102 +525,175 @@ $page.dataset.state.internalPageType === "TODO" && !$page.dataset.state.taskHasEnd; ``` -#### 撤销 - -##### 条件渲染规则 - -- 当前的页面类型（变量 `internalPageType`）是 CREATE（创建）、DONE（已办）中的一个。 -- 审批页面详情（变量 `approvalPageDetail`）中的 `ShowRevoke` 的值都为 **true**。 +
撤销按钮 +
    +
  • 当前的页面类型（变量 internalPageType）是 CREATE（创建）、DONE（已办）中的一个。
    • +
  • 审批页面详情（变量 approvalPageDetail）中的 ShowRevoke 的值都为 true。
    • +
+ 		```js ["CREATE", "DONE"].includes($page.dataset.state.internalPageType) && $page.dataset.state.approvalPageDetail?.ShowRevoke; ``` -### 涉及到的变量 -#### internalPageType -页面类型。 - -#### processInstance -流程实例。 - -#### approvalPageDetail -审批详情。 +
-#### taskHasEnd -审批任务是否已完成。 +### 涉及到的变量 + + + + + + + + + + + + + + + + + + + +
变量 + 描述 +
internalPageType页面类型。
processInstance流程实例。
approvalPageDetail审批详情。
taskHasEnd审批任务是否已完成。
## 审批弹窗 审批弹窗部分的包含两个组件，一个是弹窗，一个是表单。 其中**当前节点**、**审批人**这两个表单项为只读。 ### 具体信息字段取值 -- 当前节点 + +#### 当前节点 + ```js $page.dataset.state.processInstance?.CurrentNodeName; ``` -- 当前审批人/处理人 - - 标题内容绑定 + +#### 当前审批人/处理人 + +- 标题内容绑定 + ```js $page.dataset.state.processInstance?.UserTaskType === 2 ? "处理人" : "审批人"; ``` - - 输入值绑定 + +- 输入值绑定 + ```js $page.dataset.state.processInstance?.CurrentApproverName || "-"; ``` ### 可交互表单项显隐逻辑 + - 审批意见 -这里会用到一个变量，`currentOperation` 为当前操作，其中包含操作标识字段 `operationName`，当 `operationName` 不为 `transfer` 时进行显示。 + 这里会用到一个变量，`currentOperation` 为当前操作，其中包含操作标识字段 `operationName`，当 `operationName` 不为 `transfer` 时进行显示。 + ```js $page.dataset.state.currentOperation.operationName !== "transfer"; ``` + - 抄送 -抄送的显示首先要保证 `approvalPageDetail`（审批页面详情）这个变量中 `ShowCarbonCopy` 显示抄送字段为 **true**，然后 `currentOperation` 变量中 `operationName` 字段值为`agree` 和 `handle`中的一个。 + 抄送的显示首先要保证 `approvalPageDetail`（审批页面详情）这个变量中 `ShowCarbonCopy` 显示抄送字段为 **true**，然后 `currentOperation` 变量中 `operationName` 字段值为`agree` 和 `handle`中的一个。 + ```js $page.dataset.state.approvalPageDetail.ShowCarbonCopy && ["agree", "handle"].includes( $page.dataset.state.currentOperation.operationName ); ``` + - 通知人选择 -这个表单项未设置隐藏逻辑，在审批弹窗中的表单中总是显示的。 + 这个表单项未设置隐藏逻辑，在审批弹窗中的表单中总是显示的。 ### 涉及到的变量 -#### processInstance -流程实例。 -#### approvalPageDetail -审批页面详情。 -#### currentOperation -当前审批操作。 + + + + + + + + + + + + + + + + +
变量 + 描述 +
processInstance流程实例
approvalPageDetail审批页面详情
currentOperation当前审批操作
## 回退弹窗 + 回退弹窗中的弹窗内容是一个单选框。这里的单选框列表渲染是由变量 `preElementList` 生成。这部分的数据交互建下一章**审批详情页操作交互逻辑**。 ### 涉及到的变量 -#### preElementList -可回退节点列表。 + + + + + + + + +
变量 + 描述 +
preElementList可回退节点列表
## 下一节点审批人弹窗 + 下一节点审批人弹窗中的弹窗内容是一个多选框。这里的单选框列表渲染是由变量 `flowTaskInfoList` 生成。这部分的数据交互建下一章**审批详情页操作交互逻辑**。 ### 涉及到的变量 -#### preElementList -下一节点审批人列表。 + + + + + + + + +
变量 + 描述 +
flowTaskInfoList下一节点审批人列表
## 审批表单 + 审批表单是在创建的时候，由编辑器创建。 表单创建依赖审批节点配置的变量背后的数据模型。取审批节点上出参和入参的数据模型的并集，然后生成一个或多个数据模型对应的表单。 ### 表单值的设置 + 关于设置表单值，这里通过模板预置的 `setFormValue` 这个方法来实现，并在 `initApprovalPage` 中调用。这个方法主要有两个逻辑。 -- 获取审批详情页面中的变量值 + +#### 获取审批详情页面中的变量值 + ```js // 转换流程变量中的业务数据 const { objectMap } = transVariableInfos(approvalPageDetail); ``` + 其中 `transVariableInfos` 这个值在 `setFormValue` 文件中，主要就做一个事情，针对审批页面详情中 `ObjectMap` 进行转化。 转化前： + ```js { ObjectMap: [ @@ -454,7 +712,9 @@ const { objectMap } = transVariableInfos(approvalPageDetail); ]; } ``` + 转化后： + ```js { foo: { @@ -465,27 +725,49 @@ const { objectMap } = transVariableInfos(approvalPageDetail); } } ``` -- 表单赋值 - 遍历当前页面的所有组件判定当前组件是不是表单的逻辑为：如果当前组件存在数据源标识并且流程业务数据中包含此数据源标识对应的数据，说明当前组件是表单再将上一步转化后的数据，赋值给当前表单。具体逻辑可参考 `setFormValue` 方法内的注释。 + +#### 表单赋值 + +遍历当前页面的所有组件判定当前组件是不是表单的逻辑为：如果当前组件存在数据源标识并且流程业务数据中包含此数据源标识对应的数据，说明当前组件是表单再将上一步转化后的数据，赋值给当前表单。具体逻辑可参考 `setFormValue` 方法内的注释。 ### 表单读写设置 + 在生成表单的同时，表单的**表单场景**也会被设置成一个表达式。来控制表单在不同场景下的可读可写的权限。 + 具体的读写性由两个变量决定 `taskHasEnd` 和 `internalPageType`。这两个变量在 `initApprovalPage` 中已赋值。并且在复制之后作为入参传给 `setFormType` 方法进行进一步的计算，并在 `initApprovalPage` 中调用 `setFormType` 方法。 + 具体计算逻辑可见 `setFormType` 这个方法内的注释。 ### 涉及到的变量 -#### taskHasEnd -当前审批任务是否结束。 - -#### internalPageType - -页面类型。 + + + + + + + + + + + +
变量 + 描述 +
taskHasEnd当前审批任务是否结束
internalPageType页面类型
### 涉及到的方法 -#### setFormValue - -将流程中的业务数据回显到表单中。 -#### setFormType -设置表单场景。 + + + + + + + + + + + +
方法 + 描述 +
setFormValue将流程中的业务数据回显到表单中
setFormType设置表单场景
diff --git "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\346\223\215\344\275\234\344\272\244\344\272\222\351\200\273\350\276\221.md" "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\346\223\215\344\275\234\344\272\244\344\272\222\351\200\273\350\276\221.md" index 4521ae45b88e..01ffc2591b0b 100644 --- "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\346\223\215\344\275\234\344\272\244\344\272\222\351\200\273\350\276\221.md" +++ "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\346\223\215\344\275\234\344\272\244\344\272\222\351\200\273\350\276\221.md" @@ -1,7 +1,6 @@ -本文将介绍在审批详情界面构建完之后的数据交互逻辑，也就是审批相关的操作。主要分为两大类： -- 提交阶段 -- 审批阶段 +本文将介绍在审批详情界面构建完之后的数据交互逻辑，也就是审批相关的操作。审批操作主要分为两大类：**提交阶段** 和 **审批阶段** +> ? 这一环节是在审批详情页面数据初始化和审批详情页面UI构建完毕的基础上进行。如果不了解上述这两个过程，可参考**审批详情模板介绍** 下的 【**审批详情页 UI 构建**】以及 【**审批详情页面数据初始化**】 ## 提交阶段 这个阶段操作区域会设置这几个操作： **抄送**、**保存草稿**、**提交申请**、**取消**。 @@ -17,8 +16,8 @@ operationName: "apply", }); ``` -- `onSubmitApply` 内触发 [completeTask](#completeTask) 方法。 - [completeTask](#completeTask) 中 `approvalInfo` 这个参数中会设置 `CcUserIds` 属性，用 `applyCcUserIds` 这个变量赋值。 +- `onSubmitApply` 内触发completeTask方法。 + completeTask 中 `approvalInfo` 这个参数中会设置 `CcUserIds` 属性，用 `applyCcUserIds` 这个变量赋值。 - 提交申请后的回调。 `onSubmitApply` 针对提交申请操作设置了一个回调，重新进行页面初始化的，并且会将当前的页面类型变为 `CREATE`。 ```js @@ -33,11 +32,33 @@ if (data.target.operationName === "apply") { #### 涉及到的变量 -**applyCcUserIds**：提交申请阶段抄送人员变量。 - -#### 涉及到的方法 -- **initApprovalPage**：初始化审批页面数据。 -- **onSubmitApply**：提交申请点击事件。 + + + + + + + +
变量 + 描述 +
applyCcUserIds提交申请阶段抄送人员变量
+ +### 涉及到的方法 + + + + + + + + + + + + +
方法 + 描述 +
initApprovalPage初始化审批页面数据
onSubmitApply提交申请点击事件。
### 保存草稿 @@ -51,8 +72,29 @@ if (data.target.operationName === "apply") { #### 涉及到的变量 **applyCcUserIds**：提交申请阶段抄送人员变量。 -#### 提交阶段给抄送用户变量赋值 -**onCcUserIdsChange**：初始化审批页面数据。 + + + + + + + +
变量 + 描述 +
applyCcUserIds提交申请阶段抄送人员变量
+ +#### 涉及到的方法 + + + + + + + + +
方法 + 描述 +
onCcUserIdsChange提交阶段给抄送用户变量赋值
### 取消 取消按钮这里绑定了一个编辑器自带的返回上一页的事件，这里可以根据具体的业务需要进行调整。 @@ -61,23 +103,41 @@ if (data.target.operationName === "apply") { 这个阶段操作区域会设置这几个操作： **同意**、**拒绝**、**处理**、**加签**、**转办**、**回退**、**撤销**。 ### 同意 -同意按钮会绑定 [onOpenApprovalModal](#onOpenApprovalModal) 方法，并且传递入参。 +同意按钮会绑定 onOpenApprovalModal方法，并且传递入参。 ```js ({ buttonAction: 2, operationName: "agree" }); ``` -表单校验没问题的话会打开审批表单弹窗，填写完弹窗内审批表单之后，单击**确定**会执行 [onSubmitApprovalForm](#onSubmitApprovalForm)，成功后关闭弹窗。 +表单校验没问题的话会打开审批表单弹窗，填写完弹窗内审批表单之后，单击**确定**会执行 onSubmitApprovalForm，成功后关闭弹窗。 #### 选择下一节点审批人 -1. 在 [completeTask](#completeTask) 这个方法中有一个逻辑是当 `CompleteTask` 请求结果中 `ToBeSubmittedFlowTaskFlag` 的值为 **true** 时会触发选择下一节点审批人弹窗**前提是**当前审批任务对应的审批节点配置了**上一节点指定处理人**且当前操作为同意这个条件成立后，在同意结束后会弹出下一节点审批人弹窗。 +1. 在completeTask 这个方法中有一个逻辑是当 `CompleteTask` 请求结果中 `ToBeSubmittedFlowTaskFlag` 的值为 **true** 时会触发选择下一节点审批人弹窗**前提是**当前审批任务对应的审批节点配置了**上一节点指定处理人**且当前操作为同意这个条件成立后，在同意结束后会弹出下一节点审批人弹窗。 2. 在上一章提到下一节点审批人弹窗的构成。是一组审批人任务列表构成的多选列表。多选列表绑定的值改变事件为 `onFlowTaskCheckboxChange`。具体逻辑可参考 `onFlowTaskCheckboxChange` 方法中的注释。 3. 在选择完之后，会进行一个 `onSubmitFlowTaskList` 提交审批任务点击事件的操作。这个事件绑定再弹出的确认和取消按钮上。绑定在取消按钮上时，提交审批任务会将所有下一节点审批人进行提交。避免流程因下一节点没选审批人导致整个流程无法进行下去的情况。 #### 涉及到的方法 -- **onOpenApprovalModal**：打开审批表单弹窗。 -- **onSubmitApprovalForm**：提交审批表单。 -- **onFlowTaskCheckboxChange**：下一节点审批人多选组件值变更事件。 -- **onSubmitFlowTaskList**：提交审批任务点击事件。 + + + + + + + + + + + + + + + + + + + +
方法 + 描述 +
onOpenApprovalModal打开审批表单弹窗
onSubmitApprovalForm提交审批表单
onFlowTaskCheckboxChange下一节点审批人多选组件值变更事件
onSubmitFlowTaskList提交审批任务点击事件
### 拒绝 拒绝的操作逻辑整体与同意的相同，区别是入参的传递。 @@ -96,7 +156,16 @@ if (data.target.operationName === "apply") { 具体逻辑可查阅 `onAssigneeUserChange` 方法内的注释。 #### 涉及到的方法 -**onAssigneeUserChange**：执行加签请求。 + + + + + + + +
方法 + 描述 +
onAssigneeUserChange执行加签请求
### 转办 单击**转办**，会呼出成员选择弹窗，单击弹窗中的**确定**会触发成员选择组建的值改变事件，该事件绑定了 `onTurnToUserChange` 方法。`onTurnToUserChange` 这个方法接收成员选择组件传递的参数，回去执行`completeTask`这个方法。其中要关注 `completeTask` 方法中 `approvalInfo` 入参中的 `TurnToUser` 参数传递。 @@ -112,7 +181,16 @@ if (data.target.operationName === "apply") { ``` #### 涉及到的方法 -**onTurnToUserChange**：转办选人组件值变更事件。 + + + + + + + +
方法 + 描述 +
onTurnToUserChange转办选人组件值变更事件
### 回退 回退操作包含两块逻辑，一个是打开回退弹窗的一系列逻辑，然后就是请求回退 APIs 的过程。 @@ -147,14 +225,44 @@ $page.dataset.state.hasRollback = true; ``` #### 涉及到的方法 -- **onOpenRollbackModal**：打开回退弹窗事件。 -- **onConfirmRollBack**：确认回退。 + + + + + + + + + + + +
方法 + 描述 +
onOpenRollbackModal打开回退弹窗事件
onConfirmRollBack确认回退
#### 涉及到的变量 -- **rollbackModalVisible**：回退弹窗是否可见。 -- **preElementList**：可回退节点列表。 -- **selectedRollbackNode**：已选回退节点。 -- **hasRollback**：是否已经回退。 + + + + + + + + + + + + + + + + + + + +
变量 + 描述 +
rollbackModalVisible回退弹窗是否可见
preElementList可回退节点列表
selectedRollbackNode已选回退节点
hasRollback是否已经回退
### 撤销 @@ -180,7 +288,17 @@ async function revoke() { #### 涉及到的方法 -**onOpenRevokeConfirm**：打开回退弹窗事件 + + + + + + + + +
方法 + 描述 +
onOpenRevokeConfirm打开回退弹窗事件
## 通用方法介绍 ### completeTask @@ -414,16 +532,52 @@ if (result.Response.Data.ToBeSubmittedFlowTaskFlag) { 这里 `triggerFlowTaskSelect` 主要是针对下一节点审批人的任务列表进行处理、以及触发下一节点审批人弹窗的展示。具体逻辑参见 `completeTask` 内的 `triggerFlowTaskSelect` 注释。 #### 涉及到的变量 -- **processInstance**：流程实例。 -- **internalFlowTaskId**：当前流程任务 ID。 -- **approvalPageDetail**：审批页面详情。 -- **opinionUserList**：通知用户列表。 -- **flowTaskInfoList**：下一节点审批人列表。 -- **selectedFlowTaskIds**：已选流程任务 ID。 + + + + + + + + + + + + + + + + + + + + + + + + + + + +
变量 + 描述 +
processInstance流程实例信息
internalFlowTaskId当前流程任务ID
approvalPageDetail审批页面详情
opinionUserList通知用户列表
flowTaskInfoList下一节点审批人列表
selectedFlowTaskIds已选流程任务ID
#### 涉及到的方法 -- **initApprovalPage**：初始化审批页面数据。 -- **getFormValue**：获取所有表单的值。 + + + + + + + + + + + +
方法 + 描述 +
initApprovalPage初始化审批页面数据
getFormValue获取所有表单的值
### onOpenApprovalModal 这个方法会被以下几个操作绑定 @@ -463,11 +617,33 @@ $page.dataset.state.approvalModalVisible = true; ``` #### 涉及到的变量 -**approvalModalVisible**：审批弹窗是否显示。 -**currentOperation**：当前操作信息。 + + + + + + + + + + + +
变量 + 描述 +
approvalModalVisible审批弹窗是否显示
currentOperation当前操作信息
#### 涉及到的方法 -**validateFormValue**：验证审批表单。 + + + + + + + + +
方法 + 描述 +
validateFormValue验证审批表单
### onSubmitApprovalForm 这个方法是审批弹窗中单击底部默认按钮绑定的方法。 @@ -502,7 +678,27 @@ export default async function ({ event, data }) { ``` #### 涉及到的变量 -**currentOperation**：当前操作信息。 + + + + + + + + +
变量 + 描述 +
currentOperation前操作信息
#### 涉及到的方法 -**onCloseApprovalModal**：关闭审批弹窗。 + + + + + + + + +
方法 + 描述 +
onCloseApprovalModal关闭审批弹窗
diff --git "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\347\232\204\345\237\272\346\234\254\347\273\223\346\236\204.md" "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\347\232\204\345\237\272\346\234\254\347\273\223\346\236\204.md" index 5e53fc9330fe..721669c6dc88 100644 --- "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\347\232\204\345\237\272\346\234\254\347\273\223\346\236\204.md" +++ "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\347\232\204\345\237\272\346\234\254\347\273\223\346\236\204.md" @@ -1,9 +1,11 @@ ## 概述 + 审批详情模板是一个通过微搭应用编辑器搭建的页面模板。主要应用场景为流程中的审批场景。该模板使用到的元素主要来源于当前微搭应用编辑器提供的组件。开发者能够在这套模板基础上进行一些额外的定制化改造，以此适应企业中不同的业务场景需求。 ## 模板内容的结构 先简要描述下模板的基本的排布。 + - **布局组件**作为主体，布局组件内容插槽中包含一个**表单容器** 、一个**顶部选项卡**组件、一个**网格布局**。 - **顶部选项卡**被命名为流程信息，包含两个内容插槽： - 第一个内容插槽包含流程基本信息、流程记录。 @@ -11,4 +13,14 @@ - **网格布局**被命名为流程操作，其中包含流程中所有涉及到的操作按钮。 - **审批弹窗** 、**回退弹窗** 、**下一节点审批人弹窗**作为主体之外的审批弹窗，来作为审批过程稿中的交互操作载体。 +### 设计态大纲树结构 + + +### 运行态组件结构 + +审批页面主体 + + +审批页面-流程图示 + diff --git "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\346\225\260\346\215\256\345\210\235\345\247\213\345\214\226.md" "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\346\225\260\346\215\256\345\210\235\345\247\213\345\214\226.md" index 70abab6461d4..74119939507a 100644 --- "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\346\225\260\346\215\256\345\210\235\345\247\213\345\214\226.md" +++ "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\346\225\260\346\215\256\345\210\235\345\247\213\345\214\226.md" @@ -1,5 +1,9 @@ +## 数据为搭建审批页面的前置条件 审批模板页面需要显示相关审批数据，并且需要基于已有的审批数据进行审批等相关操作。有了基本的数据，才能驱动页面的搭建，完成后续的审批相关的审批业务操作。 +例如，显示当前审批的【基本信息】，需要获取**流程实例详情**，要构建【流程记录】是需要依赖**流程批办过程**数据，针对当前审批进行审批同意拒绝等操作，也是需要知道当前是操作的哪个流程实例，当前审批任务的ID，这里要依赖**流程实例详情** + +因此审批流程相关数据获取尤为重要。 ## 获取流程数据请求依赖的参数 审批详情页需要知道要请求哪一条审批数据，并且需要知道当前的页面类型是待办还是已完成。所以审批详情页面模板预置了两个页面参数：**flowTaskId** 流程任务 ID、**pageType** 页面类型。 在发起流程之后，以及流程列表里单击标题之后，链接会携带这两个 URL 参数。后续可以在这个页面中拿到这两个参数进行业务操作。 @@ -11,17 +15,21 @@ 微搭平台针对每个页面提供了一个生命周期，在生命周期中的 onPageLoad 方法中，可以获取页面 URL 参数，并利用获取到的参数进行数据请求。 -针对这个`onPageLoad`的参数进行结构，可以得到**flowTaskId** 和 **pageType** 这两个参数。拿到这两个参数后就可以进行数据请求了。这里面还针对这两个参数进行了一个校验。 +针对这个`onPageLoad`的参数进行解构，可以得到**flowTaskId** 和 **pageType** 这两个参数。拿到这两个参数后就可以进行数据请求了。这里面还针对这两个参数进行了一个校验。 ->? 这个校验再编辑器中就会生效。因为编辑器中即为运行环境。所以在编辑器中看到错误提示属正常现象。可忽略。 +>? 这个校验在编辑器中就会生效。因为编辑器中即为运行环境。所以在编辑器中看到错误提示属正常现象。可忽略。 ### 执行 initApprovalPage 请求 在校验通过之后，会执行 initApprovalPage 这样的一个方法。再这个方法中会主要有以下逻辑。 -- 首先进行流程元数据请求，这里的元数据包含**流程实例详情**、**审批页面详情**、**流程画布详情**、**流程批办过程**。这一系列操作封装在了一个叫做 getProcessMetaData 的方法中，里面包含对以上四项数据的请求。 +- 首先进行流程元数据请求，这里的元数据包含**流程实例详情**、**审批页面详情**、**流程画布详情**、**流程批办过程**。这一系列操作封装在了一个叫做 getProcessMetaData 的方法中，里面包含对以上四项数据的请求。拿到以上四项数据主要用于： + - **流程实例详情**： 构建 审批页面中的【基本信息】模块；从中获取各个审批操作依赖的参数； + - **审批页面详情**： 构建 审批页面中的【流程操作】模块；审批表单赋值 + - **流程画布详情**： 构建 审批页面中的【流程图示】模块； + - **流程批办过程**： 构建 审批页面中的【流程记录】模块 - 因为审批页面详情中包含变量信息，需要体现到表单中，所以需要根据**审批页面详情**数据给审批页面中的审批表单赋值。具体操作逻辑在 setFormValue 这个方法中。 - 审批表单针对不同场景有不同的状态，具体设置的逻辑在 setFormType 这个方法中。 -- 拿到元数据之后，对一些变量进行赋值。详见下方变量列表。 +- 拿到元数据之后，对一些变量进行赋值。详见下方**涉及到的变量**列表。 #### 涉及到的方法 @@ -55,45 +63,50 @@ - +``` + - + - + - + - + - + - - - -
taskHasEnd + 当前审批任务是否结束，将用于审批操作按钮条件展示判断中，避免出现任务已结束，但进入 pageType=TODO 的链接时还能操作的情况。
赋值逻辑：
+ ```js // 将任务是否结束变量赋值。如果获取到的页面类型即 pageType 是 TODO，且 TaskStatus > 1， 则将 taskHasEnd 置为 true // $page.dataset.state.taskHasEnd 将用于审批操作按钮条件展示判断中 // 避免出现任务已结束，但进入 pageType = TODO 的链接时还能操作的情况 $page.dataset.state.taskHasEnd = processInstance.TaskStatus > 1 && pageType === "TODO"; -```
processInstance流程实例详情。数据来源于 getProcessMetaData 中返回的 processInstance。用于显示流程基本信息，以及利用其中的 InstanceId 作为参数进行流程操作。流程实例详情。数据来源于 getProcessMetaData 中返回的 processInstance。用于显示流程基本信息，以及利用其中的 InstanceId 作为参数进行流程操作
approvalPageDetail审批详情信息变量。数据来源于 getProcessMetaData 中返回的 approvalPageDetail。其中包含流程变量信息，将会用于审批表单的回显。另外还包含一些控制按钮的显隐控制字段，例如是否抄送、是否加签等。审批详情信息变量。数据来源于 getProcessMetaData 中返回的 approvalPageDetail。其中包含流程变量信息，将会用于审批表单的回显。另外还包含一些控制按钮的显隐控制字段，如是否抄送，是否加签等。
elementInfos批办过程数据。数据来源于 `getProcessMetaData 中返回的 elementInfos。用于渲染流程记录。批办过程数据。数据来源于 getProcessMetaData 中返回的 elementInfos。用于渲染流程记录。
processCanvasInfo流程画布数据。数据来源于 getProcessMetaData 中返回的 processCanvasInfo。用于绘制流程图。流程画布数据。数据来源于 getProcessMetaData 中返回的 processCanvasInfo。用于绘制流程图
internalPageType审批页面类型。来源于 initApprovalPage 入参。
TODO：待办
DONE：已办
CREATE：创建
CC：抄送		审批页面类型。来源于 initApprovalPage 入参。
+
    +
  • TODO：待办
    • +
  • DONE：已办
    • +
  • CREATE：创建
    • +
  • CC：抄送
    • +
+
internalFlowTaskId 流程任务 ID。来源于 initApprovalPage 入参。
XXXXXXXXXX
@@ -104,4 +117,4 @@ $page.dataset.state.taskHasEnd = - [查询流程画布详情](https://cloud.tencent.com/document/product/1301/94470#.E6.9F.A5.E8.AF.A2.E6.B5.81.E7.A8.8B.E7.94.BB.E5.B8.83.E8.AF.A6.E6.83.85) - [批办过程查询](https://cloud.tencent.com/document/product/1301/94470#.E6.89.B9.E5.8A.9E.E8.BF.87.E7.A8.8B.E6.9F.A5.E8.AF.A2) -可以看到 initApprovalPage 内执行了一些关于 UI 渲染的变量赋值操作。有了这些变量，就可以进行 UI 的绘制以及后续的流程操作了。 +可以看到 `initApprovalPage` 内执行了一些关于 UI 渲染的变量赋值操作。有了这些变量，就可以进行 UI 的绘制以及后续的流程操作了。 diff --git "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\350\260\203\350\257\225.md" "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\350\260\203\350\257\225.md" index c817f7877598..d2332ce2dcc0 100644 --- "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\350\260\203\350\257\225.md" +++ "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\345\267\245\344\275\234\346\265\201/\345\256\241\346\211\271\350\257\246\346\203\205\346\250\241\346\235\277\344\273\213\347\273\215/\345\256\241\346\211\271\350\257\246\346\203\205\351\241\265\351\235\242\350\260\203\350\257\225.md" @@ -16,13 +16,15 @@ const { flowTaskId = "1156279484831399042", pageType = "TODO" } = query; - 管理员通过数据模型触发的审批任务。 ## 开发调试步骤 -### 创建一个流程 + +1-3步中具体操作可[参考](https://cloud.tencent.com/document/product/1301/83046) +### 1.创建一个流程 创建好需要的流程，配置审批节点，以及变量等内容，单击审批节点配置中的新建，可以得到一个审批页面，然后保存。保存之后回到审批节点页面选择处选择所建立的页面。 -### 发布体验版页面 +### 2.发布体验版页面 在创建好一个页面后，可以现发个体验版用于测试。这样也保证能够创建出正确的数据。 -### 触发流程 +### 3.触发流程 发布好之后，以超级管理员身份登录企业工作台。 #### 超级管理员作为发起人 @@ -33,15 +35,20 @@ const { flowTaskId = "1156279484831399042", pageType = "TODO" } = query; 管理员也可以作为审批人或者抄送人，那么触发流程就可以不必是管理员，但管理员需要是作为审批节点的任务接收人、或者是抄送时抄送给了超级管理员。届时会在**我的待办**、**我已处理**、**抄送我的** 这三类列表中看到相应的数据。单击记录，跳转新页面，会在浏览器地址栏中看到 flowTaskId 的值，以及 pageType 信息。 -### 生命周期中赋值 +### 4.生命周期中赋值 拿到 flowTaskId 的值以及 pageType 信息之后，就可以在页面生命周期的 onPageLoad 方法中进行赋值了。 + +生命周期配置窗口打开路径 +![](https://qcloudimg.tencent-cloud.cn/raw/dda2399f76d2975fdfdc61c32e60e591.jpg) + +设置结构默认值 ```js const { flowTaskId = "1156279484831399042", pageType = "TODO" } = query; ``` 赋值之后保存。然后编辑器内的预览界面就会像运行态那样去运行一个页面了。 ![](https://qcloudimg.tencent-cloud.cn/raw/e44f576a99d37bd067f77111c17e35ff.jpg) -### 开发调试结束 +### 5.开发调试结束 开发调试结束后需要将默认值进行清除，还原回去。 ```js const { flowTaskId, pageType } = query;