【开源】基于Vue.js的无代码动态表单系统的设计和实现

在这里插入图片描述
$\color{red}{项目编号：S026，文末获取源码。}$

一、摘要
- 1.1 项目介绍
- 1.2 项目录屏
二、功能模块
- 2.1 动态类型模块
- 2.2 动态文件模块
- 2.3 动态字段模块
- 2.4 动态值模块
三、系统设计
- 3.1 用例设计
- 3.2 数据库设计
- - 3.2.1 动态类型表
  - 3.2.2 动态文件表
  - 3.2.3 动态字段表
  - 3.2.4 动态值表
四、系统展示
五、核心代码
- 5.1 查询档案类型
- 5.2 新增档案类型
- 5.3 删除档案子项
- 5.4 编辑档案额外字段
- 5.5 添加档案额外字段
六、免责说明

一、摘要

1.1 项目介绍

基于Vue+SpringBoot+MySQL的无代码平台的表单平台，包括了系统数据中心模块，用来存放管理系统通用的模块，另外分别设计了动态类型模块、动态文件模块、动态字段模块和动态值模块这四大模块，用于实现档案管理系统的核心表单逻辑。

1.2 项目录屏

源码下载

二、功能模块

本文设计的无代码平台的表单系统的包括了系统数据中心模块，用来存放管理系统通用的模块，另外分别设计了动态类型模块、动态文件模块、动态字段模块和动态值模块这四大模块，用于实现档案管理系统的核心表单逻辑。

在这里插入图片描述

2.1 动态类型模块

动态表单类型是灵活的类型，允许自定义表单字段，根据业务情况，表格收集的信息可能会有所不同，动态表单类型允许根据业务需求自由添加、修改或删除表单字段，以满足特定业务需求。动态表单类型可以根据用户的操作和需求，自愿设置输入框、选项等特定页签，提高用户填写表单的效率和体验，采用动态表单类型使管理员更容易管理表单，只需在后台进行相关设置，即可轻松修改、删除或添加表单，提高管理效率。使用动态表单类型可以帮助您避免由于不断变化的业务需求而频繁更改代码，降低软件开发成本，并节省时间和资源，动态表单类型在数据收集、表单管理和开发成本方面具有重要意义，通过采用动态表单类型，可以快速灵活地响应各种业务场景的表单需求，提高用户体验和管理效率。

2.2 动态文件模块

动态文件模块是一种无代码平台表单系统钟，用于显示用户发布的图像、视频和动态信息等文件的模块，动态文件模块让用户更直观地了解感兴趣的人的最新动向，在动态文件模块中，用户可以看到表单的动态内容，以增加用户使用该平台的兴趣和满意度，动态文件模块支持不同类型的文件上传，如照片、视频、音频等，为用户提供更丰富的内容表示，通过动态文件模块，用户可以轻松地分享他们的生活、知识和经验，吸引更多用户的兴趣和参与。用户可以将自己的照片、视频等文件直接上传到动态文件模块，动态文件模块便于用户之间的通信和交互。通过动态文件模块，可以增强用户体验，丰富内容表达，方便文件管理和共享，增强平台的交互性，吸引更多用户加入平台。它可以增加用户的活动性和参与度。

2.3 动态字段模块

动态字段模块是用于在信息管理系统中动态添加、删除或更改字段的模块，随着市场和商业环境的变化，公司必须不断调整其信息管理系统，以满足新的业务需求。动态字段模块可以满足这一需求，使公司能够灵活地添加、删除或更改字段，以跟上业务变化，动态字段模块可帮助公司更好地管理数据，避免数据重复或关键信息丢失，并提高数据的准确性和质量，动态字段模块支持快速添加新字段，这将使组织拥有更多的数据维度和更丰富的数据信息，提高其数据分析能力，并更好地支持其决策，动态字段模块简化了信息管理系统的开发和维护过程，减少了手动工作和编码，并降低了开发和维护成本。动态字段模块对于信息管理系统来说是非常必要的，通过动态字段模块，企业可以灵活地添加、删除或更改字段，以满足不断变化的业务需求，同时提高数据的准确性和质量，增强数据分析能力，改进系统开发和维护，简化活动流程，带来更多业务价值。

2.4 动态值模块

动态值模块是用于记录和管理用户行为以及动态变化数据的软件和应用程序，动态值模块可以记录和反映用户在平台上的活动，如文件的具体字段内容等，可以直观地表达用户的行为和态度，动态值模块分析用户行为，以了解用户的兴趣和需求，并向平台推荐更准确的内容和服务，动态值模块可以深入分析用户行为数据，提取用户需求和痛点，帮助平台制定更准确的产品策略，提高用户满意度，动态值模块为平台运营和决策提供有价值的数据支持，优化运营策略，提高市场竞争力。

