【摸鱼神器】UI库秒变低代码工具——表单篇(二)子控件

上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式。

主要内容

  • 需求分析
  • 子控件的分类
  • 子控件属性的分类
  • 定义 interface。
  • 定义子控件的的 props。
  • 定义 json 文件。
  • 基于 UI库 进行二次封装,实现依赖 json 渲染。
  • 通过 slot 、 “字典”,实现自定义子控件。
  • 做个工具维护 json 文件。(下篇介绍)

需求分析

表单里面需要各种各样的子控件,像文本、数字、选择、日期等常见的需求,可以由内部提供组件解决,但是其他各种“奇奇怪怪”的需求怎么办呢?

如果还是由“内部”提供组件的话,那肯定是行不通的,因为以往的经验教训告诉我们,内部不断扩充子控件的结果,必然会导致内部代码越来越臃肿,以至后期无法维护,最终崩盘!

所以必须支持自定义扩展!感谢 Vue 和 UI库,提供基础的技术支持,让扩展变得非常容易。

我们先对表单子控件进行一下分类,然后为其设计一套接口,即定义一套规则,这样才好方便做长期维护。

子控件的分类

我们对常见的组件进行分析,得到了下面的分类:

表单子控件的分类

上图涵盖了一些常用控件,但是很显然并不全面,比如没有金额类的控件,输入金额也是需要一些辅助的,比如金额的大小写的切换等,不过这些应该用扩展的方式实现。

属性的分类

组件的分类可以做的“规整”一些,但是组件的属性的分类,就比较有难度了,我们可以把组件需要的属性分为三个主要部分:代码里需要的、共用的、扩展的。

  • 低代码需要的属性
    需要在代码里面使用的属性,比如字段名称、控件类型、默认值、防抖延迟等,集中在一起,通过 props 的方式传递。

  • 共用属性
    各个组件(或者大部分组件)都需要的属性,比如浮动提示、size、是否显示清空按钮等,作为一级属性,通过 props 的方式传递。

  • 扩展属性
    某个组件需要的属性,比如数字组件需要 max、min、step等。通过 $attrs 的方式传递。

100表单子控件的属性.png

其中扩展属性最为复杂,如果按照面向对象的方式来设计的话,结构就会非常复杂,会复杂到什么程度呢?可以参考当初 asp.net 里面 webform 的继承结构:

十三年前做的一张图

(controll是控件(组件)的意思,下面分出来WebControll和 repeater 两个子类,然后又,,,算了不说了,是不是看着就很累的样子?)

定义接口

现在是 JS 环境,我们没有必要生搬硬套,而是可以利用JS的灵活性来做简洁设计:

表单子控件的接口

我们给表单子控件的 props 定义一个interface:(虽然暂时用不上)

  • IFormItemProps
/**
 * 表单控件的子控件的 props。
 */
export interface IFormItemProps {
  /**
   * 低代码需要的数据
   */
  formItemMeta: IFormItemMeta,
  /**
   * 子控件备选项,一级或者多级
   */
  optionList: Array<IOptionList | IOptionTree>,
  /**
   * 表单的 model,含义多个属性
   */
  model: any,
  /**
   * 是否显示清空的按钮
   */
  clearable: boolean,
  /**
   * 浮动提示信息
   */
  title: string,
  /**
   * 子控件的扩展属性
   */
  [key: string]: any
}
  • IFormItemMeta 的定义:
/**
 * 子控件的低代码需要的数据
 */
export interface IFormItemMeta {
  /**
   * -- 字段ID、控件ID
   */
  columnId?: number | string,
  /**
   * -- 字段名称
   */
  colName: string,
  /**
   * -- 字段的中文名称,标签
   */
  label?: string,
  /**
   * -- 子控件类型,number,EControlType
   */
  controlType: EControlType | number,
  /**
   * 子控件的默认值
   */
  defValue: any,
  /**
   * -- 一个控件占据的空间份数。
   */
  colCount?: number,
  /**
   * 访问后端API的配置信息,有备选项的控件需要
   */
  webapi?: IWebAPI,
  /**
   * -- 防抖延迟时间,0:不延迟
   */
  delay: number,
  /**
   * 防抖相关的事件
   */
  events?: IEventDebounce,
}

