导语
优维低代码实践连载第⑥期
《模板》
▽
Visual Builder 提供模板能力，您可以将单个或多个构件进行排列组合，组装成您想要的模板，并在需要的地方引入；模板通常被认为是一种具有通用性，并带有一定复用能力的构件；使用模板，让我们不用每次编排都需要从头零开始编排，不需要每次都创建一堆之前已经创建过的实例，减少了重复劳动的工作，并且可以提高程序的健壮性。 下面我们将讲解它是如何使用的。 进入到我们的工程项目中，现在我们收到一个需求，我们需要将新建，编辑任务详情从弹窗编辑的形式做成新的独立页面编辑，在新的页面中也要使用到这个表单，并且结构完全一致；这个时候，我们可以选择将其转化为模板，这样的话，其他页面就可直接引用这个模板并快速使用啦，那么我们要怎么做呢？跟着我的步骤往下操作吧～ 一、模板创建 1.1 构件转化为子模板 点击确认后会自动跳转至新创建的模板页面，如下： 1.2 tpl-task-form 模板代理设置修改 1.3 DATA 数据新增 1.4 Form 编排修改 在一切修改完之后，记得点击 build & push 按钮哟～ 二、编排修改 2.1 新增路由 基于UI8.0 空白页创建两个路由页面，分别是: 2.2 新增任务页面编排修改 在 general-card 构件下新增 tpl-task-form（tips: 刚刚新增的模板） 构件，属性如下: 在 general-card 下面新增 forms.general-form 构件，在其底下新增构件 forms.general-buttons，属性如下: 回到任务列表，找到添加按钮, 修改其属性: 2.3 编辑任务页面编排修改 在 general-card 构件下新增 tpl-task-form（tips: 刚刚新增的模板） 构件，属性如下: 新增构件 forms.general-form 构件，在其底下新增构件 forms.general-buttons，具体属性同 2.2 一致。 回到任务列表页面，在 table 下定位到编辑按钮，属性修改如下: 三、结语 由于我们在本章节中学习并使用了模板的能力，因此我们在新建页面时，可以快速使用模板进行页面的编排，这大大加快了我们的页面编排速度。 本章节中讲解了构件如何转化成子模板，以及相应的编排修改，另外我们也可以自己不通过构件转化，可以直接新建模版，添加构件，这里就不做展开了；可以自己查看相应文档进行学习，那么模板章节就到此结束啦，下节课我们讲解下菜单的配置使用以及面板屑的配置。
然后在构件树上点击 tpl-task-form, 看到右侧参数面板，将代理设置改成如下:# 模板代理，可代理属性，事件，方法，插槽# 模板等同于一个黑盒，对外只暴露特定接口字段# 需要通过 ref 指向构件，并且构件需要配置相应的 ref，才能够正确代理出去# 下面的含义为， 代理ref等于form的构件,# 代理其事情: validate.error, validate.success# 代理其方法: setInitValue, validate# 这个，我们就可以在模板对这个构件进行监听，也可以在外层执行它里面构件的方法# 具体使用在下面教程会讲述events: validate.error: ref: form refEvent: validate.error validate.success: ref: form refEvent: validate.successmethods: setInitValue: ref: form refMethod: setInitValue validate: ref: form refMethod: validate# 模板的属性，如同构件的属性一样，需要通过外层传入，模板才能正确使用# 与页面不同，页面的变量存储在 CTX 中，而模板的变量存储在 STATE 中，# 获取方式不一样，这里数据名称: isEdit类型: ValueValue: false
# ======= 分割线 ========数据名称: staticValues类型: Value属性面板-属性: # 删除ID，在模板内尽量不要使用ID # 因为同个页面，可能使用到多个相同目标，这将导致页面中存在多个相同ID的元素 # 导致匹配不精准 layout: horizontal事件面板-事件: # 清空设置面板: # 重点: Ref 为模板内构件的特殊字段, 模板内代理的唯一标识 # 可以理解为模板内的ID Ref: form别名: 新增任务path: APP.homepage/task/add别名: 新增任务path: APP.homepage/task/:instanceId/edit属性面板-属性: id: form事件面板-事件: validate.success: - useProvider: providers-of-cmdb.instance-api-create-instance args: - TASK_FOR_VB_LESSON - |- <% { ...EVENT.detail, state: "待研发", } %> callback: success: - action: message.success args: - 任务创建成功 # 页面回退 - action: history.goBack error: - action: handleHttpError属性面板-属性: cancelText: 取消 showCancelButton: true submitText: 提交事件面板-事件: cancel.button.click: # 页面回退 action: history.goBack submit.button.click: # 点击确定按钮，调用表单校验方法 - target: '#form' method: validate事件面板-事件: general.button.click: # 点击添加任务按钮，跳转路由，到添加任务页面 - action: history.push args: - '<% `${APP.homepage}/task/add` %>'属性面板-属性: id: form isEdit: true事件面板: 事件: validate.success: - useProvider: providers-of-cmdb.instance-api-update-instance args: - TASK_FOR_VB_LESSON - <% PATH.instanceId %> - |- <% _.pick(EVENT.detail, [ "name", "state", "assignee", "reporter", "time", "description", ]) %> callback: success: - action: message.success args: - 任务修改成功 - action: history.goBack error: - action: handleHttpError 生命周期: onPageLoad: # 在页面加载后，请求获取实例详情的接口 - useProvider: providers-of-cmdb.instance-api-get-detail args: - TASK_FOR_VB_LESSON - <% PATH.instanceId %> callback: success: # 数据回来后，设置表单的初始值 - target: '#form' method: setInitValue args: - <% EVENT.detail %> error: - action: handleHttpError事件面板-事件: general.button.click: # 点击事件，跳转到编辑页面 - action: history.push args: - <% `${APP.homepage}/task/${DATA.rowData.instanceId}/edit` %>
