Vue表单生成器设计实践

前言

在公司一直从事基于Vue框架后台应用的前端研发，而该类应用的页面有较多的通过表单交互来增删改查的操作，为了进行优雅的开发体验，也有感于项目当前的代码，遂封装一个更合适的表单生成器form-generator.vue。

稍有从业经验的人都晓得，这类生成器在基于iview，ant-design这样的组件库下实现不算复杂，因此这里主要是阐述表单生成器的设计思路。

当前项目的表单生成操作有以下问题：

1. 实现form生成功能的组件代码僵硬，是通过v-if指令根据type字段来判断要渲染哪个组件，相应的schema如下：

   filterList: {
       list: {
           mallName: {
               name: 'mallId',
               displayName: '商场',
               type: 'SELECTION',
               notNull: true,
               value: '',
               options: {
                   option: []
               }
           },
           billDate: {
               name: 'billDate',
               displayName: '账单期',
               type: 'MONTH',
               notNull: false,
               value: '',
               options: {
                   option: []
               }
           }
           // ......
       }
   }
   

如果有其他类型的组件要渲染，则要更改当前的form结构数据和生成器实现组件中的v-if相关代码。

2. 可以看到，当前的form结构数据，将form的schema和相应的值value写在同一个对象中，这样，在将form结构数据写在Vuex类似的状态库中时，造成form结构数据和实际使用的代码组件的上下文的不统一。

3. form结构的数据的构造较复杂，有很深的嵌套，代码的可读性不友好。

思路

Vue框架有内置组件component，链接如下。用法是：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。通过component内置组件和is特性，我们可以很优雅的实现不同类型组件的分发渲染。这样我们只需要通过一个特定的字段componentType指明当前要渲染的组件名，然后赋值给is。而不需要冗长的v-if相关代码。

其次，我们将表单生成器的schema和表单最终存放的值一起存放到model中。

那么，我们的表单生成器的结构就出来了。

{
    model: {
        mallId: '',
        billDate: ''
    },
    schema: {
        fields: [
          {
             name: 'mallId',
             displayName: '商场',
             componentType: 'Select',
             placeholder: '不限',
             required: true,
             trigger: 'change',
             propObj: {
               transfer: true,
               filterable: true,
               clearable: true
             },
             options: []
          },
          {
              name: 'billDate',
              displayName: '账单期',
              componentType: 'DatePicker',
              placeholder: '请选择时间',
              propObj: {
                  transfer: true,
                  type: 'month',
                  class: 'datePicker'
              }
          }
        ]
    }
}

在实际生产使用中，schema部分存放在Vuex状态库中，而model部分则存放在具体组件的data中。这样做的考虑在于：类似Select组件的枚举值是从服务端获取到的，在接口请求到数据中当即将其设置到Vuex状态库中，而具体页面中存放的model对象可能会用于页面组件其他部分代码的操作。当然，也可以将这个form数据结构一起存放到Vuex状态库中或者直接存放到具体组件的data中。

结构解读

整个对象存放两个属性：model和schema。

1. model对象用于存放最终和form交互到的值，form-generator.vue组件的model属性即传递该值，并且使用了sync修饰符进行了数据的双向绑定。

2. schema对象主要的属性是fields，该字段是一个数组，用来存放具体待渲染为form组件的数据结构。

   1. 属性clearVerifyMsg用来驱动表单进行全部组件DOM层次的重置。

   2. 属性colProp用于每个表单组件外层包裹的ICol组件的栅格宽度控制，默认值为{ lg: 8, md: 12 }，及其其他ICol组件相关属性。

   3. fields数组下的每一项的属性如下：

      1. name：其值对应model中的字段名，在渲染的时候将model中的值双向绑定到当前渲染的组件中。

      2. componentType：is属性来使用，用来确定当前要渲染的组件名

      3. displayName：表单当前组件的label，会赋值给包裹着组件的FormItem外层组件的label属性中。

      4. hide：使用v-if指令控制当前组件是否渲染

      5. placeholder：占位符

      6. required：用在FormItem组件中，控制当前组件是否需要验证

      7. propObj：使用v-bind="propObj"语法来设置当前组件的props

      8. options：当前待渲染组件为Select时，该组件的子组件Option要渲染的列表

      9. optPropObj：当前待渲染组件为Select时，子组件Option的属性

      10. append：当前待渲染组件为Input时，对应slot的值

      11. handler：在组件触发事件时，对当前组件值的特定的处理

      12. trigger：控制当前组件在以什么方式触发值的校验操作，默认为blur

      13. validator：使用了组件库对应的验证功能，当值为string时，为该类型，当值为object时，直接使用该值进行验证，当值为function时，为自定义的验证器

其他

该组件基于iview组件进行开发，会用到相应的组件和表单验证功能。所以，该组件也可用于ant-design-vue类似的组件库。

缺点

