picc / admin-no-ui · Files

<template>
  <a-modal :title="title" :width="1200" :centered="false" :visible="visible"
    :okButtonProps="{ props: { disabled: disableSubmit } }" :confirmLoading="confirmLoading" @ok="handleSubmit"
    @cancel="handleCancel" cancelText :maskClosable="false" style="top: 20px" class="scope-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 placeholder="请输入姓名" v-decorator="[
                      'idCardName',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.idCardName : '',
                        rules: [{ required: true, message: '请输入姓名' }],
                      },
                    ]"  :readOnly="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                  <a-form-item label="性别" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                    <j-dict-select-tag
                      v-decorator="['gender', { initialValue: cusBasicInfo ? cusBasicInfo.gender : '' }]" dictCode="sex"
                      :disabled="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 placeholder="请输入民族"
                      v-decorator="['ethnicity', { initialValue: cusBasicInfo ? cusBasicInfo.ethnicity : '' }]"
                       :readOnly="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="出生日期" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                    <a-date-picker style="width: 100%" v-decorator="[
                      'dateOfBirth',
                      {
                        initialValue:
                          !cusBasicInfo || !cusBasicInfo.dateOfBirth
                            ? null
                            : moment(cusBasicInfo.dateOfBirth, dateFormat),
                      },
                    ]" :disabled="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col v-if="disableSubmit" :span="12">
                  <a-form-item label="手机号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input placeholder="请输入手机号" v-decorator="[
                      'mobilePhoneView',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.mobilePhoneView : '',
                        rules: [{ required: true, message: '请输入手机号' }],
                      },
                    ]" :readOnly="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
                <a-col v-else :span="12">
                  <a-form-item label="手机号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input placeholder="请输入手机号" v-decorator="[
                      'mobilePhoneView',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.mobilePhoneView : '',
                        rules: [{ required: true, message: '请输入手机号' }],
                      },
                    ]" :readOnly="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
                <a-col v-if="disableSubmit" :span="12">
                  <a-form-item label="身份证号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input placeholder="请输入身份证号" v-decorator="[
                      'idCardNoView',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.idCardNoView : '',
                        rules: [{ required: true, message: '请输入正确的身份证号' }],
                      },
                    ]" :readOnly="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
                <a-col v-else :span="12">
                  <a-form-item label="身份证号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-input placeholder="请输入身份证号" v-decorator="[
                      'idCardNoView',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.idCardNoView : '',
                        rules: [{ required: true, message: '请输入正确的身份证号' }],
                      },
                    ]" :readOnly="onlyread && disableSubmit" />
                  </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-date-picker style="width: 100%" v-decorator="[
                      'idCardStartValidity',
                      {
                        initialValue:
                          !cusBasicInfo || !cusBasicInfo.idCardStartValidity
                            ? null
                            : moment(cusBasicInfo.idCardStartValidity, dateFormat),
                      },
                    ]" :disabled="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="至" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" hasFeedback>
                    <a-date-picker style="width: 100%" v-decorator="[
                      'idCardEndValidity',
                      {
                        initialValue:
                          !cusBasicInfo || !cusBasicInfo.idCardEndValidity
                            ? null
                            : moment(cusBasicInfo.idCardEndValidity, dateFormat),
                      },
                    ]" :disabled="onlyread && disableSubmit" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-form-item label="住址" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }" hasFeedback>
                  <a-input placeholder="请输入住址"
                    v-decorator="['address', { initialValue: cusBasicInfo ? cusBasicInfo.address : '' }]"
                    :readOnly="onlyread && disableSubmit" />
                </a-form-item>
              </a-row>
              <a-row :gutter="24">
                <a-form-item label="发证机关" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }" hasFeedback>
                  <a-input placeholder="请输入发证机关" v-decorator="[
                    'issuanceAuthority',
                    { initialValue: cusBasicInfo ? cusBasicInfo.issuanceAuthority : '' },
                  ]" :readOnly="onlyread && disableSubmit" />
                </a-form-item>
              </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 :headers="headers" name="file" listType="picture-card" accept="image/*" class="avatar-uploader"
                    :showUploadList="false" :action="url.upload" v-decorator="[
                      'idCardUrl',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.idCardUrl : '',
                        rules: [{ required: true, message: '请上传身份证正面' }],
                      },
                    ]" @change="handleChangeFront" :disabled="onlyread && disableSubmit">
                    <img v-if="imageUrlFront" :src="imageUrlFront" alt="avatar"
                      style="max-width: 200px; max-height: 200px" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </div>
              <div class="scoped-img" style="display: flex; align-items: center; flex-direction: column">
                <a-form-item label="身份证反面照片" style="text-align: center">
                  <a-upload :headers="headers" name="file" listType="picture-card" accept="image/*" class="avatar-uploader"
                    :showUploadList="false" :action="url.upload" v-decorator="[
                      'idCardBackUrl',
                      {
                        initialValue: cusBasicInfo ? cusBasicInfo.idCardBackUrl : '',
                        rules: [{ required: true, message: '请上传身份证反面' }],
                      },
                    ]" @change="handleChangeBack" :disabled="onlyread && disableSubmit">
                    <img v-if="imageUrlBack" :src="imageUrlBack" alt="avatar"
                      style="max-width: 200px; max-height: 200px" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </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-form>
    </a-spin>
    <!-- <common-link-man-table :userType="1" :collCusContactInfoList.sync="contactsInfoList"
          :applyNo.sync="applyNo" :disableSubmit.sync="disableSubmit" @editReload="editReload">
        </common-link-man-table> -->
    <common-bank-account-table :userType="1" :collCusBankAccountList.sync="bankAccountList"
      :applyNo.sync="applyNo" :disableSubmit.sync="disableSubmit" @editReload="editReload">
    </common-bank-account-table>
  </a-modal>
