front_Vue/ant-design-pro-vue3/src/components/ProForm/fields/ProSelect/index.vue

<template>
    <div>
        <a-select style="display: block;" v-model:value="svalue" placeholder="请选择" v-bind="$attrs"
            @change="handleChange" @select="handleSelect">
            <a-select-option v-for="item in options" :key="item.item_no" :value="item.item_no" v-bind="item">
                {{ item.item_name }}
            </a-select-option>
        </a-select>
    </div>
</template>

<script>
import {
    getOptions
} from '@/api/common'
export default {
    name: 'ProSelect',
    props: {
        modelValue: [String, Array], // 更改为 modelValue
        optionData: Array,
        readText: {
            type: [String, Array],
            default: null
        },
        readValue: {
            type: [String, Array],
            default: null
        },
        formItemProps: Object, // 定义formItemProps prop
    },
    inject: {
        pageIsReadOnly: {
            default: false
        }
    },
    emits: ['update:modelValue', 'change', 'select', 'easyUiSelect', 'input'], // 添加 update:modelValue 事件
    watch: {
        //判断下拉框的值是否有改变
        svalue (val, oldVal) {
            const that = this
            if (val != oldVal) {
                that.$emit('input', this.svalue)
                that.$emit('update:modelValue', this.svalue) // 确保使用 update:modelValue
                if (this.$attrs["collapse-tags"] != undefined) {
                    this.$nextTick(() => {
                        //下拉框视口总宽度
                        let elClientWidth = this.$el.clientWidth
                        //首个tag
                        let firstTabDom = this.$el?.childNodes[0]?.childNodes[0]?.childNodes[0].children[0]
                        //下一个tag
                        let nextTabDom = this.$el?.childNodes[0]?.childNodes[0]?.childNodes[0].children[1]
                        if (firstTabDom) {
                            //判断宽度是否超出输入框之前，先恢复宽度
                            firstTabDom.style.width = "auto"
                            if (nextTabDom?.className?.indexOf("el-tag") > -1) {
                                let firstTabOffsetWidth = firstTabDom.offsetWidth
                                let nextTabOffsetWidth = nextTabDom.offsetWidth
                                if (firstTabOffsetWidth + nextTabOffsetWidth > elClientWidth - 45) {
                                    //firstTabOffsetWidth = 下拉框的宽度 - 下拉框的内边距（45）-nextTabOffsetWidth
                                    firstTabDom.style.width = elClientWidth - 45 - nextTabOffsetWidth + "px"
                                }
                            }
                        }
                        if (nextTabDom && nextTabDom?.className == undefined) {
                            firstTabDom.style.width = "auto"
                        }
                    })
                }
            }
        },
        modelValue: {
            immediate: true,
            handler (newVal) {
                this.svalue = newVal;
            }
        },
        optionData (val, oldVal) {
            if (JSON.stringify(val) != JSON.stringify(oldVal)) {
                this.options = this.optionData
            }
        }

    },
    mounted () {
        console.log("wyq-ProSelect mounted", this.$attrs);
        const optionData = this.optionData
        //初始话下拉框的值
        const {
            colName,
            tableName,
            url
        } = this.$attrs
        //静态变量直接赋值
        if (optionData) {
            this.options = optionData
        } else {
            let queyUrl = ''
            let params
            //通过字段和表名查tbl
            if (colName && tableName) {
                queyUrl = '/system/select/options/loadTbl'
                params = {
                    colName,
                    tableName
                }
            } else if (url) { //自定义查询
                queyUrl = url
                params = {}
            }
            if (queyUrl) {
                getOptions(queyUrl, params)
                    .then((response) => {
                        if (response != null) {
                            this.options = response
                        }
                    })
            }
        }
    },
    created () {

    },
    methods: {
        handleChange (data, node, event) {
            // this.$emit('input', data);
            this.$emit('change', data, node, event)
            this.$emit('update:modelValue', data);  // 确保使用 update:modelValue
        },
        handleSelect (value, option) {
            this.$emit('select', value, option)
            //兼容easyUi写法
            this.$emit('easyUiSelect', { item_no: value, item_name: option.title })
            this.$emit('update:modelValue', value); // 在选择时也更新 modelValue
        },
        // 设置下拉数据源
        setSelectOptions (data) {
            console.log("setSelectOptions", data);
            data = data.map(item => {
                if (item.item_no && item.item_name) {
                    item.item_no = item.item_no;
                    item.item_name = item.item_name;
                }
                return item;
            })
            this.options = data
        },
        // 获取下拉数据源
        getSelelctOptions () {
            return this.options
        }
    },
    data () {
        return {
            options: [],
            svalue: this.modelValue // 初始化 svalue
        }
    }
}
</script>

<style></style>