xg_total_process_master_cloud_h5/pages/materialManagement/purchase/SupplierSelector.vue

<template>
    <u-form-item label="供应商" :prop="'detailInfos[' + index_experience + '].supplierName'" :required="true">
        <el-autocomplete
                style="width: 100%;"
                v-model="inputForm.detailInfos[index_experience].supplierName"
                placeholder="请选择供应商"
                clearable
                @focus="showDropdown"
                :fetch-suggestions="fetchSuggestions"
                @select="handleSelect"
                :disabled="disabled"
        >
            <template slot-scope="{ item }">
                <span style="width: 100%;">{{ item.name }}</span>
            </template>
        </el-autocomplete>
    </u-form-item>
</template>

<script>
    import SupplierService from '@/api/materialManagement/SupplierService'
    export default {
        props: {
            index_experience: Number,
            inputForm: Object,
            disabled: Boolean // 接收传入的 disabled 属性
        },
        data() {
            return {
                showDropdownList: false,
                selectedSupplier: null,
                suppliers: [] // 供应商对象数组 [{id: 1, name: 'Supplier 1'}, ...]
            };
        },
        supplierService: null,
        created () {
            this.supplierService = new SupplierService()
            this.showDropdown()
        },
        methods: {

            showDropdown() {
                // 将获取的供应商赋值给 this.suppliers
                this.supplierService.list({
                    'current': 1,
                    'size': -1,
                }).then((data) => {
                    this.suppliers = data.records
                    this.showDropdownList = true;
                })
            },
            isEmpty(value) {
                let result = false;
                if (value == null || value == undefined) {
                    result = true;
                }
                if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) {
                    result = true;
                }
                if (typeof value == "object" && value instanceof Array && value.length === 0) {
                    result = true;
                }
                return result;
            },
            isNotEmpty (value) {
                return !this.isEmpty(value)
            },
            fetchSuggestions(queryString, callback) {

                if (this.suppliers && queryString) {
                    const filteredList = this.suppliers.filter(item =>
                        item.name.toLowerCase().includes(queryString.toLowerCase())
                    );
                    callback(filteredList);
                } else {
                    callback(this.suppliers);
                    // Handle the case when suppliers or queryString is not properly initialized
                }
            },
            handleSelect(item) {
                this.inputForm.detailInfos[this.index_experience].supplierName = item.name;
                this.inputForm.detailInfos[this.index_experience].supplierId = item.id;
                this.showDropdownList = false;
            }
        }
    };
</script>

<style scoped>
    .my-dropdown {
        position: absolute;
        top: calc(100% + 4px); /* 将下拉框定位在输入框的下方，此处增加了 4px 的间距 */
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ccc;
    }
    .list-item {
        padding: 8px;
        cursor: pointer;
    }
</style>