MTP20_WEB_GLOBAL/src/packages/mobile/components/modules/delivery/warehouse-receipt.vue

<template>
    <app-modal direction="right" height="100%">
        <app-view class="g-form">
            <template #header>
                <app-navbar title="选择点选仓单" @back="closed" />
            </template>
            <RadioGroup class="g-form__container" v-model="checkedRow" v-if="dataList.length">
                <CellGroup v-for="(item, index) in dataList" :key="index" @click="onChange(item)" inset>
                    <Cell>
                        <template #title>
                            <Radio :name="item" checked-color="#ee0a24">
                                <ul style="margin-left: .2rem;">
                                    <li>
                                        <span>持有人：</span>
                                        <span>{{ item.username }}</span>
                                    </li>
                                    <li>
                                        <span>商品：</span>
                                        <span>{{ item.wrstandardname }}</span>
                                    </li>
                                    <li>
                                        <span>仓库：</span>
                                        <span>{{ item.warehousename }}</span>
                                    </li>
                                    <li>
                                        <span>数量：</span>
                                        <span>{{ item.avalidqty }}</span>
                                    </li>
                                    <li>
                                        <span>升贴水：</span>
                                        <span>{{ item.pricemove }}</span>
                                    </li>
                                </ul>
                            </Radio>
                        </template>
                    </Cell>
                </CellGroup>
            </RadioGroup>
            <Empty description="暂无数据" v-else />
        </app-view>
    </app-modal>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { RadioGroup, Radio, Cell, CellGroup, Empty } from 'vant'
import { useRequest } from '@/hooks/request'
import { queryWrDeliveryAvalidHoldLB } from '@/services/api/transfer'
import AppModal from '@/components/base/modal/index.vue'

const props = defineProps({
    goodsId: {
        type: Number,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'change'])
const checkedRow = shallowRef<Model.WrDeliveryAvalidHoldLBRsp>()

const { dataList } = useRequest(queryWrDeliveryAvalidHoldLB, {
    params: {
        goodsid: props.goodsId,
    },
})

// 选择仓单
const onChange = (item: Model.WrDeliveryAvalidHoldLBRsp) => {
    checkedRow.value = item
    emit('change', item)
}

// 关闭弹窗
const closed = () => {
    emit('update:show', false)
}
</script>