update: 优化Search组件options处理

This commit is contained in:
xieyonghong 2023-01-16 11:05:17 +08:00
parent 9332e59f51
commit 1e39595360
4 changed files with 104 additions and 13 deletions

View File

@ -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]'

View File

@ -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 => { // columnsMap
columnOptionMap.set(item.column, item)
return {
label: item.title,

View File

@ -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'>

View File

@ -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',