picc / admin-no-ui · Files

<template>
  <a-modal :maskClosable="false" :title="title" :width="1000" :centered="false" :visible="visible"
    :okButtonProps="{ props: { disabled: disableSubmit } }" :confirmLoading="confirmLoading" @ok="handleSubmit"
    @cancel="handleCancel" cancelText style="top: 20px" class="scoped-person">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-card title="还款基本信息" :bordered="false">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item prop="repaymentMethod" label="还款方式" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }"
                hasFeedback>
                <a-select ref="select" v-model="model.repaymentMethod" @change="huankuan" placeholder="还款方式">
                  <a-select-option value="NORMAL_REPAYMENT">正常还款</a-select-option>
                  <a-select-option disabled value="EARLY_REPAYMENT">提前还款</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <template v-if="repaymentMethodType == 'EARLY_REPAYMENT'">
              <a-col :span="12">
                <a-form-model-item prop="repaymentMode" label="还款模式" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }"
                  hasFeedback>
                  <a-select ref="select" v-model="model.repaymentMode" placeholder="还款模式">
                    <a-select-option value="FULL">全额</a-select-option>
                    <a-select-option value="PART">部分</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item prop="repaymentHandlerMethod" label="处理类型" :labelCol="{ span: 8 }"
                  :wrapperCol="{ span: 16 }" hasFeedback>
                  <a-select ref="select" v-model="model.repaymentHandlerMethod" placeholder="处理类型">
                    <a-select-option value="NUMBER_OF_PERIODS_UN_CHANGED">期数不变</a-select-option>
                    <a-select-option value="BASE_UN_CHANGED">基数不变</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item prop="" label="还款金额" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                  <a-input placeholder="还款金额" />
                </a-form-model-item>
              </a-col>
            </template>
            <div></div>
            <a-col :span="12">
              <a-form-model-item prop="payCompleteTime" label="还款时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }"
                hasFeedback>
                <a-date-picker style="width: 100%" placeholder="请选择还款日期" v-model="model.payCompleteTime" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="orderBillNo" label="账单编号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }"
                hasFeedback>
                <a-input placeholder="账单编号" v-model="model.orderBillNo" @change="listNo" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="还款账单信息" :bordered="false">
          <a-row :gutter="24">
            <a-col>
              <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" ref="table"
                size="middle" bordered :columns="textData" :dataSource="bills" :pagination="false">
              </a-table>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="还款账户信息" :bordered="false">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item prop="totalMoney" label="应还款金额计算" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="应还款金额计算" v-model="totalMoney" :readOnly="true" />
                <a-button @click="shisuan" type="primary">应还金额测算</a-button>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="actualSumMoney" label="实际还款金额" :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 16 }">
                <a-input placeholder="实际还款金额" v-model="model.actualSumMoney" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="actualCollectAccount" label="收款账户" :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 16 }">
                <a-input placeholder="收款账户" v-model="model.actualCollectAccount" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="remark" label="备注" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-textarea v-model="model.remark" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" style="float:right;margin-right:20px;">
            <a-button style="margin-right:10px;" @click="handleCancel">取消</a-button>
            <a-button type="primary" @click="handleSubmit" :disabled="watchBtn">确定</a-button>
          </a-row>
        </a-card>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import pick from 'lodash.pick'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/CoreListMixin'
import { paymentState } from '@/data/params'
import { personalGetPage, enterpriseGetPage, repaymentTry, repaymentApply } from '@/api/configApi'