规则定义之后呢,总会发现有特例的属性,比如 select 的 option。代码里面需要使用 option 去绑定组件,应该放在“低代码需要的属性”里面。

但是实际使用的时候发现,放在“共用属性”里面会更方便。

然后在做“维护JSON的小工具”的时候,发现需要放在“扩展属性”里面维护,这样维护代码更容易实现。

综合考虑之后,就出现了一个不符合规则的属性 —— optionList。

定义组件的 props。

按照接口实现一下 props 的定义。

import type { PropType } from 'vue'

import type {
  IOptionList,
  IOptionTree,
  IFormItemProps
} from '../types/20-form-item'

/**
 * 基础控件的共用属性,即表单子控件的基础属性
 */
export const itemProps = {
  formItemMeta: {
    type: Object as PropType<IFormItemProps>,
    default: () =>  {return {}}
  },
  /**
   * optionList:IOptionList | IOptionTree,控件的备选项,单选、多选、等控件需要
   */
  optionList: {
    type: Object as PropType<Array<IOptionList | IOptionTree>>,
    default: () =>  {return []}
  },
  /**
   * 表单的 model,整体传入,便于子控件维护字段值。
   */
  model: {
    type: Object
  },
  /**
   * 是否显示可清空的按钮,默认显示
   */
  clearable: {
    type: Boolean,
    default: true
  },
  /**
   * 浮动的提示信息,部分控件支持
   */
  title: {
    type: String,
    default: ''
  }
}

其他属性以及扩展属性,可以通过 $attrs 传递和绑定,这样可以方便各种扩展。

定义 json 文件。

我们来定义一个示例用的 json文件。

{
    "formItemMeta": {
      "columnId": 90,
      "colName": "kind",
      "label": "分类",
      "controlType": 107,
      "isClear": false,
      "defValue": 0,
      "colCount": 7
    },
    "placeholder": "分类",
    "title": "编号",
    "optionList": [
      {"value": 1, "label": "文本类"},
      {"value": 2, "label": "数字类"},
      {"value": 3, "label": "日期类"},
      {"value": 4, "label": "时间类"},
      {"value": 5, "label": "选择类"},
      {"value": 6, "label": "下拉类"}
    ]
}

基于 UI库 封装,实现依赖 json 渲染。

首先要感谢强大的UI库,实现了大部分的功能,我们只需要再稍微封装一下即可,只有少数几个组件需要我们补充点代码。

文本类

  • template
  <el-input
    v-model="value"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :title="title"
    :clearable="clearable"
    @blur="run"
    @change="run"
    @clear="run"
    @keydown="clear"
  >
  </el-input>

使用 v-bind="$attrs" 绑定扩展属性

  • ts
  import { defineComponent } from 'vue'
  import { ElInput } from 'element-plus'
  // 引入组件需要的属性、控制类
  import { itemProps, itemController } from '@naturefw/ui-elp'

  export default defineComponent({
    name: 'nf-el-form-item-text',
    inheritAttrs: false,
    components: {
      ElInput
    },
    props: {
      modelValue: [String, Number],
      ...itemProps // 基础属性
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const {
        value,
        run,
        clear
      } = itemController(props, context.emit)

      return {
        value,
        run,
        clear
      }
    }
  })

使用 ...itemProps 定义属性。

是不是很简单。

可能你会问了,这不是封装了个寂寞吗,你看看里面空荡荡的,完全没有封装的必要嘛。

确实,对于文本这类简单的组件,确实没有封装的必要,直接使用UI库提供的组件即可。

那么为啥好要封装一下呢?

首先为了统一风格,不管是简单的,还是复杂的,都按照统一方式封装一下,这样便于维护和扩展。

