component + defineAsyncComponent

上次说到实现查询控件的子控件，使用了好几个文件，但是看看代码，几乎差不多，区别就是控件类型不一样，其他都是一样的。
那么能不能简化一下？

0004动态组件.png

文件多了就容易乱不易管理，要抽象。

Vue提供了动态组件的方式，比如这样<component :is="currentTabComponent"></component>，那么这个 currentTabComponent是啥呢？可以是异步组件。

export const formItemList = {
  // 文本类 defineComponent
  'el-form-text': defineAsyncComponent(() => import('./t-text.vue')),
  'el-form-area': defineAsyncComponent(() => import('./t-area.vue')),
  'el-form-url': defineAsyncComponent(() => import('./t-url.vue')),
  'el-form-password': defineAsyncComponent(() => import('./t-password.vue')),
  // 数字
  'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
  'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
  // 日期、时间
  'el-form-date': defineAsyncComponent(() => import('./d-date.vue')),
  'el-form-time': defineAsyncComponent(() => import('./d-time.vue')),
  // 选择、开关
  'el-form-checkbox': defineAsyncComponent(() => import('./s-checkbox.vue')),
  'el-form-switch': defineAsyncComponent(() => import('./s-switch.vue')),
  'el-form-checkboxs': defineAsyncComponent(() => import('./s-checkboxs.vue')),
  'el-form-radios': defineAsyncComponent(() => import('./s-radios.vue')),
  'el-form-select': defineAsyncComponent(() => import('./s-select.vue')),
  'el-form-selwrite': defineAsyncComponent(() => import('./s-selwrite.vue')),
  'el-form-select-cascader': defineAsyncComponent(() => import('./s-select-cascader.vue'))

}

/**
 * 表单子控件转换成查询子控件，通过类型编号对应不同的组件实现
 */
export const formItemToFindItem = {
  // 文本类 =》 el-form-text
  100: formItemList['el-form-text'], // 单行文本
  101: formItemList['el-form-text'], // 单行文本
  102: formItemList['el-form-text'], // 单行文本
  103: formItemList['el-form-text'], // 单行文本
  104: formItemList['el-form-text'], // 单行文本
  105: formItemList['el-form-text'], // 单行文本
  106: formItemList['el-form-text'], // 单行文本
  // 数字 =》 el-form-number
  120: formItemList['el-form-number'], // 数组
  121: formItemList['el-form-number'], // 数组
  // 日期 =》 el-form-date
  110: formItemList['el-form-date'], // 日期
  111: formItemList['el-form-date'], // 日期 + 时间
  112: formItemList['el-form-date'], // 年月
  113: formItemList['el-form-date'], // 年周
  114: formItemList['el-form-date'], // 年
  // 时间 =》 el-form-time
  115: formItemList['el-form-time'], // 任意时间
  116: formItemList['el-form-time'], // 选择固定时间
  // 选择、开关 =》el-form-checkboxs
  150: formItemList['el-form-checkboxs'], // 多选组
  151: formItemList['el-form-checkboxs'], // 多选组
  152: formItemList['el-form-checkboxs'], // 多选组
  153: formItemList['el-form-radios'], // 单选组
  160: formItemList['el-form-select'], // 下拉
  161: formItemList['el-form-select'], // 下拉
  // 161: findItemForComponent['el-find-selwrite'], // 下拉多选
  162: formItemList['el-form-select-cascader'] // 下拉联动

}

表单控件里面需要各种各样的控件类型，但是查询并不需要那么多，比如文本类的查询，都用文本框就好，不需要多行的，富文本的，url的这些。那么就需要做一个映射，这里把表单的子控件类型，映射为查询子控件需要的类型。

然后我们可以这样加载：

  <find-kind
    v-model="findChoiceKind"
    :findKind="findKind"
    @change="myChange"
  />
  <template v-if="findChoiceKind === 417 || findChoiceKind === 427">
    <component
      :is="ctlList[controlType]"
      style="width:130px;"
      v-model="findRange[0]"
      v-bind="$attrs"
      @myChange="myChange">
    </component>
    至
    <component
      :is="ctlList[controlType]"
      style="width:130px;"
      v-model="findRange[1]"
      v-bind="$attrs"
      @myChange="myChange">
    </component>
  </template>
  <template v-else>
    <component
      :is="ctlList[controlType]"
      style="width:130px;"
      v-model="findText"
      v-bind="$attrs"
      @myChange="myChange">
    </component>
  </template>

这样我们只需要传递进来控件类型，就可以实现各种控件的查询了，比如这些控件的查询