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 :form="form">
        <a-card title="线下还款申请信息" :bordered="false">
          <a-layout>
            <a-layout-content style="background:#fff;">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="打款人名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input :disabled="onlyread" placeholder="请输入打款人名称" v-decorator="['paymentName', {}]"
                      :readOnly="onlyread" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="打款日期" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input :disabled="onlyread" v-decorator="['paymentTime', {}]" :readOnly="onlyread" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="打款金额" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input :disabled="onlyread" placeholder="请输入打款金额" v-decorator="['money', {}]"
                      :readOnly="onlyread" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="打款账号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input :disabled="onlyread" placeholder="请输入打款账号" v-decorator="['paymentAccount', {}]"
                      :readOnly="onlyread" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-layout-content>
            <a-layout-sider style="background:#fff;">
              <div class="scoped-img" style="display: flex;align-items: center;flex-direction: column;">
                <a-form-item label="线下还款凭证" style="text-align:center;">
                  <a-upload :disabled="onlyread" name="file" listType="picture-card" accept="image/*"
                    class="avatar-uploader" :showUploadList="false" :action="url.upload" v-decorator="['voucher', {}]">
                    <img :src="recodes.voucher" alt="avatar" style="max-width:200px;max-height:200px;" />
                  </a-upload>
                </a-form-item>
              </div>
            </a-layout-sider>
          </a-layout>
          <!-- <a-row :gutter="24" v-show="!disableSubmit" style="float:right;margin-right:20px;">
                <a-button style="margin-right:10px;" @click="handleCancel">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
          </a-row>-->
        </a-card>

        <a-card title="复核信息" :bordered="false">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="复核结果" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-radio-group @change="handleChange"
                  v-decorator="['secondCheckState', { rules: [{ required: true, message: '请选择复核结果' }] }]">
                  <a-radio :value="1">同意</a-radio>
                  <a-radio :value="2">拒绝</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" v-if="show">
            <a-col :span="12">
              <a-form-item label="还款流水号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                <a-input placeholder="请输入还款流水号"
                  v-decorator="['bankTransRequestNo', { rules: [{ required: true, message: '请输入还款流水号' }] }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="还款日期" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-date-picker @change="changeTime" @ok="yingHuanCount"
                  v-decorator="['actualPaymentTime', { rules: [{ type: 'object', required: true, message: '请输入还款日期' }] }]"
                  show-time format="YYYY-MM-DD HH:mm:ss" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="应还金额计算" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                <a-input-number placeholder="请输入应还金额" :disabled="true" style="width:200px" v-model="occupation" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="实际还款金额(元)" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                <a-input-number style="width:200px"
                  :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                  :parser="value => value.replace(/\\s?|(,*)/g, '')" placeholder="请输入实际还款金额"
                  v-decorator="['actualMoney', { rules: [{ required: true, message: '请输入实际还款金额' }] }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="收款账户" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-select v-decorator="['collectionNo', { rules: [{ required: true, message: '请选择收款账户' }] }]"
                  placeholder="请选择收款账户">
                  <a-select-option v-for="(item, index) in dbCollectionInfo" :key="index" :value="item.accountNo">
                    {{ item.accountName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="还款备注" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }" hasFeedback>
                <a-textarea placeholder="还款备注"
                  v-decorator="['secondCheckRemark', { rules: [{ required: !show, message: '请输入还款备注' }] }]" :rows="4" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-row :gutter="24" v-show="!disableSubmit" style="float:right;margin-right:20px;">
          <a-button style="margin-right:10px;" @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleSubmit">确定</a-button>
        </a-row>
      </a-form>
    </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 {
  modifyCollPersonalApply, queryCollPersonalApplyDetail,
  postAction,
} from '@/api/configApi'
import { legalPersonCalcDueAmount, personalCalcDueAmount, repaymentCalcDueAmount, personalOfflineReview, enterpriseOfflineReview, legalPersonOfflineReview } from '@/api/ziguanApi'

export default {
  name: 'huanKuanModal',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      visible: false,
      confirmLoading: false,
      title: '',
      recodes: {},
      show: true, //默认复核同意
      disableSubmit: false,
      dbCollectionInfo: [], // 进件流编号
      onlyread: true,
      applyNo: '',
      actualPaymentTime: '',//还款时间
      occupation: '',//应还金额
      id: '',
      defaultTabKey: '',
      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: {},
      collPersonalApply: {}, // 进件信息
      collCusBasicInfo: {}, // 个人基本信息

      form: this.$form.createForm(this),
      dateFormat: 'YYYY-MM-DD',
      disableMixinCreated: true,
      url: {
        imgerver: window._CONFIG['domianURL'] + '/sys/common/view',
        syncUser: '/process/extActProcess/doSyncUser',
        // list: '/collPersonalApply/queryCollPersonalApplyList',
        delete: '/sys/user/delete',
        deleteBatch: '/sys/user/deleteBatch',
        exportXlsUrl: '/sys/user/exportXls',
        upload: window._CONFIG['uploadUrl']
      }
    }
  },
  created() {
    // console.log('created')
    // this.initPrudect()
  },
  methods: {
    moment,
    edit(res, data, type) {
      console.log(res, data)
      this.show = true //默认显示同意内容
      this.defaultTabKey = type
      this.recodes = res
      this.dbCollectionInfo = data || []
      this.occupation = ''
      this.form.resetFields()
      this.visible = true

      this.$nextTick(() => {
        this.form.setFieldsValue(res)

      })
    },
    // 还款日期更改
    changeTime(date, dataSting) {

      this.actualPaymentTime = dataSting
      this.yingHuanCount();
    },
    // 应还
    yingHuanCount() {
      var obj = {
        repaymentNo: this.recodes.repaymentNo,
        actualPaymentTime: this.actualPaymentTime
      }
      if (this.defaultTabKey == 1) {
        personalCalcDueAmount(obj)
          .then(res => {
            if (res.status.statusCode == 0) {
              console.log(res.result)
              this.occupation = res.result
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          .finally(() => {

          })
      } else if (this.defaultTabKey == 2) {
        repaymentCalcDueAmount(obj)
          .then(res => {
            if (res.status.statusCode == 0) {
              console.log(res.result)
              this.occupation = res.result
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          .finally(() => {

          })
      } else if (this.defaultTabKey == 3) {
        legalPersonCalcDueAmount(obj)
          .then(res => {
            if (res.status.statusCode == 0) {
              console.log(res)
              this.occupation = res.result
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          .finally(() => {

          })
      }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },
    // 复核选择
    handleChange(value) {
      this.show = value.target.value == 1 ? true : false
      // console.log(this.show)
    },
    add() {
      this.model = {}
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => { })
    },

    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.occupation = ''
      this.selectedRole = []
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          let recode = {
            'id': this.recodes.id,
            'repaymentNo': this.recodes.repaymentNo,
            'actualPaymentAccount': this.recodes.paymentAccount,
          }
          let formData = Object.assign(recode, values)
          console.log(formData)
          // return ''
          formData.secondCheckTime = this.actualPaymentTime
          formData.actualPaymentTime = this.actualPaymentTime
          if (this.defaultTabKey == 1) {
            personalOfflineReview(formData)
              .then(res => {
                if (res.status.statusCode == 0) {
                  this.$message.success(res.status.statusReason)

                  this.close()
                } else {
                  this.$message.warning(res.status.statusReason)
                }
              })
              .finally(() => {
                this.confirmLoading = false
                // this.close()
              })
          } else if (this.defaultTabKey == 2) {
            enterpriseOfflineReview(formData)
              .then(res => {
                if (res.status.statusCode == 0) {
                  this.$message.success(res.status.statusReason)

                  this.close()
                } else {
                  this.$message.warning(res.status.statusReason)
                }
              })
              .finally(() => {
                this.confirmLoading = false
                // this.close()
              })
          } else if (this.defaultTabKey == 3) {
            legalPersonOfflineReview(formData)
              .then(res => {
                if (res.status.statusCode == 0) {
                  this.$message.success(res.status.statusReason)
                  // this.$emit('ok')
                  this.close()
                } else {
                  this.$message.warning(res.status.statusReason)
                }
              })
              .finally(() => {
                this.confirmLoading = false
                // this.close()
              })
          }

        }
      })
    },
    handleCancel() {
      this.close()
    },
    // tabs 回调
    callback(key) {
      if (key == 2) {
        this.$refs.approval.loadData()
      }
    }
  }
}
</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>