update: 优化Search组件options处理
This commit is contained in:
parent
9332e59f51
commit
1e39595360
|
@ -31,7 +31,7 @@
|
|||
v-model:value='formData.data[item.name]'
|
||||
:options='item.options'
|
||||
/>
|
||||
<a-inputnumber
|
||||
<a-input-number
|
||||
v-else-if='item.component === componentType.inputNumber'
|
||||
v-bind='item.componentProps'
|
||||
v-model:value='formData.data[item.name]'
|
||||
|
|
|
@ -27,54 +27,64 @@
|
|||
<a-input
|
||||
v-if='component === componentType.input'
|
||||
v-model:value='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-select
|
||||
v-else-if='component === componentType.select'
|
||||
v-model:value='termsModel.value'
|
||||
:options='options'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-inputnumber
|
||||
<a-input-number
|
||||
v-else-if='component === componentType.inputNumber'
|
||||
v-model:value='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-input-password
|
||||
v-else-if='component === componentType.password'
|
||||
v-model:value='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-switch
|
||||
v-else-if='component === componentType.switch'
|
||||
v-model:checked='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if='component === componentType.radio'
|
||||
v-model:value='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-checkbox-group
|
||||
v-else-if='component === componentType.checkbox'
|
||||
v-model:value='termsModel.value'
|
||||
:options='options'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-time-picker
|
||||
v-else-if='component === componentType.time'
|
||||
v-model:value='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-date-picker
|
||||
v-else-if='component === componentType.date'
|
||||
v-model:value='termsModel.value'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
<a-tree-select
|
||||
v-else-if='component === componentType.tree'
|
||||
v-else-if='component === componentType.treeSelect'
|
||||
v-model:value='termsModel.value'
|
||||
:tree-data='options'
|
||||
style='width: 100%'
|
||||
@change='(v) => valueChange(v)'
|
||||
/>
|
||||
</div>
|
||||
|
@ -85,11 +95,13 @@
|
|||
import { componentType } from 'components/Form'
|
||||
import { typeOptions, termType } from './util'
|
||||
import { PropType } from 'vue'
|
||||
import type { SearchItemProps, SearchItemData } from './types'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import type { SearchItemProps, SearchItemData, SearchProps } from './types'
|
||||
import { cloneDeep, isArray, isFunction } from 'lodash-es'
|
||||
|
||||
type ItemDataProps = Omit<SearchItemData, 'title'>
|
||||
|
||||
type ItemType = SearchProps['type']
|
||||
|
||||
interface Emit {
|
||||
(e: 'change', data: ItemDataProps): void
|
||||
}
|
||||
|
@ -121,14 +133,14 @@ const termsModel = reactive<ItemDataProps>({
|
|||
|
||||
const component = ref(componentType.input)
|
||||
|
||||
const options = ref([])
|
||||
const options = ref<any[]>([])
|
||||
|
||||
const columnOptions = ref<({ label: string, value: string})[]>([])
|
||||
const columnOptionMap = new Map()
|
||||
|
||||
const termTypeOptions = reactive(termType)
|
||||
|
||||
const getTermType = (type: string) => {
|
||||
const getTermType = (type?: ItemType) => {
|
||||
switch (type) {
|
||||
case 'select':
|
||||
case 'treeSelect':
|
||||
|
@ -141,13 +153,46 @@ const getTermType = (type: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
const getComponent = (type?: ItemType) => {
|
||||
switch (type) {
|
||||
case 'select':
|
||||
component.value = componentType.select
|
||||
break;
|
||||
case 'treeSelect':
|
||||
component.value = componentType.treeSelect
|
||||
break;
|
||||
case 'date':
|
||||
component.value = componentType.date
|
||||
break;
|
||||
case 'time':
|
||||
component.value = componentType.time
|
||||
break;
|
||||
case 'number':
|
||||
component.value = componentType.inputNumber
|
||||
break;
|
||||
default:
|
||||
component.value = componentType.input
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemOptions = (option?: any[] | Function) => {
|
||||
options.value = []
|
||||
if (isArray(option)) {
|
||||
options.value = option
|
||||
} else if (isFunction(option)) {
|
||||
option().then((res: any[]) => {
|
||||
options.value = res
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleItem = () => {
|
||||
columnOptionMap.clear()
|
||||
columnOptions.value = []
|
||||
if (!props.columns.length) return
|
||||
|
||||
// 获取第一个值
|
||||
|
||||
const sortColumn = cloneDeep(props.columns)
|
||||
sortColumn?.sort((a, b) => a.sortIndex! - b.sortIndex!)
|
||||
|
||||
|
@ -155,9 +200,16 @@ const handleItem = () => {
|
|||
const _itemColumn = sortColumn[_index - 1]
|
||||
|
||||
termsModel.column = _itemColumn.column
|
||||
termsModel.termType = _itemColumn.defaultTermType || getTermType(_itemColumn.type as string)
|
||||
termsModel.termType = _itemColumn.defaultTermType || getTermType(_itemColumn.type)
|
||||
|
||||
columnOptions.value = props.columns.map(item => {
|
||||
getComponent(_itemColumn.type) // 处理Item的组件类型
|
||||
|
||||
// 处理options 以及 request
|
||||
if ('options' in _itemColumn) {
|
||||
handleItemOptions(_itemColumn.options)
|
||||
}
|
||||
|
||||
columnOptions.value = props.columns.map(item => { // 对columns进行Map处理以及值处理
|
||||
columnOptionMap.set(item.column, item)
|
||||
return {
|
||||
label: item.title,
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
<div v-else class='JSearch-content simple big'>
|
||||
<div class='JSearch-items'>
|
||||
<div class='left'>
|
||||
<SearchItem :expand='false' :index='1' />
|
||||
<SearchItem :expand='false' :index='1' :columns='searchItems' />
|
||||
</div>
|
||||
</div>
|
||||
<div class='JSearch-footer'>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<Search
|
||||
:columns='columns'
|
||||
/>
|
||||
<Search type='simple' />
|
||||
<Search type='simple' :columns='columns' />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -17,20 +17,59 @@ const columns = [
|
|||
search: {
|
||||
rename: 'deviceId',
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '测试1',
|
||||
value: 'test1'
|
||||
},
|
||||
{
|
||||
label: '测试2',
|
||||
value: 'test2'
|
||||
},
|
||||
{
|
||||
label: '测试3',
|
||||
value: 'test3'
|
||||
},
|
||||
],
|
||||
handValue: (v) => {
|
||||
return '123'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'sortIndex',
|
||||
key: 'sortIndex',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'number',
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'date',
|
||||
key: 'date',
|
||||
search: {
|
||||
type: 'date',
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '时间2',
|
||||
dataIndex: 'date2',
|
||||
key: 'date2',
|
||||
search: {
|
||||
type: 'time',
|
||||
defaultTermType: 'lt'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'classifiedName',
|
||||
|
|
Loading…
Reference in New Issue