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 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: 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 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-select placeholder="选择款项类型或直接录入其他类型"
                       v-model="paymentRegistrationForm.type"
                       style="width: 300px;"
                       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} 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,
          align:'right'
        },
        {
          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:["进度款","结算款","质保金"],
      isShowPaymentRegistration:false,
      paymentRegistrationForm:{
        applyMoney:"",
        deductionMoney:"",
        type:"",
        isLast:false,
        plan:[]
      },
      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',
          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,
        }
      })

      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
      }
      addFundLog(data).then(res=>{
        this.isShowPaymentRegistration = false
        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>