picc / admin-no-ui · Files

<template>
  <a-modal :title="titles" :width="1200" :centered="true" :visible="visible" :confirmLoading="confirmLoading"
    @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" style="top:20px;" :maskClosable="false">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="caiwu" :rules="validatorRules">
        <a-card title="客户基本信息" :bordered="false">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item prop="customerNo" label="客户编号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input placeholder="请输入客户编号" @change="noChange" v-model="caiwu.customerNo"
                  :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="billNo" label="借款编号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-select v-model="caiwu.billNo" placeholder="请选择借款编号" :disabled="onlyread && disableSubmit"
                  @change="billChange">
                  <a-select-option v-for="(item, index) in customerList" :key="index" :value="item.billNo">
                    {{ item.billNo }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="customerName" label="客户名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input placeholder="请输入客户名称" v-model="caiwu.customerName" :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="applyMoney" label="借款金额" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input placeholder="请输入借款金额" v-model="caiwu.applyMoney" :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="stagesIndex" label="当前账期" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input placeholder="请输入当前账期" v-model="caiwu.stagesIndex" :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="interestRate" label="年化利率(%)" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input placeholder="请输入年化利率(%)" v-model="caiwu.interestRate" :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="payStatus" label="还款状态" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-select v-model="caiwu.payStatus" placeholder="请输入还款状态" :disabled="onlyread && disableSubmit">
                  <a-select-option value="10">已还清</a-select-option>
                  <a-select-option value="20">待还款</a-select-option>
                  <a-select-option value="30">还款处理中</a-select-option>
                  <a-select-option value="40">已取消</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="回访信息" :bordered="false">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item prop="revisitDate" label="回访日期" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-date-picker show-time placeholder="请输入调查时间" format="YYYY-MM-DD 00:00:00" style="width:100%;"
                  :disabled="onlyread && disableSubmit" v-model="caiwu.revisitDate" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="revisitType" label="回访方式" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-radio-group :disabled="onlyread && disableSubmit" v-model="caiwu.revisitType">
                  <a-radio :value="'0'">登门</a-radio>
                  <a-radio :value="'1'">电话</a-radio>
                  <a-radio :value="'2'">三方查证</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="revisitReason" label="回访原因" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-radio-group :disabled="onlyread && disableSubmit" v-model="caiwu.revisitReason">
                  <a-radio :value="'0'">首期检查</a-radio>
                  <a-radio :value="'1'">常规检查</a-radio>
                  <a-radio :value="'2'">特定检查</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="revisitUser" label="回访人" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input placeholder="请输入回访人" v-model="caiwu.revisitUser" :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item prop="revisitContent" label="回访内容" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                <a-textarea placeholder="请输入回访内容" v-model="caiwu.revisitContent"
                  :readOnly="onlyread && disableSubmit" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item prop="revisitFile" label="回访文件" extra="">
                <a-upload name="file" :action="url.upload" :headers="headers" @change="huifangwenjian"
                  :disabled="(onlyread && disableSubmit)" v-model="revisitFileList">
                  <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-card>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { changPassword } from '@/api/api'
import { queryBillDetails, ossDownloadFile, modifyRevisitRecord, listFileUrl } from '@/api/configApi'
export default {
  name: 'PasswordModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      disabledType: false,
      onlyread: false,
      disableSubmit: false,
      marriageProofShow: false,
      titles: '',
      caiwu: {},
      fileWenjian: [],
      revisitFileList: [],
      validatorRules: {
        customerNo: [
          { required: true, message: '请输入客户编号!' },
        ],
        billNo: [
          { required: true, message: '请选择借款编号!' },
        ],
        revisitDate: [
          { required: true, message: '请选择回访日期!' },
        ],
        revisitType: [
          { required: true, message: '请选择回访方式!' },
        ],
        revisitReason: [
          { required: true, message: '请选择回访原因!' },
        ],
        revisitUser: [
          { required: true, message: '请选择回访人!' },
        ],
        revisitContent: [
          { required: true, message: '请选择回访内容!' },
        ],
      },
      type: 'add',
      model: {

      },

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      id: '',
      url: {
        upload: window._CONFIG['uploadUrl']
      },
      headers: {
        'X-Access-Token': this.$store.state.user.token,
      },
      customerList: {},
    }
  },
  created() {
    console.log('created')
  },

  methods: {
    edit(username) {
      console.log(username)
      this.caiwu = username
      this.revisitFileList = this.caiwu.revisitFile
      this.titles = "编辑回访信息"
      this.type = 'edit'
      this.form.resetFields()
      this.visible = true
      this.see()
      this.fileUrlList(username)
    },
    look(username) {
      console.log(username)
      this.caiwu = username
      this.titles = "查看回访信息"
      this.type = 'look'
      this.form.resetFields()
      this.visible = true
      this.see()
      this.fileUrlList(username)
    },
    add() {
      this.type = 'add'
      this.titles = "新增回访信息"
      this.form.resetFields()
      this.visible = true
      this.caiwu = {}
      this.fileWenjian = []
      this.revisitFileList = []
    },
    see() {
      queryBillDetails({ customerNo: this.caiwu.customerNo })
        .then(res => {
          if (res.status.statusCode == 0) {
            this.customerList = res.result
            let a = this.customerList.filter(item => item.billNo == this.caiwu.billNo)
            console.log(a)
            this.caiwu.customerName = a[0].customerName
            this.caiwu.applyMoney = a[0].applyMoney
            this.caiwu.stagesIndex = a[0].stagesIndex
            this.caiwu.interestRate = a[0].interestRate
            this.caiwu.payStatus = a[0].payStatus
          } else {
            this.$message.warning(res.status.statusReason)
            this.caiwu.customerName = ''
            this.caiwu.applyMoney = ''
            this.caiwu.stagesIndex = ''
            this.caiwu.interestRate = ''
            this.caiwu.payStatus = ''
            this.caiwu.customerNo = ''
            this.caiwu.billNo = ''
          }
        })
        .finally(() => {

        })
    },
    fileUrlList(username) {
      let e = {
        fileIdentifyingCodeList: this.caiwu.revisitFile ? this.caiwu.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)
        }
      })
    },
    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.revisitFileList.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 = []
      console.log(this.caiwu.revisitFile = [])
    },
    noChange(value) {
      queryBillDetails({ customerNo: value.target.value })
        .then(res => {
          if (res.status.statusCode == 0) {
            this.customerList = res.result
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .finally(() => {

        })
    },
    billChange(value) {
      let a = this.customerList.filter(item => item.billNo == value)
      console.log(a)
      this.caiwu.customerName = a[0].customerName
      this.caiwu.applyMoney = a[0].applyMoney
      this.caiwu.stagesIndex = a[0].stagesIndex
      this.caiwu.interestRate = a[0].interestRate
      this.caiwu.payStatus = a[0].payStatus
      // this.caiwu = a[0]
    },
    handleSubmit() {
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          this.caiwu.revisitFile = this.revisitFileList
          let formData = this.caiwu
          delete formData.id
          // console.log(a)
          modifyRevisitRecord(formData)
            .then(res => {
              if (res.status.statusCode == 0) {
                this.$message.success(res.status.statusReason)
                this.$emit('editReload')
              } else {
                this.$message.warning(res.status.statusReason)
              }
            })
            .finally(() => {
              this.confirmLoading = false
              this.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style>
.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>