</template>
<script>
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import pick from 'lodash.pick'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/CoreListMixin'
import { saveCusPersonal, queryCusPersonalInfo,detailsUpdate,details,ossDownloadFile } from '@/api/configApi'
import commonLinkManTable from './common/commonLinkManTable'
import commonBankAccountTable from './common/commonBankAccountTable'

export default {
  name: 'PersonalInformationListModal',
  mixins: [JeecgListMixin],
  components: {
    commonLinkManTable, // 联系人信息
    commonBankAccountTable, // 银行账户信息
    JDate,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      title: '',
      dataSource1: '',
      imageUrlFront: '',
      imageUrlBack: '',
      zUrl:'',
      fUrl:'',
      disableSubmit: false,
      onlyread: false,
      applyNo: '',
      model: {},
      cusBasicInfo: {}, // 个人基本信息
      contactsInfoList: [], // 联系人信息
      bankAccountList: [], // 银行账户信息
      attachmentList: {}, // 自定义附件信息
      undertakerInfoList: {}, // 自定义文本信息
      form: this.$form.createForm(this),
      dateFormat: 'YYYY-MM-DD',
      disableMixinCreated: true,
      url: {
        imgerver: window._CONFIG['domianURL'] + '/sys/common/view',
        syncUser: '/process/extActProcess/doSyncUser',
        list: '/queryCusPersonalPage',
        delete: '/sys/user/delete',
        deleteBatch: '/sys/user/deleteBatch',
        exportXlsUrl: '/sys/user/exportXls',
        upload: window._CONFIG['uploadUrl'],
      },
      headers: {
        'X-Access-Token': this.$store.state.user.token,
      },
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '产品名称',
          align: 'center',
          dataIndex: 'applyNo'
        },
        {
          title: '授信时间',
          align: 'center',
          dataIndex: 'customerName'
        },
        {
          title: '还款状态',
          align: 'center',
          dataIndex: 'idCardNoView'
        },
        {
          title: '授信状态',
          align: 'center',
          dataIndex: 'status',
          customRender: function (t, r, index) {
            for (var i = 0; i < userStatus.length; i++) {
              if (t === userStatus[i].value) {
                return userStatus[i].label
              }
            }
          }
        },
        {
          title: '用信锁定状态',
          align: 'center',
          dataIndex: 'status',
          customRender: function (t, r, index) {
            for (var i = 0; i < userStatus.length; i++) {
              if (t === userStatus[i].value) {
                return userStatus[i].label
              }
            }
          }
        },
        {
          title: '锁定到期日',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'updateTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 120,
          fixed: 'right'
        }
      ]
    }
  },
  created() {
    console.log('created')
  },
  methods: {
    moment,
    edit(res, applyNo) {
      //console.log(res)
      // alert(res)
      //console.log(res, applyNo)
      this.applyNo = applyNo
      this.assignment(res)
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => { })
    },
    add() {
      this.model = {}
      this.form.resetFields()
      this.visible = true
    },

    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        values.birthday = !values.birthday ? null : values.birthday.format(this.dateFormat)
        values.idCardStartValidity = !values.idCardStartValidity
          ? null
          : values.idCardStartValidity.format(this.dateFormat)
        values.idCardEndValidity = !values.idCardEndValidity ? null : values.idCardEndValidity.format(this.dateFormat)
        if (!err) {
          this.confirmLoading = true
          values.idCardUrl = this.zUrl
          values.idCardBackUrl = this.fUrl
          let applyNo = { applyNo: this.applyNo }
          let formData = Object.assign(applyNo, values)
          console.log(formData)
          detailsUpdate(formData)
            .then((res) => {
              if (res.status.statusCode == 0) {
                this.$message.success(res.status.statusReason)
                this.$emit('ok')
              } else {
                this.$message.warning(res.status.statusReason)
              }
            })
            .finally(() => {
              this.confirmLoading = false
              this.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    // tabs 回调
    callback() { },
    handleChangeFront(info) {
      // console.log("111", info)
      let fileList = [...info.fileList]
      console.log(fileList)
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, imageUrlFront => {
          //console.log("111111",info.file.originFileObj)
          this.loading = false
        })
        if (info.file.response.status.statusCode == 0) {
          let _p = {
            fileIdentifyingCode: info.file.response.result.fileIdentifyingCode,
            expire: 10000
          }
          this.zUrl = info.file.response.result.fileIdentifyingCode
          ossDownloadFile(_p).then(res => {
            if (res.status.statusCode == 0) {
              this.imageUrlFront = res.result.url
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          this.$message.success(`身份证正面上传成功!`)
        }
      }
    },
    handleChangeBack(info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, imageUrlBack => {
          //console.log("111111",info.file.originFileObj)
          this.loading = false
        })
        if (info.file.response.status.statusCode == 0) {
          let _p = {
            fileIdentifyingCode: info.file.response.result.fileIdentifyingCode,
            expire: 10000
          }
          this.fUrl = info.file.response.result.fileIdentifyingCode
          ossDownloadFile(_p).then(res => {
            if (res.status.statusCode == 0) {
              this.imageUrlBack = res.result.url
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          this.$message.success(`身份证反面上传成功!`)
        }
      }
    },
    editReload() {
      let _p = { applyNo: this.applyNo }
      details(_p).then((res) => {
        this.assignment(res.result)
      })
    },
    assignment(res) {
      this.model = res ? res : {}
      this.cusBasicInfo = this.model
      this.imageUrlFront = ''
      this.imageUrlBack = ''
      if (this.cusBasicInfo) {
        this.zUrl = this.cusBasicInfo.idCardUrl
        this.fUrl = this.cusBasicInfo.idCardBackUrl
        let _p = {
            fileIdentifyingCode: this.cusBasicInfo.idCardUrl,
            expire: 10000
          }
        let _w = {
          fileIdentifyingCode: this.cusBasicInfo.idCardBackUrl,
            expire: 10000
        }
        ossDownloadFile(_p).then(res => {
          if (res.status.statusCode == 0) {
            this.imageUrlFront = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        ossDownloadFile(_w).then(res => {
          if (res.status.statusCode == 0) {
            this.imageUrlBack = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
      } else {
        this.imageUrlFront = ''
        this.imageUrlBack = ''
      }
      this.contactsInfoList = this.model.contactsInfoList
      this.bankAccountList = this.model.bankAccountResponses
      this.attachmentList = this.model.attachmentList
      this.undertakerInfoList = this.model.undertakerInfoList
    },
  },
}
</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;
}
</style>