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

<template>
    <div class='replenishment-stock-up-detail fs-14'>
        <div class="list bgc-fff ">
            <van-sticky :offset-top="offsetTop">
                <div class="row kitbox bgc-fff"  >
                    <div class="box-flex-1 pl10">商品名称</div>
                    <div class="tc">现料数</div>
                    <div class="tc">缺料数</div>
                    <div class="tc">操作</div>
                </div>
            </van-sticky>
            <div v-for="(item, i) in list" :key="i" class="row kitbox">
                <div class="box-flex-1 pl10 ellipsis">{{item.drugName}}</div>
                <div class="tc">{{item.qty}}</div>
                <div class="tc">{{item.upInventory}}</div>
                <div class="tc c-red"><span @click="del(item, i)">删除</span></div>
            </div>
        </div>

        <div class="btns">
            <div class="pl15 pr8">
                <van-button plain @click="toAdd" block round type="info">新增商品</van-button>
            </div>
            <div class="pl8 pr15">
                <van-button  block @click="submit" round type="info">生成备货单</van-button>
            </div>
        </div>

        <!-- <BotFloatButton :fix="true">下一步，生成备货单</BotFloatButton> -->
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'replenishmentStockUpDetail',
    data(){
        return {
            deviceId: this.$route.query.deviceId,
            list: [],
            oriData: []
        }
    },
    created() {
        this.$EventBus.$on('drug-sel', (item)=>{
            item.qty = 0
            item.upInventory = 5
            this.list.push(item)
            console.log('unusedAisles', this.oriData[0].unusedAisles)
        })
        this.getDetialOutOfStock()
    },
    methods:{
        getDetialOutOfStock(){
            this.$loading('加载中..')
            let p = {
                ids: this.deviceId
            }
            console.log('params', p)
            medicineAbinetApi
                .getDetialOutOfStock(p)
                .then(res=>{
                    console.log('getDetialOutOfStock', res)
                    this.$toast.clear()
                    var data = res.detailModelList[0]
                    data.canPickCount = (data.unusedAisles) + (data.children&&data.children.length||0)

                    this.oriData = res.detailModelList
					this.list = res.detailModelList&&res.detailModelList[0].children

                })
                .catch(err=>{
                    console.error(err)
                })
        },
        submit(){
            if(!this.oriData[0].children.length){
                this.$toast('请选择药品')
                return
            }
            this.$loading('保存中..')
            var list = _.map(this.oriData, v=>{
                return {
                    deviceId: v.id,
                    drugs: _.map(v.children, d=>{
                        return {
                            drugId: d.id,
                            qty: d.upInventory
                        }
                    })
                }
            })
            var p = {
                list
            }
            console.log('params', p)
            medicineAbinetApi
                .baseUpCreateUp({
                    userId: this.user.id,
                    jsonData: JSON.stringify(p),
                })
                .then(res => {
                    if(res.status == 200){
                        // this.setBackRefresh()
                        this.$emitRefreshPage('replenishmentStockUpDeviceList')
                        this.$toast('生成成功')
                        history.back()
                    }
                })
                .catch(err=>{
                    console.error(err)
                })
                
        },
        del(item, k){
            this.list.splice(k, 1)
            console.log('unusedAisles', this.oriData[0].unusedAisles)
        },
        toAdd(){
            var device = this.oriData[0]
            if(device.canPickCount <= this.list.length){
				this.$toast(`已达到药柜容量，无法在添加`)
				return
			}
            this.gotoUrl('/drugList', {deviceId: device.id})
        }
    },
}
</script>
<style lang='scss' scoped>
.replenishment-stock-up-detail{
    padding-bottom: 100px;
    .list{
        .row{
            padding: 10px 0;
            border-bottom: 1px solid #e1e1e1;
            >div:nth-child(2), >div:nth-child(3), >div:nth-child(4){
                width: 80px;
            }
            &:last-child{
                border-bottom: 0;
            }
        }
    }
    .btns{
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 20px;
        display: -webkit-box;
        >div{
            width: 50%;
        }
    }
}
</style>