日期类

  • template
  <el-date-picker
    ref="domDate"
    v-model="value"
    v-bind="$attrs"
    :type="dateType"
    :name="'c' + formItemMeta.columnId"
    :format="format"
    :value-format="valueFormat"
    :title="title"
    :clearable="clearable"
  >
  </el-date-picker>
  • ts
  import { defineComponent } from 'vue'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '@naturefw/ui-elp'
  
  /**
   * 日期
   */
  export default defineComponent({
    name: 'nf-el-from-item-date',
    inheritAttrs: false,
    props: {
      ...itemProps, // 基础属性
      format: {
        type: String,
        default: 'YYYY-MM-DD'
      },
      'value-format': {
        type: String,
        default: 'YYYY-MM-DD'
      },
      modelValue: [String, Date, Number, Array]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const { value } = itemController(props, context.emit)

      // 根据类型判断是否为数组,判断是否 使用范围。
      let dateType = 'date'
      if (props.formItemMeta.controlType == '125' ) {
        dateType = 'daterange'
        if (!Array.isArray(value.value)) {
          value.value = []
        }
      } else {
        if (Array.isArray(value.value)) {
          value.value = ''
        }
      }

      return {
        dateType, // 控件类型
        value // 控件值
      }
    }
  })

可以增设属性,然后根据需求设置默认值,这样方便统一风格。

选择类

  • template
  <el-select
    v-model="value"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :clearable="clearable"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
  >
    <el-option
      v-for="item in optionList"
      :key="'select' + item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
  • ts
  import { defineComponent, computed } from 'vue'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '@naturefw/ui-elp'

  export default defineComponent({
    name: 'nf-el-from-select',
    inheritAttrs: false,
    props: {
      ...itemProps, // 基础属性
      'collapse-tags': {
        type: Boolean,
        default: true
      },
      'collapse-tags-tooltip': {
        type: Boolean,
        default: true
      },
      modelValue: [String, Number, Array]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const multiple = computed (() => props.formItemMeta.controlType === 161)
  
      return {
        ...itemController(props, context.emit)
      }
    }
  })

template 里面增加了 el-option 部分,通过对 optionList 的遍历,实现了选项的渲染。

其他组件也是一样的方式进行封装,就不一一介绍了。

封装 el-form-item

el-table 通过 el-form-item 来加载子组件,所以我们也可以封装一下:

  <el-row :gutter="15">
    <el-col
      v-for="(ctrId, index) in colOrder"
      :key="'form_' + ctrId + '_' + index"
      :span="formColSpan[ctrId]"
      v-show="showCol[ctrId]"
    >
      
      <transition name="el-zoom-in-top">
        <el-form-item
          :label="itemMeta[ctrId].formItemMeta.label"
          :prop="itemMeta[ctrId].formItemMeta.colName"
          :rules="ruleMeta[ctrId] ?? []"
          :label-width="itemMeta[ctrId].formItemMeta.labelWidth??''"
          :size="size"
          v-show="showCol[ctrId]"
        >
          <component
            :is="formItemKey[itemMeta[ctrId].formItemMeta.controlType]"
            :model="model"
            v-bind="itemMeta[ctrId]"
          >
          </component>
        </el-form-item>
      </transition>
    </el-col>
  </el-row>
  • el-row、el-col:实现多列
  • transition:组件联动的时候的动画效果
  • component:动态加载子控件
  • formItemKey 子控件的字典,key-value形式,key就是控件编号,value是组件。这样就可以根据控件的编号加载对应的子控件了。

使用 slot 和 字典 实现扩展自定义子控件。

这里要感谢强大的 vue3,提供了插槽这种很灵活的扩展方式。以及组件的形成管理代码。

说到扩展,想必大家想到的是插槽,我们也支持使用插槽的扩展方式,不过我觉得,既然定义了接口,那么不用的话,是不是有点浪费。

我们可以定义组件实现接口,然后并入字典(formItemKey),这样表单控件就可以从字典里面加载我们自己定义的组件了,更便于管理和扩展。

源码和演示

core:https://gitee.com/naturefw-code/nf-rollup-ui-controller

二次封装: https://gitee.com/naturefw-code/nf-rollup-ui-element-plus

演示: https://naturefw-code.gitee.io/nf-rollup-ui-element-plus/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容