天斧演示教程


准备环境

创建表:

SET NAMES utf8mb4;

SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------

-- Table structure for demo_leave

-- ----------------------------

DROP TABLE IF EXISTS `demo_leave`;

CREATE TABLE `demo_leave`  (

  `id` varchar(36) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '主键',

  `employee_id` varchar(36) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '请假人',

  `start_time` date NULL DEFAULT NULL COMMENT '开始时间',

  `end_time` date NULL DEFAULT NULL COMMENT '结束时间',

  `day` float NULL DEFAULT NULL COMMENT '请假天数',

  `type` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '请假类型',

  `reason` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '请假原因',

  `dept_audit` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门审核',

  `com_audit` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '公司审核',

  PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '请假' ROW_FORMAT = Compact;

 

SET FOREIGN_KEY_CHECKS = 1;

 

 

插入请假类型:

 

INSERT INTO `hussar_v8`.`sys_dict_type`(`ID`, `PARENT_ID`, `TYPE_NAME`, `TYPE_DESCRIPTION`, `RANGE_TYPE`, `SORT`, `CREATOR`, `CREATE_TIME`,
 `LAST_EDITOR`, `LAST_TIME`, `BAK_1`, `BAK_2`, `BAK_3`) VALUES ('676dc65859fb469d8a5a2cd071406696', 'biz', 'leave_type',
 '请假类型', 'biz', 1, 'superadmin', '2019-08-29 06:28:01', 'superadmin', '2019-08-29 06:28:01', NULL, NULL, NULL);

INSERT INTO `hussar_v8`.`sys_dict_single`(`ID`, `TYPE_ID`, `VALUE`, `LABEL`, `SORT`, `CREATOR`, `CREATE_TIME`, `LAST_EDITOR`, `LAST_TIME`, `BAK_1`,
 `BAK_2`, `BAK_3`, `PARENT_ID`) VALUES ('1157afc7115f4097a83ae50280624cd4', '676dc65859fb469d8a5a2cd071406696', '3',
 '产假', 3, 'superadmin', '2019-08-29 06:28:01', 'superadmin', '2019-08-29 06:28:01', NULL, NULL, NULL, NULL);

INSERT INTO `hussar_v8`.`sys_dict_single`(`ID`, `TYPE_ID`, `VALUE`, `LABEL`, `SORT`, `CREATOR`, `CREATE_TIME`, `LAST_EDITOR`, `LAST_TIME`, `BAK_1`,
 `BAK_2`, `BAK_3`, `PARENT_ID`) VALUES ('5b481aa528e54a37b67f6dfa78865f26', '676dc65859fb469d8a5a2cd071406696', '1',
 '病假', 1, 'superadmin', '2019-08-29 06:28:01', 'superadmin', '2019-08-29 06:28:01', NULL, NULL, NULL, NULL);

INSERT INTO `hussar_v8`.`sys_dict_single`(`ID`, `TYPE_ID`, `VALUE`, `LABEL`, `SORT`, `CREATOR`, `CREATE_TIME`, `LAST_EDITOR`, `LAST_TIME`, `BAK_1`,
 `BAK_2`, `BAK_3`, `PARENT_ID`) VALUES ('bbd4ed2a492d4f2f938c27e3f8300b1a', '676dc65859fb469d8a5a2cd071406696', '2',
 '事假', 2, 'superadmin', '2019-08-29 06:28:01', 'superadmin', '2019-08-29 06:28:01', NULL, NULL, NULL, NULL);

INSERT INTO `hussar_v8`.`sys_dict_single`(`ID`, `TYPE_ID`, `VALUE`, `LABEL`, `SORT`, `CREATOR`, `CREATE_TIME`, `LAST_EDITOR`, `LAST_TIME`, `BAK_1`,
 `BAK_2`, `BAK_3`, `PARENT_ID`) VALUES ('d7ac6aecddb64655a653b1c63803650c', '676dc65859fb469d8a5a2cd071406696', '4',
 '婚嫁', 4, 'superadmin', '2019-08-29 06:28:01', 'superadmin', '2019-08-29 06:28:01', NULL, NULL, NULL, NULL);


一、创建模块

1、点击天斧右侧页面栏顶部的或在页面栏中单击鼠标右键选择“新建模块”,弹出新建模块窗口。

 

2、在新建模块窗口中,填写模块名称、模块英文名,点击“创建”按钮,成功创建一级模块“请假管理”。

 

 

二、创建页面

1、点击天斧右侧页面栏顶部的或鼠标右键单击“请假管理”模块,弹出新建页面窗口。

 

2、首先创建一个列表页面。在新建页面窗口中,填写模块名称、模块英文名并选择所属模块,点击“创建”按钮,成功在“请假管理”模块下创建页面“请假列表”。

 

 

3、同上步骤,继续在“请假管理”模块下创建页面“请假表单”。

 

 

三、数据的增删改查

在本节中,我们将借助上一节创建的表单及列表页面,实现数据的增删改查功能。

(一)绘制表单

1、双击打开上一节创建的“请假表单”页面。

 

2、从左侧元件库中拖拽一个【表单元件】到画布中,松开鼠标后,表单将自动横向占满画布。可根据需要拖拽其上下边框,微调表单高度。

 

3、从左侧元件库中拖拽一个【文本元件】到画布中的表单左上方作为标题,微调元件样式,并双击修改其内容为“请假表单”。

 

4、从左侧元件库中拖拽一个【按钮元件】到画布中的表单右上方作为保存按钮,并双击修改其内容为“保存”。

 

5、同上步骤,从左侧元件库中拖拽【文本元件】、【输入框元件】到画布中的表单中央,微调元件样式,并双击【文本元件】修改其内容为“请假人”,作为请假表单的第一个字段。

 

6、按住键盘Shift键并单击鼠标左键同时选中上步骤中的【文本元件】和【输入框元件】,使用快捷键Ctrl+C进行复制,并在选中状态下使用Ctrl+V粘贴出多个字段。双击粘贴出的各【文本元件】,分别修改其内容为“开始时间”、“结束时间”、“请假天数”、“请假类型”、“请假原因”,作为请假表单的后几个字段。

 

7、鼠标右键单击“开始时间”后的【输入框元件】,在弹出菜单中选择“替换当前组件”,打开组件替换窗口。

 

8、在组件替换窗口中点击“日期选择”,对应的【输入框元件】将自动替换为【日期选择元件】。同理,将“结束时间”输入框也替换为【日期选择元件】,将“请假类型”输入框替换为【下拉框元件】。删掉“请假原因”输入框,从元件库中拖拽一个【文本域元件】并微调。

 

9、右键点击【下拉框元件】,在弹出窗口中选择“移到顶层”,此操作是为了在预览时避免下拉框被其他元件遮挡。

 

10、鼠标左键单击【下拉框元件】,在右侧的外观设置栏中找到“配置”,点击“选择字典”页签。在其下的字典列表中,点击后台配置好的“请假类型”字典项,在预览时该下拉框的选项即可展示所选的字典项。

 

11、选中【输入框元件】,在右侧的外观配置栏中找到“默认值”,将该输入框的默认值选择为“用户名”,则预览时该输入框会自动带出当前登录用户名,也可根据需求修改。

 

至此,一个静态表单就绘制完成了。

(二)绑定表

1、从左侧元件库中拖拽一个【隐藏域元件】到画布中的表单上松开鼠标。隐藏域将自动移至画布左上角,并在右侧外观设置栏的配置中,自动关联上当前表单的ID

 

2、鼠标右键单击画布中的【表单元件】,在弹出菜单中选择“绑定表”,弹出关联表窗口。

 

3、在关联表窗口中,鼠标左键单击选中当前表单需要关联的数据表,右侧展示的是该表的表结构,确认后点击“确定”按钮。

 

4、窗口关闭后,自动开始表关联。画布中可关联的元件自动变为蓝色,右侧的表绑定栏中展示的是所选的数据表结构,字段前的小绿点代表该字段正在关联,小蓝点代表该字段已关联。观察小绿点所在的字段,在画布中找到相应元件并单击,字段名称会显示在该元件上,代表该字段关联成功。在表单内部使用鼠标滚轮可自由上移/下移右侧的当前关联字段。

 

通过以上关联操作,将当前表单中的所有字段都与对应的数据表相关联。

 

(三)配置表单按钮事件

1、单击鼠标左键选中表单右上方的“保存”按钮,在右侧点击打开事件绑定栏。

 

2、在事件绑定栏中点击“添加事件”按钮,在下方自动新增了一个“事件1”,其默认触发事件为“鼠标单击”,无需更改。该事件中包含一个默认的“动作1”。

 

3、点击“动作1”中的下拉框,其下展示的是若干动作,此处选择“提交表单”。

 

选择“提交表单”后,下方出现两个选择框,第一个为表单选择框,已经自动填充了当前表单名称;第二个为提交后要刷新的页面选择框,点击后在页面选择框中选择“请假列表”。

 

 

 

至此,一个可保存数据的动态表单就配置完成了。

(四)绘制列表

1、双击打开第二节创建的“请假列表”页面。

 

2、从左侧元件库中拖拽一个【数据表格元件】到画布中,松开鼠标后,数据表格将自动横向占满画布并弹出表格配置窗口。

 

 

3、在表格配置窗口中,左侧展示的是天斧中内置的所有数据库表,单击可展示其包含字段。点击需要在列表中展示的字段,一并拖入表格字段空白区域,下方的数据表格中可预览效果。

 

4、在表格配置窗口的表格字段区域中,点击“请假人”字段的“添加到查询”,自动为列表增加“请假人”的查询条件。

 

5、在表格配置窗口的表格字段区域中,点击“请假类型”字段的“绑定数据”,打开绑定数据窗口。在其下的字典列表中,点击后台配置好的“请假类型”字典项,在预览时该列即可展示所选的字典项。

 

6、完成上述操作后,点击表格配置窗口右上角的“完成”按钮,可在画布中查看配置完成的列表。

 

7、从左侧元件库中拖拽一个【按钮元件】到画布中的列表上方的查询区域中,并双击修改其内容为“新增”。同理,复制该按钮后再粘贴出两个按钮,分别命名为“修改”、“删除”。

 

8、按住Shift键单击鼠标左键选中“新增”、“修改”和“删除”按钮,在右侧的外观设置栏中找到“自适应”,勾选“以右侧定位”,保证预览时按钮能自适应页面,始终在列表右上角。

 

(五)配置列表按钮事件

1、单击鼠标左键选中列表右上方的“新增”按钮,在右侧点击打开事件绑定栏。

 

2、在事件绑定栏中点击“添加事件”按钮,在下方自动新增了一个“事件1”,其默认触发事件为“鼠标单击”,无需更改。该事件中包含一个默认的“动作1”。

 

3、点击“动作1”中的下拉框,其下展示的是若干动作,此处选择“新增表单”。

 

选择“新增表单”后,下方出现一个选择框,点击后在页面选择框中选择“请假表单”。

 

4、按照上述配置按钮事件的步骤,为“修改”按钮配置鼠标单击时的“列表修改”动作,下方的表格选择框中自动填充了当前数据表格,只需在页面选择框中选择“请假表单”。

 

5、按照上述配置按钮事件的步骤,为“删除”按钮配置鼠标单击时的“列表删除”动作,下方的表格选择框中自动填充了当前数据表格。

 

至此,一个可展示数据并与表单联动进行增删改查的动态列表就配置完成了。

(六)页面保存、发布与预览

1、在上述表单页面和列表页面的绘制过程中,可随时使用快捷键Ctrl+S或页面右上角的“保存”按钮进行页面的保存。页面保存成功后,天斧会提示“保存成功”。

 

 

2、在表单页面和列表页面都保存成功后,需要对页面分别进行发布才可以正常预览。可随时使用快捷键Ctrl+P或页面右上角的“发布”按钮进行页面的发布。页面发布成功后,天斧会提示“发布成功”。

 

 

3、在表单页面和列表页面都发布成功后,在“请假列表”页面点击右上角的“预览”按钮,可进行页面预览。

 

4、预览操作步骤:

(1)点击列表右上角的“新增”按钮,打开请假表单新增页面。

 

(2)在请假表单新增页面中填写各字段内容,点击“保存”按钮,保存成功。自动关闭表单页面并刷新列表页面,列表中展示刚新增的请假数据。

 

 

(3)勾选列表中的一条请假数据,点击列表右上角的“修改”按钮,打开请假表单修改页面。

 

(4)在请假表单修改页面中按需求修改某些字段内容,点击“保存”按钮,保存成功。自动关闭表单页面并刷新列表页面,列表中刚修改的请假数据内容已更新。

 

 

(5)勾选列表中的一条请假数据,点击列表右上角的“删除”按钮,所选数据被删除,提示“删除成功”。

 

 

(6)在列表上方查询区域中的“请假人”搜索框中,输入请假人的关键词,点击“查询”按钮,列表将筛选展示符合查询条件的数据。

 

四、工作流

在本节中,我们将对上一节完成的表单及列表页面稍加修改,实现工作流基础上的数据提交、审核、展示流程图等功能。

(一)编辑表单

1、双击打开上一节完成的“请假表单”页面。

 

2、按住键盘Shift键并单击鼠标左键同时选中表单中的“请假原因”文本及其输入框,使用快捷键Ctrl+C进行复制,并在选中状态下使用Ctrl+V粘贴出两个。双击粘贴出的两个【文本元件】,分别修改其内容为“部门审核意见”、“公司审核意见”,作为工作流的业务字段。

 

3、从左侧元件库中拖拽一个【按钮元件】到画布中的表单右上方的“保存”按钮左侧,作为提交按钮,并双击修改其内容为“提交”。

 

(二)绑定表剩余字段

1、单击鼠标左键选中表单,在右侧点击打开表绑定栏。

 

2、在表绑定栏中,找到当前未绑定的“部门审核”、“公司审核”字段。点击“部门审核”后面的再次开始表关联。在表关联状态,在画布中找到这两个字段对应的【文本域元件】,字段名称会显示在元件上,代表字段关联成功。

 

通过以上关联操作,将当前表单中的所有字段都与对应的数据表相关联。

 

(三)配置表单按钮事件

1、单击鼠标左键选中表单右上方的“提交”按钮,在右侧点击打开事件绑定栏。

 

2、在事件绑定栏中点击“添加事件”按钮,在下方自动新增了一个“事件2”,其默认触发事件为“鼠标单击”,无需更改。该事件中包含一个默认的“动作1”。

 

3、点击“动作1”中的下拉框,其下展示的是若干动作,此处选择“提交流程表单”。

 

选择“提交流程表单”后,下方出现两个选择框,第一个为表单选择框,已经自动填充了当前表单名称;第二个为提交后要刷新的页面选择框,点击后在页面选择框中选择“请假列表”。

 

至此,一个可提交流程表单的动态表单就配置完成了。

(四)新增工作流

1、在右侧点击打开工作流栏。

 

2、在右侧的工作流栏中点击弹出新增工作流窗口。

 

3、在新增工作流窗口中,填写流程名称、流程标识,其他字段选填。点击“保存”按钮,成功创建工作流“请假管理流程”。天斧将自动跳转至该工作流的绘制页面。

 

 

(五)绘制流程图

1、“请假管理流程”的绘制页面中,从左侧流程组件库中拖拽一个【开始组件】到画布中,作为流程图的开始节点。

 

2、选中上一步放置的开始节点,右侧会出现六个常用的流程组件,点击可直接在所选组件后追加相应组件,并能自动增加之间的流程连线(也可按住连线拖拽至要连接的组件,手动连接流程节点)。根据上述操作,快速追加多个流程组件。

 

3、双击【人工活动】节点,分别修改其内容为“个人提交”、“部门审核”、“公司审核”,作为流程图的流程节点提示。

 

(六)选择流程参与者

1、在上一节绘制完成的流程图中,“部门审核”和“公司审核”节点需要指定特定的参与者。鼠标单击选中“部门审核”节点,在右侧属性栏中找到“参与者”,点击其下输入框,打开参与者选择窗口。

 

2、在参与者选择窗口中,可以通过用户/角色/部门/变量四种维度进行参与者的选择,这里选择“角色”页签。以超管为例,勾选“系统角色”下的“超级管理员”,右侧已选列表中将实时展示已勾选的参与者。点击“保存”按钮,保存当前选择的参与者。

 

3、按照上述步骤,为“公司审核”节点也选择对应的参与者为“超级管理员”,已选的参与者将展示在属性栏的“参与者”输入框中。

 

(七)关联表单并配置权限

1、在上一节绘制完成的流程图中,鼠标单击选中“个人提交”节点,在右侧属性栏中找到“表单地址”点击,打开表单选择窗口。

 

2、在表单选择窗口中,选择“请假表单”,点击“保存”按钮。

 

3、在右侧属性栏中的“表单地址”输入框中,显示了已关联的页面“请假表单”。点击后,页面刷新后在右侧直接加载出所选表单页面,开始进行该页面的权限配置。

 

 

4、在页面权限配置页面,鼠标右键单击右侧画布中的表单元件,下拉菜单中包含“隐藏/禁用/只读”三种权限选项。

 

在此处的“个人提交”节点,应将“部门审核意见”、“公司审核意见”的文本及输入框设为“隐藏”。已设为隐藏的元件将显示为红色。

 

5、按照上一步,将“部门审核”节点中的“请假人”、“开始时间”、“结束时间”、“请假天数”、“请假类型”、“请假原因”的输入框设为“只读”,并将“公司审核意见”的文本及输入框设为“隐藏”。已设为只读的元件将显示为橙色,已设为隐藏的元件将显示为红色。

 

6、按照上一步,将“公司审核”节点中的“请假人”、“开始时间”、“结束时间”、“请假天数”、“请假类型”、“请假原因”、“部门审核意见”的输入框设为“只读”。已设为只读的元件将显示为橙色。

 

至此,各节点的表单权限就配置完成了。点击表单画布右上角的“关闭”按钮,关闭权限配置页面,回到流程图的画布中。

 

(八)配置互斥网关流条件

1、在上一节配置完节点对应的表单权限后,还需要为【互斥网关】节点配置其下分支的流条件,以达到不同条件走不同流程的目的。鼠标单击选中【互斥网关】节点右侧的连线,在右侧的属性栏中找到“流条件”,点击流条件输入框,弹出流条件配置窗口。

 

2、在流条件配置窗口中,选择“条件”。由于上一步已关联了对应表单,因此这里的条件下拉框选项对应的是表单字段。这里分别选择“请假天数”-“小于等于”,并输入“3”。下方的“条件表达式”中将自动生成表达式,含义是当用户提交的请假天数≤3天时,流程跳过“公司审核”节点,直接流转到该分支。

 

 

3、按照上一步,为【互斥网关】节点后的另一条连线配置流条件为“请假天数大于3”。为提高友好性,可在右侧的属性栏中找到“名称”,为该连线命名为“请假天数大于3”,可以看到该连线上直接显示了该名称。

 

(九)工作流保存与发布

1、在上述流程图配置完成后,可点击页面右上角的“保存”按钮进行流程图的保存。保存成功后,天斧会提示“保存成功”。

 

2、在流程图保存成功后,需要对工作流进行发布才可以正常使用。可点击页面右上角的“发布”按钮进行工作流的发布。发布成功后,天斧会提示“发布成功”。

 

(十)编辑列表

1、双击打开上一节完成的“请假列表”页面。

 

2、从左侧元件库中拖拽一个【按钮元件】到画布中的列表上方的查询区域中,并双击修改其内容为“流程图”。同理复制粘贴出一个按钮,修改其内容为“新增流程”。并为二者在右侧外观设置栏-自适应中配置“以右侧定位”。

 

(十一)配置列表按钮事件

1、单击鼠标左键选中列表右上方的“新增流程”按钮,在右侧点击打开事件绑定栏。

 

2、在事件绑定栏中点击“添加事件”按钮,在下方自动新增了一个“事件4”,其默认触发事件为“鼠标单击”,无需更改。该事件中包含一个默认的“动作1”。

 

3、点击“动作1”中的下拉框,其下展示的是若干动作,此处选择“新增流程表单”。

 

选择“新增流程表单”后,下方出现两个选择框,第一个为表单选择框,第二个为工作流选择框。点击第一个选择框选择“请假表单”,点击第二个选择框选择已创建的工作流。

 

4、按照上述配置按钮事件的步骤,为“流程图”按钮配置鼠标单击时的“展示流程图”动作,下方的表格选择框中自动填充了当前数据表格。

 

(十二)页面保存、发布与预览

1、在上述表单页面和列表页面的绘制过程中,可随时使用快捷键Ctrl+S或页面右上角的“保存”按钮进行页面的保存。页面保存成功后,天斧会提示“保存成功”。

 

 

2、在表单页面和列表页面都保存成功后,需要对页面分别进行发布才可以正常预览。可随时使用快捷键Ctrl+P或页面右上角的“发布”按钮进行页面的发布。页面发布成功后,天斧会提示“发布成功”。

 

 

3、在表单页面、列表页面、工作流都发布成功后,在“请假列表”页面点击右上角的“预览”按钮,可进行页面预览。

 

4、预览操作步骤:

(1)点击列表右上角的“新增流程”按钮,打开请假流程表单新增页面。

 

(2)在请假流程表单新增页面中,由于当前处于“个人提交”节点,因此“部门审核意见”和“公司审核意见”不可见。请假人自动带出了当前登录人“超级管理员”,填写各字段内容后点击“提交”按钮,提交成功。自动关闭表单页面并刷新列表页面,列表中展示刚新增的请假流程数据。

 

 

(3)在左侧菜单中找到“待办管理-待办事项”,由于上述演示中部门审核和公司审核节点都配的是当前登录人“超级管理员”,因此在待办列表中能够找到刚才提交的请假信息。

 

点击业务名称链接,进入部门审核节点,打开请假表单页面。在“部门审核意见”输入框中输入审核意见,点击“提交”按钮,提交成功。自动关闭表单页面并刷新列表页面,列表中展示刚审核完成的请假流程数据,其“部门审核意见”字段展示刚才填写的意见。

 

 

(4)由于上述填写的“请假天数”为1天,因此流程直接跳过“公司审核”节点,整个流程结束。在列表中勾选该条请假信息,点击列表右上角的“流程图”按钮,打开流程图。

 

 

还可以根据需要点击上方的“办理历史”,以列表的形式查看请假流程的流转情况。