intelligent-medicine-cabinet/mini-pro-web/src/views/device/infoLog/deviceLog.vue

<template>
    <div class='deviceLog'>
        <TimePicker @onSearch="onSearch"/>
        <CustomList 
			ref="customList"
            :searchfun="false"
			@onLoad="onLoad">
			<div class="list plr15 mt10">
                <van-collapse v-model="activeNames">
                    <van-collapse-item 
                        v-for='(item) in list' :key="item.id"
                        :title="item.orderNum+'('+ item.name +')'" :name="item.id" :value="item.shippingTime">
                            <div v-for='(citem) in item.shipmentLogs' :key="citem.id" class='item bgc-fff plr10 c-333 c-f14  '>
                                <div class=''>
                                    <div>药品名称：{{citem.drugName}}</div>
                                    <div v-if="isDrugCode==1">药品追溯码：{{citem.traceabilityCode}}</div>
                                    <div>出货状态：<span>{{citem.status==1? '未出货' : citem.status==2? '已出货' : citem.status==3? '出货故障' : ""}}</span></div>
                                    <div>货道信息：{{citem.layerNo}}层 {{citem.wayerNo}}道</div>
                                    <div>出货时间：{{citem.outTime}}</div>
                                    <div>出货日志详情：{{citem.description}}</div>
                                    <div>出货图片：<span v-if="!citem.pic">无出货照片</span>
                                        <van-image
                                            v-else
                                            width="100"
                                            height="100"
                                            :src="setImgUrl(citem.pic)"/>
                                    </div>
                                </div>
                            </div>
                        </van-collapse-item>
                </van-collapse>

                
            </div>
		</CustomList>
    </div>
</template>
<script>
import TimePicker from './TimePicker'
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'deviceLog',
    components: {
        TimePicker
    },
    props: ['deviceId', 'equNum'],
    data(){
        return {
            list: [],
            startDate: '',
            endDate: '',
            activeNames: [],
            isDrugCode: this.$route.query.isDrugCode,

        }
    },
    methods:{
        onLoad({page, pageSize, searchText}){
            var { startDate, endDate } = this
            var p = {
                deviceId: this.deviceId,

                // idDevice: '',
                // lowT: this.min,
                // heightT: this.max,
				// equType: searchForm.equType,
                // networkStatus: searchForm.networkStatusName,
				// content: searchForm.deviceSearch,
                // community: len? this.community[len-1] : '',
				startTime: startDate? this.$moment(startDate).format('YYYY-MM-DD 00:00:00') : '',
				endTime: endDate? this.$moment(endDate).format('YYYY-MM-DD 23:59:59') : '',
                page: page,
                size: 12
            }
            medicineAbinetApi
                .getDeviceOrderInfoPage(p)
                .then(res=>{
                    if(res.status == 200){
                        var list = res.detailModelList || []
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(list.length===0 || res.totalPage<=page, this.list.length)
                    } else {
                        this.onLoadError()
                    }
                }).catch(err=>{
                    console.error(err)
                    this.onLoadError()
                })
        },
        onSearch(data){
            if(data){
                this.startDate = data.startDate
                this.endDate = data.endDate
            }
            this.$refs.customList.refresh(true)
        },
        onLoadError(){
            this.$refs.customList.endLoad(false, true)
        },
    },
}
</script>
<style scoped lang='scss'>
.deviceLog{
    .item{
        border-bottom: 1px solid #e1e1e1;
        padding: 10px 0;
        .van-image{
            vertical-align: text-top;
        }
        &:last-child{
            padding-bottom: 0;
            border-bottom: 0;
        }
        &:first-child{
            padding-top: 0;
        }
    }
}
</style>