<template> <!-- 报表 - tabs --> <!-- default-active-key="1"--> <div id="unitTabs"> <a-tabs @change="tabsCallback" :default-active-key="activeKey"> <a-tab-pane v-for="(item, index) in tabNameList" :key="index" :tab="item"> <!-- tabs 面料 --> <div :class="[(fabData.length==0?'noprint': '')]"> <h6 class="table-title">面料</h6> <a-table rowKey="(item)=>item.id" :loading="loading" :columns="fabColumns" :data-source="fabData" bordered :pagination="false" :scroll="{ x: 1500 }" > <!-- 表头 --> <span slot="transferCostTitle" class="fontColor"> 转入成本 </span> <span slot="remainingQuantitycostTitle" class="fontColor"> 余下数量的成本 </span> <!-- 面料 -转入数量 弹框--> <span slot="fabInQuaSlot" slot-scope="text"> <a>{{ Number(text).toFixed(4)}}</a> </span> <!-- 余下数量--> <span slot="fabRemaQuaSlot" slot-scope="text"> <a>{{ Number(text).toFixed(4) }}</a> </span> <!-- 余下数量--> <span slot="pilosityFewerSlot" slot-scope="text"> <a>{{ Number(text).toFixed(4) }}</a> </span> <!-- 备注 --> <span slot="remarks" slot-scope="text,record"> <!-- <a-input placeholder="请输入" v-model="record.remarks" v-show='showSelect==0'/> --> <a @click="inputRemark(record,'面料')" v-show='showSelect==0'> 备注</a> <span v-show='showSelect==1'>{{ text }}</span> </span> </a-table> </div> <!-- tabs 辅料 --> <div style="margin:30px 0" :class="[(ingData.length==0?'noprint': '')]"> <h6 class="table-title">辅料</h6> <a-table rowKey="(item)=>item.goodsName" :loading="loading" :columns="ingColumns" :data-source="ingData" bordered :pagination="false" :scroll="{ x: 1500 }" > <!-- 表头 --> <span slot="transferCostTitle" class="fontColor"> 转入成本 </span> <!--辅料-转入数量 弹框--> <span slot="ingInQuaSlot" slot-scope="text"> <a v-if="text!==''">{{ Number(text).toFixed(4) }}</a> </span> <!--辅料-余下数量 弹框--> <span slot="ingRemQuaSlot" slot-scope="text"> <a v-if="text!==''">{{ Number(text).toFixed(4) }}</a> </span> <!-- 备注 --> <span slot="remarks" slot-scope="text,record"> <!-- <a-input placeholder="请输入" v-model="record.remarks" v-show='showSelect==0'/> --> <a @click="inputRemark(record,'辅料')" v-show="showSelect==0&&text!=='heji'"> 备注</a> <span v-show='showSelect==1'>{{ text }}</span> </span> </a-table> </div> <!-- tabs 发运明细 :scroll="{ x: 1500 }"--> <div :class="[(shipData.length==0?'noprint': '')]"> <h6 class="table-title">发运明细</h6> <a-table rowKey="(item)=>item.id" :loading="loading" :columns="shipColumns" :data-source="shipData" bordered :pagination="false" :scroll="{ x: 1500 }" ref="table" class="shipData" > </a-table> </div> <!-- tabs 合计 信息 --> <div style="marginTop:30px;"> <h6 class="table-title">合计信息</h6> <div style="border: 1px solid #e8e8e8;padding: 20px 20px 0 20px;"> <a-row :gutter="24"> <div class="table-page-search-wrapper"> <a-form layout="inline" class="kk"> <a-col :md="6" :sm="8"> <a-form-item label="出货数量合计" > <a-input v-model="sumInfo.shipQua" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.shipQua}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="出运美元外销总价" > <a-input v-model="sumInfo.exportPriceUSD" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.exportPriceUSD}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="出运人民币外销金额"> <a-input v-model="sumInfo.exportedAmountRMB" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.exportedAmountRMB}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="成本合计金额"> <a-input v-model="sumInfo.amountTotal" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.amountTotal}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="面料金额合计" > <a-input v-model="sumInfo.fabricAmount" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.fabricAmount}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="辅料金额合计"> <a-input v-model="sumInfo.ingAmount" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.ingAmount}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="出运加工费"> <a-input v-model="sumInfo.shipProcesFees" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.shipProcesFees}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8" class="noprint"> <a-form-item ></a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="面料不含税金额合计"> <a-input v-model="sumInfo.fabricExcludTax" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.fabricExcludTax}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="辅料不含税金额合计" > <a-input v-model="sumInfo.ingExcludAmount" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.ingExcludAmount}}</span> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="出运不含税加工费金额" > <a-input v-model="sumInfo.excludingTaxProcessing" v-show='showSelect==0' :readOnly="showAll=='yes'"></a-input> <span v-show='showSelect==1'>{{sumInfo.excludingTaxProcessing}}</span> </a-form-item> </a-col> </a-form> </div> </a-row> </div> </div> </a-tab-pane> </a-tabs> <!-- tabs内弹框 --> <div> <!-- 面料 转入数量 --> <fabInQua-modal ref="fabInQuaModal" :father="aa" :planNum="this.planNum" @close="closeFabInQua"></fabInQua-modal> <!-- 余下数量 --> <fabRemQua-modal ref="fabRemQuaModal" :father="bb" :planNum="this.planNum" ></fabRemQua-modal> <!-- 辅料 转入数量 --> <ingInQua-modal ref="ingInQuaModal" :father="cc" :planNum="this.planNum" @close="closeIngInQua"></ingInQua-modal> <!-- 余下数量 --> <ingRemQua-modal ref="ingRemQuaModal" :father="bb" :planNum="this.planNum"></ingRemQua-modal> <pilosity-fewer-list-modal ref="pilosityFewerListModal" :planNum="this.planNum"></pilosity-fewer-list-modal> <submit-information ref="submitInformation" @close="closeRemark" :showAll="showAll=='yes'?'yes':'no'"></submit-information> </div> </div> </template> <script> import { JeecgListMixin } from '@/mixins/JeecgListMixin' import JEllipsis from '@/components/jeecg/JEllipsis' import moment from 'moment' import fabInQuaModal from '@views/cost-allocation-total/modal/fabInQuaModal.vue' import fabRemQuaModal from '@views/cost-allocation-total/modal/fabRemQuaModal.vue' import ingInQuaModal from '@views/cost-allocation-total/modal/ingInQuaModal.vue' import ingRemQuaModal from '@views/cost-allocation-total/modal/ingRemQuaModal.vue' import pilosityFewerListModal from '@views/cost-allocation-total/modal/pilosityFewerModal.vue' import submitInformation from '@views/reportForms/cost-allocation-table/submitInformation.vue' // tabs组件 export default { name: 'UnitTabs', // Tabs 详情 mixins: [JeecgListMixin], components: { JEllipsis, moment, fabInQuaModal, // 面料 转入数量 fabRemQuaModal, // 余下数量 ingInQuaModal, // 辅料 转入数量 ingRemQuaModal ,// 余下数量 pilosityFewerListModal,//多发少发 submitInformation }, data() { // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> return { // 面料 fabColumns: [ { title: '序号', width: '6%', dataIndex: 'index', key: 'index', customRender: (text, record, index) => `${index + 1}`, className: 'replacecolor' }, { title: '货物名称', width: '10%', dataIndex: 'goodsName', className: 'replacecolor' }, { title: '转入数量', dataIndex: 'fabrictransferQuantity', width: '8%', className: 'replacecolor', customCell: this.fabQuaCustomCell, scopedSlots: { customRender: 'fabInQuaSlot' }, }, { title: '转入成本', dataIndex: 'transferCost', width: '8%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text!==undefined&&text!==null){ return Number(text).toFixed(2) } }, // slots:{title:'transferCostTitle'} , }, { title: '单耗/件', dataIndex: 'unitConsumption', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '使用数量', dataIndex: 'usageQuantity', width: '9%', className: 'replacecolor' , customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '计划数量', dataIndex: 'planQuantity', width: '9%', className: 'replacecolor' , customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '购入数量', dataIndex: 'purchaseQuantity', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '余下数量', dataIndex: 'fabricremainingQuantity', width: '6%', className: 'replacecolor', customCell: this.fabRemQuaCustomCell, scopedSlots: { customRender: 'fabRemaQuaSlot' } }, { title: '损耗', dataIndex: 'loss', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '余下数量的成本', dataIndex: 'remainingQuantitycost', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(2) } }, // slots:{title:'remainingQuantitycostTitle'} , }, { title: '多发少发', dataIndex: 'pilosityFewer', width: '9%', className: 'replacecolor', customCell: this.pilosityFewerCell, scopedSlots: { customRender: 'pilosityFewerSlot' } // customRender: (text, record, index) => { // if(text!==''&&text){ // return Number(text).toFixed(4) // } // }, }, { title: '备注', dataIndex: 'remarks', scopedSlots: { customRender: 'remarks' }, width: '8%', className: 'replacecolor' } ], fabData: [], // 辅料 ingColumns: [ { title: '序号', width: '6%', dataIndex: 'index', key: 'index', // fixed: 'left', customRender: (text, record, index) =>{ if(record.goodsName!=='合计'){ return index + 1 }else{ return '' } }, className: 'replacecolor' }, { title: '货物名称', width: '12%', dataIndex: 'goodsName', className: 'replacecolor' }, { title: '转入数量', dataIndex: 'ingredientsTransferQuantity', width: '6%', className: 'replacecolor', customCell: this.ingInQuaCustomCell, scopedSlots: { customRender: 'ingInQuaSlot' } }, { title: '转入成本', dataIndex: 'transferCost', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text!==undefined&&text!==null){ return Number(text).toFixed(2) }else{ var re = '' return re } }, // slots:{title:'transferCostTitle'} , }, { title: '使用数量', dataIndex: 'usageQuantity', width: '8%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '购入数量', dataIndex: 'purchaseQuantity', width: '8%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '余下数量', dataIndex: 'ingredientsRemainingQuantity', width: '6%', className: 'replacecolor', customCell: this.ingRemQuaCustomCell, scopedSlots: { customRender: 'ingRemQuaSlot' } }, { title: '损耗', dataIndex: 'loss', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '人民币金额', dataIndex: 'rmbAmount', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(2) } }, }, { title: '美元金额', dataIndex: 'usdAmount', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if (record.rmbAmount == record.usdAmount) return ""; else return Number(record.usdAmount).toFixed(2); } }, { title: '不含税金额', dataIndex: 'priceExcludingtax', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(2) } }, }, // { // title: '转出率', // dataIndex: 'transferOutrate', // width: 120, // className: 'replacecolor' // }, // { // title: '进项税转出', // dataIndex: 'inputtaxTransferout', // width: 160, // className: 'replacecolor' // }, { title: '用量', dataIndex: 'dosage', width: '6%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '供应商', dataIndex: 'supper', width: '8%', className: 'replacecolor' }, { title: '备注', dataIndex: 'remarks', scopedSlots: { customRender: 'remarks' }, width: '8%', className: 'replacecolor' } ], ingData: [], // 发运明细 shipColumns: [ { title: '序号', width: '6%', dataIndex: 'index', key: 'index', fixed: 'left', customRender: (text, record, index) => `${index + 1}`, className: 'replacecolor' }, { title: '发票号码', width: '15%', dataIndex: 'invoiceNum', fixed: 'left', className: 'replacecolor' }, { title: '出运日期', dataIndex: 'outdata', width: '8%', fixed: 'left', className: 'replacecolor' }, { title: '小po', width: '7%', dataIndex: 'smallPo', fixed: 'left', className: 'replacecolor' }, { title: '汇率', dataIndex: 'exchangeRate', width: '8%', className: 'replacecolor' }, { title: '订单号', dataIndex: 'orderNum', width: '10%', className: 'replacecolor' }, { title: '产品款号', dataIndex: 'poStyleNum', width: '9%', className: 'replacecolor' }, { title: '出货数量', dataIndex: 'shipQuantity', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '外销单价', dataIndex: 'exportUnitPrice', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '外销总价', dataIndex: 'exportPrice', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(2) } }, }, { title: '人民币金额', dataIndex: 'rmbAmount', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(2) } }, }, { title: '加工单价(人民币)', dataIndex: 'procesUnitPricermb', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, }, { title: '加工单价(美元)', dataIndex: 'procesUnitPriceusd', width: '9%', className: 'replacecolor', customRender: (text, record, index) => { if (record.procesUnitPricermb == record.procesUnitPriceusd) return ""; else return record.procesUnitPriceusd?Number(record.procesUnitPriceusd).toFixed(4):''; } }, { title: '加工费(人民币)', dataIndex: 'processCost', width: '8%', className: 'replacecolor', customRender: (text, record, index) => { if(text!==''&&text){ return Number(text).toFixed(4) } }, } ], shipData: [], tabsAllData: [], //tabs所有数据集合 tabNameList: [], //tabs数组集合 activeKey: '0', mList:[], fList:[], sumInfo: {} //合计对象 } }, props: { showSelect: { type: String, default: null }, showAll: { type: String, default: null }, planNum:{ type: String, default: null } }, created() {}, methods: { changeTaxrate(data){ this.sumInfo.fabricExcludTax ='' this.sumInfo.ingExcludAmount='' this.sumInfo.amountTotal='' this.sumInfo.fabricExcludTax =(Number(this.sumInfo.fabricAmount)/(1+(Number(data)/100))).toFixed(2)//合计中的不含税面料总额 this.sumInfo.ingExcludAmount = (Number(this.sumInfo.ingAmount).toFixed(2)/(1+(Number(data)/100))).toFixed(2)//辅料不含税金额合计 this.sumInfo.amountTotal = (Number(this.sumInfo.fabricAmount)+Number(this.sumInfo.ingAmount)+Number( this.sumInfo.shipProcesFees)).toFixed(2)//合计金额 if(Number(this.shipData[0].procesUnitPriceusd)>0){ this.sumInfo.excludingTaxProcessing =this.sumInfo.shipProcesFees//出运不含税加工费-合计信息 }else{ this.sumInfo.excludingTaxProcessing =(Number(this.sumInfo.shipProcesFees).toFixed(2)/(1+(Number(data)/100))).toFixed(2)//出运不含税加工费-合计信息 } this.$forceUpdate() this.$emit('number',this.sumInfo.fabricExcludTax,this.sumInfo.ingExcludAmount) }, Refresh(){ setTimeout(()=> { this.$forceUpdate(); // this.$refs.table.doLayout() },200) }, tabsCallback(key) { this.activeKey = key // console.log('点击的是', this.activeKey) if (key == 0) { var oneData = this.tabsAllData[0] this.fabData = oneData.syCostAllocationFabricList this.ingData = oneData.syCostAllocationIngredientList this.shipData = oneData.syCostAllocationShipdetailList } if (key == 1) { var twoData = this.tabsAllData[1] this.fabData = twoData.syCostAllocationFabricList this.ingData = twoData.syCostAllocationIngredientList this.shipData = twoData.syCostAllocationShipdetailList } }, // 面料 -转入数量 弹框 fabQuaCustomCell(record) { return { on: { click: event => { console.log('面料 - 转入数量') console.log( this.mList,this.fList) this.$refs.fabInQuaModal.fabInQuaModVis = true this.$refs.fabInQuaModal.record = record record.syTransfers.map(item=>{ if(item.unitCost){ item.unitCost = Number(item.unitCost).toFixed(3) } }) this.$refs.fabInQuaModal.data = record.syTransfers if(this.mList.length!==0){ this.mList.map(item=>{ if(item.goodsName == record.goodsName){ this.$refs.fabInQuaModal.data = item.syTransfers } }) } } } } }, closeFabInQua(data,record){ var all = 0 this.fabData.map(item=>{ if(item.goodsName == record.goodsName){ item.transferCost = data } if(item.transferCost&&item.transferCost!==''){ all+=Number(item.transferCost) } this.$emit('FabInQua',all) }) this.$forceUpdate() }, closeIngInQua(data,record){ this.ingData.map(item=>{ if(item.goodsName == record.goodsName){ item.transferCost = data } }) }, // 面料 -余下数量 弹框 fabRemQuaCustomCell(record) { return { on: { click: event => { console.log('面料 - 余下数量') this.$refs.fabRemQuaModal.fabRemQuaModVis = true this.$refs.fabRemQuaModal.data = record.syRemaining } } } }, //面料-多发少发 pilosityFewerCell(record){ return { on: { click: event => { console.log('面料 - 多发少发') this.$refs.pilosityFewerListModal.pilosityFewerModVis = true this.$refs.pilosityFewerListModal.pilosityFewerList = record.pilosityFewerList } } } }, // 辅料-转入数量 弹框 ingInQuaCustomCell(record) {console.log('辅料 - 转入数量') return { on: { click: event => { console.log('辅料 - 转入数量') this.$refs.ingInQuaModal.ingInQuaModVis = true this.$refs.ingInQuaModal.planNum = this.planNum this.$refs.ingInQuaModal.record = record record.syTransfers.map(item=>{ if(item.unitCost){ item.unitCost = (item.unitCost).toFixed(3) } }) this.$refs.ingInQuaModal.data = record.syTransfers if(this.fList.length!==0){ this.fList.map(item=>{ if(item.goodsName == record.goodsName){ this.$refs.ingInQuaModal.data = item.syTransfers } }) } } } } }, // 辅料-余下数量 弹框 ingRemQuaCustomCell(record) { return { on: { click: event => { console.log('辅料 - 余下数量') this.$refs.ingRemQuaModal.ingRemQuaModVis = true this.$refs.ingRemQuaModal.data = record.syRemaining } } } }, inputRemark(record,data){ this.$refs.submitInformation.remarkModVis = true this.$refs.submitInformation.value = record.remarks this.$refs.submitInformation.text = data this.$refs.submitInformation.father = record }, closeRemark(value,data,record){ record.remarks=value } }, computed: { // 合计数据 // sumInfoSource() {} } } </script> <style lang="less" scoped> @import '~@assets/less/common.less'; @import '~@assets/less/overwriter.less'; /deep/ .ant-table-thead > tr > th { text-align: center; // font-weight: 700; } /deep/ .ant-table-tbody { text-align: center; } // /deep/ th.replacecolor { // background-color: #ccc; // } //tbas内 小标签 .table-title { font-weight: 700; } .fontColor{ color: red; } /deep/ .ant-tabs-nav .ant-tabs-tab-active { font-size: 18px; } /deep/ .ant-tabs-nav .ant-tabs-tab { font-size: 18px; } /deep/ .ant-tabs-nav .ant-tabs-tab { padding: 0 0 10px 0; } /deep/ .fontColor .ant-form-item-label > label{ color: red !important; } /deep/.ant-table-fixed{ width:18% !important } /deep/.shipData>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-content>.ant-table-fixed-left>.ant-table-body-outer>.ant-table-body-inner>.ant-table-fixed>{ width:29% !important } </style>