duoji-frontend/src/views/checkManage/index.vue

<template>
    <div class="check-page">
        <a-button type="primary" @click="exportStock" class="export-all">
            导出全部巷道
        </a-button>
        <div class="title-info">
            <span class="explain">颜色说明：</span>
            <span class="info-text">
               <a-tag color="#d81e06" style="width:30px;height:20px;margin-right:6px"></a-tag>
               盘点错误
           </span>
            <span class="info-text">
                <a-tag color="#1afa29" style="width:30px;height:20px;margin-right:6px"></a-tag>
               盘点正确
           </span>
            <span class="info-text">
                <a-tag color="#bfbfbf" style="width:30px;height:20px;margin-right:6px"></a-tag>
               未盘点
           </span>
        </div>

        <div style="margin-top: 10px">
            <a-select  @change="handleChange" style="width:200px" v-model="select">
                <a-select-option v-for="i in data" :key="i.name" :value="i.id">
                    {{i.name}}
                </a-select-option>
            </a-select>
        </div>


        <!--左货架DOM-->
        <div class="center-box">
            <span class="shelf-number">
                左货架号: {{leftShelveId.shelveId}}
            </span>

            <a-radio-group v-model="size" style="margin:10px 0" @change="getStockRowColumn"
                           v-if="streetDetail.leftInsideShelveId && streetDetail.leftOutsideShelveId">
                <a-radio-button value="leftOutsideShelveId">
                    外
                </a-radio-button>
                <a-radio-button value="leftInsideShelveId">
                    内
                </a-radio-button>
            </a-radio-group>

        </div>

        <div class="check-content" v-for="item in data" :key="item.id">
            <subsection v-if="item.id == select" :total="{row: item.leftRow, column: item.leftColumn}" :shelveId="leftShelveId.shelveId" :streetId="item.id" :streetName="item.name" type="left" :inOut="leftShelveId.shelveType" >
            </subsection>
        </div>


        <!--单伸类型右货架DOM-->
        <div class="center-box">
            <span class="shelf-number">
                右货架号: {{rightShelveId.shelveId}}
            </span>

            <a-radio-group v-model="size2" style="margin:10px 0" @change="getStockRowColumn"
                           v-if="streetDetail.rightInsideShelveId && streetDetail.rightOutsideShelveId">
                <a-radio-button value="rightOutsideShelveId">
                    外
                </a-radio-button>
                <a-radio-button value="rightInsideShelveId">
                    内
                </a-radio-button>
            </a-radio-group>


        </div>

        <div class="check-content" v-for="item in data" :key="item.name">
            <subsection v-if="item.id == select" :total="{row:item.rightRow, column: item.rightColumn}" :shelveId="rightShelveId.shelveId" :streetId="item.id" :streetName="item.name" type="right" :inOut="rightShelveId.shelveType">
            </subsection>
        </div>
    </div>
