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 v-if="data[0]" :default-value="data[0].name"
                      @change="handleChange" class="select-roadway">
                <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" >
                <!-- <template v-slot="scope">
                    <div class="roadway-top">
                        <div class="roadway-box">
                            <div class="line" v-for="(column,index) in item.leftColumn" :key="index" v-if="column >= scope.data.random.column[0] && column <= scope.data.random.column[1]">
                                <div v-for="(row,i) in item.leftRow" :key="i" class="el" v-if="row >= scope.data.random.row[0] && row <= scope.data.random.row[1]">
                                    渲染默认巷道框架规格 定位浮在 已有巷道上做对应
                                    <span
                                        class="default"
                                        :style="{background:getStatusBg(stockInfo.left, `${row}-${column}`)}"
                                        @click="tocheck(row,column,leftShelveId.shelveId,item.id,item.name,'left',leftShelveId.shelveType)"
                                    >
                                   {{row}}-{{column}}
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template> -->
            </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.leftRow, column: item.leftColumn}" :shelveId="rightShelveId.shelveId" :streetId="item.id" :streetName="item.name" type="right" :inOut="rightShelveId.shelveType">
                <!-- <template v-slot="scope">
                    <div class="roadway-buttom">
                        <div class="roadway-box">
                            <div class="line" v-for="(column,index) in item.rightColumn" :key="index" v-if="column >= scope.data.random.column[0] && column <= scope.data.random.column[1]">
                                <div v-for="(row,index) in item.rightRow" :key="index" class="el" v-if="row >= scope.data.random.row[0] && row <= scope.data.random.row[1]">

                                    渲染默认巷道框架规格 定位浮在 已有巷道上做对应
                                    <span
                                        class="default"
                                        :style="{background:getStatusBg(stockInfo.right, `${row}-${column}`)}"
                                        @click="tocheck(row,column,rightShelveId.shelveId,item.id,item.name,'right',rightShelveId.shelveType)">
                                   {{row}}-{{column}}
                               </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template> -->
            </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: {}
            },
            timer: null,
            shelveId: '',
            leftShelveId:{},
            rightShelveId:{}
        }
    },
    computed: {
        // 获取左侧货架号
        // leftShelveId() {
        //     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';
        //     };
        //     return {
        //         shelveId,
        //         shelveType
        //     };
        // },
        // 获取右侧货架号
        // rightShelveId() {
        //     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';
        //     };
        //     return {
        //         shelveId,
        //         shelveType
        //     };
        // }
    },
    mounted() {
        this.request();
    },
    activated() {
        this.request();
    },
    beforeRouteLeave(to, form, next) {
        this.timer && clearInterval(this.timer);
        next();
    },
    methods: {
        //获取巷道列表
        request() {
            this.$api.httpApi.getStreetList({
                data: {
                    pageNum: 1,
                    pageSize: 50,
                }
            }).then(res => {
                this.data = res.data.list;
                this.select = res.data.list[0].id
                this.getStreetDetail(res.data.list[0].id);
            }).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.leftShelveChange();
                this.rightShelveChange();
            }).catch(err => {

            })
        },
        
        handleChange(value) {
            
            this.select = value
            
            this.getStreetDetail(value)
            //this.getStockList(value);
            //this.getStockRowColumn()
            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>