contract-business-web/src/views/contract/components/paymentRegistration.vue

<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">合同名称</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">{{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 #act_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">实付日期
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="paymentRegistrationForm.act_date" value-format="yyyy-MM-dd" style="width: 150px;">
            </el-date-picker>
          </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 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 {
        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: "",
          act_date: '',
          type: "",
          isLast: false,
          plan: [],
          remark: ""
        },
        form: {
          audit_money: 0
        },
        paymentRegistrationRules: {
          applyMoney: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/,
              message: '必须为数字'
            }
          ],
          deductionMoney: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/,
              message: '必须为数字'
            }
          ],
          type: [{
            required: true,
            message: "必选"
          }]
        },
        planTable: [{
            sortable: false,
            width: 36,
            type: 'selection'
          },
          {
            label: "分类",
            prop: 'type',
            formatter: (cell, data, value) => {
              let res = this.planTypes.filter(item => {
                return item.id === value
              })
              return res[0]?.value || '未知'
            }
          },
          {
            label: "名称",
            prop: 'name',
            align: 'left'
          },
          {
            label: "计划金额",
            prop: 'money',
            align: 'right'
          }
        ],
      }
    },
    methods: {
      async getPlanTypes() {
        const res = await getparameter({
          number: 'money_way'
        })
        this.planTypes = res.detail
      },

      //翻页
      pageChange(e) {
        this.pageIndex = e
        this.getBudgets()
      },

      //合计申请金额
      totalApplyMoney() {
        let total = 0.00
        this.payment.map(item => {
          total += Number(item.apply_money)
        })
        return total.toFixed(2)
      },
      //合计金额
      totalMoney() {
        let total = 0.00
        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 ((total / 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
      },

      submit() {
        let data = {
          contract_id: this.contract.id,
          apply_money: this.paymentRegistrationForm.applyMoney,
          discount_money: this.paymentRegistrationForm.deductionMoney,
          type: this.paymentRegistrationForm.type,
          is_end: this.paymentRegistrationForm.isLast ? 1 : 0,
          remark: this.paymentRegistrationForm.remark,
          audit_money: this.paymentRegistrationForm.audit_money,
        }
        addFundLog(data).then(res => {
          this.isShowPaymentRegistration = false
          //付款申请后同时更新一下合同中审计金额
          editorContract({
            id: this.contract.id,
            audit_money: this.form.audit_money
          }).then(r => {
            Message({
              type: 'success',
              message: "操作成功"
            })
          });
          this.$refs['paymentRegistration'].reset()
        })
      },

      //计划
      //获取预算计划
      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,')
        }
      }
    },
    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: 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>