123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <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>
|