01.可视化表单界面介绍

# 表单采用技术

前端采用Vue、Element UI、ant-design UI、JqueryTemplate、codemirror、html2canvas、monaco、jsplumb。

后端采用Spring Boot、Spring Security、Redis & Jwt。

权限认证使用Jwt，支持多终端认证系统。

支持加载动态权限菜单，多方式轻松权限控制。

高效率开发，使用代码生成器可以一键生成前后端代码。

自主研发的流程引擎

结合jsplumb可视化流程配置，轻松在线配置各种业务流转。

动态Mybatis接口引擎，可在线编辑，编辑可立马生效，只要符合Mybatis配置语法接口功能就能实现。

表单设计器引擎，提供丰富的UI组件，皮肤，可在线编辑源码，无码实施各种应用。

特别鸣谢：element，ant-design UI，vue-element-admin，eladmin-web，感谢若依。

# 表单缓存说明

主要使用的Redis来进行相关数据缓存，例如当前登录用户信息，动态 Api，菜单，权限，字典，动态dbApi都是第一次从数据库中查询后面就在redis,缓存，特别是遇到动态接口频繁调用时，降低数据库的请求，提高性能。

主要使用的Redis来进行相关数据缓存，例如当前登录用户信息，动态 Api，字典都是第一次从数据库中查询后面就在redis,缓存，特别是遇到动态接口频繁调用时。

Redis版本没什么要求（不过建议使用Redis4.xt），如果是本地开发环境，建议使用windows版本的Redis，生产环境由服务器操作系统决定。为了保持简搭云可视化表单系统配置中通过密码方式连接Redis，建议在Redis 配置中配置密码连接。

# 表单环境要求说明

JDK >= 1.8

MySQL >= 5.7

Maven > = 3.0

Node = 16

Redis >= 3

# 表单系统部署说明

# 前端部署说明

1)开发环境运行模式

设置淘宝镜像

   npm config set registry https://registry.npm.taobao.org

安装可视化表单依赖

   npm install

本地运行程序

    npm run serve

前端开发环境的配置信息：src\configs\serve.js

  {
  apiUrl: "/api",///后端代理名称
  title: "简搭云管理系统",//系统名称
  logo: "/logo.png",//系统图标
  author: "简搭云科技通用管理系统快速开发框架", //系统描述
  isdevtool: false,//是否开发版本
  versiontype: "form",//系统版本
  webUrl: 'http://localhost:8083/',//前端访问地址
  apiwebUrl: 'http://localhost:8080', ///后端访问地址
  isdemoWeb: false,//是否demo
  websocketurl: 'ws://localhost:8080/WebSocket/sendMessage' //webSockect请求地址，用于微信小程序扫码登录，用于扫码问卷调查，用于消息通知
}

1
2
3
4
5
6
7
8
9
10
11
12

配置前端代理后端Api接口请求配置找到：vue.config.js文件

代码如下：

