anrui/anrui-riskcenter-ui/src/views/monthlypayment/adjust.vue

<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{ viewTitle }}</div>
      <div>
        <el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <el-form ref="form_obj" :model="formobj" class="formaddcopy02">
        <el-row style="border-top: 1px solid #E0E3EB">
          <el-col :span="24">
            <div class="span-sty colSty">贷款合同编号</div>
            <el-form-item><span class="addinputInfo">{{ formobj.loanContractNo }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">资方</div>
            <el-form-item><span class="addinputInfo">{{ formobj.bankName }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">资方合同编号</div>
            <el-form-item><span class="addinputInfo">{{ formobj.bankContractNo }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">贷款人</div>
            <el-form-item><span class="addinputInfo">{{ formobj.borrowerName }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">车架号</div>
            <el-form-item><span class="addinputInfo">{{ formobj.vinNo }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">期数</div>
            <el-form-item><span class="addinputInfo">{{ formobj.period }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">应还日期</div>
            <el-form-item><span class="addinputInfo">{{ formobj.dueDate }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">本期应还</div>
            <el-form-item><span class="addinputInfo">{{ formobj.dueMoney }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">本期未还</div>
            <el-form-item><span class="addinputInfo">{{ formobj.outstandingMoney }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">还款方式</div>
            <el-form-item><span class="addinputInfo">{{ formobj.returnWay }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty colSty">实还金额</div>
            <el-form-item><el-input v-model="formobj.actualMoney" @keyup.native="UpNumber" clearable placeholder="" class="addinputInfo" style="width: 20%"/></el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import req from '@/api/monthlypayment/monthlypayment'
import { typeValues } from '@/api/Common/dictcommons'

export default {
  name: 'Adjust',
  data() {
    return {
      viewTitle: '',
      submitdisabled: false,
      repaymentWay_list: [],
      formobj: {
        sid: '',
        loanContractNo: '',
        bankName: '',
        bankContractNo: '',
        borrowerName: '',
        vinNo: '',
        period: '',
        dueDate: '',
        outstandingMoney: '',
        dueMoney: '',
        returnWay: '',
        returnWayKey: '',
        actualMoney: ''
      }
    }
  },
  methods: {
    showEdit(sid) {
      this.viewTitle = '月还调整'
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      req.fetchBySid({ sid: sid }).then((res) => {
        if (res.success) {
          this.formobj = res.data
        }
      })
    },
    UpNumber(e) {
      e.target.value = e.target.value.replace(/[^0-9]/g, '') // 清除“数字”和“.”以外的字符
      e.target.value = e.target.value.replace(/^00/, '0') // 开头不能有两个0
      if (e.target.value.indexOf('.') < 0 && e.target.value !== '' && e.target.value !== '-') {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        e.target.value = parseFloat(e.target.value)
      }
    },
    save() {
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.submitdisabled = true
          req.saveOrUpdate(this.formobj).then((res) => {
            if (res.success) {
              this.$message({ showClose: true, type: 'success', message: '保存成功' })
              this.handleReturn('true')
            } else {
              this.submitdisabled = false
            }
          }).catch(() => {
            this.submitdisabled = false
          })
        }
      })
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj = {
        sid: '',
        loanContractNo: '',
        bankName: '',
        bankContractNo: '',
        borrowerName: '',
        vinNo: '',
        period: '',
        dueDate: '',
        outstandingMoney: '',
        dueMoney: '',
        returnWay: '',
        returnWayKey: '',
        actualMoney: ''
      }
      this.submitdisabled = false
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 130px !important;
}

.addinputInfo {
  margin-left: 120px !important;
}
</style>