显示自定义数据来源的下拉组件

1.场景介绍

在机构表单中父机构ID为下拉选择组件（数据来源为自定义），新增机构，关联父机构ID，新增完成后，下拉选择的父机构ID的值可显示在机构视图中。

#2.效果展示

效果展示如下：

#3.实现思路

1.表单中父机构ID下拉选择组件的数据来源选为自定义，使用变量v_formList给父机构ID进行赋值，添加自定义方法getFormList获取其值，在表单加载后事件中调用getFormList方法。

2.在视图中使用变量v_viewList存储调用接口获取的父机构ID的值，添加自定义方法getViewList，在视图加载后事件，调用getViewList方法将获取到的数据显示在视图中。

注：本场景中getFormList和getViewList方法以通过调用查询“机构”实体的接口获取父机构ID的数据

#4.操作步骤

#4.1 创建数据实体

执行数据库脚本，以MySQL为例，示例脚本如下：

    drop table if exists work_organ;
    create table work_organ (
        ID varchar(64) not null,
        CODE varchar(64) comment '机构编码',
        NAME varchar(64) comment '机构名称',
        TYPES varchar(32) comment '机构类型',
        PARENT_ID varchar(64) comment '父机构ID',
        primary key (ID)
    );

在构件包内，新建机构数据实体

#4.2 生成表单和视图

右键点击“机构”实体，生成机构表单和视图。

#4.3 完善表单

#4.3.1 添加变量v_formList

在机构表单-表单设置-高级设置-添加内部变量formList

在机构表单中，父机构ID：组件类型改为下拉选择，数据来源选择自定义，并绑定变量选择v_formList,使用v_formList给父机构ID进行赋值：

#4.3.2 添加自定义方法getFormList

在机构表单-表单设置-高级设置-添加方法，方法名：getFormList，通过接口查询给父机构ID下拉选择赋值：

示例代码如下：

//通过接口查询机构实体获取数据
let url = "http://127.0.0.1:28079/api/lowcode/models/actions/query-with-page?entityName=viewDisplay.entity.WorkOrgan&pageIndex=0&pageSize=10&cascadeDeep=0"
//结果处理：发送post请求获取父机构ID的数据赋值给v_formList
this.Ajax.post(url, {}, false).then(data => {
  this.v_formList = data.data.map(item => ({
    code: item.id,  
    name: item.name  
  }));   
  // 设置下拉列表：调用方法，将v_formList赋值给下拉选择
  this.Api.getElement('parentId').setOptions(this.v_formList); 
})

注：示例中url取自预览机构视图时，不同环境下ip和端口会有差异，请根据实际情况进行修改。

this.Ajax.post具体用法请参考：前端API：POST请求

#4.3.3 添加表单加载后事件调用方法

在机构表单-表单设置-高级设置-添加事件：表单加载后

#4.4 完善视图

#4.4.1 添加变量v_viewList

在机构默认视图-视图设置-高级设置-添加内部变量viewList，用于存储调用接口获取的父机构ID的值：

#4.4.2 添加自定义方法getViewList

在机构默认视图-视图设置-高级设置-添加方法，方法名：getViewList，通过接口查询“机构”实体获取父机构ID的值：

示例代码如下：

let url = "http://127.0.0.1:28079/api/lowcode/models/actions/query-with-page?entityName=viewDisplay.entity.WorkOrgan&pageIndex=0&pageSize=10&cascadeDeep=0"

return this.Ajax.post(url, {}, false)

注：getViewList方法中url获取方法与getFormList中的url相同

#4.4.3 添加视图加载后事件调用方法

在机构默认视图-视图设置-高级设置-添加事件：视图加载后

// 调用异步 getViewList 方法获取数据
let params =  await this.getViewList();
//将获取的数据赋值给v_viewList
this.v_viewList = params.data.map(item => {
    return {
        code: item.id,
        name: item.name
    }
  })
  //将v_viewList添加到 data 数组的每个对象中，this.data代表视图列表数据
for (let i = 0; i < this.data.length; i++) {
  //使用this.$set方法，向 this.data[i] 对象添加一个v_formList 的新属性，其值为this.v_viewList
  this.$set( this.data[i],'v_formList',this.v_viewList)
}

更多请参见EOS Low-Code Platform 8