</template>
<script>
import Subsection from "./Subsection";
export default {
    name:'checkManage',
    data() {
        return {
            size: 'leftOutsideShelveId',
            size2: 'rightOutsideShelveId',
            data: [],
            select: '',
            streetId: 0,
            streetDetail: {},
            checkList: [],
            stockInfo: {
                left: {},
                right: {}
            },
        
            leftShelveId:{},
            rightShelveId:{}
        }
    },
    computed: {
        
    },
    
    mounted() {
        this.request();
    },
    created(){

    },
    activated() {
        if(!this.$route.meta.isUseCache){   
            console.log("$route.meta.isUseCache false")         
            // 清空原有数据
            this.request();// 这是我们获取数据的函数
        }else{
            console.log("$route.meta.isUseCache true") 
            this.request();       
        }
    },
    
    methods: {
        //获取巷道列表
        request() {
            this.$api.httpApi.getAllStreet({
            }).then(res => {
                console.log("update data")
                for(let i = 0;i<res.data.length;i++){
                    
                    this.$set(this.data,i,res.data[i])
                }
                this.select = res.data[0].id
                //this.$set(this.select,res.data.list[0].id,0)
                this.getStreetDetail(this.select);
            }).catch(err => {

            });
        },
        // 获取盘点状态
        async getStockRowColumn() {
            this.rightShelveChange();
            this.leftShelveChange();
            
        },
        rightShelveChange() {
            let shelveId;
            let shelveType = 'none';
            if(this.streetDetail.rightShelveId) {
                shelveId = this.streetDetail.rightShelveId;
            }else if(this.streetDetail.rightInsideShelveId && this.size2 =='rightInsideShelveId'){
                shelveId = this.streetDetail.rightInsideShelveId;
                shelveType = 'inside';
            }else if(this.streetDetail.rightOutsideShelveId && this.size2 == 'rightOutsideShelveId'){
                shelveId = this.streetDetail.rightOutsideShelveId;
                shelveType = 'out';
            };
            this.rightShelveId.shelveId = shelveId;
            this.rightShelveId.shelveType = shelveType;
        
        },
        leftShelveChange() {
            let shelveId;
            let shelveType = 'none';
            if(this.streetDetail.leftShelveId) {
                shelveId = this.streetDetail.leftShelveId;
            }else if(this.streetDetail.leftInsideShelveId && this.size =='leftInsideShelveId'){
                shelveId = this.streetDetail.leftInsideShelveId;
                shelveType = 'inside';
            }else if(this.streetDetail.leftOutsideShelveId && this.size== 'leftOutsideShelveId'){
                shelveId = this.streetDetail.leftOutsideShelveId;
                shelveType = 'out';
            };
            this.leftShelveId.shelveId = shelveId;
            this.leftShelveId.shelveType = shelveType;
        },
        getStatus(data, rowCol) {
            return (data[rowCol] || {}).status;
        },
        // 获取状态对应的颜色
        getStatusBg(data, rowCol) {
            let status = this.getStatus(data, rowCol);
            return status == 1 ?'#d81e06': status == 2 ? '#1afa29': '#bfbfbf';
        },
        //获取巷道详情
        getStreetDetail(id) {
            this.$axios.get('/street/' + id, {
                data: {}
            }).then(res => {
                this.streetDetail = res.data
                this.getStockRowColumn()
            }).catch(err => {

            })
        },
        
        handleChange(value) {
            
            this.select = value
            
            this.getStreetDetail(value)
            this.leftShelveChange();
            this.rightShelveChange();
        },
        tocheckOperation(checkObj, item) {
            console.log(checkObj)
            console.log(item)
            this.$router.push({name: 'checkOperation', query: {checkObj: checkObj, item: item}})
        },
        
        exportStock() {
            this.$api.httpApi.exportStock({
                params: {
                    streetId: this.select,
                }
            }).then(res => {
                let blob = new Blob([res], {type: "application/vnd.ms-excel"})
                this.$utils.downloadFile('巷道列表.xls', blob)
            }).catch(err => {

            });
        },
    },
    components: {Subsection}
};
</script>
<style lang="scss" scoped>
.check-page {
    position: relative;

    .title-info {
        display: flex;
        align-items: center;
        justify-content: start;

        .explain {
            font-weight: 600;
        }

        .info-text {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
    }

    .ant-tag {
        margin-right: 0;
        display: block;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
    }

    .roadway-top, roadway-buttom {
        padding: 5px 0;
        width: 100%;
    }

    .roadway-box {
        transform: rotateX(180deg);
        padding: 10px 10px 0 0;
        .line {
            display: flex;
            transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上

            .el {
                width: 46px;
                height: 25px;
                line-height: 25px;
                margin: 2px;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
                position: relative;
                .default {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }

    .center-box {
        width: 500px;
        height: 52px;
        line-height: 52px;
        .shelf-number {
            display: inline-block;
            width: 200px;
        }
    }
    .export-all {
        position: absolute;
        right: 20px;
    }
}
</style>