mysql自定义表单数据表设计

1.主体表
该表主要存储主体的内容信息
示例

CREATE TABLE `fa_user_type` (
  `id` int(255) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '类型名称',
  `remarks` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '备注',
  `admin_id` int(20) DEFAULT NULL COMMENT '创建人ID',
  `createtime` int(20) DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户类型';

2.表单添加表
该表与主体表关联存储表单内容
示例

CREATE TABLE `fa_user_form` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_type_id` int(10) NOT NULL COMMENT '用户类型ID',
  `type` int(10) DEFAULT NULL COMMENT '1 单行文本 2 多行文本 3 多图上传 4 视频上传',
  `form_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  `sort` int(10) DEFAULT '0' COMMENT '排序大小',
  `form_desc` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '介绍',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

3.用户提交表单数据表
该表存储用户前端的提交数据 pid的作用是第一条表单的数据父级其他皆为父级下面的子级数据

CREATE TABLE `fa_user_form_data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(10) DEFAULT NULL COMMENT '用户ID',
  `user_type_id` int(10) DEFAULT NULL COMMENT '用户类型ID',
  `user_form_id` int(10) DEFAULT NULL COMMENT '自定义表单ID',
  `type` int(10) DEFAULT '0' COMMENT '自定义表单类型',
  `createtime` int(20) DEFAULT NULL COMMENT '创建时间',
  `data` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '数据',
  `pid` int(10) DEFAULT '0' COMMENT '父级ID',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='表单数据';

前端对接主要是表单的展示和数据提交以及数据列表的展示
1.自定义表单数据
在这里插入图片描述
2.用户数据提交 我这里用的是表单id和提交数据 键值对的方式
示例
{1:“检测报告”,7:"/assets/img/no_image.jpg"}

3.列表查询就查询表单数据表

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现上述需求,你可以按照以下步骤进行操作: 1. 创建一个树形结构的列,用于展示数据源和数据表。可以使用Element UI的`el-tree`组件来实现。在点击数据表节点时,触发相应的事件来调用后端接口获取动态表单的数据列、筛选方式列字段信息列。 2. 在动态表单组件中,使用Grid布局结合栅格布局来实现自适应展示。可以使用Element UI的`el-row`和`el-col`组件进行布局。每个网格中可以分为三个栅格,分别用于展示筛选条件标签、筛选方式和输入框。 3. 根据页面弹框的可视化形式展示数据表的所有字段。你可以使用Element UI的`el-dialog`组件作为弹框容器,并在弹框中展示数据表的字段列。 4. 提供一个简单的勾选操作,供用户自定义配置筛选条件以及是否为查询结果字段。你可以使用Element UI的`el-checkbox`组件来实现勾选操作。 5. 配置完毕后,用户点击确定按钮时,调用后端接口将最新一次自定义配置的筛选条件相关参数保存在MySQL的参数中。你可以使用Vue的异步请求库(如axios)来发送请求。 在实现过程中,你需要编写前端代码来处理事件、渲染界面和发送请求,同时也需要后端代码来处理请求,将配置参数保存到MySQL中。具体的实现细节还需要根据你的具体业务需求进行调整和完善。 希望这个指引能帮助你开始实现动态表单和参数配置的功能。如果你有任何其他问题,请随时提问!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值