Appearance
实践示例
增删改查业务实践
前提：表格组件配置表格加载事件
表格加载可理解为表格刷新，表格加载实现了从数据库中查询数据并直观显示在表格上的功能。 1.查询多条 选择动作 “操作数据”分类 -> “查询多条”动作 
设置参数
选择要查询的数据模型，“查询多条”动作将从数据采集信息这个数据库中查询数据。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “查询多条”动作的入参类型是组件。
“查询多条”动作的入参对象是查询容器。
“查询多条”动作的入参值类型一般选择模型。
“查询多条”动作在选择“模型”为入参值类型后，入参值一般都显示为“表单数据”。
2.组件赋值选择动作 “操作组件”分类 -> “组件赋值”动作 
设置参数
选择需要赋值的组件，“组件赋值”动作将为该组件赋值。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “组件赋值”动作的数据来源于“查询多条”动作，因此入参类型是动作出参。
“组件赋值”动作的入参对象是“查询多条”动作查询出来的数据，即操作数据S1。
“组件赋值”动作为表格赋值，用于赋值的数据有多条，入参值类型选择模型。
“组件赋值”动作的入参值是“查询多条”动作查询的“数据采集信息”数据库，入参值选择“数据采集信息”。
查
“查”就是根据筛选条件进行表格刷新。 1.组件加载选择动作 “操作组件”分类 -> “组件加载”动作 
设置参数 组件加载就是调用被选择组件的“加载”事件编排，这里我们选择前面已配置表格加载事件编排的表格组件。当查询框内无索引词时，前面的“查询多条”动作可抓取数据库中的所有数据，“组件赋值”动作将数据库中的所有数据赋值给高级表格，我们能看到在高级表格中直观看到数据库中的所有数据；当查询框内有索引词时，“查询多条”动作可筛选数据库中满足条件的数据，“组件赋值”动作将数据库中的所有数据赋值给高级表格，我们能看到在高级表格中直观看到符合条件的数据。 
增
“增”实现在数据库中新增一条数据并在表格中直观显示的功能，一般对弹窗的按钮或者页面的表单进行“增”的事件编排。 
1.新增数据选择动作 “操作数据”分类 -> “新增数据”动作 
设置参数 选择新增的数据模型，“新增数据”动作将新增一条数据至数据采集信息这个数据库中。 
设置新增数据参数（一般从弹窗或者下沉页面的表单中获取）。设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “新增数据”动作的入参类型是组件。 
“新增数据”动作的入参对象通常是表格组件。 
“新增数据”动作的入参值类型一般选择模型。 
“新增数据”动作在选择“模型”为入参值类型后，入参值一般都显示为“表单数据”。 
2.组件加载 在数据库中新增数据后，通过“组件加载”刷新表格，将新增的数据在表格中展示出来。 选择动作 “操作组件”分类 -> “组件加载”动作 
设置参数 刷新表格 
3.关闭载体 关闭弹窗或者当前页面跳转 关闭弹窗选择动作 “操作组件”分类 -> “关闭弹窗”动作 
设置参数 选择需要关闭的弹窗，“关闭弹窗”动作将关闭该弹窗。 
当前页面跳转选择动作 “操作页面”分类 -> “当前页面跳转”动作 
设置参数 前往页面分为内部页面与外部页面，选择需前往的内部页面或填入需前往的外部页面链接，即可前往对应页面。 
删
“删”实现在数据库中删除一条数据并在表格中直观显示的功能，一般提示弹窗的确认按钮进行“删”的事件编排。 
1.删除数据 选择动作 “操作数据”分类 -> “删除数据”动作 
设置参数
选择删除的数据模型，“删除数据”动作将从数据采集信息数据库中删除一条数据。
设置删除数据参数（（一般从弹窗或者下沉页面的表单中获取；如果从下沉页面中获取参数，必须新增参数：修改数据的主键））。设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “删除数据”动作的入参类型是组件。
“删除数据”动作的入参对象通常是表格组件。
“删除数据”动作的入参值类型一般选择字段。
“删除数据”动作在选择“字段”为入参值类型后，在入参值中选择第一个“主键”字段。主键是数据库表中唯一标识每条记录的特殊字段，就像身份证号，确保每条数据都能被准确区分。
2.组件加载 在数据库中删除数据后，通过“组件加载”刷新表格，将删除的数据在表格中展示出来。 选择动作 “操作组件”分类 -> “组件加载”动作 
设置参数 刷新表格 
3.关闭载体 关闭弹窗或者当前页面跳转 关闭弹窗 选择动作 “操作组件”分类 -> “关闭弹窗”动作 
设置参数 选择需要关闭的弹窗，“关闭弹窗”动作将关闭该弹窗。 
当前页面跳转 选择动作 “操作页面”分类 -> “当前页面跳转”动作 
设置参数 前往页面分为内部页面与外部页面，选择需前往的内部页面或填入需前往的外部页面链接，即可前往对应页面。 
改
“改”实现在数据库中修改数据并在表格中直观显示的功能，一般在弹窗或者下沉页面的表单进行“改”的事件编排。“改”分为两部分，一部分是在修改弹窗中回填数据；另外一部分是在数据库中修改数据。 
数据回填 点击表格的“修改”按钮，可打开修改数据的弹窗，并将选中的数据在弹窗的表单中回填。 
1.打开弹窗 选择动作 “操作数据”分类 -> “打开弹窗”动作 
设置参数
- 选择需要打开的弹窗，“打开弹窗”动作将打开该弹窗。
2.查询单条 选择动作 “操作数据”分类 -> “查询单条”动作 
设置参数
选择要查询的数据模型，“查询单条”动作将从数据采集信息这个数据库中查询数据。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “查询单条”动作的入参类型是组件。
“查询单条”动作的入参对象是高级表格。当我们需要修改表格中的某一条数据时，系统会根据表格中该条数据的主键在数据库中查找该数据，因此，“查询单条”动作直接作用于高级表格组件，所以入参对象选择高级表格。
“查询单条”动作的入参值类型一般选择字段。“查询单条”动作的入参值一般为主键字段，主键是数据库表中唯一标识每条记录的特殊字段，就像身份证号，确保每条数据都能被准确区分。
“查询单条”动作的入参值选择主键字段，根据主键在数据库中查询需要修改的数据。
3.组件赋值 这里有多个表单组件需要赋值，因此需要使用多个组件赋值动作。 选择动作 “操作组件”分类 -> “组件赋值”动作 
设置参数
选择需要赋值的组件，“组件赋值”动作将为该组件赋值。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “组件赋值”动作的数据来源于“查询单条”动作，因此入参类型是动作出参。
“组件赋值”动作的入参对象是“查询单条”动作查询出来的数据，即操作数据S1。
“组件赋值”动作为表单赋值，入参值类型选择模型。
“组件赋值”动作的入参值是“查询多单条”动作查询的“数据采集信息”数据库，入参值选择“数据采集信息”。
流程搭建实践
流程表单挂接
流程表格配置 
前提：表格组件配置表格加载事件
表格加载可理解为表格刷新，表格加载实现了从数据库中查询数据并直观显示在表格上的功能。不同于普通的增删改查事件，处于流程中的增删改查事件从所处流程节点的表单数据中查询数据而不是从数据模型中查询数据。 1.查询多条 选择动作 “操作流程”分类 -> “查询多条”动作 
设置参数
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “查询多条”动作的入参类型是组件。
“查询多条”动作的入参对象是查询容器。
“查询多条”动作的入参值类型一般选择模型。
“查询多条”动作在选择“模型”为入参值类型后，入参值一般都显示为“表单数据”。
2.组件赋值 选择动作 “操作组件”分类 -> “组件赋值”动作 
设置参数
选择需要赋值的组件，“组件赋值”动作将为该组件赋值。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “组件赋值”动作的数据来源于“查询多条”动作，因此入参类型是动作出参。
“组件赋值”动作的入参对象是“查询多条”动作查询出来的数据，即操作数据S1。
“组件赋值”动作为表格赋值，用于赋值的数据有多条，入参值类型选择模型。
“组件赋值”动作的入参值是“查询多条”动作查询的“数据采集信息”数据库，入参值选择“数据采集信息”。
查询流程列表
“查询流程列表”就是根据筛选条件进行表格刷新，也是通过组件加载动作来实现的。 1.组件加载 选择动作 “操作组件”分类 -> “组件加载”动作 
设置参数 组件加载就是调用被选择组件的“加载”事件编排，这里我们选择前面已配置表格加载事件编排的表格组件。当查询框内无索引词时，前面的“查询多条”动作可抓取数据库中的所有数据，“组件赋值”动作将数据库中的所有数据赋值给高级表格，我们能看到在高级表格中直观看到数据库中的所有数据；当查询框内有索引词时，“查询多条”动作可筛选数据库中满足条件的数据，“组件赋值”动作将数据库中的所有数据赋值给高级表格，我们能在高级表格中直观看到符合条件的数据。 
查询流程详情
“查询流程详情”就是查看处于流程表单数据的某条数据的全部信息，可跳转转至下沉页面进行查看。下沉页面需要定义页面参数“流程ID”和“当前节点ID”，用来接收页面跳转时从表格传递过来的值。跳转至下沉页面查看详情涉及到“定义变量”、“查询单条”和“组件赋值”三个动作。 
1.定义变量 选择动作 “操作变量”分类 -> “定义变量”动作 
设置参数 定义变量有方便复用、简化逻辑和动态处理的优点，因此，涉及流程的事件编排中通常都有它的存在。方便复用是指变量可以在流程的多个节点被复用；简化逻辑是指定义的变量可以用于存储复杂的数据，后续需要引用这些复杂数据时，只需要引用被定义的变量即可；动态处理是指变量的值可以动态变化，具有强灵活性。 设置变量名，为需要定义的变量命名，一般根据变量用途来命名，比如用于标识流程特定节点的变量，可命名为“nodeid”，表明该变量与节点相关。 
前面我们已经在下沉页面上定义了“当前节点ID”参数，用于接收页面跳转时从表格传递过来的值，因此，这里的变量来源为“页面参数”。 
变量值选择“当前节点ID” 
2.查询单条 操作流程中的“查询单条”动作不同于普通的“查询单条”动作，最大的不同点是操作流程中的“查询单条”动作的数据来源是流程数据。一个系统中可能有多个流程，就像我们去商场，有购物、吃饭和玩乐等不同的流程；而一个流程中会包含多个节点，就像在商场吃饭，我们要经历排队、点餐以及结账等不同步骤，这些步骤就对应流程中的节点。因此，流程数据会很复杂，我们就使用页面参数“流程ID”和“当前节点ID”分别为流程和节点贴上标签，帮助我们快速定位到具体流程的具体节点。
选择动作 “操作流程”分类 -> “查询单条”动作 
设置参数
设置入参类型，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；操作流程中的“查询单条”动作的入参类型通常是变量。
设置入参值，入参值通常为页面参数中的flowid（标识一个完整的操作流程）或nodeid（标识流程中的具体步骤或页面），可以通过商场分区的例子来理解，flowid是为商场中的不同区域贴上标签，比如服装区、餐饮区等；nodeid是为某个区域的具体店铺贴上标签，例如为服装区的男装店、女装店和童装店分别贴上标签。
设置目标对象，目标对象就是“查询单条”动作进行查询的数据来源，操作流程中的“查询单条”的来源都是流程数据，因此目标对象选择流程数据。
设置目标值类型，操作流程的“查询单条”动作只需要查询流程数据中的“流程ID”或“当前节点ID”的数据，两者都属于流程数据中的字段，因此这里的目标值类型选择字段。
设置目标值，根据入参值选择对应的目标值。
3.组件赋值 选择动作 “操作组件”分类 -> “组件赋值”动作 
设置参数
选择需要赋值的表单容器，“组件赋值”动作将为该组件赋值。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “组件赋值”动作的数据来源于“查询单条”动作，因此入参类型是动作出参。
“组件赋值”动作的入参对象是“查询单条”动作查询出来的数据，即操作数据S2。
“组件赋值”动作为表单赋值，用于赋值的数据有多条，入参值类型选择模型。
“组件赋值”动作的入参值是“查询单条”动作查询的流程数据库，入参值选择“outParam”。
查询流程审批记录
如果我们想知道流程审批过程中某个节点的审批人、审批意见、开始时间和结束时间，可以在下沉页面配置流程审批记录的事件编排来实现。下沉页面需要定义页面参数“流程ID”和“当前节点ID”，用来接收页面跳转时从表格传递过来的值。一般而言，配置流程审批记录的事件编排需要“定义变量”、“审批记录”和“组件赋值”三个动作。 
1.定义变量 选择动作 “操作变量”分类 -> “定义变量”动作 
设置参数 定义变量有方便复用、简化逻辑和动态处理的优点，因此，涉及流程的事件编排中通常都有它的存在。方便复用是指变量可以在流程的多个节点被复用；简化逻辑是指定义的变量可以用于存储复杂的数据，后续需要引用这些复杂数据时，只需要引用被定义的变量即可；动态处理是指变量的值可以动态变化，具有强灵活性。 设置变量名，为需要定义的变量命名，一般根据变量用途来命名，比如用于标识流程特定节点的变量，可命名为“nodeid”，表明该变量与节点相关。 
前面我们已经在下沉页面上定义了“当前节点ID”参数，用于接收页面跳转时从表格传递过来的值，因此，这里的变量来源为“页面参数”。 
变量值选择“当前节点ID” 
2.查询审批记录 操作流程中的“查询审批记录”动作是专门用于查询审批过程中各个审批节点的审批人、审批意见、开始时间和结束时间等数据的动作，通过下沉页面的页面参数“流程ID”即可查找对应流程的节点数据。
选择动作 “操作流程”分类 -> “查询审批记录”动作 
设置参数
设置入参类型，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；操作流程中的“查询审批记录”动作的入参类型通常是变量。
设置入参值，入参值通常为页面参数中的flowid（标识一个完整的操作流程）或nodeid（标识流程中的具体步骤或页面），可以通过商场分区的例子来理解，flowid是为商场中的不同区域贴上标签，比如服装区、餐饮区等；nodeid是为某个区域的具体店铺贴上标签，例如为服装区的男装店、女装店和童装店分别贴上标签。
设置目标对象，目标对象就是“查询审批记录”动作进行查询的数据来源，操作流程中的“查询审批”的来源都是流程数据，因此目标对象选择流程数据表。
设置目标值类型，操作流程的“查询审批”动作需要查询某个流程所有节点的审核人、审核意见、开始时间和结束时间，因此这里的目标值类型选择模型。
设置目标值，选择“流程数据表”。
3.组件赋值 选择动作 “操作组件”分类 -> “组件赋值”动作 
设置参数
选择需要赋值的表单容器，“组件赋值”动作将为该组件赋值。
设置参数，入参类型用于明确动作接收的参数格式，包含组件、动作出参、全局变量、固定值、变量、事件入参等类型；入参对象是指动作作用的组件；入参值类型指入参对象的值的类型，包含字段和模型，一般选择模型；入参值指入参对象的值。 “组件赋值”动作的数据来源于“查询审批记录”动作，因此入参类型是动作出参。
“组件赋值”动作的入参对象是“查询审批记录”动作查询出来的数据，即操作数据S2。
“组件赋值”动作为表单赋值，用于赋值的数据有多条，入参值类型选择模型。
“组件赋值”动作的入参值是“查询单条”动作查询的流程数据库，入参值选择“outParam”。
发起流程
发起流程分为两步，首先要初始化流程发起表单容器，然后发起申请流程。
1.初始化流程发起表单容器 选择动作 “操作流程”分类 -> “组件赋值”动作 
设置参数
选择组件，选择表单容器。
选择入参类型，选择流程。
选择入参值，选择需要发起的某一流程。
2.流程发起申请选择动作 “操作流程”分类 -> “发起申请”动作 
设置参数 选择表单容器，发起申请动作只能用于表单容器。 
流程审批
流程审批动作通常与表单数据紧密关联，审批人可以在审批过程中直接查看表单中的详细信息，并基于这些数据做出审批决策。审批结果可以作为触发其他动作的条件，从而实现业务流程的自动化和协同。例如，采购申请审批通过后，系统可以自动触发采购订单的生成和供应商的通知。 选择动作 “操作流程”分类 -> “审批流程”动作 
设置参数 选择相应的表单容器。 
流程挂起
流程挂起是指在业务流程执行过程中，由于某些特定原因，人为地暂时中断某条数据的流程执行，使流程处于停滞状态直到满足一定条件或接收到特定指令后才重新启动。对于流程中有截止时间的某些节点，如果截止时间将近，而该节点的业务还没完成，可以挂起流程，让流程进度暂停在该节点。
1.挂起流程 选择动作 “操作流程”分类 -> “挂起流程”动作 
设置参数
选择可能需要挂起流程的表格。
入参类型，表格的入参类型为组件。
入参对象，入参对象就是我们选中的表格。
入参值类型，对于某条需要流程挂起的数据，需要查询该数据的所有字段后，再进行流程挂起，因此入参值类型选择“模型”。
入参值，选中需要进行流程挂起的数据，入参值选择表格行数据即可。
2.组件加载选择动作 “操作组件”分类 -> “组件加载”动作 
设置参数
选择需要加载的组件，这里我们选择表格。
重置分页选择“否”。
流程激活
流程激活就是让经过了流程挂起而流程被暂停的节点继续进行下一步流程。
1.激活流程 选择动作 “操作流程”分类 -> “激活流程”动作 
设置参数
选择需要激活流程的表格。
入参类型，表格的入参类型为组件。
入参对象，入参对象就是我们选中的表格。
入参值类型，对于某条需要流程挂起的数据，需要查询该数据的所有字段后，再进行流程挂起，因此入参值类型选择“模型”。
入参值，选中需要进行流程挂起的数据，入参值选择表格行数据即可。
2.组件加载 选择动作 “操作组件”分类 -> “组件加载”动作 
设置参数
选择需要加载的组件，这里我们选择表格。
重置分页选择“否”。
搭建技巧实践
自定义组件的使用技巧
搭建页面时，我们可以将重复、美观等可复用的组件通过自定义组件留存。 自定义组件使用方法 在已搭建好的页面中，如果我们发现一个组件可以被重复使用，那么可以通过以下步骤将其保存为自定义组件，以便日后复用。
更新组件 如果你想更新组件，可以在一个空白页面上编辑组件，然后保存组件—更新就搞定了。
查找组件 浮木云的自定义组件是可以分组的，我们可以在自定义组件模块中，通过点击【分组组件管理】按钮，打开分组组件配置弹窗。 同时我们可以灵活选择将组件分为个人或团队分组。选择团队分组后，组件将被纳入团队组件库，确保团队成员能够便捷地查看新增的自定义组件。而选择个人分组，组件将进入个人组件库，其他团队成员则无法查看。
运用自定义组件库 只需简单地将所需的自定义组件从库中拖拽至页面画布内，即可快速实现组件的复用和页面的构建。
自定义样式的使用技巧
浮木云的组件库中每个组件都提供了样式配置功能，包含常用的布局、背景、字体等样式的配置，如果有一些页面样式这些配置不足以支撑的话，这时可以编写自定义样式达到想要搭建的页面效果。 自定义样式的使用 首先我们进入到浮木云工作台，选中一个画布中的组件，在右侧配置面板打开样式配置面板，点击自定义样式按钮，就打开了自定义样式编写的界面。浮木云自定义样式的编写提供了代码提示、格式化、语法显示、语法校验这些功能，帮助大家编写自定义样式。 
常用的自定义样式calc()函数 calc() 函数是一个用于计算属性值的函数。它可以在使用数学表达式，支持 "+", "-", "*", "/" 运算，从而实现动态计算属性值的效果，注意：运算符前后都需要保留一个空格。当我们需要实现一个头部、底部区域占固定高度，剩下的区域都给到中间区域进行滚动，这时我们就可以编写自定义样式，设置高度使用calc计算函数100%减去上下区域固定高度即可。样式代码、实现效果如下图所示： 
弹性布局 当我们需要实现外部容器宽度发生变化时，内部动态变化的组件宽度会跟随外部容器的变化而变化，其他组件宽度保持不变，这时可以借助弹性容器组件，结合自定义样式flex设置动态变化组件为1，固定组件设置固定的宽度，即可实现下图所示的效果： 
渐变色 样式配置中支持常规的背景样式配置，背景图片、背景颜色的配置，当我们需要实现一些渐变的颜色效果时，这时就需要写自定义样式设置渐变色，样式代码、实现效果如下图所示， 
我们可以在样式参考手册，查找相应的样式属性、值，实现丰富的页面设计。样式参考手册地址： https://www.w3school.com.cn/cssref/index.asp
多样化图表的搭建技巧
基础图表 相信大家对数据分析并不陌生，日常开发和工作汇报中，少量的数据我们通常使用表格和Excel进行展示，但是随着数据量的增加，我们往往就需要通过统计图表来更好地帮助我们分析数据。浮木云内置了10个基础图表，包含：折线图、柱状图、饼图、玫瑰图等，我们可以拖拽对应的图表到画布中，所见即可得。 
自定义图表 除了基础的图表组件外，我们还提供了可自定义的图表来帮助大家搭建多样化图表。
我们可以通过「自定义图表设置」，粘贴复制想要的自定义图表的代码，即可把你的配置可视化到画布中。 
图表代码
我们可以在echarts官网或者社区找到心仪的模板并复制对应的代码到编辑器中，对应的地址如下所示：
官网地址：
https://echarts.apache.org/examples/zh/index.html
社区地址：
https://www.makeapie.cn/echarts
注意事项
自定义的代码中有一些代码片段浮木云暂时无法识别，大家需要把对应代码片段移除或者转换。
包含变量命名的数据，如： 
自定义函数，如： 
echarts内置的函数，如： 