123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import { computed } from 'vue'
- import { formInputProps, fromInputEmits } from '@cip/components/cip-form-input/form-input-props'
- import { useFormInput, useInputProps, useOptions } from '@cip/components/hooks/form-input'
- import { ElSelect, ElOption } from 'element-plus'
- import { getFieldValue, getValueByTemplate } from '@cip/utils/util'
- export default {
- props: formInputProps,
- emits: fromInputEmits,
- setup (props, context) {
- const { proxyValue, securityConfig, width, updateStream } = useFormInput(props, context, {
- fromModelValue: (val) => {
- if (multiple.value) {
- return (val || []).map(v => getFieldValue(v, optionProps.value.value))
- } else {
- return getFieldValue((val ?? {}), optionProps.value.value)
- }
- },
- toModelValue: (val) => {
- if (multiple.value) {
- return (val || []).map(v => options.value.find(option => v === option[optionProps.value.value]))
- } else {
- return options.value.find(option => val === option[optionProps.value.value])
- }
- }
- })
- const multiple = computed(() => securityConfig.value.multiple)
- const { options, optionProps } = useOptions(props, multiple, updateStream, context)
- const inputProps = useInputProps(props, [
- ['clearable', { defaultValue: true }],
- 'collapseTags',
- 'multipleLimit',
- ['placeholder', { defaultValue: '' }],
- 'filterable'
- ])
- return () => <ElSelect
- {...inputProps.value}
- style={{ width: width.value }}
- v-model={proxyValue.value}
- multiple={multiple.value}
- >
- {
- options.value.map(option => {
- const value = getFieldValue(option, optionProps.value.value) // 【注:】value不支持模版语法
- const label = optionProps.value.label.includes('$') ? getValueByTemplate(optionProps.value.label, option) : getFieldValue(option, optionProps.value.label) // 支持模版语法
- return <ElOption
- key={value}
- value={value}
- label={label}
- />
- })
- }
- </ElSelect>
- }
- }
|