export default {
  name: 'huanKuanModal',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      title: '',
      visible: false,
      confirmLoading: false,
      disableSubmit: false,
      onlyread: true,
      paymentState: paymentState,
      recodes: {}, //详情基础信息
      id: '',
      validatorRules: {
        idCard: {
          rules: [
            {
              required: true,
              pattern:
                /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/,
              message: '请输入身份证号',
            },
          ],
        },
      },
      creditList: '',
      model: {
        totalMoney: ""
      },
      totalMoney: "",
      textData: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '账单编号',
          align: 'center',
          dataIndex: 'orderBillNo',
        },
        {
          title: '子账单编号',
          align: 'center',
          dataIndex: 'billNo',
        },
      ],
      repaymentAccountInfo: {}, // 还款账户信息
      paymentAccountInfo: {}, // 收款账户信息
      bills: [], // 账单列表
      form: this.$form.createForm(this),
      dateFormat: 'YYYY-MM-DD',
      disableMixinCreated: true,
      url: {
        imgerver: window._CONFIG['domianURL'] + '/sys/common/view',
        syncUser: '/process/extActProcess/doSyncUser',
        // list: '/repaymentAccountInfo/queryCollPersonalApplyList',
      },
      listType: '',
      customerNo: '',
      billNoList: [],
      repaymentMethodType: "",
      shisuanList: [],
      businessChannelNo: '',
      watchBtn:true
    }
  },
  created() {
    console.log('created')
  },
  methods: {
    //转化还款状态
    changePay(t) {
      for (var i = 0; i < this.paymentState.length; i++) {
        if (t == this.paymentState[i].value) {
          return this.paymentState[i].label
        }
      }
      // console.log(t)
      return '暂无'
    },
    moment,
    edit(res, applyNo) {
      this.defaultTabKey = '1'
      this.recodes = res
      this.repaymentAccountInfo = res.repaymentAccountInfo || {}
      this.paymentAccountInfo = res.paymentAccountInfo || {}
      console.log(this.paymentAccountInfo)
      this.bills = res.bills || []
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => { })
    },
    add() {
      this.model = {}
      this.form.resetFields()
      this.bills = []
      this.totalMoney = ''
      this.visible = true
      this.$nextTick(() => { })
    },
    onSelectChange(selectedRowKeys, record) {
      this.selectedRowKeys = selectedRowKeys
      this.billNoList = record
      this.customerNo = record[0].customerNo
      console.log('selectedRowKeys changed: ', record);
    },
    huankuan(value) {
      //console.log(value)
      this.repaymentMethodType = value
    },
    shisuan() {
      var newArr = this.billNoList.map((item, index) => {
        return item.billNo
      })
      let p = {
        customerNo: this.customerNo,
        billNoList: newArr,
        orderBillNo: this.model.orderBillNo,
        repaymentMethod: this.model.repaymentMethod,
        repaymentMode: this.model.repaymentMode,
        repaymentHandlerMethod: this.model.repaymentHandlerMethod,
        repaymentAmount: this.model.repaymentAmount
      }
      repaymentTry(p).then(res => {
        if (res.status.statusCode == 0) {
          this.totalMoney = res.result.totalMoney
          this.shisuanList = res.result
          this.watchBtn = false
          console.log(this.shisuanList)
        } else {
          this.$message.warning(res.status.statusReason)
        }
      });
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.confirmLoading = true
          this.model.customerNo = this.customerNo
          let p = {
            customerNo: this.customerNo,
            billNoList: this.shisuanList.pendingBillNoList,
            orderBillNo: this.model.orderBillNo,
            pendingBillMap: this.shisuanList.pendingBillMap,
            actualSumMoney: this.model.actualSumMoney,
            repayChannel: 2,
            businessChannelNo: this.businessChannelNo,
            payCompleteTime: this.model.payCompleteTime.format("YYYY-MM-DD hh:mm:ss"),
            repaymentType: "OFF_LINE",
            dueSumMoney: this.totalMoney,
            repaymentMethod: this.model.repaymentMethod,
            offlineRepaymentApply: {
              remark: this.model.remark,
              actualCollectAccount: this.model.actualCollectAccount
            }
          }
          repaymentApply(p).then(res => {
            if (res.status.statusCode == 0) {
              this.$message.success(res.status.statusReason)
            } else {
              this.$message.warning(res.status.statusReason)
            }
          }).finally(() => {
            this.confirmLoading = false
            this.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    // tabs 回调
    callback() { },
    listNo(val) {
      console.log(val.target.value)
      let p = {
        pageNo: 1,
        pageSize: 1000,
        params: {
          orderBillNo: val.target.value
        }
      }
      if (this.listType == 1) {
        personalGetPage(p).then(res => {
          if (res.status.statusCode == 0) {
            let lis = res.result.records
            this.bills = lis.filter(item => item.payStatus == 20).reverse()
            if (this.bills == "") {
              this.$message.warning("不存在待还款账单")
            } else {
              this.businessChannelNo = res.result.records[0].businessChannelNo
            }
          } else {
            this.$message.warning(res.status.statusReason)
          }
        });
      } else {
        enterpriseGetPage(p).then(res => {
          if (res.status.statusCode == 0) {
            let lis = res.result.records
            this.bills = lis.filter(item => item.payStatus == 20).reverse()
            if (this.bills == "") {
              this.$message.warning("不存在待还款账单")
            } else {
              this.businessChannelNo = res.result.records[0].businessChannelNo
            }
          } else {
            this.$message.warning(res.status.statusReason)
          }
        });
      }
    }
  },
}
</script>
<style>
.scoped-person .ant-modal-body {
  padding: 0 24px !important;
}

.scoped-person .ant-modal-body {
  overflow-y: scroll;
  min-height: 600px;
  max-height: 600px !important;
}

.scoped-person .ant-tabs-bar {
  margin-bottom: 0;
}

.scoped-person .ant-card-body {
  padding: 10px 24px;
}

.scoped-person .ant-layout-sider {
  flex: 0 0 300px;
  max-width: 300px !important;
  min-width: 300px !important;
  width: 300px !important;
}

.scoped-person .ant-modal-footer {
  display: none;
}

.scoped-person .scoped-img img {
  width: 200px;
}
</style>