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>
这样我们只需要传递进来控件类型，就可以实现各种控件的查询了，比如这些控件的查询
0005查询子控件.png
而文件只需要一个，另外为了让日期选择更适合用户选择，我们可以在做一个日期的子控件，可以变成年月、年周等的查询。这样可以更灵活。
0006年月的查询.png
0007日期的查询.png
还以为有年周的查询呢，结果没有，年周还得自己弄。
现在文件就简单多了。
0004动态组件2.png
我对雷同代码的容忍度是零，见到了就要想办法消灭掉。
最后，最麻烦的还是日期，还得继续研究。
