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

<template>
    <div class="check-page">
    <div class="button-box">
        <a-popconfirm
    title="是否选择清空盘点信息"
    ok-text="是"
    cancel-text="否"
    @confirm="truncateStock"
  >
  <a-button type="primary"  class="export-all">
            清空盘点
        </a-button>
  </a-popconfirm>
       
        <a-button type="primary" @click="exportStock" class="export-all">
            导出巷道盘点数据
        </a-button>
        <a-button type="primary" @click="exportAllStock" class="export-all">
            导出全部巷道盘点数据
        </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>

        <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">
                左侧货架
            </span>

            <a-radio-group v-model="leftSide" style="margin:10px 0"
                           v-if="streetDetail.leftType == 1">
                <a-radio-button :value=1>
                    浅侧货架
                </a-radio-button>
                <a-radio-button :value=2>
                    深侧货架
                </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}" :side="leftSide" :direction=1 :streetId="item.id" :streetName="item.name">
            </subsection>
        </div>


        <!--单伸类型右货架DOM-->
        <div class="center-box">
            <span class="shelf-number">
                右侧货架
            </span>

            <a-radio-group v-model="rightSide" style="margin:10px 0"
                           v-if="streetDetail.rightType == 1">
                
                <a-radio-button :value=1>
                    浅侧货架
                </a-radio-button>
                <a-radio-button :value=2>
                    深测货架
                </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}" :side="rightSide" :direction=2 :streetId="item.id" :streetName="item.name">
            </subsection>
        </div>
    </div>
</template>
<script>
import Subsection from "./Subsection";
export default {
    name:'checkManage',
    data() {
        return {
            leftSide: 1,
            rightSide: 1,
            data: [],
            select: '',
            streetId: 0,
            streetDetail: {},
        }
    },
    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.selectName = res.data[0].name
                //this.$set(this.select,res.data.list[0].id,0)
                this.getStreetDetail(this.select);
            }).catch(err => {

            });
        },
        truncateStock() {
            this.$api.httpApi.truncateStock({

            }).then(res => {
                console.log("aaa")
                this.$message.success('已清空盘点');
            }).catch(err => {

            });
        },
        //获取巷道详情
        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)
        },
        
        exportStock() {
            this.$api.httpApi.exportStock({
                params: {
                    streetId: this.select,
                }
            }).then(res => {
                let blob = new Blob([res], {type: "application/vnd.ms-excel"})
                this.$utils.downloadFile(this.streetDetail.name+'-盘点列表.xls', blob)
            }).catch(err => {

            });
        },
        
        truncateStock() {
            this.$api.httpApi.truncateStock({
                params: {
                }
            }).then(res => {
                
            }).catch(err => {

            });
        },
        exportAllStock() {
            this.$utils.downloadFileUrl('盘点列表.xls', '/api/stock/exportAll');
            
        },
    },
    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;
        }
    }
    
    
}

.button-box{
        position: absolute;
        top:20px;
        right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .export-all {
        margin-right: 20px;
        }
    }

</style>