数据表的设计

数据表设计分为：表单设计和菜单模块设计。
表单设计（存储拖拽表单的内容）：
vue自定义表单：记录拖拽表单创建的表信息。
vue自定义表字段：记录拖拽表单的详细字段信息。

菜单模块设计：
vue自定义菜单模块：存储菜单及列表的展示规则。
vue自定义菜单字段模块：存储标注具体的展示字段内容。
image.png

vue自定义表单-数据表分析

字段解析

类型（type）：0主表、1子表
主表id（main_id）：如果是主子表内容，则子表中会记录主表的id。
所属分类（classify）：备用字段（后期可能作为表单 分类处理）
表单名称（table_comment）：表的中文名称
数据表名称（table_name）：记录生成的数据表名称
表内容（table_content）：存储拖拽表单的规则信息
其他字段为默认字段
image.png

重点字段解析

主表id（main_id）的使用场景

如果不使用动态表格，则默认是单表，单表中main_id是为空的，不存储信息，如果使用了动态表格，每一个动态表格相当于一张子表，则会将动态表格的字段名称创建为数据表-为子表，则主表id（main_id）则为对应的表单的主表。image.png
image.png

表单名称、数据表名称使用场景

在拖拽表单-表单属性设置中的表单名称和数据表名称一一对应，会默认展示tablexxxx，也可以根据自己的情况修改。
image.png
如何修改表前缀：table。
image.png

表内容使用场景

在拖拽表单完成后，会存储拖拽表单的规则信息，如下：
image.png

  1. {
  2.     "list": [
  3.         {
  4.             "type": "input",
  5.             "label": "输入框",
  6.             "options": {
  7.                 "type": "text",
  8.                 "width": "100%",
  9.                 "defaultValue": "",
  10.                 "placeholder": "请输入",
  11.                 "clearable": false,
  12.                 "maxLength": null,
  13.                 "addonBefore": "",
  14.                 "addonAfter": "",
  15.                 "hidden": false,
  16.                 "disabled": false
  17.             },
  18.             "model": "input_1638711068691",
  19.             "key": "input_1638711068691",
  20.             "help": "",
  21.             "rules": [
  22.                 {
  23.                     "required": false,
  24.                     "message": "必填项"
  25.                 }
  26.             ]
  27.         },
  28.         {
  29.             "type": "input",
  30.             "label": "输入框",
  31.             "options": {
  32.                 "type": "text",
  33.                 "width": "100%",
  34.                 "defaultValue": "",
  35.                 "placeholder": "请输入",
  36.                 "clearable": false,
  37.                 "maxLength": null,
  38.                 "addonBefore": "",
  39.                 "addonAfter": "",
  40.                 "hidden": false,
  41.                 "disabled": false
  42.             },
  43.             "model": "input_1638711071542",
  44.             "key": "input_1638711071542",
  45.             "help": "",
  46.             "rules": [
  47.                 {
  48.                     "required": false,
  49.                     "message": "必填项"
  50.                 }
  51.             ]
  52.         },
  53.         {
  54.             "type": "batch",
  55.             "label": "动态表格",
  56.             "list": [
  57.                 {
  58.                     "type": "input",
  59.                     "label": "输入框",
  60.                     "icon": "icon-write",
  61.                     "options": {
  62.                         "type": "text",
  63.                         "width": "100%",
  64.                         "defaultValue": "",
  65.                         "placeholder": "请输入",
  66.                         "clearable": false,
  67.                         "maxLength": null,
  68.                         "addonBefore": "",
  69.                         "addonAfter": "",
  70.                         "hidden": false,
  71.                         "disabled": false
  72.                     },
  73.                     "model": "input_1638711067146",
  74.                     "key": "input_1638711067146",
  75.                     "help": "",
  76.                     "rules": [
  77.                         {
  78.                             "required": false,
  79.                             "message": "必填项"
  80.                         }
  81.                     ]
  82.                 },
  83.                 {
  84.                     "type": "input",
  85.                     "label": "输入框",
  86.                     "icon": "icon-write",
  87.                     "options": {
  88.                         "type": "text",
  89.                         "width": "100%",
  90.                         "defaultValue": "",
  91.                         "placeholder": "请输入",
  92.                         "clearable": false,
  93.                         "maxLength": null,
  94.                         "addonBefore": "",
  95.                         "addonAfter": "",
  96.                         "hidden": false,
  97.                         "disabled": false
  98.                     },
  99.                     "model": "input_1638710920085",
  100.                     "key": "input_1638710920085",
  101.                     "help": "",
  102.                     "rules": [
  103.                         {
  104.                             "required": false,
  105.                             "message": "必填项"
  106.                         }
  107.                     ]
  108.                 },
  109.                 {
  110.                     "type": "input",
  111.                     "label": "输入框",
  112.                     "icon": "icon-write",
  113.                     "options": {
  114.                         "type": "text",
  115.                         "width": "100%",
  116.                         "defaultValue": "",
  117.                         "placeholder": "请输入",
  118.                         "clearable": false,
  119.                         "maxLength": null,
  120.                         "addonBefore": "",
  121.                         "addonAfter": "",
  122.                         "hidden": false,
  123.                         "disabled": false
  124.                     },
  125.                     "model": "input_1638710921416",
  126.                     "key": "input_1638710921416",
  127.                     "help": "",
  128.                     "rules": [
  129.                         {
  130.                             "required": false,
  131.                             "message": "必填项"
  132.                         }
  133.                     ]
  134.                 }
  135.             ],
  136.             "options": {
  137.                 "scrollY": 0,
  138.                 "disabled": false,
  139.                 "hidden": false,
  140.                 "showLabel": false,
  141.                 "hideSequence": false,
  142.                 "width": "100%"
  143.             },
  144.             "model": "batch_1638710917066",
  145.             "key": "batch_1638710917066",
  146.             "help": ""
  147.         }
  148.     ],
  149.     "config": {
  150.         "layout": "horizontal",
  151.         "labelCol": {
  152.             "xs": 4,
  153.             "sm": 4,
  154.             "md": 4,
  155.             "lg": 4,
  156.             "xl": 4,
  157.             "xxl": 4
  158.         },
  159.         "labelWidth": 100,
  160.         "labelLayout": "flex",
  161.         "wrapperCol": {
  162.             "xs": 18,
  163.             "sm": 18,
  164.             "md": 18,
  165.             "lg": 18,
  166.             "xl": 18,
  167.             "xxl": 18
  168.         },
  169.         "hideRequiredMark": false,
  170.         "customStyle": "",
  171.         "table_name": "table_1638710915110",
  172.         "table_comment": "table_1638710915110"
  173.     }
  174. }

