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

<template>
    <div class='replenishment-start-device-list'>
        <van-sticky :offset-top="offsetTop">
            <van-tabs v-model="active">
                <van-tab title="缺货设备"></van-tab>
                <van-tab title="全部设备"></van-tab>
            </van-tabs>
        </van-sticky>
        <CustomList 
			ref="customList"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <div 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}}
                        </div>
                        <div class="">
                            <van-tag :type="item.networkStatus==1? 'success' : 'danger'">{{item.networkStatusName}}</van-tag>
                            <van-tag :type="item.saleStatus==1? 'success' : 'danger'" class="ml5">{{item.saleStatusName}}</van-tag>
                        </div>
                    </div>
                    <div class="lh20 ptb10 kitbox">
                        <div class="box-flex-1">
                            <div>设备编号：{{item.equNum}}</div>
                            <div>上次补货时间：</div>
                        </div>
                    </div>
                    <div class="operate pt10 pb10">
                        <van-button round block @click="gotoUrl('./deviceDetail', {deviceId: item.id})" type="info" size="small" >开始补货</van-button>
                    </div>
                </div>
            </div>
		</CustomList>
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'replenishmentStartDeviceList',
    data(){
        return {
            list: [],
            result: [],
            selAll: false,
            active: 0
        }
    },
    watch:{
        active(){
            this.$refs.customList.refresh(true)
        }
    },
    created() {
        
    },
    methods:{
        onLoad({page, pageSize, searchText}){
            var p = {
                content: searchText,
                userId: this.user.id,
                page: page,
                size: pageSize
            }
            var func
            if(this.active === 0){
                func = medicineAbinetApi.getOutOfStockDeviceListByUserId
            } else {
                func = medicineAbinetApi.getDeviceListWithUserId
            }
            console.log('params', p)
            func(p)
                .then(res=>{
                    console.log('getOutOfStockDeviceListByUserId', res)
                    if(res.status == 200){
                        var list = res.detailModelList
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(res.totalPage<=page || this.active===0, 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-start-device-list{
    ::v-deep .custom-list .search{
        top: 50px;
    }
    .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;
            }
        }
    }   
    .operate{
        >div{
            // width: 50%;
        }
    }
}
</style>
<style lang="scss">
.mainNobotHasTop{
    .replenishment-start-device-list{
        .custom-list .search{
            top: 96px;
        }
    }
}
</style>