iview form的易用性封装

原iview Form表单

• 样板代码太多，导致前端文件行数增大，工程体积增大
• 校验逻辑很麻烦，每个人都要调试，耗时耗力，易出错

封装的目标

• 剔除模板代码
• 校验逻辑封装

实现方式

• type: 'card form search'
  • 列表中的card是一种展现方式 编辑明细表单是一种 查询应该可以复用编辑明细
  • card 需要指定标题的字段 副标题的字段 card的图标 状态的图标
• 表单定义 fieldList:

  title: '表单标题',
  formKey: '表单元素的键，值存在v-model',
  type: 'input | number | textarea | select | checkbox | radio | treeselect | datepicker | fileUpload | imgUpload',
  props: Object, // 传给子组件的属性
  span: 8 | 12 | 24, // 栅格布局占据的空间树，默认即可，支持自定义
  enumKey: '', // 单选、多选、下拉 的数据源枚举值，系统配置的枚举值ID，组件自动完成枚举值的获取
  enumList: [], // 单选、多选、下拉 的数据源选项
  required: true | false,
  validate: (rule, value, callback) => { return callback(new Error("不能为空！")); }, // 校验函数
  render: (h, fieldDef, form)=>{}, // 自定义渲染函数，如果你的render函数太多太复杂，建议使用原生的Form组件去吧，这个不适合你用
  disabled: (form)=>{}, // 用于控制表单元素只读，可设置为Boolean或者返回Boolean的函数
  condition: (form)=>{}, // 用于控制该表单项展示隐藏，可设置为Boolean或者返回Boolean的函数，否则仅在函数返回true的时候展示
]

• 表单值 v-model
• labelWidth 默认 $config.labelStyle.labelWidthSmall，一般取默认值即可，支持自定义
• gridColumns 一行展示几列表单元素，一般取默认值即可，支持自定义

表单预置查询条件

• 登陆之后，获取当前用户所有的预置查询条件数据，缓存到localStorage，退出的时候删除
• 数据存储到一个表里去，主键是varchar，内容text