contract-business-web/src/views/finance/components/examineRegistration.vue

<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">{{moneyFormat(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.discountMoney" 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" 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"/>
          </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 xy-table-item-price">
            <el-input placeholder="请填写实际付款金额" v-model="paymentRegistrationForm.actMoney" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:moneyWay>
        <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 multiple style="width: 300px;" v-model="paymentRegistrationForm.moneyWay" placeholder="请选择资金列支渠道">
              <el-option v-for="item in planTypes" :value="item.id" :label="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:extraFormBottom>
        <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.use_money" @input="inputMoney($event,scope.row)"/>
              </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,moneyFormatter} from "@/utils";

export default {
  data() {
    return {
      searchContent:"",
      planTotal:0,
      pageIndex:1,
      //付款登记
      plans:[],
      contract:{},
      payment:[],//合同关联的付款登记
      planTypes:[],
      payTable:[
        {
          label:'支付金额',
          prop:'apply_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:'',
        moneyWay:'',//资金列支渠道
      },
      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: '必须为数字'}
        ],
        moneyWay:[
          {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: {
    inputMoney(e,row){
      row.use_money = e
      this.paymentRegistrationForm.plan.forEach(item => {
        if(item.plan_id == row.id){
          item.use_money = e
        }
      })
    },
    async getPlanTypes(){
      const res = await getparameter({number:'money_way'})
      this.planTypes = res.detail
    },
    //翻页
    pageChange(e){
      this.pageIndex = e
      this.getBudgets()
    },

    //合计金额
    totalMoney(){
      let total = 0.00
      this.payment.map(item => {
        total += Number(item.act_money)
      })
      return moneyFormatter(total)
    },
    //支付占比
    percentPay(){
      let total = this.totalMoney()
      return ((total/this.contract.money)*100).toFixed(2) || 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
      this.paymentRegistrationForm.discountMoney = res.discount_money

      await this.getContract(res.contract)
    },

    //获取合同信息
    async getContract(info){
      this.contract = info

      const res = await getFundLog({contract_id:this.contract.id})
      this.payment = res.data

      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,
        money_way_id:this.paymentRegistrationForm.moneyWay.toString(),
        contract_plan_links:this.paymentRegistrationForm.plan
      }).then(res=>{
        this.$emit('refresh')
        this.isShow = false
        Message({
          type:'success',
          message:'操作成功'
        })
      })
    },

    //计划
    //获取预算计划
    async getBudgets(){
      let res = await getBudget({name:this.searchContent,page_size:10,page:this.plansPageIndex})
      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.use_money,
            new_money:item.money
          }
        })
      }else{
        this.paymentRegistrationForm.plan = []
      }
    },
    //默认选择计划
    toggleSelection(plans) {
      if (plans) {
        this.plans.filter(plan => {
          if(plans.includes(plan.id)){
            plan.use_money = this.paymentRegistrationForm.plan[plans.indexOf(plan.id)].use_money
            return true
          }
        }).map(row => {
          this.$refs.planTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.planTable.clearSelection()
      }
    },
  },
  computed:{
    moneyFormat(){
      return function (money){
        return moneyFormatter(money)
      }
    }
  },
  watch:{
    isShow(newVal){
      if(!newVal){
        this.paymentRegistrationForm.actMoney = ''
        this.paymentRegistrationForm.moneyWay = ''
        this.paymentRegistrationForm.plan = []
        this.$refs.planTable.clearSelection()
      }
    }
  },
  async mounted() {
    await this.getBudgets()
    await 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>