009-快速构建一个业务模块

Posted 2023-02-02 蒋锋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了009-快速构建一个业务模块相关的知识，希望对你有一定的参考价值。

视频讲解地址：009-快速构建一个业务模块(3)_哔哩哔哩_bilibili009-快速构建一个业务模块(3)https://www.bilibili.com/video/BV1w34y1i7dp?spm_id_from=333.999.0.0

本演示讲解一个模拟业务模块从导入到配置的过程，使您可以快速了解本系统的运行和架构方式。

1、登录系统

使用 administrator 用户登录系统，此用户是对系统进行架构的默认用户。

2、建立一个业务系统表

以下SQL语句建立了一个模块的业务系统表，包括了一些常用的字段类型，有字符串、数值、日期、布尔、外键关联(OneToMany)。

注意本系统中有一些默认的字段：

- 字段 creater_ 为记录的创建用户的id；

- 字段 create_date_ 为记录的创建时间；
- 字段 last_modifier_ 为记录的最后一次修改的用户的id；
- 字段 last_modify_date_ 为记录的最后一次修改的时间；

以上四个字段由系统自动处理，在新建记录和更新记录的时候会自动加入操作用户和时间。

CREATE TABLE `test_first_table` (
  `id_` int(11) NOT NULL COMMENT '主键|基本信息',
  `code_` varchar(10) NOT NULL COMMENT '编号',
  `name_` varchar(50) NOT NULL COMMENT '名称',
  `country_code_` varchar(3) NOT NULL COMMENT '国家或地区',
  `valid_` tinyint(1) NOT NULL DEFAULT '0' COMMENT '有效',
  `start_date_` date DEFAULT NULL COMMENT '开始日期',
  `end_date` date DEFAULT NULL COMMENT '结束日期',
  `days_` int(11) NOT NULL DEFAULT '0' COMMENT '天数',
  `number_` decimal(18,2) NOT NULL DEFAULT '0.00' COMMENT '数量',
  `unit_price_` decimal(18,2) NOT NULL DEFAULT '0.00' COMMENT '单价',
  `amount_` decimal(18,2) NOT NULL DEFAULT '0.00' COMMENT '金额',
  `percent_` decimal(18,4) NOT NULL DEFAULT '0.00' COMMENT '百分比',
  `creater_` varchar(40) NOT NULL COMMENT '创建者|其他信息',
  `create_date_` datetime NOT NULL COMMENT '创建日期',
  `last_modifier_` varchar(40) DEFAULT NULL COMMENT '最近修改者',
  `last_modify_date_` datetime DEFAULT NULL COMMENT '最近修改日期',
  PRIMARY KEY (`id_`),
  UNIQUE KEY `ix_text_first_code` (`code_`),
  UNIQUE KEY `ix_text_first_name` (`name_`),
  KEY `fk_text_first_country` (`country_code_`),
  CONSTRAINT `fk_text_first_country` FOREIGN KEY (`country_code_`) 
  	REFERENCES `pub_country_code` (`country_code_`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='首个测试模块'

创建表的方式有二种：

1. 可以在 mysql 的管理器中直接创建；
2. 可以使用 实体对象 模块的导入功能中的 执行SQL 语句来进行创建；

本系统在前台增加了可以执行SQL语句的功能。由于此功能风险比较大，因此只有administrator这个用户才能使用，并且在传输过程中加密了SQL语句，SQL语句执行后也被记录进了操作日志。

3、导入首个测试模块

首先打开模块实体对象，选择工具栏中的导入按钮，进入导入界面。

在 未加入到系统的表和视图 中选择 首个测试模块(test_first_table) ，在右边的字段列表中找到名称在 名称字段中打勾选中作为此模块的名称字段，然后选择一个模块分组：测试系统，按导入按钮即可，如果导入成功，会有一个提示。

名称字段相当于一个记录的描述字段，在操作、删除时会提示此字段的内容。

4、修改导入模块的属性

在导入了模块后，就可以在实体对象中找到 首个测试模块 ，选中记录后，修改某些属性。由于导入的模块还没有Java Bean,因此默认是不可以新增、修改和删除。我们把 可新增可修改可删除 选中，再把 有附件 选中即加入了附件功能，保存后再进行下一步。如果想要在Java中对模块进行一些业务逻辑操作，则必须生成Java Bean文件，这个文件也是可以自动生成的。

部分字段列表：

5、模块操作权限的设置和分配

在 用户操作角色 模块中，选择业务系统操作角色，点击最后一列操作的 权限设置 按钮。把 首个测试模块 的权限全部选中，然后保存即可。

单个模块的基本权限如下所示：

- 可浏览：选中后可以浏览数据权限范围内的记录，未选中则不能查看并且模块不会出现在菜单中；
- 新增：可以对模块数据进行新增的操作；
- 新增向导：可以启用新增向导，批量导入数据；
- 修改：可以对模块数据进行修改的操作；
- 删除：可以对模块数据进行删除的操作；
- 浏览附件：可以浏览模块记录的附件；
- 新增附件：可以新增模块记录的附件；
- 修改附件：可以修改模块记录的附件；
- 删除附件：可以删除模块记录的附件；

设置并保存角色的权限后，角色所对应的用户的权限也随之更改，需要刷新网页，权限才会生效。

6、对首个测试模块进行操作

从系统菜单 测试系统 -- 首个测试模块 中进入本模块。

新建记录

在界面工具栏中点击 新建 按钮新建一条记录，录入好各个必填项之后，按保存即可。

保存后可以继续新建或者修改刚才已经新建的记录。

修改记录

选中一条记录，或者直接点击记录最后的修改按钮，即可对当前记录进行修改。

删除记录

选中一条记录点击记录后面的删除按钮，即会提醒是否删除记录，在确定后即删除当前选中记录。可以选中多条记录，在工具栏中的批量操作中可以批量删除。删除后有是否删除成功的提醒。

批量新建数据

1. 批量新建需要先在表单(Form)方案中新建一个用于导入数据的方案，将所有需要导入的字段加入即可；
2. 在测试模块中，选择工具条中的导入按钮进入导入界面；
3. 将下面的数据复制后，粘贴到导入界面中的数据区域；
4. 用数据校验按钮来初步验证导入数据的正确性，可以验证的包括必填等内容；
5. 检验完成后按数据导入按钮完成数据导入。正确则会显示导入完成，错误则会显示错的提示。

下面为100条随机生成的新建数据，是从Excel中复制过来的数据。

10	ROW-10	Nullam Velit LLP	丹麦	false	2019-04-20	2021-01-04	175	58	485	28130	0.12
11	ROW-11	Aliquam Nisl Nulla Associates	丹麦	true	2015-09-08	2021-04-15	613	57	565	32205	0.59
12	ROW-12	Porttitor Tellus Corp.	丹麦	true	2021-06-02	2020-08-20	488	46	173	7958	0.7
13	ROW-13	Tempor Augue Industries	丹麦	true	2019-11-10	2022-08-14	171	47	986	46342	0.26
14	ROW-14	Tortor At Limited	丹麦	true	2019-03-03	2021-12-05	203	77	908	69916	0.56
15	ROW-15	Vehicula Inc.	丹麦	true	2021-08-11	2021-01-14	866	31	176	5456	0.14
16	ROW-16	Ligula Eu Enim PC	丹麦	false	2020-12-20	2020-09-05	288	79	762	60198	0.08
17	ROW-17	Mi Foundation	丹麦	true	2018-12-19	2021-12-01	857	29	478	13862	0.65
18	ROW-18	Euismod In Dolor Corporation	丹麦	false	2015-10-24	2022-01-16	187	76	102	7752	0.77
19	ROW-19	Aenean Gravida Institute	丹麦	true	2015-09-09	2021-12-20	387	44	567	24948	0.04
20	ROW-20	Dapibus Limited	丹麦	false	2017-09-11	2020-12-21	60	44	291	12804	0.18
21	ROW-21	Porta Elit Foundation	CN	false	2016-07-05	2022-01-20	701	46	450	20700	0.14
22	ROW-22	Dolor Fusce Corp.	CN	false	2022-07-22	2021-07-07	946	82	306	25092	0.45
23	ROW-23	Nunc Consulting	CN	true	2019-01-16	2022-06-10	841	68	930	63240	0.83
24	ROW-24	Mi Aliquam Corporation	CN	true	2015-09-08	2021-09-16	796	28	522	14616	0.73
25	ROW-25	Erat Ltd	CN	false	2017-11-10	2020-08-30	814	82	787	64534	0.59
26	ROW-26	Nisi Nibh Lacinia Limited	CN	false	2018-07-23	2021-09-26	927	53	236	12508	0.21
27	ROW-27	Suspendisse Corp.	CN	true	2019-03-17	2020-12-18	539	64	110	7040	0.42
28	ROW-28	In Corporation	CN	true	2019-01-28	2022-07-25	851	61	799	48739	0.98
29	ROW-29	Lectus A Sollicitudin PC	CN	true	2017-11-24	2020-09-23	282	51	746	38046	0.92
30	ROW-30	Ultricies Ligula Nullam Foundation	HK	false	2022-05-26	2021-08-16	221	40	206	8240	0.03
31	ROW-31	Diam Eu Dolor Corporation	HK	true	2018-02-08	2020-08-30	119	96	780	74880	0.24
32	ROW-32	Morbi Vehicula Pellentesque Foundation	HK	false	2021-03-14	2021-04-03	274	41	262	10742	0.4
33	ROW-33	Lobortis Company	HK	true	2020-12-13	2021-08-01	306	37	268	9916	0.56
34	ROW-34	A Tortor Nunc Company	HK	true	2018-08-04	2020-11-29	942	67	924	61908	0.93
35	ROW-35	Quisque Ac Libero Incorporated	HK	true	2018-05-19	2021-11-23	188	49	439	21511	0.62
36	ROW-36	Condimentum Ltd	HK	true	2017-08-29	2021-04-29	756	72	154	11088	0.02
37	ROW-37	Diam Lorem Limited	HK	false	2021-12-05	2021-09-16	991	48	224	10752	0.93
38	ROW-38	Consectetuer Adipiscing Elit Company	HK	true	2020-08-21	2021-02-14	442	82	264	21648	0.74
39	ROW-39	Donec Non Justo Industries	HK	false	2021-10-18	2020-12-06	78	83	109	9047	0.6
40	ROW-40	Quis Pede PC	HK	true	2017-10-07	2021-05-07	119	39	155	6045	0.05
41	ROW-41	Purus Industries	HK	false	2020-12-20	2021-11-03	430	67	931	62377	0.19
42	ROW-42	Suspendisse Industries	HK	false	2016-11-04	2020-12-03	147	52	768	39936	0.67
43	ROW-43	Faucibus Leo In Corporation	HK	true	2016-09-04	2022-04-17	692	55	440	24200	0.73
44	ROW-44	Velit Associates	HK	true	2016-10-15	2020-08-25	66	27	554	14958	0.61
45	ROW-45	Ut Tincidunt LLC	HK	false	2015-08-30	2022-07-21	719	29	146	4234	0.97
46	ROW-46	Nam Consequat Dolor Foundation	HK	false	2022-05-17	2021-06-13	873	42	871	36582	0.32
47	ROW-47	Eget Limited	DE	false	2015-10-26	2022-01-10	160	66	962	63492	0.24
48	ROW-48	Quisque Institute	DE	false	2020-06-02	2021-07-19	566	85	112	9520	0.02
49	ROW-49	Dictum Eleifend Nunc PC	DE	true	2016-08-01	2021-12-31	550	47	207	9729	0.41
50	ROW-50	Urna Et PC	DE	true	2020-10-13	2021-09-10	593	55	528	29040	0.66
51	ROW-51	Tellus Imperdiet LLP	DE	true	2021-02-01	2022-08-14	574	72	799	57528	0.05
52	ROW-52	Tincidunt Tempus Foundation	DE	false	2021-07-17	2021-02-02	624	16	827	13232	0.77
53	ROW-53	Non Sapien Molestie PC	DE	true	2017-04-04	2020-11-16	698	30	818	24540	0.6
54	ROW-54	Integer Mollis Inc.	DE	false	2021-09-08	2022-04-21	584	93	425	39525	0.06
55	ROW-55	Blandit Consulting	DE	true	2020-10-06	2021-06-25	689	35	967	33845	0.43
56	ROW-56	Phasellus In Foundation	DE	true	2020-09-18	2021-07-31	333	100	963	96300	0.17
57	ROW-57	Quam Dignissim Pharetra LLC	DE	false	2021-06-11	2021-05-08	978	41	313	12833	0.29
58	ROW-58	Volutpat Nulla Dignissim Corporation	DE	true	2021-04-29	2022-06-11	347	67	922	61774	0.49
59	ROW-59	Suspendisse Company	DE	false	2021-02-25	2021-10-16	407	66	268	17688	0.8
60	ROW-60	Gravida Nunc Sed Industries	DE	false	2017-08-29	2022-01-01	191	23	624	14352	0.75
61	ROW-61	Commodo Tincidunt Nibh Company	DE	false	2020-04-19	2021-11-26	114	38	744	28272	0.75
62	ROW-62	Magna Nec Quam Ltd	DE	true	2021-03-07	2021-04-28	149	98	671	65758	0.27
63	ROW-63	Ornare Lectus Corporation	DE	true	2020-09-13	2021-10-30	184	42	367	15414	0.67
64	ROW-64	Senectus LLP	DE	false	2021-09-07	2020-10-06	972	74	235	17390	0.35
65	ROW-65	At Velit Ltd	DE	false	2017-04-07	2021-11-19	828	76	626	47576	0.83
66	ROW-66	Duis A Mi Limited	DE	true	2017-01-22	2021-10-31	863	34	144	4896	0.48
67	ROW-67	Elementum Dui Quis Corporation	BG	false	2020-10-04	2021-05-05	141	10	149	1490	0.37
68	ROW-68	Mi Consulting	BG	false	2016-10-09	2022-06-06	224	64	966	61824	0.63
69	ROW-69	Urna Ut Ltd	BG	true	2021-01-16	2020-12-05	114	40	683	27320	0.09
70	ROW-70	Lectus Sit Associates	BG	false	2018-10-10	2020-11-24	115	66	534	35244	0.49
71	ROW-71	A Aliquet Vel Industries	BG	true	2022-07-07	2021-10-07	119	71	868	61628	0.47
72	ROW-72	Nulla Cras LLC	BG	true	2021-07-28	2021-09-16	79	100	798	79800	0.58
73	ROW-73	Eget LLP	BG	false	2021-10-21	2021-06-30	557	67	857	57419	0.98
74	ROW-74	Magnis Dis Parturient LLC	BG	false	2018-12-21	2021-05-15	4	12	638	7656	0.33
75	ROW-75	Nec Imperdiet Nec Foundation	BG	false	2022-03-06	2022-05-25	225	30	542	16260	0.31
76	ROW-76	Scelerisque Neque Limited	BG	false	2021-09-26	2020-09-02	790	84	146	12264	0.5
77	ROW-77	Arcu Incorporated	BG	false	2021-09-21	2022-04-02	965	36	524	18864	0.02
78	ROW-78	At Limited	BG	true	2020-06-03	2020-12-18	842	86	741	63726	0.54
79	ROW-79	Phasellus Elit PC	BG	false	2020-06-20	2021-01-11	318	12	338	4056	0.94
80	ROW-80	Nulla Eu Corporation	BG	false	2017-10-15	2021-07-25	363	15	903	13545	0.94
81	ROW-81	Nec Cursus Ltd	BG	true	2015-09-29	2021-04-16	980	97	609	59073	0.17
82	ROW-82	Cras Vulputate Associates	BG	true	2019-08-23	2022-04-19	167	48	549	26352	0.22
83	ROW-83	Arcu Vestibulum Foundation	泰国	true	2017-12-01	2020-08-27	967	30	621	18630	0.85
84	ROW-84	Cum Sociis Industries	泰国	true	2020-04-05	2021-05-11	599	88	160	14080	0.87
85	ROW-85	Cursus Industries	泰国	true	2022-01-13	2022-06-10	362	58	254	14732	0.43
86	ROW-86	Fusce Mi Lorem Foundation	泰国	true	2017-05-11	2022-04-23	139	58	232	13456	0.4
87	ROW-87	Penatibus Et Magnis PC	泰国	true	2019-12-04	2020-09-05	238	66	554	36564	0.47
88	ROW-88	Vivamus Company	泰国	true	2019-07-03	2020-12-30	399	82	261	21402	0.54
89	ROW-89	Vitae Associates	泰国	false	2019-02-26	2021-06-16	912	75	803	60225	0.54
90	ROW-90	Dignissim Corp.	泰国	false	2019-09-28	2021-07-10	321	23	820	18860	0.96
91	ROW-91	Duis Corp.	泰国	true	2018-11-19	2022-01-01	158	43	490	21070	0.4
92	ROW-92	Sagittis Ltd	泰国	false	2018-10-04	2020-12-08	531	73	506	36938	0.38
93	ROW-93	Dolor Quisque Tincidunt Industries	泰国	false	2018-09-06	2021-11-22	158	32	361	11552	0.89
94	ROW-94	Nunc Mauris Industries	泰国	false	2021-04-28	2021-02-22	216	12	164	1968	0.04
95	ROW-95	Lacus Mauris Non Corp.	泰国	true	2017-02-04	2021-12-28	1000	21	663	13923	0.85
96	ROW-96	Interdum Nunc Limited	泰国	false	2021-05-21	2021-04-08	477	25	970	24250	0.12
97	ROW-97	Ipsum Primis Incorporated	泰国	false	2019-01-03	2021-02-15	712	67	579	38793	0.41
98	ROW-98	Venenatis Vel Faucibus Corporation	泰国	false	2017-07-11	2022-01-31	908	67	558	37386	0.14
99	ROW-99	Ac Incorporated	泰国	true	2020-05-01	2021-01-19	535	14	922	12908	0.35
100	ROW-100	Duis A Mi Company	泰国	true	2019-05-03	2022-07-10	722	31	942	29202	0.46
101	ROW-101	Et Incorporated	泰国	false	2019-04-06	2021-09-15	68	92	619	56948	0.81
102	ROW-102	Aliquet Corporation	泰国	false	2019-02-09	2021-05-23	802	18	330	5940	0.22
103	ROW-103	Mattis Semper Dui LLP	泰国	true	2018-12-20	2020-09-19	93	28	366	10248	0.77
104	ROW-104	Neque Corporation	泰国	false	2017-10-15	2021-12-09	613	27	854	23058	0.53
105	ROW-105	Egestas Fusce Aliquet LLP	泰国	false	2019-12-03	2021-03-08	742	36	171	6156	0.64
106	ROW-106	Commodo Hendrerit Donec Inc.	泰国	false	2018-04-02	2020-11-25	788	12	962	11544	0.48
107	ROW-107	Phasellus Ltd	泰国	false	2019-03-16	2020-12-29	736	27	602	16254	0.13
108	ROW-108	Mauris Vel Turpis Incorporated	泰国	false	2019-08-22	2021-05-14	409	17	905	15385	0.87
109	ROW-109	Aliquam PC	泰国	false	2018-09-06	2021-01-29	71	56	714	39984	0.14

附件操作

上传附件：附件前面的数值代表有几个附件。

修改附件：可以修改附件的标题等属性。

删除附件：删除上传的附件。

附件预览：所有的图片文件可以放大预览，所有的PDF，和Excel，Word等文档可以以PDF样式进行预览。

7、首个测试模块字段和其他功能的设置

字段属性调整

调整包括：数值金额单位、计量单位、可分组、修改字段类型等。

- - 数量字段：取消勾选 “选择数字单位”
  - 单价字段：取消勾选 “选择数字单位”，加入计量单位“元”；
  - 金额字段：加入计量单位“元”；
  - 百分比：修改字段类型为 Percent；
  - 天数：勾选“可分组”，加入计量单位“天”；
  - 开始日期：勾选“可分组”；（可以用于商业数据分析和汇总中的指标选择）
  - 结束日期：勾选“可分组”；

表单增加总计

修改实体对象，勾选“显示总计”；加了显示总计功能后，在一页显示不了所有数据时，会加入总计值。

Table和Card的切换

修改实体对象，修改记录显示tpl 字段的值为以下内容，保存后刷新页面，重新进入后，会在表单工具条的最前方看到一个转换按钮。可以在表单和卡片之间进行显示转换。

编号：**code**  
名称：**name**  
国家或地区：**pubcountrycode.chnName**  
### 金额信息
单价：**unitPrice**    金额：**amount**

定义以上Card后，在显示为Card时如下所示：

表单数据展开

在以Table方式展示数据的时候，可以展开记录，显示记录简介、Form表单，子模块的信息等。

在修改实体对象的行展开tpl字段的内容为上面的MarkDown内容以后，可以展开单条记录。

字段数据导航

从菜单中进入 导航方案。新建一条记录，实体对象选择首个测试模块，填入导航描述“国家或地区”，顺序号为“10”，选中可用。后保存点击设计方案按钮。在可供选择的字段中选择“国家或地区”，然后再按右上角的保存按钮即可。

再加入一个新的导航，按照开始日期来进行年度--月份来进行导航。

再加入一个数值分组的导禾月言日，按照天数。

导航的示例如下：

自定义筛选

从菜单中进入 筛选方案。新建一条记录，实体对明选择首个测试模块，输入名称和顺序号，然后设计方案，选择国家和地区、开始日期、结束日期、天数、数量，后保存。刷新页面，即可以看到筛选。

模块帮助MarkDown文本

点击首个测试模块后面的问号按钮，可以修改或查看该模块的帮助说明。可以用MarkDown语法录入数据。administrator,admin可以进行编辑，其他的用户只能看。

例如可以将下面的帮助文本拷贝后复制进去。

## 首个测试模块

* 模块说明
* 模块操作

模块组件的制作

制作首个测试模块的组件，从菜单中进入 实体对象组件，新建一条记录，实体对象选择首个测试模块，组件名称：首个测试模块静态组件，类型选择：字段聚合和对比及图表，顺序号：10，响应式参数：1.

dataSet配置：

  title: "测试模块金额",
  aggregate: "sum",
  fieldName: "amount",
  dateFieldName: "startDate",
  unitText: "元",

子字段指标配置：

staticFields: [
  
    moduleName: 'TestFirstTable',
    title: '本日金额',
    aggregate: 'sum',
    fieldName: 'amount',
    unitText: '元',
    filters: [
      
        property: 'startDate',
        operator: 'daysection',
        value: moment().format('YYYY-MM-DD') + '--' + moment().format('YYYY-MM-DD')
      
    ]
  ,
  
    moduleName: 'TestFirstTable',
    title: '本月金额',
    aggregate: 'sum',
    fieldName: 'amount',
    unitText: '元',
    filters: [
      
        property: 'startDate',
        operator: 'daysection',
        value: moment().set('date', 1).format('YYYY-MM-DD') + '--' + moment().format('YYYY-MM-DD')
      
    ]
  
]

指标比较的配置：

relatives:[
  section: 'week',
  section: 'week',
    monthOnMonth: true,
  section: 'month',
  section: 'month',
    monthOnMonth: true
]

图表的配置：

chart:
  type: 'area',
  sectionType: 'month'

其他设置：

response : 
  xs: 24,
  sm: 24,
  md: 24,
  lg: 6,
  xl: 6,
  xxl: 6,

保存后关闭后，可以直接预览：

再制作一个图表组件：

新建一条记录，实体对象选择首个测试模块，组件名称：首个测试模块图表组件，类型选择：antd图表方案，顺序号：20，响应式参数：3

dataSet配置：

title : '金额按--分组柱状图',
description: '所有金额照分组柱状图',
datasetProperty : [ 
  moduleName : 'TestFirstTable',
  fields:[  fieldname : 'sum.amount' , 
  title : '金额',
  unitText : '元'  ],
  groupfieldid: 
            fieldname: 'startDate',
            function: 'yyyy年',
  categoryName : '年度' ,
  menuText: '年度',
  orderby : '年度', 
  orderDesc:false,
  maxCount :12,
  otherTitle:'其他'
, 
  moduleName : 'TestFirstTable',
  fields:[  fieldname : 'sum.amount' , 
  title : '金额',
  unitText : '元'  ],
  groupfieldid: 
      fieldahead : 'pubcountrycode',
  categoryName : '国家地区' ,
  menuText: '国家地区',
  orderby : '金额', 
  orderDesc:true,
  maxCount1 :12,
  otherTitle:'其他'

]

图表的配置：

type:'column',
config:[
    xField: '年度',
    yField: '金额',
    xAxis: 
      label: 
        autoHide: true,
        autoRotate: false
      
    
  ,
    xField: '国家地区',
    yField: '金额',
    slider:,
    sliderVisibleCount : 10,
    xAxis: 
      label: 
        autoHide: true,
        autoRotate: false
      
    
  ]

其他设置：

response : 
  xs: 24,
  sm: 24,
  md: 24,
  lg: 18,
  xl: 18,
  xxl: 18,

保存后，预览如下：

至此基本界面如下：

8、加入审批工作流

创建和设计模块工作流

加入工作流也很简单，创建一个工作流，画出流程图，并按照约定设置一些参数即可。

在工作流定义菜单中新建，选择实体对象为首个测试模块，输入工作流名称：首个测试模块工作流。

在流程文件字段中加入下面的xml配置。

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/test">
  <process id="TestFirstTable" name="首个测试模块工作流" isExecutable="true">
    <startEvent id="start" name="审批开始">
      <outgoing>Flow_03uv1fe</outgoing>
    </startEvent>
    <sequenceFlow id="Flow_03uv1fe" sourceRef="start" targetRef="fzr" />
    <sequenceFlow id="Flow_0c2x96b" name="发送审请" sourceRef="fzr" targetRef="jl" />
    <exclusiveGateway id="Gateway_1j3zd7r">
      <incoming>Flow_0irldx0</incoming>
      <outgoing>ok2</outgoing>
      <outgoing>return2</outgoing>
    </exclusiveGateway>
    <sequenceFlow id="Flow_0irldx0" sourceRef="jl" targetRef="Gateway_1j3zd7r" />
    <sequenceFlow id="ok2" name="同意申请" sourceRef="Gateway_1j3zd7r" targetRef="zjl">
      <extensionElements>
        <activiti:properties>
          <activiti:property name="type" value="primary" />
          <activiti:property name="orderno" value="1" />
        </activiti:properties>
      </extensionElements>
      <conditionExpression xsi:type="tFormalExpression">$outgoingid=='ok2'</conditionExpression>
    </sequenceFlow>
    <endEvent id="okend" name="审批通过">
      <incoming>ok3</incoming>
    </endEvent>
    <sequenceFlow id="ok3" name="同意申请" sourceRef="Gateway_0s1ltog" targetRef="okend">
      <extensionElements>
        <activiti:properties>
          <activiti:property name="type" value="primary" />
          <activiti:property name="orderno" value="1" />
          <activiti:property name="tooltip" value="同意了事件的申请" />
        </activiti:properties>
      </extensionElements>
      <conditionExpression xsi:type="tFormalExpression">$outgoingid=='ok3'</conditionExpression>
    </sequenceFlow>
    <userTask id="fzr" name="负责人审批">
      <extensionElements>
        <activiti:taskListener delegateExpression="$workFlowTaskAssignCurrentUserImpl" event="create" />
      </extensionElements>
      <incoming>Flow_03uv1fe</incoming>
      <incoming>return2</incoming>
      <incoming>return3</incoming>
      <outgoing>Flow_0c2x96b</outgoing>
    </userTask>
    <userTask id="jl" name="经理审批" activiti:assignee="ff808081742de46c017432874b5a001c">
      <incoming>Flow_0c2x96b</incoming>
      <outgoing>Flow_0irldx0</outgoing>
    </userTask>
    <userTask id="zjl" name="总经理审批" activiti:assignee="402882e562f6d0b40162f73d4482015c">
      <incoming>ok2</incoming>
      <outgoing>Flow_1r8sl77</outgoing>
    </userTask>
    <sequenceFlow id="return2" name="重新修改" sourceRef="Gateway_1j3zd7r" targetRef="fzr">
      <extensionElements>
        <activiti:properties>
          <activiti:property name="orderno" value="2" />
        </activiti:properties>
      </extensionElements>
      <conditionExpression xsi:type="tFormalExpression">$outgoingid=='return2'</conditionExpression>
    </sequenceFlow>
    <exclusiveGateway id="Gateway_0s1ltog">
      <incoming>Flow_1r8sl77</incoming>
      <outgoing>ok3</outgoing>
      <outgoing>cancel3</outgoing>
      <outgoing>return3</outgoing>
    </exclusiveGateway>
    <sequenceFlow id="Flow_1r8sl77" sourceRef="zjl" targetRef="Gateway_0s1ltog" />
    <endEvent id="cancelend" name="终止项目">
      <incoming>cancel3</incoming>
    </endEvent>
    <sequenceFlow id="cancel3" name="不同意申请" sourceRef="Gateway_0s1ltog" targetRef="cancelend">
      <extensionElements>
        <activiti:properties>
          <activiti:property name="orderno" value="3" />
          <activiti:property name="danger" value="true" />
          <activiti:property name="icon" value="x-fa fa-close" />
        </activiti:properties>
      </extensionElements>
      <conditionExpression xsi:type="tFormalExpression">$outgoingid=='cancel3'</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="return3" name="重新修改" sourceRef="Gateway_0s1ltog" targetRef="fzr">
      <extensionElements>
        <activiti:properties>
          <activiti:property name="orderno" value="2" />
        </activiti:properties>
      </extensionElements>
      <conditionExpression xsi:type="tFormalExpression">$outgoingid=='return3'</conditionExpression>
    </sequenceFlow>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="TestFirstTable">
      <bpmndi:BPMNEdge id="Flow_1rqln26_di" bpmnElement="return3">
        <omgdi:waypoint x="840" y="125" />
        <omgdi:waypoint x="840" y="60" />
        <omgdi:waypoint x="270" y="60" />
        <omgdi:waypoint x="270" y="110" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="533" y="42" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_164kg1p_di" bpmnElement="cancel3">
        <omgdi:waypoint x="840" y="175" />
        <omgdi:waypoint x="840" y="230" />
        <omgdi:waypoint x="942" y="230" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="875" y="213" width="55" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1r8sl77_di" bpmnElement="Flow_1r8sl77">
        <omgdi:waypoint x="760" y="150" />
        <omgdi:waypoint x="815" y="150" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_09a3318_di" bpmnElement="return2">
        <omgdi:waypoint x="570" y="175" />
        <omgdi:waypoint x="570" y="230" />
        <omgdi:waypoint x="270" y="230" />
        <omgdi:waypoint x="270" y="190" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="398" y="212" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_05296wq_di" bpmnElement="ok3">
        <omgdi:waypoint x="865" y="150" />
        <omgdi:waypoint x="942" y="150" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="881" y="132" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_11ovdqn_di" bpmnElement="ok2">
        <omgdi:waypoint x="595" y="150" />
        <omgdi:waypoint x="660" y="150" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="606" y="132" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0irldx0_di" bpmnElement="Flow_0irldx0">
        <omgdi:waypoint x="480" y="150" />
        <omgdi:waypoint x="545" y="150" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0c2x96b_di" bpmnElement="Flow_0c2x96b">
        <omgdi:waypoint x="320" y="150" />
        <omgdi:waypoint x="380" y="150" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="328" y="132" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_03uv1fe_di" bpmnElement="Flow_03uv1fe">
        <omgdi:waypoint x="168" y="150" />
        <omgdi:waypoint x="220" y="150" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_0b6aorl_di" bpmnElement="start">
        <omgdc:Bounds x="132" y="132" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="128" y="175" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Gateway_1j3zd7r_di" bpmnElement="Gateway_1j3zd7r" isMarkerVisible="true">
        <omgdc:Bounds x="545" y="125" width="50" height="50" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_11jkv3i_di" bpmnElement="okend">
        <omgdc:Bounds x="942" y="132" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="938" y="175" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0h05pcj_di" bpmnElement="fzr">
        <omgdc:Bounds x="220" y="110" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0vbpi4v_di" bpmnElement="jl">
        <omgdc:Bounds x="380" y="110" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0jfemdt_di" bpmnElement="zjl">
        <omgdc:Bounds x="660" y="110" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Gateway_0s1ltog_di" bpmnElement="Gateway_0s1ltog" isMarkerVisible="true">
        <omgdc:Bounds x="815" y="125" width="50" height="50" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0bfy2bc_di" bpmnElement="cancelend">
        <omgdc:Bounds x="942" y="212" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="938" y="255" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>

保存后，按操作里面的第一个按钮进行设计。设计的工作流如下：