JS模块:

const optionList = ref([]) //零件号初始列表
    const options = ref([]) //零件号匹配列表
    /** 获取所有零件列表 */
    async function partListFun() {
        const { data } = await getPartInfo()
        console.log(data)
        optionList.value = data
        console.log(optionList.value)
    }
    /** 零件号模糊匹配 */
    function fuzzyCheck(e : string) {
        let reg = new RegExp(e) //声明正则变量
        options.value = optionList.value.filter((item) =>
            reg.test(item.partCode)
        ) //返回
    }
    /** 零件号选中 */
    function checkItem(item : any) {
        form.value.partCode = item.partCode

        scanFocusTwo.value = false
        scanFocusThree.value = true
    }
    /** 零件号获得焦点 */
    function fuzzyIn() {
        scanFocusTwo.value = true
        check()
    }
    /** 零件号失焦 */
    function fuzzyOut() {
        setTimeout(() => {
            scanFocusTwo.value = false
        }, 100)
    }
    /** 零件号清空 */
    function fuzzyClear() {
        scanFocusTwo.value = false
        setTimeout(() => {
            scanFocusTwo.value = true
        }, 100)
    }

前端标签模块:

    <u-form-item label="零件编号" prop="partCode" borderBottom="true" ref="item1">
                    <u--input :focus="scanFocusTwo" v-model="form.partCode" disabledColor="#f6f6f6" border="none"
                        placeholder="请输入" clearable @focus="fuzzyIn" @blur="fuzzyOut" @change="fuzzyCheck"
                        @clear="fuzzyClear"></u--input>
                    <view v-show="
                                            scanFocusTwo && form.partCode
                                        " class="absolute w-250 bg-white top-60 z-9 px-5 py-5 rounded-5" style="top: 110px">
                        <scroll-view v-if="options.length > 0" scroll-top="0" scroll-y="true" class="h-100">
                            <view class="flex justify-between items-center border-b py-5" v-for="(
                                                    item, index
                                                ) in options" :key="index" @click="checkItem(item)">
                                <view>
                                    {{ item.partCode }}
                                </view>
                                <view class="text-gray-400">
                                    {{ item.partName }}
                                </view>
                            </view>
                        </scroll-view>
                        <view v-else class="text-center py-10">
                            没有匹配的数据
                        </view>
                    </view>
                </u-form-item>

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