<template> <div> <a-row> <a-col :span="24"> <div class="mian-title"> <span>设备费-试制设备预算明细表<strong>(金额单位:万元)</strong></span> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="1" class="bg-gray"> <div class="special-middle"> <div>序号</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>设备名称</div> </div> </a-col> <a-col :span="3" class="bg-gray"> <div class="special-middle"> <div>功能和技术指标</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>单价(万元/台套)</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>数量(台套)</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>金额</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>财政资金</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>自筹资金</div> </div> </a-col> <a-col :span="4" class="bg-gray"> <div class="special-middle"> <div>试制单位</div> </div> </a-col> <a-col :span="4" class="bg-gray"> <div class="special-middle"> <div>安置单位</div> </div> </a-col> </a-row> <a-row v-for="(item, index) in manufactureList" :key="'manufactureList'+index" type="flex" class="row_center"> <a-col :span="1"> <div class="special-middle"><a-button icon="close" type="primary" shape="circle" size="small" @click="deleteManufacture(item)"></a-button> {{ index + 1 }}</div> </a-col> <a-col :span="2"> <a-form-model-item :prop="'manufactureList.' + index + '.name'" :rules="{required: true, message: '*', trigger: 'blur',}"> <a-input v-model="item.name" :maxLength="100" style="width: 90%;" /> </a-form-model-item> </a-col> <a-col :span="3"> <a-form-model-item :prop="'manufactureList.' + index + '.functionTarget'" :rules="{required: true, message: '*', trigger: 'blur',}"> <a-input v-model="item.functionTarget" :maxLength="200" style="width: 90%;" /> </a-form-model-item> </a-col> <a-col :span="2"> <a-form-model-item :prop="'manufactureList.' + index + '.unitPrice'" :rules="{required: true, message: '*', trigger: 'blur',}"> <a-input-number v-model="item.unitPrice" @change="outUnitPriceChange(index)" :min="0" :step="0.01" style="width: 90%" /> </a-form-model-item> </a-col> <a-col :span="2"> <a-form-model-item :prop="'manufactureList.' + index + '.quantity'" :rules="{required: true, message: '*', trigger: 'blur',}"> <a-input-number v-model="item.quantity" @change="outNumberChange(index)" :min="1" :step="1" style="width: 90%" /> </a-form-model-item> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(item.totalBudget).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <a-form-model-item :prop="'manufactureList.' + index + '.fundAmount'" :rules="{required: true, message: '*', trigger: 'blur',}"> <a-input-number v-model="item.fundAmount" @change="outFundAmountChange(index)" :min="0" :step="0.01" style="width: 90%" /> </a-form-model-item> </a-col> <a-col :span="2"> <a-form-model-item :prop="'manufactureList.' + index + '.selfAmount'" :rules="{required: true, message: '*', trigger: 'blur',}"> <a-input-number v-model="item.selfAmount" @change="outSelfAmountChange(index)" :min="0" :step="0.01" style="width: 90%" /> </a-form-model-item> </a-col> <a-col :span="4"> <a-form-model-item :prop="'manufactureList.' + index + '.manufactureUnit'" :rules="{required: false, message: '*', trigger: 'blur',}"> <a-input v-model="item.manufactureUnit" :maxLength="100" style="width: 90%;" /> </a-form-model-item> </a-col> <a-col :span="4"> <a-form-model-item :prop="'manufactureList.' + index + '.storageUnit'" :rules="{required: false, message: '*', trigger: 'blur',}"> <a-input v-model="item.storageUnit" :maxLength="100" style="width: 90%;" /> </a-form-model-item> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="6"> <div class="special-middle"> <div>单价5万元及以上试制设备合计</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>/</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ fiftyUpNumber }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(fiftyUpAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(fiftyUpFundAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(fiftyUpSelfAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div>/</div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div>/</div> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="6"> <div class="special-middle"> <div>单价5万元以下试制设备合计</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>/</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ fiftyDownNumber }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(fiftyDownAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(fiftyDownFundAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(fiftyDownSelfAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div>/</div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div>/</div> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="6"> <div class="special-middle"> <div>累计</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>/</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ totalNumber }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(totalAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(totalFundAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div>{{ parseFloat(totalSelfAmount).toFixed(2) }}</div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div>/</div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div>/</div> </div> </a-col> </a-row> <a-row type="flex"> <a-col :span="24" style="text-align: center;"> <div class="special-middle"> <a-button type="dashed" style="width: 50%" @click="addArray"> <a-icon type="plus" /> 添加 </a-button> </div> </a-col> </a-row> </div> </template> <script> const Manufacture = { id: "", objectId: "", name: "", functionTarget: "", unitPrice: 0.00, quantity: 1, totalBudget: 0.00, fundAmount: 0.00, selfAmount: 0.00, manufactureUnit: "", storageUnit: "", } export default { name: "manufactureEdit", props: { manufactureList: { type: Array, default: () => { return []; }, }, }, data() { return { fiftyUpNumber: 0, fiftyUpAmount: 0.00, fiftyUpFundAmount: 0.00, fiftyUpSelfAmount: 0.00, fiftyDownNumber: 0, fiftyDownAmount: 0.00, fiftyDownFundAmount: 0.00, fiftyDownSelfAmount: 0.00, totalNumber: 0, totalAmount: 0.00, totalFundAmount: 0.00, totalSelfAmount: 0.00, }; }, created() { }, methods: { addArray() { this.manufactureList.push({ ...Manufacture }) }, deleteManufacture(item) { let index = this.manufactureList.indexOf(item) if (index !== -1) { this.manufactureList.splice(index, 1) } this.calTotalNumber() this.calTotalAmount() this.calTotalFundAmount() this.calTotalSelfAmount() }, outUnitPriceChange(index) { this.manufactureList[index].totalBudget = this.manufactureList[index].unitPrice * this.manufactureList[index].quantity this.calTotalNumber() this.calTotalAmount() }, outNumberChange(index) { this.manufactureList[index].totalBudget = this.manufactureList[index].unitPrice * this.manufactureList[index].quantity this.calTotalNumber() this.calTotalAmount() }, calTotalNumber() { this.totalNumber = 0 this.fiftyUpNumber = 0 this.fiftyDownNumber = 0 this.manufactureList.forEach(e => { if (e.unitPrice >= 5) this.fiftyUpNumber += e.quantity else this.fiftyDownNumber += e.quantity this.totalNumber += e.quantity }) }, calTotalAmount() { this.totalAmount = 0.00 this.fiftyUpAmount = 0.00 this.fiftyDownAmount = 0.00 this.manufactureList.forEach(e => { if (e.unitPrice >= 5) this.fiftyUpAmount += e.totalBudget else this.fiftyDownAmount += e.totalBudget this.totalAmount += e.totalBudget }) }, outFundAmountChange(index) { this.calTotalFundAmount() }, outSelfAmountChange(index) { this.calTotalSelfAmount() }, calTotalFundAmount() { this.fiftyUpFundAmount = 0.00 this.fiftyDownFundAmount = 0.00 this.totalFundAmount = 0.00 this.manufactureList.forEach(e => { if (e.unitPrice >= 5) this.fiftyUpFundAmount += e.fundAmount else this.fiftyDownFundAmount += e.fundAmount this.totalFundAmount += e.fundAmount }) }, calTotalSelfAmount() { this.fiftyUpSelfAmount = 0.00 this.fiftyDownSelfAmount = 0.00 this.totalSelfAmount = 0.00 this.manufactureList.forEach(e => { if (e.unitPrice >= 5) this.fiftyUpSelfAmount += e.selfAmount else this.fiftyDownSelfAmount += e.selfAmount this.totalSelfAmount += e.selfAmount }) } }, watch: { manufactureList: { handler(manufactureList) { if (!!manufactureList) { this.calTotalNumber() this.calTotalAmount() this.calTotalFundAmount() this.calTotalSelfAmount() } }, }, }, }; </script>