211 lines
8.0 KiB
Vue
211 lines
8.0 KiB
Vue
<template>
|
|
<div class="project-cost-outpu-drawer" v-if="isOpen">
|
|
<el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="50%" style="padding-left: 20px">
|
|
<template slot="title">
|
|
<div>{{ (title) + " 【项目成本产值管理】" }}</div>
|
|
<right-toolbar @queryTable="loadData" :search="false">
|
|
</right-toolbar>
|
|
</template>
|
|
<div style="margin-top:12px;">
|
|
<el-form ref="form" label-width="160px">
|
|
<el-form-item label="总投资" class="w400">
|
|
<el-input-number :precision="4" v-model="form.totalInv" placeholder="请输入总投资">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
<div class="div-title fblue" style="color: #409eff;">年度投资</div>
|
|
<costYear ref="costYear">
|
|
|
|
</costYear>
|
|
|
|
<div class="div-title fblue" style="color: #409eff;border-bottom: solid 1px #409eff;line-height: 40px;">合同金额</div>
|
|
<el-row style="margin-top:12px;">
|
|
<el-col :span="8">
|
|
<el-form-item label="合同金额" class="w200">
|
|
<el-input-number :precision="4" v-model="form.contract1" placeholder="请输入合同金额">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="合同支付金额" class="w200">
|
|
<el-input-number :precision="4" v-model="form.contract2" placeholder="请输入合同支付金额">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="合同挂账金额" class="w200">
|
|
<el-input-number :precision="4" v-model="form.contract3" placeholder="请输入合同挂账金额">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="div-title fblue" style="color: #409eff;border-bottom: solid 1px #409eff;line-height: 40px;">安措金额</div>
|
|
<el-row style="margin-top:12px;">
|
|
<el-col :span="8">
|
|
<el-form-item label="安措金额" class="w200">
|
|
<el-input-number :precision="4" v-model="form.safety1" placeholder="请输入安措金额">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="安措支付金额" class="w200">
|
|
<el-input-number :precision="4" v-model="form.safety2" placeholder="请输入安措支付金额">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="安措挂账金额" class="w200">
|
|
<el-input-number :precision="4" v-model="form.safety3" placeholder="请输入安措挂账金额">
|
|
</el-input-number>
|
|
<span class="sp-unit">万元</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="div-title fblue" style="color: #409eff;">月度投资</div>
|
|
<costMonth ref="costMonth"></costMonth>
|
|
</el-form>
|
|
<div style="text-align: center;margin-top: 24px;">
|
|
<el-button type="success">保存</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
</el-drawer>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listByProjectId,addYearInvestment,addMonthInvestment } from "@/api/project/costOutput.js";
|
|
import costYear from './costYear.vue'
|
|
import costMonth from './costMonth.vue'
|
|
export default {
|
|
components: {
|
|
costYear,costMonth
|
|
},
|
|
data() {
|
|
return {
|
|
title:'',
|
|
isOpen: false,
|
|
prj: null,
|
|
form:{
|
|
totalInv:null,//总投资
|
|
contract1:null,//合同金额
|
|
contract2:null,//合同支付金额
|
|
contract3:null,//合同挂账金额
|
|
safety1:null,//安措金额
|
|
safety2:null,//安措支付金额
|
|
safety3:null,//安措挂账金额
|
|
|
|
},
|
|
yearInv:[],//年度投资
|
|
monthInv:[],//月度产值
|
|
};
|
|
},
|
|
|
|
mounted() { },
|
|
|
|
methods: {
|
|
|
|
loadData(init) {
|
|
listByProjectId(this.prj.id).then((d) => {
|
|
let tmps=d.data||[];
|
|
this.form.totalInv=this.getValue(tmps,1).money||0;
|
|
this.yearInv=tmps.filter(it=>it.costType==2);
|
|
this.form.contract1=this.getValue(tmps,3).money||0;
|
|
this.form.contract2=this.getValue(tmps,4).money||0;
|
|
this.form.contract3=this.getValue(tmps,5).money||0;
|
|
this.form.safety1=this.getValue(tmps,6).money||0;
|
|
this.form.safety2=this.getValue(tmps,7).money||0;
|
|
this.form.safety3=this.getValue(tmps,8).money||0;
|
|
let objs=tmps.filter(it=>it.costType==9);
|
|
let obj={};
|
|
objs.forEach(it=>{
|
|
if(!obj[it.year]){
|
|
obj[it.year]=[];
|
|
}
|
|
obj[it.year].push(it);
|
|
});
|
|
for(let k in obj){
|
|
this.monthInv.push({
|
|
year:k,
|
|
value:obj[k]
|
|
})
|
|
}
|
|
this.$refs.costYear.init(this.yearInv);
|
|
this.$refs.costMonth.init(this.monthInv);
|
|
});
|
|
},
|
|
getValue(tmps,type){
|
|
let objs=tmps.filter(d=>d.costType==type);
|
|
return objs.length>0?objs[0]:{};
|
|
},
|
|
show(prj) {
|
|
this.prj = prj;
|
|
this.title = prj.projectName;
|
|
this.isOpen = true;
|
|
this.loadData(true);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-cost-outpu-drawer {
|
|
::v-deep .el-drawer {
|
|
min-width: 1400px;
|
|
}
|
|
|
|
::v-deep .el-drawer__header {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
::v-deep .el-drawer__body {
|
|
padding: 0px 24px;
|
|
|
|
.el-form {
|
|
overflow: hidden;
|
|
|
|
.el-form-item {
|
|
margin-bottom: 8px !important;
|
|
&.w400{
|
|
.el-input-number{
|
|
width:400px;
|
|
}
|
|
}
|
|
.el-input-number{
|
|
.el-input-number__decrease{
|
|
display: none;
|
|
}
|
|
.el-input-number__increase{
|
|
display: none;
|
|
}
|
|
.el-input__inner{
|
|
padding: 0px 12px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.sp-unit{
|
|
margin-left:12px;
|
|
}
|
|
}
|
|
.div-title{
|
|
|
|
}
|
|
}
|
|
|
|
.lvl-3 {
|
|
.lbl-title {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|