configureWebpack: () => {
    const myConfig = {};
    myConfig.plugins = [];
    myConfig.devServer = {
      disableHostCheck: true, //  禁用webpack热重载检查 解决热更新失效问题
      host: "localhost",
      port: 8083,
      https: false,
      proxy: {
        "/api": {
          // 要请求的后台地址113.240.220.22\http://localhost:8181/net3vs
          target: "http://localhost:8080", ///配置代理后端请求地址 
          ws: true, // 启用websockets
          changeOrigin: true, // 是否跨域
          pathRewrite: {
            "^/api": "" // 这里理解成用路径中的‘/dev/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
          }
        }
      }
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2)生产环境运行编译打包

运行命令如下：

    npm run build

使用 npm run build命令编译后会将src\configs\build.js的配置信息替换到src\configs\index.js，最终生效的文件只有：src\configs\index.js

# 后端部署说明

打开配置文件：application-dev.yml

数据库配置：

    druid:
      # 主库，也是基础库，包含所有部门，人员，角色，菜单，在线表单基础表，OA流程的表，在线表报设计表等等。
      master:
        url: jdbc:mysql://127.0.0.1:3306/kylin2.0?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
        username: root
        password: root@123
      # 表单业务库 初始化可以是一个空库，可视化表单设计完成后创建的表就是放入在表单业务库中
      slave:
        # 从数据源开关/默认关闭
        enabled: true
        url: jdbc:mysql://localhost:3306/formdata?useSSL=false&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=CONVERT_TO_NULL&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai&autoReconnect=true&autoReconnectForPools=true&connectTimeout=30000&socketTimeout=60000
        username: root
        password: root@123

1
2
3
4
5
6
7
8
9
10
11
12
13

redis配置：

redis:
  # 地址
  host: localhost
  # 端口，默认为6379
  port: 6379
  # 数据库索引
  database: 0
  # 密码
  password: 123456
  # 连接超时时间
  timeout: 10s

1
2
3
4
5
6
7
8
9
10
11

小程序扫码登录配置：

# 微信配置
wx:
  mp:
    configs:
        appId: #小程序AppId
        secret: #小程序secret
        token:#小程序token
        aesKey:#小程序aesKey

1
2
3
4
5
6
7
8

# 表单系统核心功能有

简搭云可视化表单系统集成在若依平台中，所以它继承了若依所有的功能，新增的核心功能有：

1.动态DB接口管理：表单设计保存后，增，删，查，统计，导出的接口会生成在动态接口中，动态接口也可以手动在线编辑。- 详细操作

2.应用表单管理：包含四种模式，普通表单，视图表单，本地表表单，指定Api表单 - 详细操作

普通表单：设计表单完成后保存时，会自动创建物理表单表结构，增，删，改，查，导出，统计，列表查询接口，并会提供一个公共的列表页面，统计报表页面。

视图表单：是选择一个表单或者选择动态DBApi接口，可生成一个列表查询的表单，表单保存后不生成物理表结构和动态接口。

本地表表单：是选择已存在的物理表，配置物理表单之间的关系，可生成一个增、改、查的表单详细页面，保存后会生成增，删，改，查动态Api接口。

指定Api表单：是选择两个Api，查看的Api，保存的Api，生成对应的详细信息的表单。

3.报表设计

4.流程平台-详细操作

流程分类：将流程进行分类，更方便的查找对应流程。

消息通知模板：可以定义不同消息通知模板，配置到流程中，这样通知的消息和内容就可以多样化。

自动编码：主要针对自动编码组件，当页面第一次进入时就生成一个唯一的编码。

流程表单：主要针对流程业务创建的表单系统。

流程模板：通过可视化界面配置流程的流转走向。

流程运维：流程在实施阶段或者在正式运行场景中，流程因数据不完整性，配置错误，网络等问题导致流程无法正常运行出现异常，都会显示在这里，我们可以通过更改表单数据，网络恢复正常时重新提交，使得流程能正常运转。

流程发起：用户统一发起流程的页面。

我的待办：用户收到一个流程的待办，抄送，沟通的件需要处理，就会显示在这里。

我的草稿：用户通过发起界面，暂存的流程就是草稿。

我的发起：用户发起的流程显示列表。为了方便发起人员对流程的跟进与跟踪。

已办已阅：用户处理过的流程显示的列表。

通知管理：收到流程平台发出的通知信息的列表。

5.问卷调查模块详细操作

问卷表单：创建一个问卷调查的表单，并设置问卷调查的规则。

待填问卷：当前用户收到的问卷调查，待填写问卷调查。

已填问卷：当前用户已经填写过的问卷调查

已发问卷：当前用户已发起的问卷。

# 可视化表单设计器

# 整体介绍

可视化表单设计器实施各种应用实现原理： avatar

从图形设计中可以看出可视化平台主要由两个部分构成，表单设计器与mybatis语法解析引擎构成。

可视化表单设计器是基于vue，element-ui框架实现的表单设计器，只需拖拽设置属性轻松开发各种表单。拖拽设计生成表单json，表单json可转化成各种源码，表结构，Mybatis语法接口。提供给可视化表单重复编辑，各版本备份功能。

Mybatis语法解析引擎是将处理前端提交过来动态json，并将动态json和Mybatis语法解析生成数据库可执行的sql语句，从而达到与数据库交互的目的。

可视化表单设计未来扩展思维导向图如下：

avatar

从思维导向图可以看出，UI框架只要能在客户端能够直接预览编译，就可以集成可视化表单设计器，也可以根据不同业务定义不同逻辑代码生成，从而形成各种可视化系统构建，如：流程表单系统，问卷调查数据收录系统，门户网站建设系统，各种后端管理系统构建，手机应用系统，可视化大屏监控等等

# 表单设计器优缺点

可视化表单最大的优势是直接代码直接渲染，而非JSON一系列组件组合性渲染，市面上大部分大JSON表单都是这种渲染，如：vue-form-making，k-form-designjson，form-genetator，FormMarking等等，装载组件中渲染模式存在很多代码黑盒，里面很多逻辑是不清楚的，想扩展困难，如果实现复杂一点功能需要更复杂的处理方式去解决。这种模式具有高度聚合性，聚合性越高，后期的维护成本就越高，改动其一牵动其全身，扩展性也会越低。vue源码直接渲染模式，只要符合vue语法风格，就能渲染，充分继承了vue强大的扩展性，可读性，聚合性，复用性，封装性等特点，它也可以集成市面上所有vue组件。如echart，datav，饿了么UI，百度地图，高德地图，antUI，以及各种自定义组件。可视化表单是拖拽式设计，源码编辑逻辑双剑合并，无往不利。

1.可在线源码编辑js和css代码功能实现各种业务需求和界面风格。

2.提供了双击控件创建控件事件和事件属性栏，轻松自定义定义事件。

3.提供源码编辑各种智能提示，右击快速生成代码模式，辅助编辑代码更简单。

4.完美的解决拖拽生成逻辑代码与手工编写代码无冲突，并完美合并。

5.调试也非常简单，在源码编辑中输入debugger，各种浏览器 F12轻松进入调试一步一步定位错误，解决错误。

6.因为是符合vue语法的源码，遇到复杂的功能可下载到本地二次开发，无需从零开始。

7.每个设置好的组件，模块可以保存入控件库，可以将常用，通用，优秀设计组件入库，下次只需拖拽即可，

8.表单模板套用，设计优秀的表单可以入模板库，下次可加载模板，修改无需从零开始。

9.vue源码采用jquery+jquerytemplate模板生成，根据不同业务，框架生成不同风格，业务，框架的代码，如目前我的框架中有5个模板，分别是如适应饿了吗ui框架，阿里的ui框架，问卷调查类，大屏大数据分析类，流程表单类等等，我们可以根据不同的业务制定生成不同风格的代码。也可以生成appui，小程序语法代码等。

10.集成组件非常容易，四步完成轻松完成一个组件集成，后续会单独讲解。

1.局部注册，

2.定义组件配置，

3.可视化设计渲染，

4.vue源码生成模板增加生成块。

11.组件属性扩展，组件属性配置，组件事件配置集成只需在配置文件配置就可以了。

12.结合了mybatis语法解析引擎，设计好表单后，表结构，mybatis的增删改查，导出，查询，报表统计的接口即可生成好，可以到达无码开发，设计好功能就好了。

13.集成了在线编写mybatis语法管理功能，可对生成好的接口进行编辑，也可以自定义新增各种接口。

14.mybatis语法接口也可以在java代码中调用。

15.对后端swagger接口配置和在线接口的集成，可选择对应swagger接口，可以配置调用规则。弥补mybatis语法引擎接口的不足，处理更复杂的业务接口。

# 初识可视化表单设计器

我们将设计器分为如下10个区域： avatar

# 【1】操作区1

按钮依次作用说明

控制左右面板（【2】【5】号）显示/隐藏
终端适配设计切换（Pc、 Pad、 Mobile）
全屏/退出

# 【2】左侧面板

控件面板

展示表单设计器可以通过拖拽/单击来操作的控件，并根据控件功能的不同分别整合为布局控件、基础控件、平台控件。

共享组件

字段控件是拥有非常多属性，通过设置后才能达到一个通用字段控件的效果，这个时候我们可以保存，下次可直接拖拽设计区域，设置的属性会自动带入，也可多个组件组合一起保存为自定义布局控件。

逻辑配置

逻辑配置是监控属性发生变化时，触发事件，可以通过配置触发我们想要的效果，如各种联动，隐藏，计算等等。

主题选择

目前主题是为适应问卷调查功能产生的。可以通过选择不同的主题，更改表单的背景与头部图片。
模板套用

模板套用是我们创建的历史所有的表单，如果A功能与B功能相似，可通过加载，避免重复设计工作。
帮助

后续是一个常见问题汇众总区域，点击链接可告知你如何操作。

# 【3】操作区2

预览预览是将当前设计的表单内容进行预览显示，因为是源码预览，如果生成的vue源码报错，也将会导致预览失败。预览前会对表单控件属性进行检查，如果控件属性设置不正确会出现如下图
源码

源码是查看当前设计表单切换成【8】、【9】【10】区域模式，可以查看生成的vue源码，也可以在线编辑js逻辑代码和css逻辑代码。切换前会对表单控件属性进行检查，具体的请参考【预览】操作。

设计

设计是将当前源码模式，切换成设计模式，切换前会对js逻辑代码语法进行检查，如果js逻辑代码语法存在错误，就切换不了。

升级表单

升级表单一般情况下是不显示的，只有当前设计的表单JSON内容与当前设计器版本不一致时才会显示，点击升级表单可将旧的表单升级为最新版本。
保存

保存也是发布，保存后会生成动态接口，与物理表。具体的接口查看请参考【五、简搭云动态接口】

查看json

查看Json就是查看表单设计时生成JSON格式。用于查找问题，定位问题。

导入

可将导出的设计表单的json，导入到表单设计中，
导出

导出是将当前设计表单的json格式进行导出。
导出vue

将当前设计的表单生成的vue源码进行导出到本地。
清空

清空表单设计的所有控件，重新进行开发。

# 【4】表单布画

可对表单字段进行拖拽调整位置、绑定事件、保存为共享，复制、删除等操作

avatar

事件

点击事件，表单设计会切换源码模式，并会给控件绑定默认的事件，找到对应事件名称，可以在里面编写js代码。
保存

点击保存，将已设置好属性的组件保存到共享，下次可直接从共享中拖拽至表单设计器中。
复制

复制就是将当前选中的组件进行复制。
删除

删除当前选中的组件。

# 【5】控件属性

对当前选中表单控件的属性、样式，绑定数据，验证等配置。具体的控件属性查看请参考【控件属性说明】

# 【6】控件事件

avatar

对当前选中的控件，创建绑定的事件。创建事件之后，需要切换源码，找到对应事件方法中编辑逻辑代码。具体的控件属性查看请参考【控件事件说明】

# 【7】表单属性

avatar

对表单基本属性进行配置。

表单名称：设置该表单的名称
表单编码：设置表单的编码，只能输入英文和数字并且以英文字母开头。
表单描述：表单的描述

# 【8】vue script代码部分

avatar

显示表单设计生成vue script代码逻辑，并可以在源码中手动添加自定义方法，添加的自定义方法可与表单设计的js逻辑代码进行合并，也可进行调试，调试输入debugger进行调试。

# 【9】vue template代码部分

avatar

表单设计生成vue template部分，但是这个窗口是不可修改的，主要是提供给设计者定位问题的。

# 【10】vue css代码部分

avatar

可在这里编写设置自定义css,编写的css只针对当前表单生效，是私有样式。

# 表单设置

需要表单保存后才会显示表单设置。

# 基础配置

界面如下：

avatar

表单名称：设置该表单的名称
表单编码：设置表单的编码，只能输入英文和数字并且以英文字母开头。此处不可填写。
物理表名：表单生成物理表的表名，不可修改。
编辑模式：是表单生成列表界面后，新增，查看，修改时表单以那种方式打开表单，模式包含：弹出模式，抽屉模式，IE新窗口
宽度：设置弹出表单的宽度。
收集时间:问卷调查表单才会显示，设置问卷调查收集的开始时间和结束时间。
是否填写密码：问卷调查表单才会显示，设置进入问卷调查界面时是否需要填写密码，如果是，就必须填写密码后才能填写。
密码：问卷调查表单才会显示，设置填写的密码，进入问卷调查界面必须输入该密码才能填写。
是否需要登录：问卷调查表单才会显示，否：不需要是系统用户，也可以填写问卷调查，是：必须系统用户才能填写问卷调查。
填写权限：问卷调查表单才会显示，且是否需要登录：是才会显示。系统所有用户：所有的系统用户都可以填写问卷调查表单，指定人：指定的填写人员可填写问卷调查表单。
填写人员：问卷调查表单才会显示，且填写权限：指定人才会显示，可设置具体的人员填写，角色人员，或者部门人员。
填写后是否修改：问卷调查表单才会显示，设置问卷调查填写完成后，是否可以进行修改问卷调查表单。
每人填写次数：问卷调查表单才会显示，设置问卷调查每个人可以填写几次。
数据权限：问卷调查表单不显示，设置表单是否根据若依框架，生成对应数据权限管理。
表单说明：表单描述

# 菜单权限配置

将设计的表单配置到系统菜单中，成为一个独立的应用功能。界面如下：

avatar

上级菜单：设置表单设计的应用功能，放置到那个菜单中。
菜单图标：设置表单设计的应用功能，菜单图标的样式。
菜单名称：指定应用表单的菜单名称。
菜单链接：表单详细、表单列表，设置菜单配置url地址。
按钮权限：菜单链接为：表单列表时才会显示，主要控制对应应用的按钮权限。
授权角色：设置当前菜单那些角色拥有其权限。

是配置表单设计

# 保存接口扩展

配置表单生成的保存接口的扩展，当表单保存时，先调用可视化表单自动生成的接口后，就会调用该接口，这个接口必须符合在线db接口语法。具体语法请参考动态DB接口。 avatar

# 列表接口扩展

配置表单生成的列表接口的扩展，可以设置列表固定的条件。 avatar 示例如： avatar 生成具体接口代码如：

select * from 【表单表名】 where 【新增评估方案__YL代号】='ddd'

条件字段：查询条件字段
查询操作：查询条件运算符，
条件赋值类型：自定义变量:就是条件值。url变量：后端会根据条件值为名，获取url的参数。当前环境变量：获取当前系统的环境变量。
条件值：

# 相关接口

avatar

查询表单相关所有Db接口，也可以在这里进行添加对应DB接口,具体语法请参考：动态DB接口

# 相关表单

avatar

查询表单相关的所有表单。

# 应用表单列表

avatar

查询：根据条件筛选表单设计模板
重置：重置筛选条件
新增：弹出可视化表单设计，新增表单设计模板
批量导出：可将勾选的表单批量导出
批量导入：可将批量导出的表单，导入到系统中，并会更新对应表结构和增、删、改、查、导入、列表Api接口，也可用于dev环境开发，将开发好的表单批量导出，导出后到生产环境再进行导入。
刷新表单缓存：弹出可视化表单设计，新增表单设计模板
修改：对现有表单模板进行修改。
删除：对表单模板进行删除。
预览：对设计的表单进行预览查看。
表单数据：根据表单设计生成的列表页面。