三、系统设计

3.1 用例设计

在这里插入图片描述

3.2 数据库设计

3.2.1 动态类型表

在这里插入图片描述

3.2.2 动态文件表

在这里插入图片描述

3.2.3 动态字段表

在这里插入图片描述

3.2.4 动态值表

在这里插入图片描述

四、系统展示

在这里插入图片描述

五、核心代码

5.1 查询档案类型

@ApiOperation(value = "查询档案类型")
public List<ArCommonArchive> getByParentIdInTree(String parentId,Boolean openDataFilter) {
    List<ArCommonArchive> list = new ArrayList<>();
    QueryWrapper<ArCommonArchive> qw = new QueryWrapper<>();
    qw.eq("parent_id",parentId);
    qw.orderByAsc("sort_order");
    list = iArCommonArchiveService.list(qw);
    list = setInfo(list);
    for (ArCommonArchive arCommonArchive : list) {
        arCommonArchive.setChildren(getByParentIdInTree(arCommonArchive.getId(),openDataFilter));
    }
    return list;
}

5.2 新增档案类型

@SystemLog(about = "新增A档案类型", type = LogType.DATA_CENTER, doType = "CE11")
@ApiOperation(value = "新增A档案类型")
@RequestMapping(value = "/add", method = RequestMethod.POST)
public Result<Object> add(ArCommonArchive archive){
    User currUser = securityUtil.getCurrUser();
    if(isRepeatPrefixArchive(archive.getNumberHeader())) {
        return ResultUtil.error("档案类型前缀已存在,不能重复添加");
    }
    archive.setFilerTime(DateUtil.now());
    archive.setFilerNumber(currUser.getUsername());
    archive.setFilerName(currUser.getNickname());
    iArCommonArchiveService.saveOrUpdate(archive);
    return ResultUtil.success();
}

5.3 删除档案子项

@SystemLog(about = "删除B档案子项", type = LogType.DATA_CENTER, doType = "CE08")
@ApiOperation(value = "删除B档案子项")
@RequestMapping(value = "/deleteArchiveItem", method = RequestMethod.POST)
public Result<Object> deleteArchiveItem(@RequestParam String id){
    ArCommonArchiveItem acai = iArCommonArchiveItemService.getById(id);
    if(acai == null) {
        return ResultUtil.error("档案已被删除");
    }
    iArCommonArchiveItemService.removeById(acai.getId());
    return ResultUtil.success("档案类型删除成功");
}

5.4 编辑档案额外字段

@SystemLog(about = "编辑C档案额外字段", type = LogType.DATA_CENTER, doType = "CE05")
@RequestMapping(value = "/editArchiveField", method = RequestMethod.POST)
@ApiOperation(value = "编辑C档案额外字段")
public Result<Object> editArchiveField(@RequestParam String id,@RequestParam String title,@RequestParam String remark,@RequestParam float sortOrder,@RequestParam(required = false,defaultValue = "input") String type,@RequestParam(required = false,defaultValue = "") String typeValue) {
    ArCommonArchiveField acaf = iArCommonArchiveFieldService.getById(id);
    if(acaf == null) {
        return ResultUtil.error("该字段已被删除");
    }
    acaf.setTitle(title);
    acaf.setRemark(remark);
    acaf.setSortOrder(BigDecimal.valueOf(sortOrder).setScale(3,RoundingMode.UP));
    acaf.setSpecialType(type);
    acaf.setSpecialRemark(typeValue);
    iArCommonArchiveFieldService.saveOrUpdate(acaf);
    return ResultUtil.success();
}

5.5 添加档案额外字段

@SystemLog(about = "添加C档案额外字段", type = LogType.DATA_CENTER, doType = "CE03")
@RequestMapping(value = "/addArchiveField", method = RequestMethod.POST)
@ApiOperation(value = "添加C档案额外字段")
public Result<ArCommonArchiveField> addArchiveField(@RequestParam String typeId) {
    ArCommonArchiveField field = new ArCommonArchiveField();
    field.setTypeId(typeId);
    field.setTitle("额外字段标题");
    field.setRemark("可以在这里输入字段备注");
    field.setSpecialType("input");
    field.setSpecialRemark("");
    field.setSortOrder(BigDecimal.ZERO);
    iArCommonArchiveFieldService.saveOrUpdate(field);
    return new ResultUtil<ArCommonArchiveField>().setData(field);
}