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

<template>
  <div>
    <xy-dialog :is-show.sync="isShow" title="付款计划" @on-ok="isShow = false">
      <template v-slot:normalContent>
        <template v-if="isSign">
          <el-button size="small" type="primary" icon="el-icon-plus" style="margin-bottom: 10px;" @click="isShowAddPlan = true">新增付款计划</el-button>
        </template>
        <xy-table :height="300" :list="list" :table-item="table">
          <template v-slot:btns>
            <div></div>
          </template>
        </xy-table>
      </template>
    </xy-dialog>

    <!--    新增计划-->
    <xy-dialog :is-show.sync="isShowAddPlan" type="form" title="新增计划" :form="planForm" :rules="planRules" :width="48" @submit="submit">
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;">*</span>
            <span>日期</span>
          </div>
          <div class="xy-table-item-content">
            <el-datePicker style="width: 300px" v-model="planForm.date" type="date" placeholder="请选择日期"></el-datePicker>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;">*</span>
            <span>内容</span>
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 300px" type="textarea" v-model="planForm.content" placeholder="请输入内容"/>
          </div>
        </div>
      </template>
      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;">*</span>
            <span>金额</span>
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input style="width: 300px" v-model="planForm.money" placeholder="请输入金额"/>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span>备注</span>
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 300px" type="textarea" v-model="planForm.remark" placeholder="请输入备注"/>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {addContractSign, getContractSign} from "@/api/contractSign/contractSign"
import {parseTime,moneyFormatter} from "@/utils";
import {Message} from "element-ui";
export default {
  data() {
    return {
      id:'',
      isSign:false,
      isShow:false,
      list:[],
      table:[
        {
          prop:'contract.name',
          label:'项目名称',
          width:170
        },
        {
          prop:'money',
          label:'计划付款金额（元）',
          align:'right',
          width:168,
          formatter:(cell,data,value)=>{
            return moneyFormatter(value)
          }
        },
        {
          prop:'date',
          label:'计划付款日期',
          width: 200
        },
        {
          prop:'created_at',
          label:'创建信息',
          width: 200,
          formatter:(v1,v2,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        },
        {
          prop:'content',
          label:'内容',
          minWidth:180,
          align:'left'
        },
        {
          prop:'contract.created_at',
          label:'合同签订日期',
          width: 200,
          formatter:(v1,v2,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        },
        {
          prop:'contract.supply',
          label:'受款单位',
          width: 180
        },
        {
          prop:'admin.name',
          label:'经办人',
          width: 180
        },
        {
          prop:'department.name',
          label:'经办科室',
          width: 200
        }
      ],

      isShowAddPlan:false,
      planForm:{
        date:'',
        money:'',
        content:'',
        remark:''
      },
      planRules:{
        date:[
          {required:true,message:"必填"}
        ],
        content:[
          {required:true,message:"必填"}
        ],
        money:[
          {required:true,message:"必填"},
          {pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
        ]
      }
    }
  },
  methods: {
    async getSignPlan(contractId){
      this.id = contractId
      const res = await getContractSign({contract_id:contractId})
      this.list = res.data
      console.log(res)
    },

    submit(){
      console.log(this.planForm)
      addContractSign({
        contract_id:this.id,
        date:`${new Date(this.planForm.date).getFullYear()}-${new Date(this.planForm.date).getMonth()+1}-${new Date(this.planForm.date).getDate()}`,
        content:this.planForm.content,
        money:this.planForm.money,
        remark:this.planForm.remark
      }).then(res=>{
        this.isShowAddPlan = false
        this.getSignPlan(this.id)
        console.log(res)
        Message({
          type:'success',
          message:'操作成功'
        })
      })
    },
  },

}
</script>

<style scoped lang="scss">
.add-plan{
  display: flex;
  align-items: center;
}

.xy-table-item-label{
  width: 140px;
}
.xy-table-item-price{
  position: relative;
  &::after{
    position: absolute;
    right: 0;
    top: 0;
    content:'（元）'
  }
}
.xy-table-item-price-wan{
  position: relative;
  &::after{
    position: absolute;
    right: 0;
    top: 0;
    content:'（万元）'
  }
  ::v-deep .el-input__clear{
    position: relative;
    right: 46px;
    z-index: 2;
  }
}
.xy-table-item-year{
  position: relative;
  &::after{
    position: absolute;
    right: 4%;
    top: 0;
    content:'年'
  }
}
::v-deep .el-input__inner{
  text-align: left;
}
</style>