intelligent-medicine-cabinet/mini-pro-web/src/views/device/cargoLane/setting.vue

<template>
    <div class='deviceDetail'>
        <div class='grid-3 c-f14 c-333 bgc-fff ptb10 c-border-b'>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-17b3ec w60 h30' style='display:inline-block'></div></div>
                <span>正常</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ff9526 w60 h30' style='display:inline-block'></div></div>
                <span>故障</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ccc w60 h30' style='display:inline-block'></div></div>
                <span>关闭</span>
            </div>
        </div>
        <div v-for='(citem, index) in list' :key="index">
            <div class='mt10 bgc-fff ptb10 c-border-tb plr15 c-f14'>
                <div class='flex f_y_c f_x_s'>
                    <span>第{{index+1}}层</span>
                    <van-checkbox v-model="citem.checkAll" @change="onRowChange($event, citem)" color="#17b3ec">选择整行</van-checkbox>
                </div>
                <div class='flex mt10 x-overflow'>
                    <div v-for='(item, cindex) in citem.list' :key="cindex">
                        <div @click="onSelectCol(item)" class='c-t-center w30 c-position-r item' 
                            :class='{mr10: cindex!=citem.list.length-1}'>
                            <div>{{cindex+1}}</div>
                            <div class='c-t-center'><div :class='item.cargoState==1? "c-cirlce-17b3ec" : "c-cirlce-ccc"'></div></div>
                            <div class='c-border ptb5 item-box ellipsis_1' :class='{active: selectList.indexOf(item)!=-1, isMerge: item.state==21||item.state==20}'>{{item.state==21?"主":item.cargoCapacity}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='mt20 plr15'>
            <van-button class='c-border-r-5' style='width:100%' type="info" @click="toSetCount">设置货道容量</van-button>
        </div>
        <div class='mt20 plr15'>
            <van-button @click="mergeAndSplitCargo(true)" class='c-border-r-5' style='width:100%' type="info">货道合并</van-button>
        </div>
        <div class='mt20 plr15 mb30'>
            <van-button @click="mergeAndSplitCargo(false)" class='c-border-r-5' style='width:100%' type="info">货道拆分</van-button>
        </div>

        <SetStockDialog 
            v-model="setStockShow" 
            :data="info"
            @onConfirm="updateMediicinecabineInventoryInfoById" 
            :bussiness="1"/>
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
import SetStockDialog from '@/views/replenishment/start/components/SetStockDialog'
export default{
    name: 'deviceDetail',
    components: {
        SetStockDialog
    },
    data(){
        return {
            deviceInfo: '',
            deviceId: this.$route.query.deviceId,
            list: [],
            activeKey: 0,
            curItem: '',
            checkAll: [],
            selectList: [],
            setStockShow: false,
        }
    },
    created(){
        this.findMediicinecabinetInventoryByDeviceId()
        this.findDeviceById()
    },
    methods:{
        findMediicinecabinetInventoryByDeviceId(){
            this.$loading('加载中..')
            let p = {
                deviceId: this.deviceId
            }
            console.log('params', p)
            medicineAbinetApi
                .findMediicinecabinetInventoryByDeviceId(p)
                .then(res=>{
                    console.log('findMediicinecabinetInventoryByDeviceId', res)
                    this.$toast.clear()
                    if(res.detailModelList && res.detailModelList.length){
                        var list = _.map(res.detailModelList, v=>{
                            var key = _.keys(v)[0]
                            v[key].forEach(m => {
                                m.check = false
                            });
                            return {
                                index: key,
                                list: v[key],
                                checkAll: false
                            }
                        })
                        list = _.sortBy(list, 'index')
                        this.list = list
                        console.log(list)
                    }
                })
                .catch(err=>{
                    console.error(err)
                })
        },
        findDeviceById(){
            let p = {
                deviceId: this.deviceId
            }
            console.log('params', p)
            medicineAbinetApi
                .findDeviceById(p)
                .then(res=>{
                    console.log('findDeviceById', res)
                    this.$toast.clear()
                    this.deviceInfo = res.obj.device
                })
                .catch(err=>{
                    console.error(err)
                })
        },
        onSelect(item){
            var i = this.selectList.indexOf(item)
            if(i == -1){
                this.selectList.push(item)
            } else {
                this.selectList.splice(i, 1)
            }
        },
        onSelectCol(item){
            var i = this.selectList.indexOf(item)
            if(i != -1){
                var exist = _.filter(this.selectList, v=>{
                    var n = Number(item.wayerNo)
                    return v.wayerNo==n-1 || v.wayerNo==n+1
                })
                if(exist.length==2){
                    return
                }
                this.selectList.splice(i, 1)
                return
            }
            if(this.selectList.length!==0 && item.layerNo!=Number(this.selectList[0].layerNo)){
                return
            }
            
            if(this.selectList.length){
                var exist = _.find(this.selectList, v=>{
                    var n = Number(item.wayerNo)
                    return v.wayerNo==n-1 || v.wayerNo==n+1
                })

                if(!exist){
                    return
                }
            }
            
            this.selectList.push(item)
        },
        onRowChange(e, item){
            if(this.selectList.length && this.selectList[0].layerNo!=item.layerNo){
                this.list[Number(this.selectList[0].layerNo)-1].checkAll = false
            }
            if(e){
                this.selectList = item.list
            } else {
                this.selectList = []
            }
        },
        mergeAndSplitCargo(isMerge){
            this.$loading('保存中..')
            var ids = []
            if(isMerge){
                debugger
                if(!this.selectList.length || this.selectList.length<2){
                    this.$toast('至少选择两个相邻的货道')
                    return
                }
                var exist = _.find(this.selectList, v=>{
                    return v.state==20 || v.state==21
                })
                if(exist){
                    this.$toast('不能选择已合并的通道')
                    return 
                }

                var list = _.sortBy(this.selectList, 'wayerNo')
                ids = _.map(list, v=>{
                    return v.id
                })
            } else {
                if(!this.selectList.length || this.selectList.length>1 || this.selectList[0].state!=21){
                    this.$toast('请选择一个主货道')
                    return
                }
                var item = this.selectList[0]
                var list = this.list[Number(item.layerNo)-1].list
                ids.push(item.id)
                for(var i=Number(item.wayerNo); i<=list.length; i++){
                    var v = list[i]
                    if(v.state == 20){
                        ids.push(v.id)
                    } else {
                        break;
                    }
                }
            }
            
            var p = {
                cargoIds: ids.join(','),
                isMerge
            }
            console.log(p)
            medicineAbinetApi
                .mergeAndSplitCargo(p)
                .then(res=>{
                    console.log('mergeAndSplitCargo', res)
                    if(res.status == 200){
                        this.selectList = []
                        this.$toast('操作成功')
                        this.findMediicinecabinetInventoryByDeviceId()
                    } 
                })
                .catch(err=>{
                    console.error(err)
                })
        },
        toSetCount(){
            if(!this.selectList || !this.selectList.length){
                this.$toast("至少选择一个货道")
                return
            }
            if(this.selectList[0].state==20){
                this.$toast("副通道不能修改容量，请修改它的主通道")
                return
            }
            this.setStockShow = true
        },
        updateMediicinecabineInventoryInfoById(data){
            this.$loading('保存中..')
            var ids = _.map(this.selectList, v=>{
                return v.id
            })
            let p = {
                id: ids.join(","),
                cargoCapacity: data

            }
            console.log('params', p)
            medicineAbinetApi
                .updateMediicinecabineInventoryInfoById(p)
                .then(res=>{
                    console.log('updateMediicinecabineInventoryInfoById', res)
                    if(res.status == 200){
                        this.setStockShow = false
                        this.$toast.clear()
                        this.selectList = []
                        this.findMediicinecabinetInventoryByDeviceId()
                    }
                })
                .catch(err=>{
                    console.error(err)
                })
        },
    },
    
}
</script>
<style scoped lang='scss'>
.deviceDetail{
    .grid-3{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .c-cirlce-17b3ec{
        background: #17b3ec;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }
    .c-cirlce-ccc{
        background: #ccc;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }

    .x-overflow{
        overflow-x: auto;
        -ms-overflow-style: none;
    }
    .x-overflow::-webkit-scrollbar{
        display:none;
    }
    .item{
        .active{
            border-color: #17b3ec;
            background-image: url('../../../assets/images/gouxuan.png');
            background-size: 15px 15px;
            background-repeat: no-repeat;
            background-position: bottom right;
        }
        .isMerge{
            background-color: #17b3ec;
            color: #fff;
        }
        .item-box{
            line-height: 20px;
        }
    }
}
</style>