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">
                <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">
                <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
        }
    },
    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.getStockList(res.data.list[0].id)
                this.getStreetDetail(res.data.list[0].id);
                this.getStockRowColumn();
            }).catch(err => {

            });
        },
        // 获取盘点状态
        async getStockRowColumn() {
            const init = () => {
                let row = this.data.filter(item => item.id === this.select)[0];
                let leftShelveId = null, rightShelveId = null;

                if(row.leftInsideShelveId && this.size == 'leftInsideShelveId') {
                    leftShelveId = row.leftInsideShelveId;
                }else if(row.leftOutsideShelveId && this.size == 'leftOutsideShelveId'){
                    leftShelveId = row.leftOutsideShelveId;
                }else if(row.leftShelveId) {
                    leftShelveId = row.leftShelveId;
                }

                if(row.rightInsideShelveId && this.size2 == 'rightInsideShelveId') {
                    rightShelveId = row.rightInsideShelveId;
                }else if(row.rightOutsideShelveId && this.size2 == 'rightOutsideShelveId'){
                    rightShelveId = row.rightOutsideShelveId;
                }else if(row.rightShelveId) {
                    rightShelveId = row.rightShelveId;
                }
                let params = {
                    leftShelveId,
                    rightShelveId
                };
                // this.$api.httpNodeApi.getStockRowColumnAPI({params}).then(({data})=>{
                //     this.$set(this, 'stockInfo', data);
                //     // this.stockInfo = data;
                // });
            }
            this.timer && clearInterval(this.timer);
            init();
            this.timer = setInterval(init, 5000);
        },
        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

            }).catch(err => {

            })
        },
        //获取盘点列表
        // getStockList(streetId) {
        //     this.$api.httpApi.getStockList({
        //         params: {
        //             streetId: streetId,
        //         }
        //     }).then(res => {
        //         this.checkList = res.data
        //     }).catch(err => {

        //     });
        // },
        handleChange(value) {
            
            this.select = value
            this.getStreetDetail(value)
            //this.getStockList(value);
            this.getStockRowColumn()
        },
        tocheckOperation(checkObj, item) {
            console.log(checkObj)
            console.log(item)
            this.$router.push({name: 'checkOperation', query: {checkObj: checkObj, item: item}})
        },
        tocheck(row, column, shelveId, id, name, type, type2) {
            console.log(type)
            console.log(type2)
            this.$router.push({
                name: 'checkOperation',
                query: {row: row, column: column, shelveId: shelveId, id: id, name, type: type, type2: type2}
            })
        },
        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>