动态表单不同项的处理

问题描述

项目中的问题：

项目表单项是根据后台数据来循环渲染的，部分的表单项目的值需要进行特殊的处理，渲染项目会返回一个type

      <!-- 动态渲染数据 -->
      <section v-for="(item, index) in fields" :key="index">
        <!-- 日期格式数据 -->
        <section v-if="item.type === 'date'">
          <van-field
            readonly
            clickable
            name="calendar"
            :value="item.value"
            :label="item.name"
            placeholder="点击选择日期"
            @click="item.show = true"
          />
          <van-calendar
            v-model="item.show"
            title="选择日期"
            :row-height="56"
            :show-mark="false"
            :show-subtitle="false"
            :color="calendarColor"
            :style="{ height: '460px', fontSize: '12px' }"
            @confirm="e => dynamicAction(item.type, { item, e })"
          />
        </section>
        <!-- 文本输入数据 -->
        <template v-if="item.type === 'text'">
          <van-field
            v-model="item.value"
            name="计划工时"
            :label="item.name"
            placeholder="请输入"
          />
        </template>
        <!-- 下拉选择 -->
        <template v-if="item.type === 'select'">
          <van-field
            readonly
            clickable
            name="picker"
            :value="item.value"
            :label="item.name"
            placeholder="请选择"
            @click="item.show = true"
          />
          <van-popup v-model="item.show" position="bottom">
            <van-picker
              show-toolbar
              :columns="item.column"
              value-key="name"
              @confirm="e => dynamicAction(item.type, { item, e })"
              @cancel="e => cancel(item.type, { item, e })"
            />
          </van-popup>
        </template>
        <!-- 时间选择 -->
        <template v-if="item.type === 'time'">
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="value"
            label="时间选择"
            placeholder="点击选择时间"
            @click="item.show = true"
          />
          <van-popup v-model="item.show" position="bottom">
            <van-datetime-picker
              type="time"
              @confirm="e => dynamicAction(item.type, { item, e })"
              @cancel="e => cancel(item.type, { item, e })"
            />
          </van-popup>
        </template>
      </section>

解决方案：

问题的解决方案：

这些表单项统一用同一个方法进行处理，根据后台不同的类型（type字段）来进行处理

    /**
     * @description: 动态渲染的情况下操作数据方法
     * @param {String} type: 类型，根据类型来操作数据
     * @param {Object} params：{item:选择的元素，e:元素框自身的值}
     * @return {none}
     */
    dynamicAction (type, params) {
      // 定义对象去处理不同类型的方法, 策略模式
      const handleList = {
        time: params => {
          const { item, e } = params
          this.fields.forEach(el => {
            if (el.name === item.name) {
              el.value = e
              el.show = false
            }
          })
        },
        text: function (params) {}, // 文本不做任何处理
        // 下拉框的情况
        select: params => {
          const { item, e } = params || {}
          this.fields.forEach(el => {
            if (el.name === item.name) {
              el.value = e
              el.show = false
            }
          })
        },
        // 选择为日期的情况下
        date: params => {
          const { item, e } = params
          const time = new Time(e).handleTime()
          this.fields.forEach(el => {
            if (el.name === item.name) {
              el.value = time
              el.show = false
            }
          })
        }
      }
      // 调用方法
      handleList[type](params)
    },