intelligent-medicine-cabinet/mini-pro-web/src/views/replenishment/picking/list.vue

<template>
    <div class='replenishment-picking-list'>
        <van-sticky :offset-top="offsetTop">
            <van-tabs v-model="active" @change="onChange">
                <!-- <van-tab title="全部"></van-tab> -->
                <van-tab title="备货中"></van-tab>
                <van-tab title="">
                    <div slot="title">
                        <van-badge v-if="waitCount" :content="waitCount">待领料</van-badge>
                        <span v-else>待领料</span>
                    </div>
                </van-tab>
                <van-tab title="已领料"></van-tab>
                <!-- <van-tab title="已驳回"></van-tab> -->
            </van-tabs>
        </van-sticky>
        <CustomList 
			ref="customList"
            :searchfun="false"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <div @click="gotoDetail(item)" v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                    <div class=" ptb10 kitbox bb-e1e1e1">
                        <div class="box-flex-1 fs-14">备货单号:{{item.docNum}}</div>
                        <div class="">
                            <span v-if="active===0" class="c-ff9526">备货中</span>
                            <span v-else-if="active===1" class="c-17b3ec">待领料</span>
                            <span v-else-if="active===2" class="c-999">已领料</span>
                            <!-- <span class="c-ff5e6c">已驳回</span> -->
                        </div>
                    </div>
                    <div class="lh20 ptb10 kitbox">
                        <div class="box-flex-1">
                            <div class="row">
                                <div>补货员</div>
                                <div>{{item.replenishEr}}</div>
                            </div>
                            <div class="row">
                                <div>待补设备</div>
                                <div>{{item.replenishEqu}}</div>
                            </div>
                            <div class="row">
                                <div>待补品类</div>
                                <div>{{item.replenishCateName}}</div>
                            </div>
                            <div class="row">
                                <div>待补库存</div>
                                <div>{{item.replenishInventory}}</div>
                            </div>
                            <div class="row">
                                <div>单据日期</div>
                                <div>{{formatDatetime(item.docTime)}}</div>
                            </div>
                        </div>
                        <div class="fs-20 c-pr">
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </div>
		</CustomList>
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'replenishmentDeviceList',
    data(){
        return {
            list: [],
            active: 0,
            waitCount: 0
        }
    },
    created() {
        
    },
    methods:{
        onLoad({page, pageSize, searchText}){
            var p = {
				// 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,
                userId: this.user.id,
                page: page,
                size: pageSize
            }
            var func;
            if(this.active === 0){
                func = medicineAbinetApi.replenishList
            } else if(this.active === 1){
                p.receiveState = 0
                func = medicineAbinetApi.outboundOrderList
            } else if(this.active === 2){
                p.receiveState = 1
                func = medicineAbinetApi.outboundOrderList
            } 
            console.log('params', p)
            func(p)
                .then(res=>{
                    console.log('replenishList', res)
                    if(res.status == 200){
                        var list = res.detailModelList
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(!res.detailModelList || res.detailModelList.length==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)
                })
        },
        onChange(){
            this.list = []
            this.$refs.customList.refresh(true)
        },
        gotoDetail(item){
            var query = {

            }
            if(this.active===0){
                query.idUp = item.id
            } else {
                query.idOut = item.id
            }
            this.gotoUrl('./detail', query)
        }
    },
}
</script>
<style lang='scss' scoped>
.replenishment-picking-list{
    ::v-deep .van-tab{
        &:nth-child(3){
            .van-tab__text{
                overflow: visible;
            }
        }
    }
    .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;
            }

            .row{
                display: -webkit-box;
                div{
                    &:first-child{
                        width: 60px;
                        position: relative;
                        text-align: justify;
                        text-align-last: justify;
                        margin-right: 12px;
                        &::after{
                            content: "：";
                            display: inline-block;
                            position: absolute;
                            right: -14px;
                            top: 0;
                        }
                    }
                }
            }
        }
    }  
    .custom-list{
        height: calc(100vh - 50px);
    }

}
</style>