导语

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

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

《页面编排优化与数据联调》

▽

下面我们以一个空模版为基础创建 testPage 页面，并提供简单的Visual Builder编排界面操作交互演示视频，方便大家了解编排是如何使用的。

1.1 属性修改

1.2 新增构件（通过组件库拖拽至画布&通过组件库拖拽至构件树&纯构件树新增）

1.3 构件树拖拽排序

1.4 删除构件（将鼠标移入构件上，点击右键选择删除）

二、编排修改

在熟悉完上述几种场景的操作后，回到我们创建的第一个路由（页面），我对之前创建的的编排做了一些改造，将它的功能进行了简单地完善，将它变成了一个任务列表展示页面，并且支持查询任务模型数据，以及新增任务实例数据，还支持了搜索能力，那么我是怎么做到的呢，下着跟着我的操作学习一下吧！

2.1 DATA面板添加&修改数据

在左侧面板下放DATA面板，展开并找到 hostList，点击打开弹窗，将其修改为以下数据结构

数据名称: taskList类型: ProviderProvider(接口): providers-of-cmdb.instance-api-post-search-v3Args(参数):  - TASK_FOR_VB_LESSON  - fields:      - name      - state      - assignee      - reporter      - description    # 数字格式化语法，QUERY表达式是从URL中读取的参数    # 譬如：https://admin.easyops.local/next/first-app?page=1&pageSize=10    # 则 QUERY.page 等于 1, QUERY.pageSize=10    # 下方表达式含义如下:    # page参数取自URL上的参数，并且获取完会转化为数字类型格式，如果URL参数中没有page    # 则默认等于1，pageSize同理    page: '${QUERY.page=1|number}'    pageSize: '${QUERY.pageSize=20|number}'Extra provider settings(额外的接口配置):  lazy: trueExtra basic settings(额外的基础配置):  track: true

如下图：

2.2 查询模型数据并展示

在构件树上定位到table构件，或者在画布上选择table构件，右侧参数面板将联动显示，在右侧参数面板进行比编辑，填入以下数据后，点击保存。

属性面板-属性:  columns:    - dataIndex: name      key: name      title: 任务名称    - dataIndex: state      key: state      title: 状态    - dataIndex: assignee      key: assignee      title: 负责人  dataSource: '<% "track context", CTX.taskList %>'  showCard: false事件面板-生命周期:  onPageLoad:    # 生命周期，当页面加载并且构件都渲染完时触发    # context.refresh时刷新某个DATA的数据(必须设置lazy:true)    # 这里我们刷新了 taskList, 实际上是想等页面渲染完再执行请求    # 这样做的好处是可以减少因请求导致的页面白屏时间过长    - action: context.refresh      args:        - taskList

在点击保存完之后，我们即完成了查询 TASK_FOR_VB_LESSON 模型下的实例数据，并进行展示这一动作，但是由于该模型下还没有实例数据，因此table目前的展示仍旧是空的，需要我们新增完数据后table才会有相应的数据展示

2.3 新增实例弹窗构件&新增数据接口对接

在构件树上新增构件，请在创建时注意他们的嵌套关系

- 任务列表  - tpl-ui8-layout    ...  # 以下为新增部分  - basic-bricks.general-modal    - content(挂载点名称)      - forms.general-form        - item(挂载点名称)          - forms.general-input          - forms.general-text-area          - forms.cmdb-instance-select          - forms.cmdb-instance-select

对应的构件属性分别如下：

属性面板-属性:  # id为构件的唯一标识，同个页面下不允许有重复id存在  # 否则会在页面执行期间可能会得到非预期结果  id: modalAddTask  modalTitle: 添加任务  closeWhenOk: false  maskClosable: false事件面板-事件:  # 事件由构件暴露，在特定情况下事件会触发，用户可以按需定义事件的回调动作  # 构件提供的事件可在构件文档中进行查看  basic-bricks.general-modal.confirm:    # 说明：当弹窗点击确认时触发事件    # 选择构件ID为 AddTaskForm的元素，执行其内部方法：validate    - target: '#AddTaskForm'      method: validate  modal.close:    # 说明： 当弹窗关闭时    # 选择构件ID为 AddTaskForm的元素，执行其内部方法 setInitValue, 参数为空对象    # 表示弹窗关闭后就清楚表达值，防止弹窗再打开时出现脏数据    - target: '#AddTaskForm'      method: setInitValue      args:         - name: ""          description: ""          assignee: ""          reporter: ""设置面板-放置于: porta
属性面板-属性:  id: AddTaskForm  layout: horizontal事件面板-事件:  validate.error:    # 表单校验失败时，弹出消息弹窗，并提示"表单填写失败"    - action: message.error      args:        - 表单填写失败  validate.success:    # 表单校验成功时，获取id为modalAddTask的构件，使其入参修改    - target: '#modalAddTask'      properties:          # 弹窗确认按钮禁用，确保用户不会重复点击，创建相同实例        okDisabled: true    # 新增实例接口请求    - useProvider: providers-of-cmdb.instance-api-create-instance      args:        - TASK_FOR_VB_LESSON        - |-          <%            {              # EVENT.detail为事件透传的信息，这里是表单校验成功的数据              # 结构等于表单定义的值:               # { name: xxx, description: xxx, assignee: xxx, reporter: xxx }              ...EVENT.detail,              # 新增状态默认值：待研发              state: "待研发",            }          %>      # 回调事件      callback:        # 接口执行成功调用方法        success:          - action: message.success            args:              - 任务创建成功          - target: '#modalAddTask'            properties:              okDisabled: false          # 由于我们新增了数据，此时需要更新 table 的数据          # 让页面展示最新状态          - action: context.refresh            args:              - taskList          - target: '#modalAddTask'            method: close        # 接口执行失败调用方法        error:          # 触发错误提示弹窗          - action: handleHttpError
- forms.general-input  属性面板-属性:    name: name    label: 任务名称    placeholder: 请输入任务名称    required: true# ============ 分割线 ============== - forms.general-text-area  属性面板-属性:    name: description    label: 任务描述    autoSize:      maxRows: 8      minRows: 3    max: 10    message:      max: 最长长度限制，10      required: 请输入内容    placeholder: 请填写任务描述    required: true# ============ 分割线 ============== - forms.cmdb-instance-select  属性面板-属性:    name: assignee    label: 负责人    objectId: USER    required: true    placeholder: 负责人    allowClear: true    fields:      label:        - name      value: name    instanceQuery:      state: valid    labelTemplate: '#{name}'# ============ 分割线 ============== - forms.cmdb-instance-select  属性面板-属性:    name: reporter    label: 汇报人    objectId: USER    required: true    placeholder: 汇报人    allowClear: true    fields:      label:        - name      value: name    instanceQuery:      state: valid    labelTemplate: '#{name}'

至此，您就完成了新增任务的能力啦！点击工具栏上的 "检查" 按钮将其关闭，体验一下具体的页面交互吧～

三、结语

通过本节实践，您学习了我们最常用的几个API-CMDB的增删改查操作，构件的操作，查询接口的使用，以及新增接口的使用，这基本涵盖了我们日常页面编排的基本情况，其他操作基本上都是基于这些步骤之上进行拓展；下节课将基于这节课的版本上，进行更多高级的操作！


- end -