<style lang="less" > #tipProcessProgressDetail{ 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="tipProcessProgressDetail"> <div v-for="(item,index) in hdr.process.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: 'tipProcessProgressDetail', data(){ return{ list:[], DATA:{} } }, computed:{ ...mapState({ hdr:state => state.checkProgress.hdr, dtl:state => state.checkProgress.dtl.process }) }, async mounted(){ }, async activated(){ window.d = this; // await this.getDetail(); await this.formatData(); }, methods:{ async getDetail(){ let result = await this.request('getTipProcessProgress',{ data:[ {key:'url',value:'Processing schedule Dtl'}, {key:'uGUID',value:this.hdr.process.uGUID} ] },true); if(result && result.length > 0){ this.$store.dispatch('saveCheckProgressDtl',{ type:'process', row:result }); } }, formatData(){ this.list = [ { title:'基本信息', child:[ { child:[ { sFieldCaption:'产品编码', sFieldName:'sSampleMaterialNo' }, { sFieldCaption:'产品名称', sFieldName:'sMaterialNameSample' }, ] }, { child:[ { sFieldCaption:'加工序号', sFieldName:'iOrderNo' }, { sFieldCaption:'色号', sFieldName:'sColorNo' }, ] }, { child:[ { sFieldCaption:'颜色', sFieldName:'sColorName' }, { sFieldCaption:'加工色号', sFieldName:'sProviderColorNo' }, ] }, { child:[ { sFieldCaption:'坯布规格', sFieldName:'sYarnInfo' }, { sFieldCaption:'产品规格', sFieldName:'sConstruction' }, ] }, { child:[ { sFieldCaption:'订单数量', sFieldName:'nQtyOrder' }, { sFieldCaption:'订单单位', sFieldName:'sUnitNameOrder' }, ] }, { child:[ { sFieldCaption:'成品数', sFieldName:'nQty' }, { sFieldCaption:'匹数', sFieldName:'nPieces' }, ] } ] }, { title:'投坯信息', child:[ { child:[ { sFieldCaption:'理论损耗', sFieldName:'nWastagePercent' }, { sFieldCaption:'理论投坯数', sFieldName:'nProductQty' }, ] }, { child:[ { sFieldCaption:'实际投坯数', sFieldName:'nFactProductQty' }, { sFieldCaption:'待投坯数量', sFieldName:'nLessFactProductQty' }, ] }, { child:[ { sFieldCaption:'实际投坯匹数', sFieldName:'nFactProductPieces' }, { sFieldCaption:'投坯时间', sFieldName:'tProductOutTime' }, ] }, { child:[ { sFieldCaption:'落布数量', sFieldName:'nDropClothQty' }, { sFieldCaption:'落布比例', sFieldName:'nInputQtyRate' }, ] }, { child:[ { sFieldCaption:'落布时间', sFieldName:'tDropInTime' } ] } ] }, { title:'出入库信息', child:[ { child:[ { sFieldCaption:'已入库数', sFieldName:'nDeliveriedQty' }, { sFieldCaption:'已入库匹数', sFieldName:'nDeliveriedPieces' }, ] }, { child:[ { sFieldCaption:'待入库匹数', sFieldName:'nLessDeliveriedPieces' }, { sFieldCaption:'待入库数量', sFieldName:'nLessDeliveriedQty' }, ] }, { child:[ { sFieldCaption:'已出库数', sFieldName:'nOutQty' }, { sFieldCaption:'已出库匹数', sFieldName:'nOutPieces' }, ] }, { child:[ { sFieldCaption:'待出库匹数', sFieldName:'nLessOutPieces' }, { sFieldCaption:'生产匹数', sFieldName:'nProducePieces' }, ] }, { child:[ { sFieldCaption:'待生产匹数', sFieldName:'nLessProducePieces' }, { sFieldCaption:'回修数量', sFieldName:'nReturnQty' }, ] } ] } ] } }, components:{ }, } </script>