|
|
@@ -26,20 +26,22 @@
|
|
|
<hr>
|
|
|
<div class="totalFund">
|
|
|
<div class="totalFundLabel">预算总经费</div>
|
|
|
- <el-input v-model="data2.select.fund" style="width: 180px;" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input type="number" class="inputNumber" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model.number="data2.select.fund" style="width: 180px;" placeholder="请输入内容"></el-input>
|
|
|
<div style="line-height: 38px;margin-left: 5px;">(万)</div>
|
|
|
</div>
|
|
|
<!-- 预算经费金额结束 -->
|
|
|
|
|
|
<!-- 设置经费和表格开始 -->
|
|
|
<div class="tabTit">
|
|
|
- <div><p>经费月支出计划</p></div>
|
|
|
+ <div><p>经费月支出计划(元)</p></div>
|
|
|
<el-button @click="setFundBtn" type="primary">设置经费</el-button>
|
|
|
</div>
|
|
|
+ <div class="monthFund">
|
|
|
<el-table
|
|
|
:data="data.tableData"
|
|
|
tooltip-effect="dark"
|
|
|
stripe
|
|
|
+ show-overflow-tooltip="true"
|
|
|
:header-cell-style="{ background: '#f2f2f2',color:'#000' }"
|
|
|
>
|
|
|
<el-table-column
|
|
|
@@ -51,6 +53,8 @@
|
|
|
>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 设置经费和表格结束 -->
|
|
|
|
|
|
|
|
|
@@ -64,7 +68,7 @@
|
|
|
:data="data.tableData2"
|
|
|
tooltip-effect="dark"
|
|
|
stripe
|
|
|
- height="320px"
|
|
|
+ style="height: 300px;"
|
|
|
class="fontSize"
|
|
|
:header-cell-style="{ background: '#f2f2f2',color:'#000' }"
|
|
|
>
|
|
|
@@ -90,9 +94,21 @@
|
|
|
prop="textarea"
|
|
|
label="备注"
|
|
|
align="center"
|
|
|
- width="300">
|
|
|
+ width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="operation"
|
|
|
+ width="200"
|
|
|
+ label="操作"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="operations">
|
|
|
+ <el-button type="primary" @click="amendDialogData(scope.row)" size="mini">修改</el-button>
|
|
|
+ <el-button type="primary" @click="del(scope.row)" size="mini">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
</el-table>
|
|
|
<!-- 经费明细和表格结束 -->
|
|
|
|
|
|
@@ -117,7 +133,7 @@
|
|
|
<div class="dialogTop">
|
|
|
<div class="dagSpan">项目名称</div>
|
|
|
<!-- <el-input v-model="data2.projectName" disabled placeholder="请输入内容"></el-input> -->
|
|
|
- <el-select v-model="data2.select.value" disabled style="width: 100%;" placeholder="请选择">
|
|
|
+ <el-select v-model="data2.select.projectName" disabled style="width: 100%;" placeholder="请选择">
|
|
|
<el-option
|
|
|
v-for="item in data2.options"
|
|
|
:key="item.id"
|
|
|
@@ -154,7 +170,7 @@
|
|
|
</div>
|
|
|
<div class="dagInpS1">
|
|
|
<div class="dagSpan">金额(元)</div>
|
|
|
- <el-input v-model.number="data.dialog.fund" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" class="inputNumber" v-model.number="data.dialog.fund" placeholder="请输入内容"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -188,7 +204,7 @@
|
|
|
<div class="littleBlock">
|
|
|
<div class="dialogLabel">一月</div>
|
|
|
<div>
|
|
|
- <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.one"></el-input>
|
|
|
+ <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" class="inputNumber" v-model.number="data.items.one"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="littleBlock">
|
|
|
@@ -258,17 +274,38 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="littleBlock" style="width: 100%;">
|
|
|
- <div class="dialogLabel">备注</div>
|
|
|
+ <div class="dialogLabel" style="position: relative;top: -20px;">备注</div>
|
|
|
<div style="width: 86%;">
|
|
|
- <el-input v-model="data.items.remark" style="width: 100%;"></el-input>
|
|
|
+ <!-- <el-input type="textarea" :row="6" resize="none" v-model="data.items.remark" style="width: 100%;"></el-input> -->
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ resize="none"
|
|
|
+ v-model="data.items.remark">
|
|
|
+ </el-input>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div slot="footer" class="footer">
|
|
|
<el-button type="primary" @click="commit" class="diaBtn" >确认提交</el-button>
|
|
|
- <el-button @click="setFund=false" class="diaBtn">取消</el-button>
|
|
|
+ <el-button @click="init" class="diaBtn">取消</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!--设置经费dialog对话框结束 -->
|
|
|
+
|
|
|
+ <!-- 删除成员对话框开始 -->
|
|
|
+ <el-dialog
|
|
|
+ title="删除经费明细"
|
|
|
+ :visible.sync="delFundDetail"
|
|
|
+ width="600px"
|
|
|
+ class="delMemberDialog">
|
|
|
+ <span class="deleteContent">确定删除此经费明细？</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="commitDel" class="btn5">确认删除</el-button>
|
|
|
+ <el-button @click="init" class="btn5" >取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 删除成员对话框结束 -->
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
@@ -283,8 +320,17 @@ import { VueEditor } from "vue2-editor";
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- addFundDialog:false,
|
|
|
- setFund:false,
|
|
|
+ iid:[],
|
|
|
+ delFundDetail:false, //删除经费明细对话框
|
|
|
+ addFundDialog:false, //经费明细对话框
|
|
|
+ setFund:false,
|
|
|
+ recompose:0, //判断是否是修改
|
|
|
+ projectFundDetailInput:{
|
|
|
+ fund:'',
|
|
|
+ type:'',
|
|
|
+ disburseProject:'',
|
|
|
+ textarea:''
|
|
|
+ },
|
|
|
mouthItems:[ //表格基础
|
|
|
{prop:'one',label:'一月'},
|
|
|
{prop:'two',label:'二月'},
|
|
|
@@ -309,38 +355,54 @@ import { VueEditor } from "vue2-editor";
|
|
|
init(){
|
|
|
this.addFundDialog=false
|
|
|
this.setFund=false;
|
|
|
+ this.delFundDetail=false;
|
|
|
},
|
|
|
finish(){ //添加经费明细对话框完成按钮
|
|
|
+ if(this.recompose){
|
|
|
+ console.log('修改');
|
|
|
+ this.data.tableData2.forEach((e,i,arr) => {
|
|
|
+ if (e.id == this.iid.id) {
|
|
|
+ if(this.data2.select.fund == '' || this.data2.select.fund==undefined )return this.$message.error('请输入项目预算总经费')
|
|
|
+ if (this.data.dialog.type=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支类别')
|
|
|
+ if (this.data.dialog.disburseProject=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支出项目')
|
|
|
+ if (this.data.dialog.fund=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入金额')
|
|
|
+
|
|
|
+ let oldMoney = this.data.tableData2.reduce((prev,cur)=>{ //默认第一次为0，
|
|
|
+ console.log(prev,cur["fund"]);
|
|
|
+ return prev+cur["fund"]
|
|
|
+ },0); //默认值第一次运算为0
|
|
|
+ // console.log(oldMoney); 第一次0
|
|
|
+ oldMoney+=this.data.dialog.fund; //因为本次的数据还未添加到列表中，所以直接在这里进行相加判断
|
|
|
+ if(oldMoney>(this.data2.select.fund)*10000) return this.$message.error('经费明细超出预算总金额');
|
|
|
+ arr.splice(i,1,this.data.dialog)
|
|
|
+ this.data.dialog={}
|
|
|
+ this.recompose=0
|
|
|
+ return this.init()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
if(this.data2.select.fund == '' || this.data2.select.fund==undefined )return this.$message.error('请输入项目预算总经费')
|
|
|
- let oldMoney = this.data.tableData2.reduce((prev,cur)=>prev=prev+cur["fund"],0)
|
|
|
- oldMoney+=this.data.dialog.fund;
|
|
|
+ if (this.data.dialog.type=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支类别')
|
|
|
+ if (this.data.dialog.disburseProject=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支出项目')
|
|
|
+ if (this.data.dialog.fund=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入金额')
|
|
|
+
|
|
|
+
|
|
|
+ // let oldMoney = this.data.tableData2.reduce((prev,cur)=>prev=prev+cur["fund"],0)
|
|
|
+ let oldMoney = this.data.tableData2.reduce((prev,cur)=>{ //默认第一次为0，
|
|
|
+ console.log(prev,cur["fund"]);
|
|
|
+ return prev+cur["fund"]
|
|
|
+ },0); //默认值第一次运算为0
|
|
|
+ console.log(oldMoney);
|
|
|
+
|
|
|
+ oldMoney+=this.data.dialog.fund; //因为本次的数据还未添加到列表中，所以直接在这里进行相加判断
|
|
|
+
|
|
|
if(oldMoney>(this.data2.select.fund)*10000)return this.$message.error('经费明细超出预算总金额');
|
|
|
this.addFundDetail();
|
|
|
this.init();
|
|
|
- // let p=0;
|
|
|
|
|
|
- // if(this.data2.select.fund == '' || this.data2.select.fund==undefined ){ //判断总金额是否为空
|
|
|
- // return this.$message.error('请输入项目预算总经费')
|
|
|
- // }
|
|
|
- // let val=this.data.tableData2.length
|
|
|
- // console.log(val);
|
|
|
- // if ( val < 1) {
|
|
|
- // if (this.data.dialog.fund > (this.data2.select.fund)*10000) {
|
|
|
- // return this.$message.error('经费明细超出预算总金额')
|
|
|
- // }
|
|
|
- // }else{
|
|
|
- // console.log(this.data.tableData2);
|
|
|
- // this.data.tableData2.forEach((e,i,arr)=>{
|
|
|
- // console.log(arr);
|
|
|
- // p=p+(e.fund)*1
|
|
|
- // })
|
|
|
- // console.log(p);
|
|
|
- // if(p>(this.data2.select.fund)*10000) return this.$message.error('经费明细超出预算总金额')
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
- // this.addFundDetail()
|
|
|
- // this.init();
|
|
|
},
|
|
|
backBtn1(){ //上一步
|
|
|
this.back();
|
|
|
@@ -360,18 +422,36 @@ import { VueEditor } from "vue2-editor";
|
|
|
for(let key in this.data.items){
|
|
|
if ( this.data.items[key] !== '' && this.data.items[key]!='-') {
|
|
|
if (key != 'remark') {
|
|
|
- console.log(this.data.items[key])
|
|
|
+ // console.log(this.data.items[key])
|
|
|
p+=Number(this.data.items[key])
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // console.log(p);
|
|
|
- console.log(p)
|
|
|
- if(p > Number(this.data2.fund)*10000){
|
|
|
- return this.$message.error('金额大于预算')
|
|
|
- }
|
|
|
+ // console.log(p)
|
|
|
+ // console.log(this.data2.select.fund);
|
|
|
+ if(p > this.data2.select.fund*10000) return this.$message.error('金额大于总预算')
|
|
|
this.confirmSetFund()
|
|
|
this.init()
|
|
|
+ },
|
|
|
+ amendDialogData(val){ //修改经费明细数据对话框显示
|
|
|
+ this.recompose=1
|
|
|
+ console.log(val);
|
|
|
+ this.addFundDialog=true;
|
|
|
+ this.data.dialog=val
|
|
|
+ this.iid=val
|
|
|
+ },
|
|
|
+ del(val){ //删除经费明细对话框显示
|
|
|
+ this.delFundDetail=true;
|
|
|
+ console.log(111);
|
|
|
+ this.iid=val
|
|
|
+ },
|
|
|
+ commitDel(){
|
|
|
+ this.data.tableData2.forEach((e,i,arr)=>{
|
|
|
+ if (e.id == this.iid.id) {
|
|
|
+ arr.splice(i,1)
|
|
|
+ this.delFundDetail=false;
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -518,6 +598,58 @@ import { VueEditor } from "vue2-editor";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+ .delMemberDialog{ //删除经费明细对话框样式
|
|
|
+ font-size: 18px;
|
|
|
+ .el-dialog{
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .deleteContent{
|
|
|
+ margin: 30px 0;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-dialog__header{
|
|
|
+ background: #32455b;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .el-dialog__title{
|
|
|
+ color:#fff;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .el-dialog__body{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ // .addDialogMid{
|
|
|
+ // box-sizing: border-box;
|
|
|
+ // padding:0 60px 0 10px;
|
|
|
+ // .addDialogTit{
|
|
|
+ // display: flex;
|
|
|
+ // span{
|
|
|
+ // width: 80px;
|
|
|
+ // font-size: 16px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // text-align: left;
|
|
|
+
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // }
|
|
|
+ .dialog-footer{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .btn5{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+.monthFund{
|
|
|
+ .el-table .cell{
|
|
|
+ // 不换行
|
|
|
+ white-space:nowrap !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
yuanyiming