1 业务背景

某集团下要进行供应商准入审查，设计为一个流程，主要功能是把各部门上报上来的那一批供应商各审批环节逐级筛选，最后剩下的一小批供应商，由领导完成最终审核，这一批供应商入围，流程结束。

2 本次要介绍的功能点

如何使用平台在某个界面中进行从待选入名单(列表)动态加入已选入名单(列表)，并且能反向操作，即从已选入名单移出并回到待选名单

3 制作详细步骤

3.1 制作前的准备内容

通过平台制作一个供应商信息的小模块、遵从平台的表单、方案、列表的固定制作流程，此处不再赘述。

3.2 该表单设计主要考虑的几大元素

1. 之前提到制作前的准备内容列表(待选名单列表)，需要以表单制作中列表控件引入
2. 需要一个用来放选入名单的列表，本例中使用的是一个子表控件，此处也可以用列表控件，读者可以自己试试，感受下平台的灵活性。
3. 一个自定义按钮控件，用来触发动态的把待选列表中选中的记录移入选入列表
4. 一个自定义按钮控件，用来触发动态的把已选列表中记录移出，并移入待选列表
5. 页面的html代码植入
6. 页面的js方法植入

   3.3 具体步骤

   3.3.1 第一步

   
   首先把待选列表放入的表格进行合并，合并后变成一个单元格，合并单元格功能在顶部箭头标注位置
   其次在左侧表单控件，选中数据列表控件，放入该单元格

   3.3.2 第二步

   
   放入后，选中该控件，则右侧如箭头所示，可进行具体列表的选入设置界面，选择准备工作制作的待选列表，则显示如下
   
   选中的列表列字段配置内容也带过此表单中了

   3.3.3 第三步

   接下来做选入列表
   
   选入后效果
   
   选中控件则右侧展示控件配置内容。
   点击图中底部小箭头来进行表格列配置，配置原则为从上方待选列表列明中选一些重要信息进行配置，配置操作如下图
   
   点击添加列，在表单底部新增列，勾选某行的勾选框，再点删除则删除此行，勾选后也可针对该列进行上下移动，此处控制的是列展示的顺序。每一行控件处可选择输入展示控件，也可控制该列宽度、设置必填，点底部确认保存，效果如下
   
   由于此处逻辑是不需要这四个按钮，则可以在配置中对按钮进行移除，操作如下
   
   全部勾选后，点删除，再点底部确定保存。

   3.3.4 第四步

   接下来进行选入、移出按钮配置
   
   表单控件的扩展控件中选择自定义按钮，分别放入箭头所示位置，制作后效果如下
   
   选中某个自定义按钮，右侧能对其进行相关配置，字段备注为按钮上显示的文字，方法名输入框内输入的内容为点击后触发的js方法名，处理完后，点击预览，则整体界面展示效果就能看见，如下图
   

   3.3.5 第五步

   页面框架搭出来之后，接下来是html、js脚本的植入。
   关闭预览，回到表单制作界面
   
   点击上图左上角html，则页面转成html文本的展示，找到待选列表的datalist元素，如下图
   
   加入ref属性，方便后续的js代码调用，本业务加入的为：ref=”listContract”，加完后效果如下：
   
   设置后待选列表已经进行了对象声明，接下来是选入列表，由于选入列表在配置时已经进行了标识，就不需要再修改html代码了，如果没印象请看下图
   
   这个子表标识就是后续js脚本中该列表数据的识别名称。
   页面的表格元素都已经能精确找到了，接下来是触发两个列表之间数据变化的js方法以及触发这些方法的按钮的配置及编写，如下图
   
   第一步，点击左侧html按钮，切换回可视化界面
   第二步，记住两个自定义按钮声明的方法名（xuanru、test）
   第三步，点击顶部第二个‘js脚本’按钮，则跳转到页面js植入界面，如下图
   
   按注释的方法书写格式，在此处实现声明的方法，具体请见下图
   
   在CustFuntions数组内，以两个按钮的方法名去按格式写好方法的实现逻辑，内容不再赘述，代码如下：

   var custFuntions=[
   {name:"xuanru",action:function(){
   var listTable=this.$refs.listContract.getTable();
   var rows = listTable.getSelectedRows();
   var length=this.data.sub__selectedbox.length;
   var ary=[]
   for(var i=0;i<rows.length;i++){
   var row=rows[i];
   var _rowobj = JSON.parse( JSON.stringify(row));
   _rowobj.fbsmc=row.F_LWFBSMC;
   _rowobj.sbbm=row.CREATE_DEP_ID__render;
   _rowobj.index_=++length;
   _rowobj.selected=false;
   _rowobj.szsf=row.F_SSHZXS_CITY;
   _rowobj.szds=row.F_SSHZXS_PROVINCE;
   _rowobj.fbsid=row.ID_;
   delete _rowobj.ID_;
   ary.push(_rowobj);
   }
   this.data.sub__selectedbox.push(...ary);
   listTable.removeSelected();
   }},
   {name:"test",action:function(){
   var listTable=this.$refs.listContract.getTable();
   var jsonlist = this.data.sub__selectedbox;
   var len = listTable.dataAction.length;
   var cloneJsonList=JSON.parse(JSON.stringify(jsonlist));
   for(var i=jsonlist.length-1;i>=0;i--){
   var o=jsonlist[i];
   if(o.selected){
   jsonlist.splice(i,1);
   }
   }
   for(var i = 0;i<cloneJsonList.length;i++){
   if(cloneJsonList[i].selected){
   listTable.addRow(cloneJsonList[i],++len);
   }
   }}}];

   可通过表单设计界面的预览进行调试。
   最后保存页面，发布此表单方案，在流程定义中进行流程绑定。由于此处只是为了说明一个表单中的两个列表 (datalist)实现数据的移动，其他的就不再往下展开说明了。
   以上实例介绍完毕。