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

<template>
    <div class="check-page">
        <div style="width:100%;text-align:right;margin-bottom:5px">
            <a-button type="primary" @click="exportStock" style="text-align:right">
                导出全部巷道
            </a-button>
        </div>
        <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>

        <!--左货架DOM-->
        <div class="check-content" v-for="item in data" :key="item.id">
            <div class="roadway-top" v-if="item.id == select">
                <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,i) in item.leftRow" :key="i" class="el">
                                <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
                                <span
                                    v-if="item.leftShelveId"
                                    class="default"
                                    style="background:#bfbfbf;border-radius:4px"
                                    @click="tocheck(row,column,item.leftShelveId,item.id,item.name,'left','none')"
                                >
                                   {{row}}-{{column}}
                                </span>
                                <span
                                    v-if="item.leftInsideShelveId &&  size =='leftInsideShelveId'"
                                    class="default"
                                    style="background:#bfbfbf;border-radius:4px"
                                    @click="tocheck(row,column,item.leftInsideShelveId,item.id,item.name,'left','inside')"
                                >
                                   {{row}}-{{column}}
                                </span>
                                <span
                                    v-if="item.leftOutsideShelveId && size== 'leftOutsideShelveId'"
                                    class="default"
                                    style="background:#bfbfbf;border-radius:4px"
                                    @click="tocheck(row,column,item.leftOutsideShelveId,item.id,item.name,'left','out')"
                                >
                                   {{row}}-{{column}}
                                </span>
                                <div v-for="(key,value) in checkList" :key="value">
                                    <div v-for="(columnItem,val) in key" :key="val">
                                        <div
                                            v-if="columnItem.row== row && columnItem.column ==column && value == streetDetail.leftShelveId"
                                            @click="tocheckOperation(columnItem,item)"
                                            class="el"
                                            :style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 2?'#1afa29':'#d81e06'}"
                                        >
                                            {{columnItem.row}}-{{columnItem.column}}
                                        </div>

                                    </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>

        <!--单伸类型右货架DOM-->
        <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>
        </div>
        <div class="check-content" v-for="item in data" :key="item.name">
            <div class="roadway-buttom" v-if="item.id == select">
                <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" class="el">

                                <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
                                <span
                                    v-if="item.rightShelveId"
                                    class="default"
                                    style="background:#bfbfbf;border-radius:4px"
                                    @click="tocheck(row,column,item.rightShelveId,item.id,item.name,'right','none')">
                                   {{row}}-{{column}}
                               </span>
                                <span
                                    v-if="item.rightInsideShelveId&& size2 == 'rightInsideShelveId'"
                                    class="default"
                                    style="background:#bfbfbf;border-radius:4px"
                                    @click="tocheck(row,column,item.rightShelveId,item.id,item.name,'right','inside')">
                                   {{row}}-{{column}}
                               </span>
                                <span
                                    v-if="item.rightOutsideShelveId && size2 == 'rightOutsideShelveId'"
                                    class="default"
                                    style="background:#bfbfbf;border-radius:4px"
                                    @click="tocheck(row,column,item.rightOutsideShelveId,item.id,item.name,'right','out')">
                                   {{row}}-{{column}}
                               </span>

                                <div v-for="(key,value) in checkList" :key="value">
                                    <div v-for="(columnItem,val) in key" :key="val">
                                        <div
                                            v-if="columnItem.row== row && columnItem.column ==column  && value == streetDetail.rightShelveId"
                                            @click="tocheckOperation(columnItem,item)"
                                            class="el"
                                            :style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 2?'#1afa29':'#d81e06'}"
                                        >
                                            {{columnItem.row}}-{{columnItem.column}}
                                        </div>
                                    </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>
</template>
<script>
export default {
    data() {
        return {
            size: 'leftOutsideShelveId',
            size2: 'rightOutsideShelveId',
            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}})
        },
        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: {}
};
</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: 90%;
        }

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

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

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

                    .el {
                        width: 46px;
                        height: 25px;
                        margin: 1px 2px;
                        text-align: center;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 14px;
                        position: relative;

                        .default {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                        }
                    }
                }
            }
        }

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