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

<template>
    <div class="check-page">
        <div class="title-info">
            <span class="explain">颜色说明：</span>
            <span class="info-text">
               <a-tag color="#d81e06" style="width:30px;height:20px"></a-tag>
               盘点错误
           </span>
            <span class="info-text">
                <a-tag color="#1afa29" style="width:30px;height:20px"></a-tag>
               盘点正确
           </span>
            <span class="info-text">
                <a-tag color="#bfbfbf" style="width:30px;height:20px"></a-tag>
               未盘点
           </span>
        </div>
        <!--<div v-for="item in checkList" :key="item.id">-->
        <!--{{item}}-->
        <!--</div>-->
        <div class="check-content" v-for="item in data" :key="item.id">
            <div v-for="(key,value) in checkList" :key="value">
                <div class="roadway-top" v-if="item.id == select && value == streetDetail.leftShelveId">
                    <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                        <div class="roadway-box">
                            <div class="line" v-for="(column,index) in item.leftColumn" :key="index">
                                <div v-for="(row,index) in item.leftRow" :key="index">
                                    <div v-for="(columnItem,val) in key" :key="val">
                                        <div v-if="columnItem.row== row && columnItem.column ==column"
                                             @click="tocheckOperation(columnItem,item)"
                                             class="ele"
                                             :style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 1?'#1afa29':'#d81e06'}"
                                        >
                                            {{columnItem.row}}-{{columnItem.column}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </happy-scroll>
                    <a-radio-group v-model="size" style="margin:10px 0"
                                   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>
        </div>
        <div class="center-box">
            <a-select v-if="data[0]" :default-value="data[0].name" style="width: 180px"
                      @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>
            <a-button type="primary" @click="exportStock">
                导出全部巷道
            </a-button>
        </div>
        <div class="check-content" v-for="item in data" :key="item.id">
            <div v-for="(key,value) in checkList" :key="value">
                <div class="roadway-buttom" v-if="item.id == select && value == streetDetail.rightShelveId">
                    <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                        <div class="roadway-box">
                            <div class="line" v-for="(column,index) in item.rightColumn" :key="index">
                                <div v-for="(row,index) in item.rightRow" :key="index">
                                    <div v-for="(columnItem,val) in key" :key="val">
                                        <div v-if="columnItem.row== row && columnItem.column ==column"
                                             @click="tocheckOperation(columnItem,item)"
                                             class="ele"
                                             :style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 1?'#1afa29':'#d81e06'}"
                                        >
                                            {{columnItem.row}}-{{columnItem.column}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </happy-scroll>
                    <a-radio-group v-model="size2" style="margin:10px 0"
                                   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>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            size: 'small',
            size2: 'small',
            data: [],
            select: '',
            streetId: 0,
            streetDetail: {},
            checkList: {}
        };
    },
    mounted() {
        this.request()
    },
    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)
            }).catch(err => {

            });
        },
        //获取巷道详情
        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) {
            console.log(value)
            this.select = value
            this.getStreetDetail(value)
            this.getStockList(value)
        },
        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: {}
};
</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 {
            padding: 20px 0;
            width: 1000px;
        }

        .roadway-buttom {
            padding: 20px 0 20px 0;
            width: 1000px;
        }

        .scroll-box {
            height: 270px;
            .roadway-box {
                transform: rotateX(180deg);
                padding: 10px 10px 0 0;

                .line {
                    display: flex;
                    transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
                    .ele {
                        width: 46px;
                        height: 25px;
                        margin: 1px 2px;
                        text-align: center;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 14px;
                    }
                }
            }
        }

        .center-box {
            width: 500px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
</style>