detail.vue

<style lang="less" >
    #tipProcurementProgressDetail{
        height:100%;
        display:flex;
        flex-direction: column;
        background: #f2f2f2;
        .CONTENT{
            .basic{
                background: #dfe9fd;
                padding-left:5px;
                .Title{
                    height:40px;
                    display: flex;
                    align-items: center;
                    color:#5E9AFE;
                    font-weight: bold;
                }
            }
            .Info{
                border-top:1px solid #dbe9f8;
                display: flex;
                flex-wrap: wrap;
                margin-top: 0px;
                font-size:12px;
                >div{
                    display: flex;
                    width: 100%;
                    min-height:40px;
                    >div{
                        display: flex;
                        width:100%;
                        min-height:40px;
                        >div{
                            display: flex;
                            align-items: center;
                            box-sizing: content-box;
                            flex:1;
                            height:100%;
                            >span{
                                height:100%;
                                min-width:80px;
                                text-align: center;
                                border-right:1px solid #dbe9f8;
                                box-sizing: border-box;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-bottom:1px solid #dbe9f8;
                                color:#586e86;
                                font-weight: bold;
                                background: #eef4fe;
                            }
                            >div{
                                height:100%;
                                width:100%;
                                display: flex;
                                flex-wrap: wrap;
                                >div{
                                    height:100%;
                                    width:100%;
                                    background:white;
                                    align-items: center;
                                    display:inline-flex;
                                    // padding:0 5px 0 0;
                                    >div:first-child{
                                        height:100%;
                                        border-bottom:1px solid #dbe9f8;
                                        border-right:1px solid #dbe9f8;
                                        box-sizing: border-box;
                                    }
                                    >div{
                                        flex:1;
                                        padding-left:5px;
                                        display: flex;
                                        align-items: center;
                                        >span{
                                            width:70px;
                                            display: inline-block;
                                        }
                                    }
                                }
                            }
                        }
                    } 
                }
            }
        }
        .marginBottom10{
            margin-bottom: 10px;
        }
    }
</style>

<template>
    <div id="tipProcurementProgressDetail">
        <div v-for="(item,index) in hdr.procurement.child" :key='index' class="marginBottom10">
            <div class="CONTENT" v-for="(v1,i1) in list" :key='i1'>
                <div class="basic">
                    <div class="Title">
                        <span>{{v1.title}}</span>
                    </div> 
                </div>
                <div class="Info">
                    <div v-for="(v2,i2) in v1.child" :key='i2'>
                        <div v-for="(v3,i3) in v2.child" :key="i3">
                            <div>
                                <span>{{v3.sFieldCaption}}</span>
                                <div>
                                    <div>
                                        <div>
                                            {{item[v3.sFieldName]}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex'

export default {
    name: 'tipProcurementProgressDetail',
    data(){
        return{
            list:[],
            DATA:{}
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.checkProgress.hdr,
            dtl:state => state.checkProgress.dtl.procurement
        })
    },
    async mounted(){
    },
    async activated(){
        window.d = this;

        // await this.getDetail();
        await this.formatData();
    },
    methods:{
        async getDetail(){
            let result = await this.request('getTipProcurementProgress',{
                data:[
                    {key:'url',value:'Procurement progress Dtl'},
                    {key:'uGUID',value:this.hdr.procurement.uGUID}
                ]
            },true);
            if(result && result.length > 0){
                this.$store.dispatch('saveCheckProgressDtl',{
                    type:'procurement',
                    row:result
                });
            }
        },
        formatData(){
            this.list = [
                {
                    title:'基本信息',
                    child:[
                        {
                            child:[
                                {
                                    sFieldCaption:'物料编号',
                                    sFieldName:'sMaterialNo'
                                },
                                {
                                    sFieldCaption:'物料名称',
                                    sFieldName:'sMaterialName'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'规格',
                                    sFieldName:'sConstruction'
                                },
                                {
                                    sFieldCaption:'坯布规格',
                                    sFieldName:'sYarnInfo'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'坯布组织',
                                    sFieldName:'sRawConstruction'
                                },
                                {
                                    sFieldCaption:'批次',
                                    sFieldName:'sMaterialLot'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'加工商物料',
                                    sFieldName:'sProviderMaterialNo'
                                },
                                {
                                    sFieldCaption:'数量',
                                    sFieldName:'nQty'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'单位',
                                    sFieldName:'sUnitName'
                                },
                                {
                                    sFieldCaption:'匹数',
                                    sFieldName:'nPieces'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'溢装',
                                    sFieldName:'nOverPercent'
                                },
                                {
                                    sFieldCaption:'短装',
                                    sFieldName:'nShortPercent'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'已交货数量',
                                    sFieldName:'nDeliveriedQty'
                                },
                                {
                                    sFieldCaption:'已交货匹数',
                                    sFieldName:'nDeliveriedPieces'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'欠数',
                                    sFieldName:'nLessQty'
                                },
                                {
                                    sFieldCaption:'落布数量',
                                    sFieldName:'nDropClothQty'
                                },
                            ]
                        },
                        {
                            child:[
                                {
                                    sFieldCaption:'最后入库日期',
                                    sFieldName:'dLastStoreInTime'
                                },
                            ]
                        }
                    ]
                }
            ]
        }
    },
    components:{
    },
}
</script>