|
|
<template>
|
|
|
<div>
|
|
|
<!-- 付款登记-->
|
|
|
<xy-dialog
|
|
|
title="付款登记"
|
|
|
:is-show.sync="isShowPaymentRegistration"
|
|
|
type="form"
|
|
|
class="payment-registration"
|
|
|
:form="paymentRegistrationForm"
|
|
|
:rules="paymentRegistrationRules"
|
|
|
@submit="submit"
|
|
|
ref="paymentRegistration"
|
|
|
>
|
|
|
<template v-slot:extraFormTop>
|
|
|
<div class="payment-registration-row">
|
|
|
<div class="payment-registration-row-title">受款单位</div>
|
|
|
<div class="payment-registration-row-content">
|
|
|
{{ contract.supply }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="payment-registration-row">
|
|
|
<div class="payment-registration-row-title">{{ nameFormat($route.path.split('_')[1]) }}名称</div>
|
|
|
<div class="payment-registration-row-content">
|
|
|
{{ contract.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="payment-registration-row">
|
|
|
<div class="payment-registration-row-title">{{ nameFormat($route.path.split('_')[1]) }}金额</div>
|
|
|
<div class="payment-registration-row-content">
|
|
|
{{ priceFormat(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">
|
|
|
{{ totalApplyMoney() }} （元）
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="payment-registration-row">
|
|
|
<div class="payment-registration-row-title">已申请笔数</div>
|
|
|
<div class="payment-registration-row-content">
|
|
|
{{ payment.length }}
|
|
|
</div>
|
|
|
</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">
|
|
|
{{ actNumsTotal() }}
|
|
|
</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
|
|
|
clearable
|
|
|
placeholder="请填写付款金额"
|
|
|
v-model="paymentRegistrationForm.applyMoney"
|
|
|
style="width: 150px"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:audit_money>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">审计金额</div>
|
|
|
<div class="xy-table-item-content xy-table-item-price">
|
|
|
<el-input
|
|
|
clearable
|
|
|
placeholder="请填写审计金额"
|
|
|
v-model="form.audit_money"
|
|
|
style="width: 150px"
|
|
|
/>
|
|
|
</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
|
|
|
clearable
|
|
|
placeholder="请填写扣款金额"
|
|
|
v-model="paymentRegistrationForm.deductionMoney"
|
|
|
style="width: 150px"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:remark>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">备注</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
clearable
|
|
|
placeholder="进度款日期：2022.6.8-2022.7.7"
|
|
|
v-model="paymentRegistrationForm.remark"
|
|
|
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-select
|
|
|
placeholder="选择款项类型或直接录入其他类型"
|
|
|
v-model="paymentRegistrationForm.type"
|
|
|
style="width: 150px"
|
|
|
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" style="width: 200px">
|
|
|
<span style="color: red; font-weight: 600; padding-right: 4px"
|
|
|
>*</span
|
|
|
>是否为最后一笔
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-switch v-model="paymentRegistrationForm.isLast" />
|
|
|
<!-- @change="toggleSelection"-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #files v-if="paymentRegistrationForm.type === '结算款'">
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
附件 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-upload
|
|
|
style="width: 300px"
|
|
|
ref="upload"
|
|
|
multiple
|
|
|
:on-success="successHandle"
|
|
|
:before-upload="uploadBefore"
|
|
|
accept=".rar,.zip,.doc,.docx,.pdf,.jpg,.png,.gif,.mp4,.xls,.xlsx"
|
|
|
:action="action"
|
|
|
:file-list="fileList"
|
|
|
:auto-upload="false"
|
|
|
:on-remove="removeHande"
|
|
|
:limit="10"
|
|
|
>
|
|
|
<el-button slot="trigger" size="small" type="primary"
|
|
|
>选取文件</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
style="margin-left: 10px"
|
|
|
size="small"
|
|
|
type="success"
|
|
|
@click="$refs['upload'].submit()"
|
|
|
>开始上传</el-button
|
|
|
>
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
支持文件格式：.rar .zip .doc .docx .pdf .jpg .png .gif .mp4 .xls
|
|
|
.xlsx
|
|
|
<br />单个文件不能超过20M
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:extraFormBottom v-if="false">
|
|
|
<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
|
|
|
:value="scope.row.useMoney"
|
|
|
@input="(e) => (scope.row.useMoney = 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, addFundLog } from "@/api/paymentRegistration/fundLog";
|
|
|
import { getBudget } from "@/api/budget/budget";
|
|
|
import { detailContract, editorContract } from "@/api/contract/contract";
|
|
|
import { Message } from "element-ui";
|
|
|
import { parseTime } from "@/utils";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
fileList: [],
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
searchContent: "",
|
|
|
planTotal: 0,
|
|
|
pageIndex: 1,
|
|
|
//付款登记
|
|
|
plans: [],
|
|
|
planTypes: [],
|
|
|
contract: {},
|
|
|
payment: [], //合同关联的付款登记
|
|
|
payTable: [
|
|
|
{
|
|
|
label: "申请金额",
|
|
|
prop: "apply_money",
|
|
|
sortable: false,
|
|
|
width: 160,
|
|
|
align: "right",
|
|
|
},
|
|
|
{
|
|
|
label: "已付金额",
|
|
|
prop: "act_money",
|
|
|
sortable: false,
|
|
|
width: 160,
|
|
|
align: "right",
|
|
|
},
|
|
|
{
|
|
|
label: "时间",
|
|
|
prop: "created_at",
|
|
|
sortable: false,
|
|
|
width: 120,
|
|
|
formatter: (t1, t2, value) => {
|
|
|
return parseTime(new Date(value), "{y}-{m}-{d}");
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
paymentType: ["首付款","进度款", "结算款", "质保金"],
|
|
|
isShowPaymentRegistration: false,
|
|
|
paymentRegistrationForm: {
|
|
|
applyMoney: "",
|
|
|
//deductionMoney: "",
|
|
|
//audit_money: "",
|
|
|
type: "",
|
|
|
isLast: false,
|
|
|
plan: [],
|
|
|
remark: "",
|
|
|
//files: []
|
|
|
},
|
|
|
form: {
|
|
|
audit_money: 0,
|
|
|
},
|
|
|
paymentRegistrationRules: {
|
|
|
applyMoney: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "必填",
|
|
|
},
|
|
|
{
|
|
|
pattern: /^\d+(\.\d+)?$/,
|
|
|
message: "必须为数字",
|
|
|
},
|
|
|
],
|
|
|
deductionMoney: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "必填",
|
|
|
},
|
|
|
{
|
|
|
pattern: /^\d+(\.\d+)?$/,
|
|
|
message: "必须为数字",
|
|
|
},
|
|
|
],
|
|
|
type: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "必选",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
planTable: [
|
|
|
{
|
|
|
sortable: false,
|
|
|
width: 36,
|
|
|
type: "selection",
|
|
|
},
|
|
|
{
|
|
|
label: "分类",
|
|
|
prop: "type_detail.value"
|
|
|
},
|
|
|
{
|
|
|
label: "名称",
|
|
|
prop: "name",
|
|
|
align: "left",
|
|
|
},
|
|
|
{
|
|
|
label: "计划金额",
|
|
|
prop: "money",
|
|
|
align: "right",
|
|
|
formatter: (v1, v2, value) => {
|
|
|
return `${(value && parseFloat(value) !== 0) ? value : v1.update_money }`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
|
|
}
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
//上传
|
|
|
successHandle(response, file, fileList) {
|
|
|
this.fileList = fileList;
|
|
|
},
|
|
|
removeHande(file, fileList) {
|
|
|
this.fileList = fileList;
|
|
|
},
|
|
|
uploadBefore(file) {
|
|
|
console.log(file);
|
|
|
if ((file.size / 1000) > (20 * 1024)) {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: "上传图片大小超过2M！",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async getPlanTypes() {
|
|
|
const res = await getparameter({
|
|
|
number: "money_way",
|
|
|
});
|
|
|
this.planTypes = res.detail;
|
|
|
},
|
|
|
|
|
|
//翻页
|
|
|
pageChange(e) {
|
|
|
this.pageIndex = e;
|
|
|
this.getBudgets();
|
|
|
},
|
|
|
|
|
|
//合计申请金额
|
|
|
totalApplyMoney() {
|
|
|
let total = 0.0;
|
|
|
this.payment.map((item) => {
|
|
|
total += Number(item.apply_money);
|
|
|
});
|
|
|
return total.toFixed(2);
|
|
|
},
|
|
|
//合计金额
|
|
|
totalMoney() {
|
|
|
let total = 0.0;
|
|
|
this.payment.map((item) => {
|
|
|
total += Number(item.act_money);
|
|
|
});
|
|
|
return total.toFixed(2);
|
|
|
},
|
|
|
//已付笔数
|
|
|
actNumsTotal() {
|
|
|
let total = 0;
|
|
|
this.payment.map((item) => {
|
|
|
if (Number(item.act_money)) {
|
|
|
total++;
|
|
|
}
|
|
|
});
|
|
|
return total;
|
|
|
},
|
|
|
//支付占比
|
|
|
percentPay() {
|
|
|
let total = this.totalMoney();
|
|
|
return Number(this.contract.money) ? ((total / Number(this.contract.money)) * 100).toFixed(2) : 0;
|
|
|
},
|
|
|
|
|
|
//获取合同信息
|
|
|
async getContract(info) {
|
|
|
this.contract = await detailContract({
|
|
|
id: info.id,
|
|
|
});
|
|
|
|
|
|
this.paymentRegistrationForm.plan = this.contract.plans.map((item) => {
|
|
|
return {
|
|
|
plan_id: item.id,
|
|
|
use_money: item.useMoney,
|
|
|
new_money: item.money,
|
|
|
};
|
|
|
});
|
|
|
|
|
|
this.form.audit_money = this.contract.audit_money;
|
|
|
|
|
|
const res = await getFundLog({
|
|
|
contract_id: this.contract.id,
|
|
|
});
|
|
|
|
|
|
this.payment = res.data;
|
|
|
this.fileList = res.files_detail?.map(i => {
|
|
|
return {
|
|
|
url: i?.url,
|
|
|
name: i?.original_name,
|
|
|
response: i
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
submit() {
|
|
|
let data = {
|
|
|
contract_id: this.contract.id,
|
|
|
apply_money: this.paymentRegistrationForm.applyMoney,
|
|
|
discount_money: '',
|
|
|
//discount_money: this.paymentRegistrationForm.deductionMoney,
|
|
|
type: this.paymentRegistrationForm.type,
|
|
|
is_end: this.paymentRegistrationForm.isLast ? 1 : 0,
|
|
|
remark: this.paymentRegistrationForm.remark,
|
|
|
audit_money: '',
|
|
|
//audit_money: this.paymentRegistrationForm.audit_money,
|
|
|
//files:this.fileList? this.fileList.map(i => i?.response?.id):[]
|
|
|
};
|
|
|
addFundLog(data).then((res) => {
|
|
|
//付款申请后同时更新一下合同中审计金额
|
|
|
editorContract({
|
|
|
id: this.contract.id,
|
|
|
audit_money: this.form.audit_money,
|
|
|
}).then((r) => {
|
|
|
this.$emit("paid", {
|
|
|
name: this.contract?.name,
|
|
|
type: this.contract?.type,
|
|
|
number: this.contract?.number,
|
|
|
id: this.contract?.id,
|
|
|
reason: this.paymentRegistrationForm.remark,
|
|
|
yizhifucishu: this.actNumsTotal(),
|
|
|
yizhifujine: this.totalMoney(),
|
|
|
zongjia: this.contract?.money,
|
|
|
zhifucishu: this.contract?.sign_plan?.length || 0,
|
|
|
total: data.apply_money,
|
|
|
out_pay_id: res
|
|
|
});
|
|
|
this.isShowPaymentRegistration = false;
|
|
|
Message({
|
|
|
type: "success",
|
|
|
message: "操作成功",
|
|
|
});
|
|
|
});
|
|
|
this.$refs["paymentRegistration"].reset();
|
|
|
|
|
|
this.$emit('refresh')
|
|
|
});
|
|
|
},
|
|
|
|
|
|
//计划
|
|
|
//获取预算计划
|
|
|
async getBudgets() {
|
|
|
let res = await getBudget({
|
|
|
name: this.searchContent,
|
|
|
page_size: 10,
|
|
|
page: this.pageIndex,
|
|
|
});
|
|
|
this.plans = res.list.data;
|
|
|
this.planTotal = res.list.total;
|
|
|
|
|
|
// 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(e) {
|
|
|
if (!e) {
|
|
|
return;
|
|
|
}
|
|
|
let plans = this.paymentRegistrationForm.plan.map((item) => {
|
|
|
return item.plan_id;
|
|
|
});
|
|
|
if (plans) {
|
|
|
this.plans
|
|
|
.filter((plan) => {
|
|
|
return plans.includes(plan.id);
|
|
|
})
|
|
|
.map((row) => {
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs["planTable"].toggleRowSelection(row);
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
this.$refs["planTable"].clearSelection();
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
priceFormat() {
|
|
|
return function (price) {
|
|
|
return Number(price)
|
|
|
.toFixed(2)
|
|
|
.replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
|
|
|
};
|
|
|
},
|
|
|
|
|
|
nameFormat () {
|
|
|
return function(index) {
|
|
|
if (index == 2) {
|
|
|
return '报销'
|
|
|
}
|
|
|
if (index == 3) {
|
|
|
return '其他支出'
|
|
|
}
|
|
|
return '合同'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShowPaymentRegistration(newVal) {
|
|
|
if (newVal) {
|
|
|
this.getBudgets();
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getPlanTypes();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.payment-registration {
|
|
|
&-row {
|
|
|
display: flex;
|
|
|
|
|
|
padding: 6px 0;
|
|
|
|
|
|
&-title {
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.xy-table-item-label {
|
|
|
width: 200px;
|
|
|
}
|
|
|
|
|
|
.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>
|
