优维低代码实践：模板

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

优维低代码实践连载第⑥期

《模板》

▽

Visual Builder 提供模板能力，您可以将单个或多个构件进行排列组合，组装成您想要的模板，并在需要的地方引入；模板通常被认为是一种具有通用性，并带有一定复用能力的构件；使用模板，让我们不用每次编排都需要从头零开始编排，不需要每次都创建一堆之前已经创建过的实例，减少了重复劳动的工作，并且可以提高程序的健壮性。

下面我们将讲解它是如何使用的。

进入到我们的工程项目中，现在我们收到一个需求，我们需要将新建，编辑任务详情从弹窗编辑的形式做成新的独立页面编辑，在新的页面中也要使用到这个表单，并且结构完全一致；这个时候，我们可以选择将其转化为模板，这样的话，其他页面就可直接引用这个模板并快速使用啦，那么我们要怎么做呢？跟着我的步骤往下操作吧～

一、模板创建

1.1 构件转化为子模板

点击确认后会自动跳转至新创建的模板页面，如下：

然后在构件树上点击 tpl-task-form, 看到右侧参数面板，将代理设置改成如下:

1.2 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.success
methods:
  setInitValue:
    ref: form
    refMethod: setInitValue
  validate:
    ref: form
    refMethod: validate

1.3 DATA 数据新增

# 模板的属性，如同构件的属性一样，需要通过外层传入，模板才能正确使用
# 与页面不同，页面的变量存储在 CTX 中，而模板的变量存储在 STATE 中，
# 获取方式不一样，这里
数据名称: isEdit
类型: Value
Value: false


# ======= 分割线 ========
数据名称: staticValues
类型: Value

1.4 Form 编排修改

属性面板-属性:
  # 删除ID，在模板内尽量不要使用ID
  # 因为同个页面，可能使用到多个相同目标，这将导致页面中存在多个相同ID的元素
  # 导致匹配不精准
  layout: horizontal
事件面板-事件:
  # 清空
设置面板:
  # 重点: Ref 为模板内构件的特殊字段, 模板内代理的唯一标识
  # 可以理解为模板内的ID
  Ref: form

在一切修改完之后，记得点击 build & push 按钮哟～

二、编排修改

2.1 新增路由

基于UI8.0 空白页创建两个路由页面，分别是:

别名: 新增任务
path: APP.homepage/task/add

别名: 新增任务
path: APP.homepage/task/:instanceId/edit

2.2 新增任务页面编排修改

在 general-card 构件下新增 tpl-task-form（tips: 刚刚新增的模板） 构件，属性如下:

属性面板-属性:
  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

在 general-card 下面新增 forms.general-form 构件，在其底下新增构件 forms.general-buttons，属性如下:

属性面板-属性:
  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` %>'

2.3 编辑任务页面编排修改

在 general-card 构件下新增 tpl-task-form（tips: 刚刚新增的模板） 构件，属性如下:

属性面板-属性:
  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

新增构件 forms.general-form 构件，在其底下新增构件 forms.general-buttons，具体属性同 2.2 一致。

回到任务列表页面，在 table 下定位到编辑按钮，属性修改如下:

事件面板-事件:
  general.button.click:
    # 点击事件，跳转到编辑页面
    - action: history.push
      args:
        - <% `${APP.homepage}/task/${DATA.rowData.instanceId}/edit` %>

三、结语

由于我们在本章节中学习并使用了模板的能力，因此我们在新建页面时，可以快速使用模板进行页面的编排，这大大加快了我们的页面编排速度。

本章节中讲解了构件如何转化成子模板，以及相应的编排修改，另外我们也可以自己不通过构件转化，可以直接新建模版，添加构件，这里就不做展开了；可以自己查看相应文档进行学习，那么模板章节就到此结束啦，下节课我们讲解下菜单的配置使用以及面板屑的配置。