6 changed files with 227 additions and 63 deletions
@ -0,0 +1,138 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-07-14 16:43:37 |
||||
|
@ 备注: |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { reactive, computed, watch, inject, ref } from 'vue' |
||||
|
import { |
||||
|
constFormProps, |
||||
|
constSetFormOptions, |
||||
|
objectToArray |
||||
|
} from '@/api/DesignForm/utils' |
||||
|
import { FormList } from '@/api/DesignForm/types' |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
modelValue?: null |
||||
|
disabled?: boolean |
||||
|
transformOption: Function |
||||
|
options?: any |
||||
|
type?: string |
||||
|
isCheckbox?: boolean |
||||
|
remoteMethod?: Function |
||||
|
}>(), |
||||
|
{ |
||||
|
options: () => { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'change', val: string | number, name: string): void |
||||
|
(e: 'update:modelValue', val: any): void |
||||
|
}>() |
||||
|
const setOptionsList = ref() |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const optionsList = computed(() => { |
||||
|
// 如果有使用了setOptions设置时使用setOption的 |
||||
|
if (setOptionsList.value) { |
||||
|
return setOptionsList.value |
||||
|
} |
||||
|
if (props.type === 'slot') { |
||||
|
// 作为input前后缀使用时，支持固定和字典取值、暂不支持数据源 |
||||
|
// 因formItem层获取不到slot层的相关参数，如需实际可自引入formItem里的getAxiosOptions |
||||
|
const dictVal = formProps.value.dict |
||||
|
if (dictVal && props.data.config?.optionsType === 2) { |
||||
|
const opt = dictVal[props.data.config?.optionsFun] |
||||
|
if (opt !== undefined) { |
||||
|
return objectToArray(opt) |
||||
|
} |
||||
|
} |
||||
|
return props.data.options |
||||
|
} else { |
||||
|
return props.data.options |
||||
|
} |
||||
|
}) |
||||
|
const formOptions = inject(constSetFormOptions, {}) as any |
||||
|
watch( |
||||
|
() => formOptions.value, |
||||
|
(val: any) => { |
||||
|
const opt = val[props.data.name] |
||||
|
if (val && opt !== undefined) { |
||||
|
setOptionsList.value = objectToArray(opt) |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
const value = computed({ |
||||
|
get() { |
||||
|
if (props.type === 'slot') { |
||||
|
return formProps.value.model[props.data.name] |
||||
|
} else { |
||||
|
return props.modelValue |
||||
|
} |
||||
|
}, |
||||
|
set(newVal: any) { |
||||
|
if (props.type === 'slot') { |
||||
|
emits('change', newVal, props.data.name) |
||||
|
} else { |
||||
|
emits('update:modelValue', newVal) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const state = reactive({ |
||||
|
loading: false // 远程搜索加载状态 |
||||
|
}) |
||||
|
watch( |
||||
|
() => props.data.options, |
||||
|
() => { |
||||
|
state.loading = false |
||||
|
} |
||||
|
) |
||||
|
// 符合远程搜索 |
||||
|
const isRemote = computed(() => { |
||||
|
return !!( |
||||
|
props.data.control?.remote && |
||||
|
props.data.control?.filterable && |
||||
|
props.data.config?.optionsType === 1 && |
||||
|
props.data.config?.optionsFun |
||||
|
) |
||||
|
}) |
||||
|
// 远程搜索 |
||||
|
const remoteMethod = (name: string) => { |
||||
|
if (isRemote.value) { |
||||
|
state.loading = true |
||||
|
// 请求参数名，可使用config.queryName传进来 |
||||
|
const queryName = props.data.config?.queryName || 'name' |
||||
|
props.remoteMethod && props.remoteMethod({ [queryName]: name }) |
||||
|
if (props.data.control.remoteMethod) { |
||||
|
props.data.control.remoteMethod(name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-select |
||||
|
v-bind="data.control" |
||||
|
:disabled="disabled" |
||||
|
v-model="value" |
||||
|
clearable |
||||
|
:multiple ="props.isCheckbox" |
||||
|
:loading="state.loading" |
||||
|
:remoteMethod="remoteMethod" |
||||
|
class="selectWidth" |
||||
|
> |
||||
|
<el-option v-if="data.config?.addAll" value="" label="全部" /> |
||||
|
<el-option |
||||
|
v-for="item in optionsList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="transformOption(item.value, data.config?.transformData)" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.selectWidth{ |
||||
|
min-width: 120px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue