vue form表单的封装--使用的是elementUI

该组件是一个动态生成表单的Vue组件，通过传入formList参数和插槽的方式实现表单项的定制化渲染

组件的封装

HCommonFormItem

根据传入的"formList"参数生成一组表单项，并通过插槽（slot）将表单项渲染出来。

1. 在components下创建commonFormItem文件夹，在该文件夹下创建index.vue文件

• 组件中使用了两个子组件：
  • HCommonForm： 这是一个自定义的表单组件，用于展示和处理表单数据。
  • HCommonBlock： 这是一个自定义的块级元素组件，用于包裹表单项，并提供标题和边框等样式。

  组件的模板部分使用了Vue的指令和循环语法，通过v-for指令遍历formList数组，生成多个HcommonBlock组件。每个HcommonBlock组件中包含了一个HCommonForm组件，根据item对象的属性设置HCommonForm组件的props。

HCommonBlock

该组件是实现一个可定制样式的块级容器组件，可以根据需要显示标题和内容，并支持选择不同的选项卡。

2. 在components下创建HCommonBlock文件夹，在该文件夹下创建index.vue文件

• 模板中的
  是整个容器的最外层元素，它使用flex布局，并且垂直居中对齐。它可以根据传入的props动态添加不同的类名，从而实现样式的变化。
• 在
  中会显示标题，如果没有传入标题，则会根据blockTitleList数组中的数据渲染多个标题选项，点击选项会触发handleChooseTab方法，并通过$emit将选中的选项值传递给父组件。
• 用于显示内容，可以根据传入的props进行样式控制，如是否有边框、是否可滚动等。

HCommonForm

该组件实现了一个灵活配置的表单组件，可以根据传入的数据动态生成表单项，并支持各种类型的输入框、下拉框、日期选择等功能。同时也包含了上传文件、显示图片、查看PDF等功能。

3. 在components下创建HCommonForm文件夹，在该文件夹下创建index.vue文件

• 重要部分
  • 模板部分（template）： 包含了整个表单组件的布局和结构，通过使用Element UI组件库中的el-form、el-form-item等组件来构建表单项。
  • 脚本部分（script）： 定义了表单组件的逻辑处理部分，包括对表单数据的处理、事件处理函数的定义、计算属性的定义等。
  • 样式部分（style）： 包含了组件的样式定义，使用了scoped属性来使得样式只作用于当前组件。
  • 组件引入部分： 引入了一些自定义组件和第三方组件，如HSelect、HDatePicker、addressCascader等。
    • HSelect：详见该篇文章vue elementUI el-select的封装
    • HDatePicker：详见该篇文章vue elementUI el-date-picker的封装
    • addressCascader：详见该篇文章vue elementUI el-cascader的封装
    • HSelectMultiple：详见该篇文章vue elementUI el-select多选的封装
    • HRadioGroup：详见该篇文章vue elementUI el-radio-group的封装
    • commonTooltip：详见该篇文章Vue tooltip 组件封装
    • viewer：详见该篇文章v-viewer----底部title显示图片的名称
  • 方法引入部分：
    • downLoadFile: 详见该篇文章vue 全局封装文件下载及导入
    • validateFileName: 详见该篇文章检验文件命名
    • this.$commonMessage.message()：详见该篇文章vue elementUI 消息提示封装

页面引用

• 在views下创建名为index.vue的文件

• 页面中使用了两个子组件，引入了一个mixins：
  • HCommonPop： 定义了一个包含标题和右侧插槽的div容器。
  • HCommonFormItem： 详见上文
  • commonFormMixin： 处理表单数据、上传文件、校验表单、获取下拉选项，提交表单；具体处理详见该篇文章vue 表单封装后数据的获取提交

HCommonPop

标题会根据传入的title属性进行显示，如果没有传入则显示空字符串。右侧插槽可以在使用该组件时插入其他内容。接着，使用了slot标签来插入组件的内容，即弹出窗口的主体部分。最后，通过引入HCommonFooter组件，将按钮列表传递给该组件，并在footerList有内容时显示通用底部组件

HCommonFooter

动态生成button的组件

• 模板部分（template）：
  • 通过v-for指令循环遍历buttonList数组，动态生成按钮组。根据buttonList中的数据来渲染h-button组件，实现按钮的动态生成。
  • 根据getButtonDisplay方法返回的布尔值来决定按钮是否显示。
• 脚本部分（script）：
  • 导入HButton组件，并在components属性中注册。
    • HButton：详见该篇文章vue elementUI el-button的封装
  • 定义了props属性，用于接收父组件传递的数据。其中isAllWidth和isSmallBtn是布尔类型的prop，buttonList是数组类型的prop，包含了按钮的各种属性和回调函数。
• 方法部分：
  • getButtonDisplay方法用于根据按钮的display属性确定按钮是否显示。如果display是布尔值，则直接返回；如果是函数，则执行函数并返回结果。
• 样式部分（style）：
  • 使用了SCSS语法定义了.footer-button-group类的样式。设置了按钮组的样式，包括顶部间距、宽度、排列方式等。根据isAllWidth和isSmallBtn属性的值，可以动态改变按钮组的样式。