picc / admin-no-ui · Files

<template>
  <a-modal
    :title="titles"
    :width="1000"
    :centered="true"
    :visible="visible"
    v-if="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top: 20px"
    :maskClosable="false"
    class="scope-person"
  >
    <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-select
                  placeholder="请选择担保方类型"
                  :disabled="onlyread2"
                  @change="danChange"
                  v-decorator="[
                    'guarantorType',
                    {
                      initialValue: model ? model.guarantorType : '',
                      rules: [{ required: true, message: '请输入担保方类型' }],
                    },
                  ]"
                >
                  <a-select-option :value="'1'">个人</a-select-option>
                  <a-select-option :value="'2'">企业</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="danType == 2">
              <a-form-item label="企业类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-select
                  placeholder="请选择企业类型"
                  :disabled="onlyread2"
                  v-decorator="[
                    'enterprisrType',
                    {
                      initialValue: model ? model.enterprisrType : '',
                      rules: [{ required: true, message: '请输入企业类型' }],
                    },
                  ]"
                >
                  <a-select-option :value="'1'">一般企业</a-select-option>
                  <a-select-option :value="'2'">融担公司</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="请输入担保额度(元)"
                  :readOnly="onlyread && disableSubmit"
                  v-decorator="[
                    'guarantorAmount',
                    {
                      initialValue: model ? model.guarantorAmount : '',
                      rules: [{ required: true, message: '请输入担保额度(元)' }],
                    },
                  ]"
                />
              </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="['sex', {}]" :triggerChange="true" placeholder="请输入用户性别"
                  dictCode="sex"/>
              </a-form-item>
            </a-col> -->
          </a-row>
        </a-card>
        <a-card title="个人基本信息" :bordered="false" v-if="danType == 1">
          <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 }">
                    <a-input
                      placeholder="请输入姓名"
                      v-decorator="[
                        'name',
                        {
                          initialValue: model ? model.name : '',
                          rules: [{ required: true, message: '请输入费用编号' }],
                        },
                      ]"
                      :readOnly="onlyread"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-if="disableSubmit" :span="12">
                  <a-form-item label="身份证号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                    <a-input
                      placeholder="请输入身份证号"
                      v-decorator="[
                        'cardNo',
                        {
                          initialValue: model ? model.cardNo : '',
                          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 }">
                    <a-input
                      placeholder="请输入身份证号"
                      v-decorator="[
                        'cardNo',
                        {
                          initialValue: model ? model.cardNo : '',
                          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 }">
                    <a-input
                      placeholder="请输入联系电话"
                      v-decorator="[
                        'phoneNo',
                        {
                          initialValue: model ? model.phoneNo : '',
                          rules: [{ required: true, message: '请输入联系电话' }],
                        },
                      ]"
                      :readOnly="onlyread"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-else :span="12">
                  <a-form-item label="联系电话" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                    <a-input
                      placeholder="请输入联系电话"
                      v-decorator="[
                        'phoneNo',
                        {
                          initialValue: model ? model.phoneNo : '',
                          rules: [{ required: true, message: '请输入联系电话' }],
                        },
                      ]"
                      :readOnly="onlyread"
                    />
                  </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="['sex', {}]"
                      :trigger-change="true"
                      placeholder="请输入用户性别"
                      dictCode="sex"
                    /> -->
                    <a-select
                      placeholder="请选择性别"
                      :disabled="onlyread && disableSubmit"
                      v-decorator="[
                        'gender',
                        {
                          initialValue: model ? model.gender : '',
                          rules: [{ required: true, message: '请输入性别' }],
                        },
                      ]"
                    >
                      <a-select-option :value="'1'">男</a-select-option>
                      <a-select-option :value="'2'">女</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-form-item label="联系地址" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
                  <a-input
                    placeholder="请输入联系地址"
                    v-decorator="['address', { initialValue: model ? model.address : '' }]"
                    :readOnly="onlyread && disableSubmit"
                  />
                </a-form-item>
              </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="['nation', { initialValue: model ? model.nation : '' }]"
                      :readOnly="onlyread"
                    />
                  </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="[
                        'birth',
                        {
                          initialValue: !model || !model.birth ? null : moment(model.birth, dateFormat),
                        },
                      ]"
                      :disabled="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 }">
                    <a-date-picker
                      style="width: 100%"
                      v-decorator="[
                        'cardStartDate',
                        {
                          initialValue: !model || !model.cardStartDate ? null : moment(model.cardStartDate, dateFormat),
                        },
                      ]"
                      :disabled="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="[
                        'cardEndDate',
                        {
                          initialValue: !model || !model.cardEndDate ? null : moment(model.cardEndDate, 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 }">
                  <a-input
                    placeholder="请输入发证机关"
                    v-decorator="['lssuingAuthority', { initialValue: model ? model.lssuingAuthority : '' }]"
                    :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="[
                      'cardFrontCode',
                      {
                        initialValue: model ? model.cardFrontCode : '',
                        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"
                    class="avatar-uploader"
                    :showUploadList="false"
                    :action="url.upload"
                    v-decorator="[
                      'cardBackCode',
                      {
                        initialValue: model ? model.cardBackCode : '',
                        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-card>
        <template v-if="danType == 2">
          <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 }">
                      <a-input
                        placeholder="请输入姓名"
                        v-decorator="[
                          'name',
                          {
                            initialValue: model ? model.name : '',
                            rules: [{ required: true, message: '请输入费用编号' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col v-if="disableSubmit" :span="12">
                    <a-form-item label="身份证号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                      <a-input
                        placeholder="请输入身份证号"
                        v-decorator="[
                          'cardNo',
                          {
                            initialValue: model ? model.cardNo : '',
                            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 }">
                      <a-input
                        placeholder="请输入身份证号"
                        v-decorator="[
                          'cardNo',
                          {
                            initialValue: model ? model.cardNo : '',
                            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 }">
                      <a-input
                        placeholder="请输入联系电话"
                        v-decorator="[
                          'phoneNo',
                          {
                            initialValue: model ? model.phoneNo : '',
                            rules: [{ required: true, message: '请输入联系电话' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col v-else :span="12">
                    <a-form-item label="联系电话" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                      <a-input
                        placeholder="请输入联系电话"
                        v-decorator="[
                          'phoneNo',
                          {
                            initialValue: model ? model.phoneNo : '',
                            rules: [{ required: true, message: '请输入联系电话' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </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="[
                          'gender',
                          {
                            initialValue: model ? model.gender : '',
                            rules: [{ required: true, message: '请输入性别' }],
                          },
                        ]"
                      >
                        <a-select-option :value="'1'">男</a-select-option>
                        <a-select-option :value="'2'">女</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-form-item label="联系地址" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
                    <a-input
                      placeholder="请输入联系地址"
                      v-decorator="['address', { initialValue: model ? model.address : '' }]"
                      :readOnly="onlyread && disableSubmit"
                    />
                  </a-form-item>
                </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="['nation', { initialValue: model ? model.nation : '' }]"
                        :readOnly="onlyread"
                      />
                    </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="[
                          'birth',
                          {
                            initialValue: !model || !model.birth ? null : moment(model.birth, dateFormat),
                          },
                        ]"
                        :disabled="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 }">
                      <a-date-picker
                        style="width: 100%"
                        v-decorator="[
                          'cardStartDate',
                          {
                            initialValue:
                              !model || !model.cardStartDate ? null : moment(model.cardStartDate, dateFormat),
                          },
                        ]"
                        :disabled="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="[
                          'cardEndDate',
                          {
                            initialValue: !model || !model.cardEndDate ? null : moment(model.cardEndDate, 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 }">
                    <a-input
                      placeholder="请输入发证机关"
                      v-decorator="['lssuingAuthority', { initialValue: model ? model.lssuingAuthority : '' }]"
                      :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="[
                        'cardFrontCode',
                        {
                          initialValue: model ? model.cardFrontCode : '',
                          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"
                      class="avatar-uploader"
                      :showUploadList="false"
                      :action="url.upload"
                      v-decorator="[
                        'cardBackCode',
                        {
                          initialValue: model ? model.cardBackCode : '',
                          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-card>
          <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 }">
                      <a-input
                        placeholder="请输入企业名称"
                        v-decorator="[
                          'enterprisrName',
                          {
                            initialValue: model ? model.enterprisrName : '',
                            rules: [{ required: true, message: '请输入企业名称' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="注册类型" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
                      <a-input
                        placeholder="注册类型"
                        v-decorator="[
                          'registrationType',
                          {
                            initialValue: model ? model.registrationType : '',
                            rules: [{ required: true, message: '请输入注册类型' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="统一社会信用代码" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
                      <a-input
                        placeholder="统一社会信用代码"
                        v-decorator="[
                          'orgCode',
                          {
                            initialValue: model ? model.orgCode : '',
                            rules: [{ required: true, message: '请输入统一社会信用代码' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="企业固话" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
                      <a-input
                        placeholder="企业固话"
                        v-decorator="[
                          'enterpriseTelephone',
                          {
                            initialValue: model ? model.enterpriseTelephone : '',
                            rules: [{ required: true, message: '请输入企业固话' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="企业联系手机号" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
                      <a-input
                        placeholder="企业联系手机号"
                        v-decorator="[
                          'enterpriseMobileNo',
                          {
                            initialValue: model ? model.enterpriseMobileNo : '',
                            rules: [{ required: true, message: '请输入企业联系手机号' }],
                          },
                        ]"
                        :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 }">
                      <a-date-picker
                        style="width: 100%"
                        v-decorator="[
                          'enterpriseRegisterDate',
                          {
                            initialValue:
                              !model || !model.enterpriseRegisterDate
                                ? null
                                : moment(model.enterpriseRegisterDate, dateFormat),
                          },
                        ]"
                        :disabled="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="[
                          'enterpriseExpireDate',
                          {
                            initialValue:
                              !model || !model.enterpriseExpireDate
                                ? null
                                : moment(model.enterpriseExpireDate, dateFormat),
                          },
                        ]"
                        :disabled="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 }">
                      <a-input
                        placeholder="企业规模"
                        v-decorator="[
                          'enterpriseScale',
                          {
                            initialValue: model ? model.enterpriseScale : '',
                            rules: [{ required: true, message: '请输入企业规模' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="注册资本" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                      <a-input
                        placeholder="注册资本"
                        v-decorator="[
                          'registeredCapital',
                          {
                            initialValue: model ? model.registeredCapital : '',
                            rules: [{ required: true, message: '请输入注册资本' }],
                          },
                        ]"
                        :readOnly="onlyread"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-form-item label="注册地址" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
                    <a-input
                      placeholder="请输入注册地址"
                      v-decorator="['registeredAddress', { initialValue: model ? model.registeredAddress : '' }]"
                      :readOnly="onlyread && disableSubmit"
                    />
                  </a-form-item>
                </a-row>
                <a-row :gutter="24">
                  <a-form-item label="实际经营地址" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
                    <a-input
                      placeholder="请输入实际经营地址"
                      v-decorator="['actualBusinessAdress', { initialValue: model ? model.actualBusinessAdress : '' }]"
                      :readOnly="onlyread && disableSubmit"
                    />
                  </a-form-item>
                </a-row>
                <a-row :gutter="24">
                  <a-form-item label="经营范围" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
                    <a-textarea
                      placeholder="请输入经营范围"
                      v-decorator="['natureBusiness', { initialValue: model ? model.natureBusiness : '' }]"
                      :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"
                      class="avatar-uploader"
                      accept="image/*"
                      :showUploadList="false"
                      :action="url.upload"
                      v-decorator="[
                        'businessLicenseCode',
                        {
                          initialValue: model ? model.businessLicenseCode : '',
                          rules: [{ required: true, message: '请上传经营业执照' }],
                        },
                      ]"
                      @change="handleChangePermit"
                      :disabled="onlyread && disableSubmit"
                    >
                      <img
                        v-if="imageUrlPermit"
                        :src="imageUrlPermit"
                        alt="avatar"
                        style="max-width: 240px; max-height: 360px"
                      />
                      <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-card>
        </template>
        <a-row :gutter="24" v-show="!disableSubmit" style="float: right; margin-right: 20px; margin-bottom: 30px">
          <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 { changPassword } from '@/api/api'
import { saveOrUpdateGuarantorInfo, ossDownloadFile } from '@/api/configApi'
import JDate from '@/components/jeecg/JDate.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import moment from 'moment'
export default {
  name: 'PasswordModal',
  components: { JDate, JSelectDepart, JSelectMultiUser },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      disabledType: false,
      onlyread: false,
      disableSubmit: false,
      onlyread2: false,
      imageUrlFront: '',
      imageUrlBack: '',
      imageUrlPermit: '',
      enterprisrTypes:'',
      titles: '',
      type: 'add',
      model: {},

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      dateFormat: 'YYYY-MM-DD',
      form: this.$form.createForm(this),
      id: '',
      zUrl: '',
      fUrl: '',
      zhizhaoUrl: '',
      url: {
        upload: window._CONFIG['uploadUrl'],
      },
      headers: {
        'X-Access-Token': this.$store.state.user.token,
      },
      danType: 1,
      loading: false,
    }
  },
  created() {
    console.log('created')
  },

  methods: {
    moment,
    edit(username) {
      console.log(username)
      this.danType = username.guarantorType
      this.disabledType = true
      if (username.guarantorType == 1) {
        let _p = {
          fileIdentifyingCode: username.cardFrontCode,
          expire: 10000,
        }
        this.zUrl = username.cardFrontCode
        ossDownloadFile(_p).then((res) => {
          if (res.status.statusCode == 0) {
            this.imageUrlFront = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        let _f = {
          fileIdentifyingCode: username.cardBackCode,
          expire: 10000,
        }
        this.fUrl = username.cardBackCode
        ossDownloadFile(_f).then((res) => {
          if (res.status.statusCode == 0) {
            this.imageUrlBack = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
      } else if (username.guarantorType == 2) {
        let _p = {
          fileIdentifyingCode: username.cardFrontCode,
          expire: 10000,
        }
        this.zUrl = username.cardFrontCode
        ossDownloadFile(_p).then((res) => {
          if (res.status.statusCode == 0) {
            this.imageUrlFront = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        let _f = {
          fileIdentifyingCode: username.cardBackCode,
          expire: 10000,
        }
        this.fUrl = username.cardBackCode
        ossDownloadFile(_f).then((res) => {
          if (res.status.statusCode == 0) {
            this.imageUrlBack = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        let _t = {
          fileIdentifyingCode: username.businessLicenseCode,
          expire: 10000,
        }
        this.zhizhaoUrl = username.businessLicenseCode
        ossDownloadFile(_t).then((res) => {
          if (res.status.statusCode == 0) {
            this.imageUrlPermit = res.result.url
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
      }
      this.form.resetFields()
      this.visible = true
      this.model = username
      this.$nextTick(() => {
        this.form.setFieldsValue(username)
      })
    },

    add(username) {
      console.log('ssss')
      this.model = {}
      this.danType = 1
      this.zUrl = ''
      this.fUrl = ''
      this.zhizhaoUrl = ''
      this.imageUrlFront = ''
      this.imageUrlBack = ''
      this.imageUrlPermit = ''
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue()
      })
    },
    danChange(value) {
      this.danType = value
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    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(`身份证反面上传成功!`)
        }
      }
    },
    handleChangePermit(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, (imageUrlPermit) => {
          this.loading = false
        })
        if (info.file.response.status.statusCode == 0) {
          let _p = {
            fileIdentifyingCode: info.file.response.result.fileIdentifyingCode,
            expire: 10000,
          }
          this.zhizhaoUrl = info.file.response.result.fileIdentifyingCode
          ossDownloadFile(_p).then((res) => {
            if (res.status.statusCode == 0) {
              this.imageUrlPermit = res.result.url
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          this.$message.success(`营业执照上传成功!`)
        }
      }
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        console.log(err, values)
        if (!err) {
          this.confirmLoading = true
          // let l = { id: this.id }.slice(1,5)
          values.cardFrontCode = this.zUrl
          values.cardBackCode = this.fUrl
          values.businessLicenseCode = this.zhizhaoUrl
          values.guarantorNo = this.model.guarantorNo
          // let formData = values
          saveOrUpdateGuarantorInfo(values)
            .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()
    },
  },
}
</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>