1. 由于使用了component内置组件进行相应组件的渲染分发，所以，对组件的属性定制不友好，每个item都需要传入需要的props，一种解决方案是：对该组件做一次包裹，然后componentType属性传入包裹后的组件名。
2. 每个item的on-change事件的回调函数的入参个数不一，且还需传入原生的event对象，如何处理不同组件传递参数的问题还未很好处理。

具体代码

<template>
  <IForm
    slot="from"
    ref="formValidate"
    :model="model"
    :rules="ruleValidate"
    :label-width="labelWidth"
    :inline="inline"
  >
    <template v-for="(item, idx) in fieldList">
      <ICol v-if="!item.hide" :key="idx" v-bind="colProp">
        <FormItem
          :label="item.displayName"
          :prop="item.name"
          :required="item.required"
        >
          <component
            :is="item.componentType"
            :ref="item.name"
            v-model.trim="model[item.name]"
            :placeholder="item.placeholder"
            v-bind="item.propObj"
            @on-change="(value, $event) => handleChange(value, $event, item)"
          >
            <template v-if="item.options">
              <Option
                v-for="(opt, i) in item.options"
                :key="i"
                :value="opt.value"
                :disabled="opt.disabled"
                v-bind="item.optPropObj"
                >{{ opt.label }}</Option
              >
            </template>
            <template v-if="item.append">
              <span slot="append" :style="item.appendStyle">{{
                item.append
              }}</span>
            </template>
          </component>
        </FormItem>
      </ICol>
    </template>
    <slot name="bottom">
      <div class="bottomBar" :style="bottomBarStyle">
        <Button type="primary" @click="handleSubmit('formValidate')">{{
          okText
        }}</Button>
        <Button
          v-if="hasReset"
          class="custom_btn"
          @click="handleReset('formValidate')"
          >重置</Button
        >
        <slot name="bottom-extra-btns" />
      </div>
    </slot>
  </IForm>
</template>
<script>
const isObject = obj =>
  Object.prototype.toString.call(obj).slice(8, -1) === 'Object'

export default {
  name: 'FormGenerator',
  props: {
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    schema: {
      type: Object,
      default() {
        return {
          fields: []
        }
      },
      validator: function(obj) {
        return obj.hasOwnProperty('fields') && Array.isArray(obj.fields)
      }
    },
    inline: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: [Number, String],
      default: 110
    },
    okText: {
      type: String,
      default: '查询'
    },
    hasReset: {
      type: Boolean,
      default: true
    },
    bottomBarStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    resetToDefaultValue: {
      type: [Boolean, Object],
      default: false
    }
  },
  data() {
    return {
      ruleValidate: {}
    }
  },
  computed: {
    fieldList() {
      return this.schema.fields
    },
    colProp() {
      const obj = isObject(this.schema.colProp) ? this.schema.colProp : {}

      return {
        lg: 8,
        md: 12,
        ...obj
      }
    }
  },
  watch: {
    'schema.clearVerifyMsg': function(newVal) {
      if (newVal) {
        this.$refs['formValidate'].resetFields()
      }
    }
  },
  created() {
    this.ruleInit()
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          const result = JSON.parse(JSON.stringify(this.model))

          this.$emit('on-submit', result)
        }
      })
    },
    handleReset(name) {
      if (this.resetToDefaultValue) {
        const newValue = isObject(this.resetToDefaultValue)
          ? this.resetToDefaultValue
          : this.model

        this.$emit('update:model', newValue)
      } else {
        this.$refs[name].resetFields()
      }
      this.$emit('on-reset')
    },
    handleChange(value, evt, item) {
      const { handler } = item

      let verifiedValue = ''

      if (typeof handler === 'function') {
        verifiedValue = handler(value, item, evt)
      } else if (value instanceof InputEvent) {
        verifiedValue = value.target.value
      } else {
        verifiedValue = value
      }

      if (verifiedValue !== undefined) {
        this.$nextTick(() => {
          this.$set(this.model, item.name, verifiedValue)
          this.$emit('update:model', this.model)
        })
      }
    },
    ruleInit() {
      this.fieldList.forEach(
        ({ required, validator, name, trigger = 'blur' }) => {
          if (required) {
            this.$set(this.ruleValidate, name, [
              {
                trigger,
                required: true,
                message: '必填项，不能为空'
              }
            ])
          } else if (validator) {
            if (typeof validator === 'string') {
              this.$set(this.ruleValidate, name, [
                {
                  trigger,
                  required: true,
                  type: validators,
                  message: `只能输入${validator}类型`
                }
              ])
            } else if (typeof validator === 'function') {
              this.$set(this.ruleValidate, name, [{ trigger, validator }])
            } else if (
              isObject(validator) &&
              validator.hasOwnProperty('type')
            ) {
              this.$set(this.ruleValidate, name, [validator])
            } else {
              throw new Error(`字段${name}的属性type的类型错误`)
            }
          } else {
            this.$set(this.ruleValidate, name, [])
          }
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.bottomBar {
  text-align: right;
  margin-left: 108px;
}
</style>