vue自定义表字段-数据表分析

字段解析

类型（type）：备用字段（青锋所有数据表都会设计类型字段，用于功能拓展）
表id（table_id）：对应字段的主表的id。
字段名称（field_name）：字段名称。
字段类型（field_type）：字段类型
字段描述（field_comment）：字段描述
字段key（field_key）：字段key
其他字段为默认字段
image.png

重点字段解析

字段类型（type）

text、select、checkbox、radio、treeSelect、cascader等。
image.png

字段key（field_key）

如：input_1638711068691，在设计拖拽表单过程中，一直保持不变的元素。作用，可以判断这个字段是否存在，存在则进行更新操作，不存在则进行字段或者子表的新增操作。
image.png

vue自定义菜单模块-数据表解析

字段解析

类型（type）：0普通表单 、 1流程表单
模块名称（name）：模块名称。
表id（table_id）：对应数据表的主表id。
条件约束（query_cond）：条件约束。
表排序（main_order）：表排序。
开启流程（open_process）：0 开启 1 关闭
流程定义id（process_id）：流程定义id，当开启流程，open_process=0时，才设置流程定义id。
状态类型（status_type）：0关闭、1单启用、2多启用
其他字段为默认字段
image.png

重点字段解析

条件约束（query_cond）

设置额外的约束条件，使用场景案例如下：
在数据表中有字段类型：0=新闻模块，1通知公告模块
可以创建2个菜单，分别管理新闻和通知公告， 新闻菜单的约束条件设置为： and mk_type=’0’，通知公告菜单的约束条件设置为：and mk_type=’1’
image.png

表排序（main_order）

在实际过程中，想根据某个字段进行排序，比如时间，状态等，可以在这里设置数据表的排序规则，如果不设置则根据数据创建时间倒叙排列，设置案例： order by status asc, create_time desc 先根据状态升序，再根据状态倒叙。
image.png

开启流程+流程定义id

拖拽表单分为两种表单：
1、普通表单，比如台账的记录，可以使用普通表单。
2、流程表单，需要审批的表单，如请假表单、报销表单等，可以使用流程表单。
如果选择开启流程、则需要选择流程定义id，说表单为流程表单，否则为普通表单。
image.png

状态类型（status_type）

状态类型分为三种模式
不适用状态控制：【0关闭】
使用单启用状态控制：【1单启用】
使用多启用状态控制：【2多启用】
大家可能会对这个状态的意义产生疑问，我举例说明下：
案例一：
比如创建一个登录协议模块，用于管理登录页面中的法律协议说明，默认只能添加一条数据，在前端查询的时候也只会查询一条数据，在这种情况下可以使用单启用，永远只有一条状态处于启用或者激活状态。当启用其他停用的数据时，会将目前启用的数据停用。
案例二：
比如创建新闻模块，新闻模块会重试有多条数据处于启用，但是想下掉某一条新闻，又不想删除，这时候可以使用多启用功能，任何一条数据都可以进行启用或者停用操作。

vue自定义菜单字段模块

字段解析

类型（type）：备用字段
菜单模块id（menu_id）：菜单模块id。
表id（table_id）：对应数据表的主表id。
字段id（field_id）：对应数据表下的字段id。
字段名称（field_name）：字段名称。
列表显示（field_list）：0显示 1不显示。
查询字段（field_query）：0查询 1不查询。
查询方式（query_type）：查询方式。
链接字段（field_link）：链接字段。
字段宽度（field_width）：字段宽度，列表页面的宽度值设置、列表宽度(px)。
其他字段为默认字段
image.png

重点字段解析

查询方式（query_type）

  1.  <a-select-option value="="> = </a-select-option>
  2.  <a-select-option value="!="> != </a-select-option>
  3.  <a-select-option value=">"> > </a-select-option>
  4.  <a-select-option value=">="> >= </a-select-option>
  5.  <a-select-option value="<"> < </a-select-option>
  6.  <a-select-option value="<="> <= </a-select-option>
  7.  <a-select-option value="like"> like </a-select-option>
  8.  <a-select-option value="is null"> is null </a-select-option>
  9.  <a-select-option value="is not null">