Form-designer-rice NPM

一、项目名称

表单设计器（移动端）

二、项目背景

公司有多种业务需要自定义表单的项目，比如电子合同，在线考试等。这一类项目有一个公共点就是需求变更频繁，比如电子合同，每次有条款变更都需要开发人员修改代码，重新整理逻辑，这样会大大耗费开发人员的时间。为了解放程序员的双手，以及软件的复用性，现推出使用表单设计器+模板设计器的实现思路完成此类项目需求的设计。即开发人员完成该项目后需要各项目安排一个管理员设计模板，模板的设计不需要开发人员参与，开发只需要提供工具即可。

三、项目成员

角色	姓名
前端	刘贵生
测试	张金桐、边泽
运维	李远

四、里程碑

a.文档

五、项目结构

│  .env.first---------------------------------------first环境配置文件
│  .env.lan-----------------------------------------200环境配置文件
│  .env.pred----------------------------------------测试环境配置文件
│  .env.prod----------------------------------------生产环境配置文件
│  .gitignore---------------------------------------git忽略文件
│  .gitlab-ci.yml-----------------------------------gitlab流水线配置文件
│  .npmignore---------------------------------------npm忽略文件
│  babel.config.js----------------------------------babel配置文件
│  deployment-pred.yaml-----------------------------测试环境流水线配置文件
│  deployment-prod.yaml-----------------------------生产环境流水线配置文件
│  Dockerfile-dev-----------------------------------200环境dockerfile
│  Dockerfile-pred----------------------------------测试环境dockerfile
│  Dockerfile-prod----------------------------------生产环境dockerfile
│  package-lock.json--------------------------------npm包版本号锁
│  package.json-------------------------------------包管理文件
│  postcss.config.js--------------------------------postcss配置文件
│  README.md----------------------------------------readme
│  tsconfig.json------------------------------------ts配置文件
│  vue.config.js------------------------------------vue/cli3配置文件
│
├─.gitlab-------------------------------------------gitlab模板文件夹
│  ├─issue_templates--------------------------------issue创建模板文件夹
│  │      bug_template.md
│  │      code_review.md
│  │      issue_template.md
│  │
│  └─merge_request_templates------------------------代码合并模板文件夹
│          .gitkeep
│          merge_request_templates.md
│
├─examples------------------------------------------网站相关代码文件夹
│      App.vue--------------------------------------根组件
│      entry.ts-------------------------------------入口函数
│
├─packages------------------------------------------打包成组件库文件夹
│  │  index.d.ts------------------------------------包类型声明文件
│  │  index.ts--------------------------------------打包的入口文件
│  │
│  ├─formPreview------------------------------------表单预览组件文件夹
│  │  │  index.js-----------------------------------组件注册文件
│  │  │
│  │  └─src
│  │          FormItemBoard.vue---------------------面板预览组件
│  │          FormPreview.vue-----------------------表单预览组件
│  │
│  └─mobileIndex------------------------------------表单设计首页组件文件夹
│      │  index.js----------------------------------组件注册文件
│      │
│      └─src
│              RiceFormDesigner.vue----------------------表单设计首页组件
│
├─public--------------------------------------------公共文件夹
│  │  favicon.ico-----------------------------------网站图标
│  └─ index.html------------------------------------根页面
│  
│
└─src
    │  cube-ui.js-----------------------------------cube组件按需引入文件
    │  index.ts-------------------------------------开发依赖导入
    │  registerServiceWorker.ts---------------------注册工作服务
    │  theme.styl-----------------------------------cube主题后编译
    │
    ├─assets----------------------------------------静态资源文件夹
    │  ├─font---------------------------------------字体图标
    │  │      iconfont.css
    │  │      iconfont.eot
    │  │      iconfont.js
    │  │      iconfont.json
    │  │      iconfont.svg
    │  │      iconfont.ttf
    │  │      iconfont.woff
    │  │      iconfont.woff2
    │  │
    │  ├─image---------------------------------------图片
    │  │      phone.png
    │  │
    │  └─js------------------------------------------静态js
    │          bus.js
    │
    ├─components-------------------------------------组件文件夹
    │  ├─base----------------------------------------基础组件
    │  │      BaseColor.vue--------------------------颜色设置基础组件
    │  │      BaseInput.vue--------------------------输入类设置基础组件
    │  │      BaseInputNumber.vue--------------------计数器设置基础组件
    │  │      BaseOptions.vue------------------------选项设置基础组件
    │  │      BaseRadio.vue--------------------------单选类设置基础组件
    │  │      BaseSelect.vue-------------------------下拉类设置基础组件
    │  │      BaseTextArea.vue-----------------------文本域类设置基础组件
    │  │      ContainerWithTitle.vue-----------------带标题的容器基础组件
    │  │      FormItemWrap.vue-----------------------表单项包裹基础组件
    │  │
    │  ├─formConfig----------------------------------表单配置文件夹
    │  │      FormConfig.vue-------------------------表单配置组件
    │  │      GroupConfig.vue------------------------组配置组件
    │  │
    │  ├─formEdit------------------------------------表单拖拽组件文件夹
    │  │      EditButton.vue-------------------------顶部编辑按钮
    │  │      FormContainer.vue----------------------表单拖拽容器组件
    │  │
    │  ├─formItem------------------------------------表单项组件
    │  │  │  FormItemTemplate.vue--------------------表单项组件动态加载组件
    │  │  │
    │  │  └─child------------------------------------表单项组件
    │  │          FormItemBoard.vue------------------面板组件
    │  │          FormItemButton.vue-----------------按钮组件
    │  │          FormItemCascadePicker.vue----------级联组件
    │  │          FormItemCheckboxGroup.vue----------多选组件
    │  │          FormItemCut.vue--------------------分割组件
    │  │          FormItemDate.vue-------------------日期组件
    │  │          FormItemInput.vue------------------输入框
    │  │          FormItemPicker.vue-----------------弹出框
    │  │          FormItemRadioGroup.vue-------------单选组件
    │  │          FormItemRate.vue-------------------评分组件
    │  │          FormItemTextarea.vue---------------文本域组件
    │  │          FormItemUploadImage.vue------------上传图片组件
    │  │
    │  └─formSetting---------------------------------表单设置文件夹
    │      │  FormItemSetting.vue--------------------表单设置组件
    │      │
    │      └─child-----------------------------------表单项设置组件子组件（特殊类型设置）
    │              CheckboxDefaultValue.vue----------多选组件默认选项设置组件
    │              CheckboxUniqueValue.vue-----------选择类选项互斥组件
    │              FormButtonClickSetting.vue--------按钮点击设置组件
    │              FormEventSetting.vue--------------事件设置组件
    │              FormItemModel.vue-----------------表单项model设置组件
    │              FormItemValidator.vue-------------表单验证组件
    │              PickerOptions.vue-----------------picker选择器选项设置组件
    │              RadioDefaultOption.vue------------单选默认值设置组件
    │
    ├─config-----------------------------------------配置文件文件夹
    │      config_dictionary.ts----------------------字典类数据配置文件
    │      decorator_default_config.ts---------------注解默认配置组件
    │      example_data.ts---------------------------级联选择器举例说明组件
    │      form_component.ts-------------------------组件配置文件
    │
    ├─interface--------------------------------------接口文件夹
    │      attr_config.ts----------------------------属性设置接口
    │      item_config.ts----------------------------组件配置接口约束
    │      option.ts---------------------------------选项接口
    │      store.ts----------------------------------store类型声明
    │      validator.ts------------------------------表单校验接口 
    │
    ├─mixins-----------------------------------------混入文件夹
    │      computed_attr.ts--------------------------公用计算属性混入
    │      event_list_service.ts---------------------事件业务管理混入
    │      form_item_manager.ts----------------------表单项管理混入
    │      form_list_service.ts----------------------表单项列表管理混入
    │      group_list_service.ts---------------------组列表管理混入
    │      init_service.ts---------------------------数据初始化混入文件
    │      store_manager.ts--------------------------store管理混入
    │
    ├─service----------------------------------------业务文件夹
    │  │  BaseFormItemService.ts---------------------表单项基类
    │  │  EventService.ts----------------------------事件业务
    │  │  GroupService.ts----------------------------组业务
    │  │
    │  ├─common--------------------------------------公用业务
    │  │      DeleteDialogService.ts-----------------删除弹窗业务
    │  │
    │  └─formItemService-----------------------------各表单项业务文件夹
    │          BoardService.ts-----------------------面板业务
    │          ButtonService.ts----------------------按钮业务
    │          CascadePickerService.ts---------------级联选择器业务
    │          CheckboxService.ts--------------------多选业务
    │          CutService.ts-------------------------分割组件业务
    │          DateService.ts------------------------日期业务
    │          index.ts------------------------------子业务类统一导出
    │          InputService.ts-----------------------输入框业务
    │          PickerService.ts----------------------picker选择器业务
    │          RadioService.ts-----------------------单选业务
    │          RateService.ts------------------------评分业务
    │          TextareaServe.ts----------------------文本域业务
    │          UploadImageService.ts-----------------上传图片业务
    │
    ├─style------------------------------------------样式文件夹
    │  │  index.styl---------------------------------首页样式
    │  │
    │  ├─common--------------------------------------公用样式文件夹
    │  │      common.styl----------------------------公用样式
    │  │      mixin.styl-----------------------------混入样式
    │  │      reset.styl-----------------------------页面元素重定义
    │  │      var.styl-------------------------------声明样式
    │  │
    │  └─component-----------------------------------组件样式文件夹
    │      ├─base------------------------------------基础样式文件夹
    │      │      form_item_wrap.styl----------------表单包裹组件样式
    │      │
    │      ├─formConfig------------------------------表单配置样式文件夹
    │      │      form_config.styl-------------------表单样式配置样式
    │      │
    │      ├─formEdit--------------------------------拖拽样式文件夹
    │      │      edit_button.styl-------------------编辑按钮样式
    │      │
    │      ├─formItem--------------------------------表单项样式文件夹
    │      │      form_item.styl---------------------表单项样式
    │      │      form_item_board.styl---------------面板样式
    │      │      form_item_template.styl------------表单项模板
    │      │
    │      └─settings--------------------------------设置组件样式文件夹
    │              form_event_setting.styl-----------事件设置文件夹
    │              form_item_setting.styl------------表单项设置文件夹
    │              settings.styl---------------------设置样式
    │
    ├─types------------------------------------------类型声明文件夹
    │      shims-tsx.d.ts----------------------------全局声明文件
    │      shims-vue.d.ts----------------------------vue声明文件
    │      plugns.d.ts-------------------------vuedraggable包声明
    │
    ├─util-------------------------------------------工具类
    │      component_scan.ts-------------------------组件扫描工具
    │      error_util.ts-----------------------------异常提示
    │      picker_data.ts----------------------------picker数据生成
    │      upload.ts---------------------------------上传图片工具
    │      util.ts-----------------------------------小工具
    │
    └─views------------------------------------------页面
            index.vue--------------------------------首页
            test.js----------------------------------测试数据

