cip-components/cip-form-input/extension/remote-select/index.vue

<template>
  <el-select :model-value="transValue"
             @update:modelValue="emitSelect"
             :clearable="clearable"
             :placeholder="placeholder"
             filterable
             remote
             :remote-method="getData"
             :allow-create="allowCreate"
             :disabled="disabled"
             :multiple="multiple"
             :style="{width}"
             @change="handleChange">
    <el-option v-for="(option, index) in options"
              :key="index"
              :label="option[optionProps.label] ?? option"
              :value="option[optionProps.value] ?? option">
    </el-option>
  </el-select>
</template>
<script>
import { ElSelect, ElOption } from 'element-plus'
import { computed } from 'vue'
import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
export default {
  components: { ElSelect, ElOption },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const { width, ...formInput } = useFormInput(props, context)
    const { options } = useOptions(props, false, formInput.emitInput)

    const remoteMethod = computed(() => {
      return props.config?.remoteMethod ?? (() => {})
    })
    const queryKey = computed(() => {
      return props.config?.queryKey ?? ''
    })
    const allowCreate = computed(() => {
      return props.config?.allowCreate ?? false
    })
    const multiple = computed(() => {
      return props.config?.multiple ?? false
    })
    const splitKey = computed(() => {
      return props.config?.splitKey ?? ','
    })
    const otherKey = computed(() => {
      return props.config?.otherKey ?? ''
    })
    const optionProps = computed(() => {
      return Object.assign({
        label: 'label',
        value: 'value'
      }, props.config?.optionProps)
    })

    const transValue = computed({
      get () {
        let value = props.modelValue
        if (props.config.toType === 'int') {
          value = ['', undefined, null].includes(value) ? value : parseInt(value)
        } else if (props.config.toType === 'string') {
          value = String(value)
        }
        if (multiple.value && splitKey.value) {
          return value ? value.split(splitKey.value) : []
        } else {
          return value ?? ''
        }
      }
    })

    const params = {}
    const getData = (query = '') => {
      params[queryKey.value] = query
      remoteMethod.value(params).then(res => {
        options.value = res.data ?? []
      })
    }
    if (props.otherValue) {
      // eslint-disable-next-line
      params[queryKey.value] = props.otherValue
      getData(params)
    } else {
      getData()
    }

    const handleChange = async (val) => {
      if (otherKey.value) {
        let label = ''
        if (multiple.value) {
          label = []
          console.error('basic-select 组件暂不支持多选label配置')
        } else {
          if (typeof options.value[0] === 'string') {
            label = val
          } else {
            const item = options.value.filter(v => v[optionProps.value.value] === val)[0]
            label = item ? item[optionProps.value.label] : null
          }
        }
        context.emit('update:otherValue', label)
      }
    }

    const emitSelect = (val) => {
      context.emit('update:modelValue', val)
    }

    return {
      ...formInput,
      options,
      getData,
      allowCreate,
      multiple,
      transValue,
      width,
      emitSelect,
      handleChange,
      optionProps
    }
  }
}
</script>

<style lang="less" scoped>
.el-select{
  width: 100%;
}
</style>