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">
      <template v-slot:extraFormTop>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">受款单位</div>
          <div class="payment-registration-row-content">受款单位</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>
        <Row>
          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>申请付款金额</Col>
          <Col>
            <Input placeholder="请填写付款金额" v-model="paymentRegistrationForm.applyMoney" style="width: 300px;"></Input>
          </Col>
        </Row>
      </template>
      <template v-slot:deductionMoney>
        <Row>
          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>本期扣款金额</Col>
          <Col>
            <Input placeholder="请填写扣款金额" v-model="paymentRegistrationForm.deductionMoney" style="width: 300px;"></Input>
          </Col>
        </Row>
      </template>
      <template v-slot:actMoney>
        <Row>
          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>实际支付金额</Col>
          <Col>
            <Input placeholder="请填写实际支付金额" v-model="paymentRegistrationForm.actMoney" style="width: 300px;"></Input>
          </Col>
        </Row>
      </template>
      <template v-slot:type>
        <Row>
          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>款项类型
          </Col>
          <Col>
            <Select placeholder="请选择款项类型" v-model="paymentRegistrationForm.type" style="width: 300px;">
              <Option v-for="item in paymentType" :key="item.id" :value="item.id">{{item.value}}</Option>
            </Select>
          </Col>
        </Row>
      </template>
      <template v-slot:isLast>
        <Row>
          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>是否最后一笔</Col>
          <Col>
            <i-switch v-model="paymentRegistrationForm.isLast" @on-change="paymentRegistrationForm.isLast = $event" />
          </Col>
        </Row>
      </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.useMoney ? scope.row.useMoney: scope.row.money" @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:[],
      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:[],
      isShowPaymentRegistration:false,
      paymentRegistrationForm:{
        applyMoney:"",
        deductionMoney:"",
        actMoney:'',
        type:"",
        isLast:"",
        plan:[]
      },
      paymentRegistrationRules:{
        applyMoney:[
          {required:true,message:"必填"}
        ],
        deductionMoney:[
          {required:true,message:"必填"}
        ],
        actMoney:[
          {required:true,message:"必填"}
        ],
        type:[
          {required:true,message:"必选"}
        ]
      },
      planTable:[
        {
          sortable:false,
          width:36,
          type:'selection'
        },
        {
          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 this.contract.money/total || 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 ?? item.money,
          new_money:item.money,
        }
      })

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

      this.toggleSelection(this.paymentRegistrationForm.plan.map(item => {
        return item.plan_id
      }))
    },

    //获取款项类型
    async getPaymentType(){
      const res = await getparameter({number:'payment_type'})
      this.paymentType = res.detail
    },

    submit(){
      addFundLog({
        contract_id:this.contract.id,
        apply_money:this.paymentRegistrationForm.applyMoney,
        discount_money:this.paymentRegistrationForm.deductionMoney,
        act_money:this.paymentRegistrationForm.actMoney,
        type:this.paymentRegistrationForm.type,
        is_end:this.paymentRegistrationForm ? 1 : 0,
        contract_plan_links:this.paymentRegistrationForm.plan
      }).then(res=>{
        this.isShowPaymentRegistration = false
        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

      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 ?? item.money,
            new_money:item.money
          }
        })
      }else{
        this.paymentRegistrationForm.plan = []
      }
    },
    toggleSelection(plans) {
      if (plans) {
        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.getPaymentType()
    await this.getBudgets()

  }
}
</script>

<style scoped lang="scss">
.payment-registration{

  &-row{
    display: flex;

    padding: 6px 0;
    &-title{

      padding: 0 10px;
    }
    &-content{

    }
  }
}
</style>