intelligent-medicine-cabinet/mini-pro-web/src/views/replenishment/stockUp/deviceList.vue

<template>
    <div class='replenishment-stock-up-device-list'>
        <CustomList 
			ref="customList"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <van-checkbox-group v-model="result">
                    <div @click="gotoUrl('./detail', {deviceId: item.id})" v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                        <div class=" ptb10 kitbox">
                            <div class="box-flex-1 fs-14">
                                {{item.equName}}
                                <!-- <van-checkbox :name="item.id">{{item.equName}}</van-checkbox> -->
                            </div>
                            <div class="">
                                <van-tag type="success">在线</van-tag>
                                <van-tag type="success" class="ml5">在售</van-tag>
                            </div>
                        </div>
                        <div class="kitbox ptb10 pr40">
                            <div class="pt2">空置率：</div>
                            <div class="box-flex-1 pt10"><van-progress :percentage="item.kongzhilv? (item.kongzhilv*100) : 0" /></div>
                        </div>
                        <div class="lh20 ptb10 kitbox">
                            <div class="box-flex-1">
                                <div>待补商品数量：{{item.daibushangpinshuliang}}</div>
                                <div>未设商品货道：{{item.weishezhishangpinhuodao}}</div>
                                <div>设备所属：{{item.community}}</div>
                                <div>设备编号：{{item.equNum}}</div>
                                <div>上次补货时间：{{item.shangyicibuhuoshijian}}</div>
                            </div>
                            <div class="fs-20 c-pr">
                                <van-icon name="arrow" />
                            </div>
                        </div>
                    </div>
                </van-checkbox-group>
            </div>
		</CustomList>
        <!-- <div class="bot-banner ptb10 bgc-fff">
            <div class="kitbox fs-14">
                <div class="pr40 box-v-middle pl15">
                    <van-checkbox v-model="selAll">全选</van-checkbox>
                </div>
                <div class="box-flex-1 plr15">
                    <van-button @click="gotoUrl('./detail', {deviceIds: result.join(',')})" type="info" size="small" round block>下一步，查看缺货商品汇总</van-button>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'replenishmentStockUpDeviceList',
    data(){
        return {
            list: [],
            result: [],
            selAll: false
        }
    },
    watch:{
        selAll(n){
            if(n){
                this.result = _.map(this.list, v=>{
                    return v.id
                })
            } else {
                this.result = []
            }
        }
    },
    created() {
        
    },
    methods:{
        $refreshPage(){
            this.$refs.customList.refresh()
        },
        onLoad({page, pageSize, searchText}){
            var p = {
                content: searchText,
                userId: this.user.id,
				// startTime: startDate? this.$moment(startDate).format('YYYY-MM-DD 00:00:00') : '',
				// endTime: endDate? this.$moment(endDate).format('YYYY-MM-DD 23:59:59') : '',
				// content: searchForm.content,
				// community: len? this.community[len-1] : '',
				// sellState: searchForm.sellStatus,
                // page: page,
                // size: pageSize
            }
            console.log('params', p)
            medicineAbinetApi
                .getOutOfStockDeviceListByUserId(p)
                .then(res=>{
                    console.log('getOutOfStockDeviceList', res)
                    if(res.status == 200){
                        var list = res.detailModelList
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(true, this.list.length)
                    } else {
                        this.list = []
                        this.$refs.customList.endLoad(false, true)
                    }
                }).catch(err=>{
                    console.error(err)
                    this.list = []
                    this.$refs.customList.endLoad(false, true)
                })
        },
    },
}
</script>
<style lang='scss' scoped>
.replenishment-stock-up-device-list{
    .list{
        .item{
            margin-bottom: 10px;
            border-radius: 5px;
            &:last-child{
                margin-bottom: 0;
            }
            .van-icon{
                position: absolute;
                top: 50%;
                transform: translateY(calc(-50% - 15px));
                right: 0;
                color: #ccc;
            }
        }
    }   
    .bot-banner{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 5px #ccc;
    }
    ::v-deep .van-list__placeholder{
        height: 60px;
    }
}
</style>