1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- import { ElSelect, ElOption } from 'element-plus'
- import { computed, ref } from 'vue'
- import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- export default {
- components: { ElSelect, ElOption },
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const remoteSearchLoading = ref(false)
- const { width, securityConfig, proxyOtherValue, updateStream, ...formInput } = useFormInput(props, context, { maxOtherKey: 2 })
- // 是否多选
- const multiple = computed(() => {
- return securityConfig.value.multiple ?? false
- })
- const { optionProps, options, proxyOptionsValue } = useOptions(props, multiple, updateStream, context)
- // 是否可搜索
- const filterable = computed(() => {
- return securityConfig.value.filterable ?? false
- })
- // 是否允许创建
- const allowCreate = computed(() => {
- return securityConfig.value.allowCreate ?? false
- })
- // placeholder
- const placeholder = computed(() => {
- return formInput.placeholder.value ?? '请选择'
- })
- // 关闭远程搜索loading
- const closeRemoteLoading = () => {
- remoteSearchLoading.value = false
- }
- const remoteMethod = async (query) => {
- remoteSearchLoading.value = true
- try {
- options.value = await securityConfig.value.remoteMethod(query, props.dependOnValues)
- } finally {
- closeRemoteLoading()
- }
- }
- if (securityConfig.value.remoteMethod) {
- const query = proxyOtherValue[0] ? proxyOtherValue[0].value : ''
- remoteSearchLoading.value = true
- remoteMethod(query).finally(closeRemoteLoading)
- }
- const ElOptions = (optionsData) => optionsData.map((opt, index) => <ElOption key={index} disabled={opt[optionProps.value.disabled]} label={opt[optionProps.value.label] ?? opt} value={opt[optionProps.value.value] ?? opt}></ElOption>)
- // const ElGroup = (optionGroup) => optionGroup.map((group, index) => <ElOptionGroup key={index} label={group.label}>
- // {
- // ElOptions(group.options ?? [])
- // }
- // </ElOptionGroup>)
- // const renderOption = () => securityConfig.value.isGroupOption ? ElGroup(options.value) : ElOptions(options.value)
- return () => <ElSelect v-model={proxyOptionsValue.value}
- clearable={formInput.clearable.value}
- placeholder={placeholder.value}
- filterable={filterable.value || allowCreate.value || securityConfig.value.remote}
- allow-create={allowCreate.value}
- disabled={securityConfig.value.disabled}
- multiple={multiple.value}
- remote={securityConfig.value.remote}
- remoteMethod={securityConfig.value.remoteMethod && remoteMethod}
- collapse-tags={securityConfig.value.collapseTags}
- loading={remoteSearchLoading.value}
- style={{ width: width.value }}
- popper-class="cip-popper-class"
- no-match-text={formInput.noMatchText.value}>
- {ElOptions(options.value)}
- </ElSelect>
- }
- }
|