六、实现思路

1. 页面逻辑

该项目主要依赖vuedraggable包支撑实现组件的拖拽，网上关于vuedraggable的文档比较少，可参考这篇博客传送门
主页分为三部分，分别是左边（备选组件区+组管理）,中间（拖拽区），右边（组件设置区）
左边上方为备选组件，该组件列表有一个配置文件,为src/config/form_components.ts文件，分为基础组件和高级组件，后续可扩展业务组件，每个列表的的元素为组件，该对象中包含组件名称，类型，和图标，最重要的是service业务这个字段，该字段中包含该类型组件中所有的配置信息和内置方法，也完成对业务的支持。
中间拖拽区完成表单的编辑，包括激活，移动，复制和删除，可查看src/components/formItem/FormItemTemplate组件
当把组件拖到中间拖拽区的时候，vuedraggable组件内置change事件，可检测当前列表的添加，移动，删除事件，完成对应逻辑，我们只需要根据该变化更改表单项列表formList即可，添加时我们需要实例化该组件业务类，以便于该组件能正常加载，并添加到对应的组列表中，可查看src/components/formEdit/FormContainer.vue
完成组件的拖拽后我们便可以设置组件的属性，对应组件为src/components/formSetting,该组件中包含简单属性设置和特殊属性设置，我们对简单属性设置的定义是只需要一个组件即能完成设置的，对应文件为src/components/base中以Base开头的组件，这些组件需要传入label和需要设置的属性即可（选项类的需要传入options），需要设置的属性是在每个业务类中通过注解配置的。特殊属性设置即一个组件不能完成改属性设置或者包含特殊业务，写在了src/components/formSetting/child文件夹中，每个组件最开头需要判断一下，根据组件类型去加载
完成上述操作后，即可点击预览按钮进行预览，提交表单是对外提供该表单的json数据，可查看src/components/formEdit/EditButton.vue

2.业务逻辑

该项目所有的业务逻辑都在src/service文件夹中 1. 其中common文件夹中DeleteDialogService.ts为弹窗业务，可以开关弹窗，储存数据 2. BaseFormItemService.ts为表单项组件的基类，里边包含组件的共有属性和抽象方法，需要每个子类去实现 3. formItemService文件夹中包含的就是各个表单项组件的业务类，每个业务类继承BaseFormItemService.ts父类，里边包含每个组件特有的属性和方法，同时实现父类的方法。其中每个子类中带有setAttrComponentList注解的为可简单设置的属性，第一个参数为配置，第二个参数为属性设置列表 4. EventService.ts和GroupService.ts分别为事件业务和组管理业务

form-designer-rice

template-designer

0.2.1

3 years ago