1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <template>
- <el-select v-model="proxyOptionsValue"
- :clearable="clearable"
- :placeholder="placeholder"
- :filterable="filterable || allowCreate || securityConfig.remote"
- :allow-create="allowCreate"
- :disabled="disabled"
- :multiple="multiple"
- :remote="securityConfig.remote"
- :remoteMethod="securityConfig.remoteMethod && remoteMethod"
- :collapse-tags="securityConfig.collapseTags"
- :loading="remoteSearchLoading"
- :style="{width}">
- <el-option v-for="(option, index) in options"
- :key="index"
- :disabled="option[optionProps.disabled] ?? false"
- :label="option[optionProps.label] ?? option"
- :value="option[optionProps.value] ?? option">
- </el-option>
- </el-select>
- </template>
- <script>
- 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
- })
- // 关闭远程搜索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)
- }
- return {
- ...formInput,
- remoteSearchLoading,
- securityConfig,
- width,
- multiple,
- filterable,
- allowCreate,
- remoteMethod,
- optionProps,
- options,
- proxyOptionsValue
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .@{elNamespace}-select{
- width: 100%;
- }
- </style>
|