You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

390 lines
12 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<!-- 付款登记审核-->
<xy-dialog title="付款审核" :is-show.sync="isShow" type="form" class="payment-registration" :form="paymentRegistrationForm" :rules="paymentRegistrationRules" ref="paymentRegistration" @submit="editor">
<template v-slot:extraFormTop>
<div class="payment-registration-row">
<div class="payment-registration-row-title">受款单位</div>
<div class="payment-registration-row-content">{{contract.carry_department}}</div>
</div>
<div class="payment-registration-row">
<div class="payment-registration-row-title">合同名称</div>
<div class="payment-registration-row-content">{{contract.name}}</div>
</div>
<div class="payment-registration-row">
<div class="payment-registration-row-title">合同金额</div>
<div class="payment-registration-row-content">{{contract.money}}</div>
</div>
<div style="display: flex">
<div class="payment-registration-row">
<div class="payment-registration-row-title">已付金额</div>
<div class="payment-registration-row-content">{{totalMoney()}} </div>
</div>
<div class="payment-registration-row">
<div class="payment-registration-row-title">支付占比</div>
<div class="payment-registration-row-content">{{percentPay()}}%</div>
</div>
<div class="payment-registration-row">
<div class="payment-registration-row-title">已付笔数</div>
<div class="payment-registration-row-content">{{payment.length}}</div>
<div class="payment-registration-row-content" style="color: #ff0000;padding-left: 16px;cursor: pointer;">
<Poptip :transfer="true">
<div>点击查看列表</div>
<template v-slot:content>
<template v-if="payment&&payment.length>0">
<xy-table :height="200" :list="payment" :table-item="payTable">
<template v-slot:btns><p></p></template>
</xy-table>
</template>
<template v-else>
<div style="text-align: center">暂无已付笔数</div>
</template>
</template>
</Poptip>
</div>
</div>
</div>
</template>
<template v-slot:applyMoney>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>申请付款金额
</div>
<div class="xy-table-item-content xy-table-item-price">
<el-input readonly clearable placeholder="请填写付款金额" v-model="paymentRegistrationForm.applyMoney" style="width: 300px;"/>
</div>
</div>
</template>
<template v-slot:deductionMoney>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>本期扣款金额
</div>
<div class="xy-table-item-content xy-table-item-price">
<el-input readonly clearable placeholder="请填写扣款金额" v-model="paymentRegistrationForm.deductionMoney" style="width: 300px;"/>
</div>
</div>
</template>
<template v-slot:type>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>款项类型
</div>
<div class="xy-table-item-content">
<!-- <el-input readonly clearable placeholder="选择款项类型或直接填写其他类型" v-model="paymentRegistrationForm.type" style="width: 300px;"/>-->
<el-select placeholder="选择款项类型或直接填写其他类型"
v-model="paymentRegistrationForm.type"
style="width: 200px;"
disabled
filterable
allow-create
clearable>
<el-option
v-for="item in paymentType"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:isLast>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否最后一笔
</div>
<div class="xy-table-item-content">
<el-switch disabled v-model="paymentRegistrationForm.isLast"/>
</div>
</div>
</template>
<template v-slot:actMoney>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>实际付款金额
</div>
<div class="xy-table-item-content">
<el-input placeholder="请填写实际付款金额" v-model="paymentRegistrationForm.actMoney" style="width: 300px;"/>
</div>
</div>
</template>
<template v-slot:extraFormBottom v-if="paymentRegistrationForm.isLast">
<Input search enter-button="搜 索" placeholder="搜索预算计划.." v-model="searchContent" @on-search="getBudgets"/>
<xy-table :list="plans" :show-index="false" :table-item="planTable" :height="310" style="margin-top: 10px;" ref="planTable" @select="selectPlan">
<template v-slot:btns>
<el-table-column label="使用金额" header-align="center">
<template slot-scope="scope">
<Input disabled :value="scope.row.use_money" @input="(e)=>scope.row.use_money = e"/>
</template>
</el-table-column>
</template>
</xy-table>
<div style="display: flex;justify-content: flex-end;">
<Page :total="planTotal" show-elevator @on-change="pageChange"/>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {getparameter} from "@/api/system/dictionary"
import {getFundLog,detailFundLog,editorFundLog} from "@/api/paymentRegistration/fundLog"
import {getBudget} from "@/api/budget/budget";
import {detailContract} from "@/api/contract/contract";
import {Message} from "element-ui";
import {parseTime} from "@/utils";
export default {
data() {
return {
searchContent:"",
planTotal:0,
pageIndex:1,
//付款登记
plans:[],
contract:{},
payment:[],//合同关联的付款登记
payTable:[
{
label:'支付金额',
prop:'act_money',
sortable:false,
align:'right'
},
{
label:'时间',
prop:'created_at',
sortable:false,
width:120,
formatter:(t1,t2,value)=>{
return parseTime(new Date(value),'{y}-{m}-{d}')
}
}
],
paymentType:["进度款","结算款","质保金"],
isShow:false,
registrationId:"",
paymentRegistrationForm:{
applyMoney:"",
deductionMoney:"",
type:"",
isLast:false,
plan:[],
actMoney:''
},
paymentRegistrationRules:{
applyMoney:[
{required:true,message:"必填"},
{pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
],
deductionMoney:[
{required:true,message:"必填"},
{pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
],
type:[
{required:true,message:"必选"}
],
actMoney:[
{required:true,message:"必填"},
{pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
]
},
planTable:[
{
sortable:false,
width:36,
type:'selection',
selectable:()=>{
return false
}
},
{
label:"分类",
prop:'type',
formatter:(cell,data,value)=>{
switch (value){
case 1:
return "部门预算"
break;
case 2:
return "水务计划"
break;
default:
return "未知"
}
}
},
{
label:"名称",
prop:'name',
align:'left'
},
{
label:"计划金额",
prop:'money',
align:'right'
}
],
}
},
methods: {
//翻页
pageChange(e){
this.pageIndex = e
this.getBudgets()
},
//合计金额
totalMoney(){
let total = 0.00
this.payment.map(item => {
total += Number(item.act_money)
})
return total.toFixed(2)
},
//支付占比
percentPay(){
let total = this.totalMoney()
return (total/this.contract.money)*100 || 0
},
async getRegistration(id){
this.registrationId = id
const res = await detailFundLog({id})
this.paymentRegistrationForm.type = res.type
this.paymentRegistrationForm.isLast = res.is_end === 1 ? true : false
this.paymentRegistrationForm.deductionMoney = res.apply_money
this.paymentRegistrationForm.applyMoney = res.apply_money
this.paymentRegistrationForm.plan = res.plan_link
await this.getContract(res.contract)
},
//获取合同信息
async getContract(info){
this.contract = info
const res = await getFundLog({contract_id:this.contract.id})
this.payment = res.data
if(!this.paymentRegistrationForm.isLast) return
this.toggleSelection(this.paymentRegistrationForm.plan.map(item => {
return item.plan_id
}))
},
//确认审核
editor(){
editorFundLog({
id:this.registrationId,
contract_id:this.contract.id,
act_money:this.paymentRegistrationForm.actMoney,
status:1
}).then(res=>{
this.$emit('refresh')
this.isShow = false
this.paymentRegistrationForm.actMoney = ''
Message({
type:'success',
message:'操作成功'
})
})
},
//计划
//获取预算计划
async getBudgets(){
let res = await getBudget({name:this.searchContent,page_size:10,page:this.pageIndex})
this.plans = res.data
this.planTotal = res.total
if(!this.paymentRegistrationForm.is_end) return
this.toggleSelection(this.paymentRegistrationForm.plan.map(item => {
return item.plan_id
}))
},
planPageChange(e){
this.plansPageIndex = e
this.getBudgets()
},
selectPlan(sel,row){
if(sel){
this.paymentRegistrationForm.plan = sel.map(item => {
return {
plan_id:item.id,
use_money:item.useMoney,
new_money:item.money
}
})
}else{
this.paymentRegistrationForm.plan = []
}
},
toggleSelection(plans) {
//console.log(this.paymentRegistrationForm)
if (plans) {
plans.map((plan,index) => {
let list = this.plans.map(item => {return item.id})
if(list.indexOf(plan) != -1){
this.plans[list.indexOf(plan)].use_money = this.paymentRegistrationForm.plan[index].use_money
}
})
this.plans.filter(plan => {
return plans.includes(plan.id)
}).map(row => {
this.$refs.planTable.toggleRowSelection(row);
})
} else {
this.$refs.planTable.clearSelection();
}
},
},
async mounted() {
await this.getBudgets()
}
}
</script>
<style scoped lang="scss">
.payment-registration{
&-row{
display: flex;
padding: 6px 0;
&-title{
padding: 0 10px;
}
&-content{
}
}
}
.xy-table-item-label{
width: 140px;
}
.xy-table-item-price{
position: relative;
&::after{
z-index: 1;
position: absolute;
right: 0;
top: 0;
content:''
}
::v-deep .el-input__clear{
position: relative;
right: 30px;
z-index: 2;
}
}
</style>