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-model ref="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              prop="guaranteeManType"
              label="担保人类型"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
            >
              <a-select
                placeholder="请选择担保人类型"
                :disabled="onlyread && disableSubmit"
                v-model="model.guaranteeManType"
                @change="typeChange"
              >
                <a-select-option :value="1">个人</a-select-option>
                <a-select-option :value="2">企业</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              prop="guaranteeTimeContract"
              label="担保签约日期"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
            >
              <a-date-picker
                :format="dateFormat"
                show-time
                placeholder="请输入担保签约日期"
                @change="onChangeTime"
                :disabled="onlyread && disableSubmit"
                v-model="model.guaranteeTimeContract"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              prop="guaranteeManName"
              label="担保人名称"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
            >
              <a-select
                v-model="model.guaranteeManName"
                placeholder="请选择担保人名称"
                :disabled="onlyread && disableSubmit"
                @change="nameChange"
              >
                <a-select-option v-for="(item, index) in nameList" :key="index" :value="item.guarantorName">{{
                  item.guarantorName
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              prop="guaranteeIdCardNo"
              label="担保人证件号"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
            >
              <a-select
                v-model="model.guaranteeIdCardNo"
                placeholder="请选择证件号码"
                :disabled="onlyread && disableSubmit"
                @change="moneyChange"
              >
                <a-select-option v-for="(item, index) in idCardList" :key="index" :value="item.identificationNumber">{{
                  item.identificationNumber
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              prop="guaranteeMobilePhone"
              label="联系人手机号"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
            >
              <a-select
                v-model="model.guaranteeMobilePhone"
                placeholder="请选择联系人手机号"
                :disabled="onlyread && disableSubmit"
              >
                <a-select-option v-for="(item, index) in phoneList" :key="index" :value="item.phoneNo">{{
                  item.phoneNo
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              prop="guaranteeAmount"
              label="本次担保金额"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
            >
              <a-input placeholder="请输入本次担保金额" v-model="model.guaranteeAmount" @change="mountChange" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item prop="" label="扩展一" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input placeholder="请输入扩展一" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="" label="扩展二" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input placeholder="请输入扩展二" />
            </a-form-model-item>
          </a-col> -->
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item prop="remark" label="备注" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-textarea rows="2" placeholder="请输入备注" v-model="model.remark" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item prop="guaranteeFileIdentifyingCode" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="回访文件" extra="">
              <a-upload
                name="file"
                :action="url.upload"
                :headers="headers"
                @change="huifangwenjian"
                :disabled="onlyread && disableSubmit"
                v-model="guaranteeFileIdentifyingCode"
              >
                <a-button> <a-icon type="upload" />选择 </a-button>
              </a-upload>
              <div class="hoverEvent" style="position: relative; width: 500px" v-for="v in fileWenjian" :key="v.id">
                <span @click.stop="hunyinClickProject(v)">{{ v.fileName }}</span>
                <a-popconfirm title="确定删除吗?" @confirm="hunyinHandleDelete(v)">
                  <a class="hoverShow">删除</a>
                </a-popconfirm>
              </div>
              <span v-show="marriageProofShow" style="color: red; font-size: 14px; padding-left: 10px">请上传文件</span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  saveOrUpdateGuaranteeInfoFollow,
  ossDownloadFile,
  listFileUrl,
  queryGuarantorInfoByName,
  queryGuarantorInfoNameList,
} 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,
      marriageProofShow: false,
      fileWenjian: [],
      revisitFileList: [],
      modelList:[],
      title: '',
      status: '',
      dateFormat: 'YYYY-MM-DD hh:mm:ss',
      validatorRules: {
        guaranteeManType: [{ required: true, message: '请选择担保人类型!' }],
        guaranteeManName: [{ required: true, message: '请输入担保人名称!' }],
        guaranteeIdCardNo: [{ required: true, message: '请选择担保人证件号!' }],
        guaranteeMobilePhone: [{ required: true, message: '请选择联系人手机号!' }],
        guaranteeAmount: [{ required: true, message: '请输入担保金额!' }],
      },
      url: {
        upload: window._CONFIG['uploadUrl'],
      },
      headers: {
        'X-Access-Token': this.$store.state.user.token,
      },
      model: {},
      id: '',
      form: this.$form.createForm(this),
      updateBtn: '',
      idCardList: [],
      phoneList: [],
      moneyList: [],
      moneySting: '',
      journalTime: '',
      moneyType: '',
      editMoney: '',
      nameList: [],
      guaranteeFileIdentifyingCode:[],
      guaranteeIdCardNo:''
    }
  },
  mounted() {
    // this.getNameList()
  },
  methods: {
    edit(record) {
      this.form.resetFields()
      this.moneyType = 'edit'
      this.editMoney = record.guaranteeAmount
      this.model = {
        guaranteeManType: record.guaranteeManType,
        guaranteeTimeContract: record.guaranteeTimeContract,
        guaranteeManName: record.guaranteeManName,
        guaranteeIdCardNo: record.guaranteeIdCardNo,
        guaranteeMobilePhone: record.guaranteeMobilePhone,
        guaranteeAmount: record.guaranteeAmount,
        remark: record.remark,
        id: record.id,
        guaranteeFileIdentifyingCode:record.guaranteeFileIdentifyingCode
      }
      this.guaranteeIdCardNo = record.guaranteeIdCardNo
      this.guaranteeFileIdentifyingCode = this.model.guaranteeFileIdentifyingCode ? this.model.guaranteeFileIdentifyingCode : []
      let c = {
        fileIdentifyingCodeList: this.model.guaranteeFileIdentifyingCode ? this.model.guaranteeFileIdentifyingCode.toString() : '',
        expire: 10000,
      }
      listFileUrl(c).then((res) => {
        if (res.status.statusCode == 0) {
          this.fileWenjian = res.result
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
      this.getNameList(record.guaranteeManType)
      let p = {
        guarantorName: record.guaranteeManName,
      }
      queryGuarantorInfoByName(p).then((res) => {
        if (res.status.statusCode == 0) {
          this.idCardList = res.result
          this.phoneList = res.result
          this.moneyList = res.result
          let a = this.moneyList
          a.filter((item) => item.guaranteeIdCardNo == this.model.guaranteeIdCardNo)
          console.log(a)
          this.moneySting = a[0].availableGuaranteeQuota
          // availableGuaranteeQuota
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
      this.journalTime = this.model.guaranteeTimeContract
      this.id = record.id
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'bankName', 'bankCardType'))
      })
    },
    fileUrlList(username) {
      let e = {
        fileIdentifyingCodeList: this.model.revisitFile ? this.model.revisitFile.toString() : '',
        expire: 10000,
      }
      listFileUrl(e).then((res) => {
        if (res.status.statusCode == 0) {
          if (res.result) {
            this.fileWenjian = res.result
          } else {
            this.fileWenjian = []
          }
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
    },
    add(applyNo) {
      let data = { applyNo: applyNo, accountType: 1 }
      this.model = Object.assign({}, data)
      this.journalTime = ''
      this.form.resetFields()
      this.visible = true
      this.moneyType = 'add'
    },
    getNameList(e) {
      queryGuarantorInfoNameList({guarantorType:e}).then((res) => {
        if (res.status.statusCode == 0) {
          this.nameList = res.result
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
    },
    close() {
      // this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    huifangwenjian(info) {
      this.confirmLoading = true
      let fileList = [...info.fileList]
      fileList.slice(-2)
      if (info.file.status === 'done') {
        if (info.file.response.status.statusCode == 0) {
          this.confirmLoading = false
          let _p = {
            fileIdentifyingCode: info.file.response.result.fileIdentifyingCode,
            expire: 10000,
          }
          this.guaranteeFileIdentifyingCode.push(info.file.response.result.fileIdentifyingCode)
          ossDownloadFile(_p).then((res) => {
            if (res.status.statusCode == 0) {
              var urls = res.result
              let fileData = {
                url: res.result.url,
                fileName: res.result.fileName,
              }
              this.fileWenjian.push(fileData)
              this.marriageProofShow = false
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
        }
        this.$message.success(`${info.file.name} 上传成功!`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    hunyinClickProject(v) {
      console.log(v.fileUrl)
      window.open(v.url)
    },
    hunyinHandleDelete(v) {
      this.marriageProofShow = true
      this.fileWenjian = []
      this.revisitFileList = []
    },
    nameChange(value) {
      console.log(value)
      let p = {
        guarantorName: value,
      }
      queryGuarantorInfoByName(p).then((res) => {
        if (res.status.statusCode == 0) {
          this.idCardList = res.result
          this.phoneList = res.result
          this.moneyList = res.result
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
    },
    typeChange(value){
      this.getNameList(value)
    },
    moneyChange(value) {
      let a = this.moneyList
      a.filter((item) => item.guaranteeIdCardNo == value)
      this.moneySting = a[0].availableGuaranteeQuota
      // console.log(this.moneySting)
    },
    mountChange(value) {
      if (this.updateBtn == 'add') {
        if (value.target.value > this.moneySting) {
          this.$message.warning('您的担保金额不足，请降低金额')
          this.model.guaranteeAmount = ''
        }
      } else if (this.updateBtn == 'edit') {
        let a = this.moneySting + this.editMoney
        // console.log(this.moneySting,this.model.guaranteeAmount)
        if (value.target.value > a) {
          this.$message.warning('您的担保金额不足，请降低金额')
          this.model.guaranteeAmount = ''
        }
      }
    },
    onChangeTime(value, dateString) {
      this.journalTime = dateString
    },
    handleSubmit() {
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          if (this.updateBtn == 'edit') {
            var id = { id: this.id }
          } else if (this.updateBtn == 'add') {
            var id = ''
          }
          console.log(this.model)
          // return false
          let formData = Object.assign(this.model)//,this.modelList)
          formData.guaranteeTimeContract = this.journalTime
          formData.guaranteeFileIdentifyingCode = this.guaranteeFileIdentifyingCode
          formData.guaranteeIdCardNo = this.guaranteeIdCardNo
          formData.orderNo = this.modelList.orderNo
          formData.guaranteeType = this.modelList.guaranteeType
          formData.customerType = this.modelList.customerType
          formData.guaranteeName = this.modelList.guaranteeName
          delete formData.assessmentTime
          console.log(formData)
          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;
}
.scope-person .ant-modal-body {
    padding: 0 24px !important;
}

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

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

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

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

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

.scope-person .scoped-img img {
    width: 200px;
}

.ant-upload-list,
.ant-upload-list-text {
    display: none !important;
}
</style>