picc / admin-no-ui · Files

<template>
  <a-modal :title="title" :width="1000" :centered="true" :visible="visible" :confirmLoading="confirmLoading"
    @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" :maskClosable="false" style="top:20px;"
    class="scope-link-man">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-card title="押品基本信息" :bordered="false">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="押品名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入押品名称" v-decorator="['mortgageName', {
                  'initialValue': model ? model.mortgageName : '', 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 placeholder="请选择押品类型" :disabled="onlyread && disableSubmit"
                  v-decorator="['mortgageType', { initialValue: model ? model.mortgageType : '', rules: [{ required: true, message: '请输入押品类型' }] }]">
                  <a-select-option :value="1">房产</a-select-option>
                  <a-select-option :value="2">汽车</a-select-option>
                  <a-select-option :value="3">货物</a-select-option>
                  <a-select-option :value="4">其它</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label=" 押品产权人" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入押品产权人" v-decorator="['mortgagePropertyOwner', {
                  'initialValue': model ? model.mortgagePropertyOwner : ''
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="押品产权人证件号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入押品产权人证件号" v-decorator="['mortgageManCardNo', {
                  'initialValue': model ? model.mortgageManCardNo : '', rules: [{
                    required: true,
                    message: '请输入有押品产权人证件号'
                  }]
                }]" />
              </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 }">
                <a-input placeholder="请输入抵押人" v-decorator="['mortgageManName', {
                  'initialValue': model ? model.mortgageManName : '', 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 placeholder="请选择押品类型" :disabled="onlyread && disableSubmit"
                  v-decorator="['relation', { initialValue: model ? model.relation : '', rules: [{ required: true, message: '请输入押品类型' }] }]">
                  <a-select-option :value="1">本人</a-select-option>
                  <a-select-option :value="2">朋友</a-select-option>
                  <a-select-option :value="3">亲戚</a-select-option>
                  <a-select-option :value="4">其它</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="抵（质）押权证编号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入抵（质）押权证编号" v-decorator="['mortgageCertificateNo', {
                  'initialValue': model ? model.mortgageCertificateNo : '', rules: [{
                    required: true,
                    message: '请输入抵（质）押权证编号'
                  }]
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="抵(质)押登记机构" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入抵(质)押登记机构" v-decorator="['mortgageRegisterMechanism', {
                  'initialValue': model ? model.mortgageRegisterMechanism : ''
                }]" />
              </a-form-item>
            </a-col>
          </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-input placeholder="请输入购买价格" v-decorator="['purchasePrice', {
                  'initialValue': model ? model.purchasePrice : ''
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="使用年限" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入使用年限" v-decorator="['useYear', {
                  'initialValue': model ? model.useYear : ''
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="评估价格" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入评估价格" v-decorator="['assessmentAmount', {
                  'initialValue': model ? model.assessmentAmount : ''
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="评估时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-date-picker :format='dateFormat' show-time placeholder="请输入评估时间"
                @change="onChangeTime"
                  :disabled="onlyread && disableSubmit" v-decorator="['assessmentTime', {
                    'initialValue': model ? model.assessmentTime : '', rules: [{
                      required: true,
                      message: '请输入评估时间'
                    }]
                  }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="评估机构" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入评估机构" v-decorator="['assessmentMechanism', {
                  'initialValue': model ? model.assessmentMechanism : ''
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="评估人" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入评估人" v-decorator="['assessmentMan', {
                  'initialValue': model ? model.assessmentMan : ''
                }]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="本次担保金额" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input placeholder="请输入本次担保金额" v-decorator="['guaranteeAmount', {
                  'initialValue': model ? model.guaranteeAmount : '', rules: [{
                    required: true,
                    message: '请输入本次担保金额'
                  }]
                }]" />
              </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 }">
                <a-textarea rows="2" placeholder="请输入备注" v-decorator="['remark', {
                  'initialValue': model ? model.remark : ''
                }]" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { saveOrUpdateGuaranteeInfoFollow } from '@/api/configApi'
import pick from 'lodash.pick'

export default {
  name: 'BaoxianModal',
  props: {
    typeBtn: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      fileList: [],
      fileListShow: false,
      onlyread: false,
      disableSubmit: true,
      title: '',
      status: '',
      dateFormat: 'YYYY-MM-DD 00:00:00',
      validatorRules: {},
      url: {
        upload: window._CONFIG['uploadUrl']
      },
      model: {},
      id: '',
      form: this.$form.createForm(this),
      newList: {},
      btnType: '',
      updateBtn:'',
      journalTime:'',
      modelList:[]
    }
  },
  methods: {
    edit(record) {
      this.form.resetFields()
      this.id = record.id
      this.model = Object.assign({}, record)
      this.journalTime = this.model.assessmentTime
      console.log(this.model)
      this.visible = true
      this.btnType = "edit"
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'bankName', 'bankCardType'))
      })
    },

    add(applyNo) {
      let data = { applyNo: applyNo, accountType: 1 }
      this.model = Object.assign({}, data)
      this.journalTime = ''
      this.form.resetFields()
      this.visible = true
      this.btnType = "add"
    },

    close() {
      // this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    onChangeTime(value, dateString) {
      this.journalTime = dateString
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          if (this.updateBtn == 'edit') {
            var id = { id: this.id }
          }else if(this.updateBtn == 'add'){
            var id = ""
          }
          let formData = Object.assign(values)
          formData.assessmentTime = this.journalTime
          formData.orderNo = this.modelList.orderNo
          formData.guaranteeType = this.modelList.guaranteeType
          formData.customerType = this.modelList.customerType
          formData.guaranteeName = this.modelList.guaranteeName
          if (this.typeBtn == 'edit') {
            saveOrUpdateGuaranteeInfoFollow(formData)
              .then(res => {
                if (res.status.statusCode == 0) {
                  this.$message.success(res.status.statusReason)
                  this.$emit('commonBankAccountModalOk')
                } else {
                  this.$message.warning(res.status.statusReason)
                }
              })
              .finally(() => {
                this.confirmLoading = false
                this.close()
              })
          } else {
            this.$emit('tableList', formData)
            this.confirmLoading = false
            this.close()
          }
        }
      })
    },
    handleCancel() {
      this.close()
    },
    clickProject(v) {
      console.log(v)
      window.open(v.fileUrl)
    },
    handleDelete(v) {
      this.fileListShow = true
      this.fileList = []
    },
    handleChange(info) {
      this.confirmLoading = true
      let fileList = [...info.fileList]
      fileList.slice(-2)
      if (info.file.status === 'done') {
        if (info.file.response.code == 200) {
          this.confirmLoading = false
          fileList.map(file => {
            if (file.response) {
              let fileData = {
                customerNo: this.customerNo,
                fileUrl: file.response.data.fileURL,
                name: file.response.data.fileName,
                tempType: 'CUSTOMIZE'
              }
              this.fileList.push(fileData)
              this.fileList = this.fileList.filter(item => {
                return item.fileUrl == fileData.fileUrl
              })
              console.log(this.fileList)
              this.fileListShow = false
            }
          })
        }
        this.$message.success(`${info.file.name} 上传成功!`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
  }
}
</script>
<style>
.scope-link-man .ant-modal-body {
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 200px;
}
</style>