dev/dcp-web-gate/src_old/views/introductionCooperation/IntroductionFundingApplication.vue

<template>
  <div>
    <div class="autoBox box">
      <div class="crumbs">
        <el-breadcrumb separator="/"
                       replace>
          <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.MemberIntroduction')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('common.MembershipApplications')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-breadcrumb separator="/"
                       style="float: right;margin:0px 15px 0 0">
          <span class="cursor"
                :class="screenIndex==index?'screen1':'screen2'"
                @click="realTimeInfoScreen(item,item.value)"
                v-for="(item,index) in realTimeInfoScreens">
            &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;
          </span>
        </el-breadcrumb>
        <div v-if="active==0">
          <IntroductionFundingApplicationAgreement @agreementChange="agreementChange"></IntroductionFundingApplicationAgreement>
        </div>
        <div v-if="active!==0">
          <div style="width: 80%;margin: auto;margin-top: 20px;">
            <div style="width: 100%;text-align: center;font-size: 27px;color:#2C2F32;">{{$t('common.MembershipApplication')}}</div>
          </div>
          <div style="margin-top: 50px;width: 100%;">
            <el-steps :active="active"
                      align-center>
              <el-step :title="$t('common.Applytojoin')"></el-step>
              <el-step :title="$t('common.Fillintheinformation')"></el-step>
              <el-step :title="$t('common.Sealandsubmit')"
                       :description="'（'+ $t('common.Printanduploadwithcompanyseal') + '）' "></el-step>
              <el-step :title="$t('common.Preliminaryreview')"></el-step>
              <el-step :title="$t('common.CooperativeOrganizationReview')"
                       :description="'（'+ $t('common.CooperativeOrganizationReviewDescription') + '）' "></el-step>
              <el-step :title="$t('common.Memberconfirmation')"
                       :description="'（'+ $t('common.MemberconfirmationDescription') + '）' "></el-step>
              <el-step :title="$t('common.Issuecertificates')"></el-step>
              <el-step :title="$t('common.complete')"></el-step>
            </el-steps>
          </div>
          <div style="width: 100%;margin: auto;margin-top: 20px;">
            <el-collapse v-model="activeNames">
              <el-collapse-item name="1"
                                v-if="active==1"
                                style="position: relative;">
                <template slot="title">
                  <span style="color: red;margin-right: 3px;">* </span> {{$t('common.Basicinformationofapplicant')}}
                </template>
                <el-form ref="form"
                         :inline="true"
                         :model="baseMemberApply"
                         :rules="form1Rules"
                         label-width="260px"
                         class="demo-ruleForm"
                         style="margin-top: 20px;width: 1000px;">
                  <!-- 国别 -->
                  <el-form-item style="margin-bottom: 30px;"
                                :label="$t('common.Country')"
                                prop='countryDict'>
                    <el-select filterable
                               :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                               v-model="baseMemberApply.countryDict"
                               :placeholder="$t('common.CountryTips')+$t('common.Country')"
                               style="width: 100%;">
                      <el-option :label="item.countryName"
                                 :value="item.countryIsoCode"
                                 v-for="(item,index) in countryList">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <!-- 单位类别 -->
                  <el-form-item :label="$t('common.UnitType')"
                                label-width="160px"
                                prop='unitType'>
                    <el-select v-model="baseMemberApply.unitType"
                               :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                               filterable
                               :placeholder="$t('common.PleaseSelect') + $t('common.UnitType')"
                               style="width: 100%;">
                      <el-option v-for="(item,index) in UnitType"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="机构名称:" prop='unitType'>
                            <el-input v-model="form.unitType"  style="width: 70%;"></el-input>
                          </el-form-item> -->
                  <!-- 单位中文全称 -->
                  <el-form-item :label="$t('common.FullChinesenameofthecompany')"
                                prop='unitZhName'
                                style="display: block;">
                    <el-input show-word-limit maxlength="100" v-model="baseMemberApply.unitZhName"
                              :placeholder="$t('common.PleaseEnter') +$t('common.FullChinesenameofthecompany')"
                              style="width: 300%;">
                    </el-input>
                  </el-form-item>
                  <!-- 单位英文全称 -->
                  <el-form-item :label="$t('common.FullEnglishnameofunit')"
                                prop='unitEnName'
                                style="display: block;">
                    <el-input show-word-limit maxlength="100" v-model="baseMemberApply.unitEnName"
                              style="width: 300%;"
                              :placeholder="this.$t('common.PleaseEnter')+$t('common.FullEnglishnameofunit')">
                    </el-input>
                  </el-form-item>
                  <!-- 官方网址 -->
                  <el-form-item :label="$t('common.OfficialWebsite')"
                                style="display: block;">
                    <el-input show-word-limit maxlength="100" v-model="baseMemberApply.unitWebsite"
                              style="width: 300%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.OfficialWebsite')">
                    </el-input>
                  </el-form-item>
                  <!-- 单位地址 -->
                  <el-form-item :label="$t('common.Unitaddress')"
                                prop='unitAddress'
                                style="display: block;">
                    <el-input show-word-limit maxlength="1000" v-model="baseMemberApply.unitAddress"
                              style="width: 300%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.Unitaddress')">
                    </el-input>
                  </el-form-item>
                  <!-- 邮政编码 -->
                  <el-form-item :label="$t('common.PostalCode')"
                                style="display: block;">
                    <el-input show-word-limit maxlength="60" v-model="baseMemberApply.postalCode"
                              style="width: 300%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.PostalCode')">
                    </el-input>
                  </el-form-item>
                  <!-- 法定代表人 -->
                  <el-form-item :label="$t('common.LegalRepresentative')"
                                prop='corporateName'>
                    <el-input show-word-limit maxlength="60" v-model="baseMemberApply.corporateName"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.LegalRepresentative')">
                    </el-input>
                  </el-form-item>
                  <!-- 职务 -->
                  <el-form-item :label="$t('common.Position')"
                                label-width="160px"
                                prop='duty'>
                    <el-input show-word-limit maxlength="100" v-model="baseMemberApply.duty"
                              style="width: 115%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.Position')">
                    </el-input>
                  </el-form-item>
                  <!-- 申请单位简介 -->
                  <el-form-item :label="$t('common.BriefIntroductionOfApplicant')"
                                prop='unitIntroduction'>
                    <el-input show-word-limit maxlength="4000" type="textarea"
                              :rows="2"
                              style="width: 320%;"
                              :placeholder="$t('common.Pleaseinputthecompanyprofileregistered')"
                              v-model="baseMemberApply.unitIntroduction">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item name="2"
                                v-if="active==1">
                <template slot="title">
                  <span style="color: red;margin-right: 3px;">* </span> {{$t('common.Contactbasicinformation')}}
                </template>
                <el-form ref="form2"
                         :inline="true"
                         :model="baseContactsInfo"
                         :rules="rules"
                         label-width="200px"
                         class="demo-ruleForm"
                         style="margin-top: 20px;width: 1000px;">
                  <!-- 姓名 -->
                  <el-form-item :label="$t('common.fullName')"
                                prop='contactsName'>
                    <el-input show-word-limit maxlength="60" v-model="baseContactsInfo.contactsName"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.fullName')">
                    </el-input>
                  </el-form-item>
                  <!-- 所在部门 -->
                  <el-form-item :label="$t('common.Department')"
                                prop='depart'>
                    <el-input show-word-limit maxlength="100" v-model="baseContactsInfo.depart"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.Department')">
                    </el-input>
                  </el-form-item>
                  <!-- 职务 -->
                  <el-form-item :label="$t('common.Position')"
                                prop='currentDuty'>
                    <el-input show-word-limit maxlength="100" v-model="baseContactsInfo.currentDuty"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.Position')">
                    </el-input>
                  </el-form-item>
                  <!-- 联系电话 -->
                  <el-form-item :label="$t('common.ContactPhoneNumber')"
                                prop='telephoneNumber'>
                    <el-input show-word-limit maxlength="60" v-model="baseContactsInfo.telephoneNumber"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.ContactPhoneNumber')">
                    </el-input>
                  </el-form-item>
                  <!-- 手机 -->
                  <el-form-item :label="$t('common.mobilePhone')"
                                prop='mobilePhone'>
                    <el-input show-word-limit maxlength="60" v-model="baseContactsInfo.mobilePhone"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.mobilePhone')">
                    </el-input>
                  </el-form-item>
                  <!-- 电子邮箱 -->
                  <el-form-item :label="$t('common.Emails')"
                                prop='email'>
                    <el-input show-word-limit maxlength="254" v-model="baseContactsInfo.email"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.Email2')">
                    </el-input>
                  </el-form-item>
                  <!-- 传真 -->
                  <el-form-item :label="$t('common.Fax')">
                    <el-input show-word-limit maxlength="60" v-model="baseContactsInfo.faxNumber"
                              style="width: 120%;"
                              :placeholder="$t('common.PleaseEnter')+$t('common.Fax')">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item name="3"
                                v-if="active==1">
                <template slot="title">
                  <span style="font-size: 15px!important;">{{$t('common.GlobalenergyInternetprofessionalalliance')}}</span> {{ '（' + $t('common.Multiplechoicesareavailable') + '）'}}
                </template>
                <el-checkbox-group v-model="leagueType"
                                   style="margin-left: 100px;margin-top: 20px;width: 815px;">
                  <el-checkbox :key="item.baseEntityId"
                               :label="item.baseEntityId"
                               v-for="(item,index) in baseLeagueInfos">{{$i18n.locale=='zh'?'全球能源互联网'+item.leagueName:'Global Energy Internet '+item.leagueName}}</el-checkbox>
                  <div style="height: 20px;font-size: 14px;margin-top: -10px;margin-left: 24px;">
                    <a href="javascript:;"
                       style="color: #32A0F5;"
                       @click="toNewView('IntroductionMemberProfile','union')">
                      {{$t('common.LearnmoreaboutglobalenergyInternetprofessionalalliance')}}
                    </a>
                  </div>
                </el-checkbox-group>
              </el-collapse-item>
              <div style="text-align: center;margin-top: 50px;"
                   v-if="active!==1">{{$t('common.AlreadySubmit')}}<span @click="toView('myConcerns','/myConcerns')"
                      style="color: #409eff;"
                      class="cursor">{{$t('common.UserCenterMyApplication')}}</span>{{$t('common.UpdateInfoAndUpload')}} </div>
            </el-collapse>
          </div>
          <div style="width:100%;position: relative;height: 100px;">
            <div style="width: 80%;height: 100px;position: absolute;left: 67%;top: 50px;transform: translate(-50%,0);">
              <el-button style="margin-left: 10px;width: 150px;height: 40px;"
                         v-if="active==1"
                         @click="toView('IntroductionMemberProfile',null)"
                         class="button_409EFF">
                {{$t('common.cancel')}}
              </el-button>
              <el-button f
                         style="margin-left: 10px;width: 150px;height: 40px;"
                         v-if="active==1"
                         class="button_409EFF"
                         @click="dialogVisible=true">
                {{$t('common.applicationPreview')}}
              </el-button>
              <el-button style="margin-left: 10px;width: 150px;height: 40px;"
                         type="primary"
                         @click="submitForm"
                         v-if="active==1">
                {{$t('common.SubmitAndDownload')}}
              </el-button>
              <el-button style="margin-left: 200px;width: 150px;height: 40px;"
                         type="primary"
                         @click="toView('IntroductionMemberProfile',null)"
                         v-if="active==2">
                {{$t('common.return')}}
              </el-button>
            </div>
          </div>
          <div class="row"
               style="padding-top: 55px;background-color:#fff;display: none;"
               ref="imgDom">
            <userCenterTaberListPrint :form="baseMemberApply"
                                      :form2="baseContactsInfo"></userCenterTaberListPrint>
          </div>
          <el-dialog :title="$t('common.Onlinepreview')"
                     :visible.sync="dialogVisible"
                     width="595px"
                     height="842px">
            <template>
              <userCenterTaberListPrint :form="baseMemberApply"
                                        :form2="baseContactsInfo"></userCenterTaberListPrint>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getDicts } from '@/api/dict'
import Base from '@/views/base/Base'
import { getBaseLeagues } from '@/api/cooperation/baseLeagueEntity'
import userCenterTaberListPrint from '@/views/userCenter/userCenterItem/userCenterTaberListPrint'
import IntroductionFundingApplicationAgreement from './IntroductionFundingApplicationAgreement'
import { country, countryEn } from '@/api/country'
import { getUsers } from '@/api/user'
import { getBaseMemberApplys, saveAndUpdate } from '@/api/baseMemberApply'
import printJS from 'print-js';
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  name: 'IntroductionFundingApplication',
  extends: Base,
  components: { IntroductionFundingApplicationAgreement, userCenterTaberListPrint },
  data () {
    return {
      active: this.$route.query.key ? this.$route.query.key : 0,
      activeNames: ['1', '2', '3'],
      UnitType: [],
      screenIndex: null,
      countryList: [],
      baseLeagueInfos: [],
      dialogVisible: false,
      IfimgDom: false,
      realTimeInfoScreens: [{
        lable:"common.AllianceIntroduction",
        value:'union'
      }, {
        lable: "common.CooperativeUnitIntroduction",
        value: 'cooperation'
      }, {
        lable: "common.CustomizedService",
        value: 'custom'
      }],
      htmlTitle: '页面导出PDF文件名',

      baseMemberApply: {
        id: null,
        country: '',
        countryDict: '',
        unitType: '',
        unitId: '',
        unitZhName: '',
        unitEnName: '',
        unitAddress: '',
        postalCode: '',
        unitWebsite: '',
        corporateName: '',
        duty: '',
        unitIntroduction: '',
        leagueType: '',
        leagueTypeDict: '',
        memberApplyDate: '',
        subName: '',
        subAccount: '',
        subCompany: '',
        subMail: '',
        subPhone: '',
        status: '',
        statusDict: '',
        phase: '',
        phaseDict: '1',
        areaDict: '',
        reviewerMechanism: '',
        firstApprovalUser: '',
        firstApprovalResult: '',
        firstApprovalComment: '',
        firstApprovalTime: '',
        secondApprovalUser: '',
        secondApprovalResult: '',
        secondApprovalComment: '',
        secondApprovalTime: '',
        auditUser: '',
        auditTime: '',
        auditStatusDict: '1',
        baseMessage: '',
        feeStandard: '',
        chairManAuditTime: '',
        confirmationTemplate: '1',
        createBy: '',
        createDate: '',
        updateBy: '',
        updateDate: '',
      },
      baseContactsInfo: {
        id: null,
        contactsType: '',
        contactsTypeDict: '',
        contactsName: '',
        currentDuty: '',
        depart: '',
        telephoneNumber: '',
        mobilePhone: '',
        email: '',
        spareEmail: '',
        faxNumber: '',
        userId: '',
        userType: 'member_apply',
        remarks: '',
        createBy: '',
        createDate: '',
        updateBy: '',
        updateDate: '',
      },
      leagueType: [],
      processKey: 'MEMBER_APPROVAL',
      approvers: [],
      duty: '',
      group: '',
      leagueMap: {}
    }
  },
  created () {


  },
  watch: {
    "$i18n.locale" () {
      this.getIntaData();
    },
    'active' () {
      if (this.active !== 0) {
        getBaseMemberApplys().then(res => {
          var data = res.data;
          if (data) {
            this.baseMemberApply = data.baseMemberApplies[0] || {};
            this.baseContactsInfo = data.baseContactsInfo || {};
            this.leagueType = data.leagueType || [];
            this.active = 2;
          }
        });
        this.getIntaData();
      }
    },
    leagueType: function () {
      if (this.leagueType.length > 0) {
        this.baseMemberApply.leagueTypeDict = this.leagueType.join(',');
        var leagueType = [];
        if (this.leagueType.length > 0) {
          this.leagueType.forEach(e => {
            leagueType.push(this.leagueMap[e])
          })
        }
        this.baseMemberApply.leagueType = leagueType.join(',');
      }
    }
  },
  computed: {
    form1Rules () {
      return {
        countryDict: [
          { required: true, message: this.$t('common.PleaseSelect') + '  ' + this.$t('common.Country'), trigger: 'change' }
        ],
        unitType: [
          { required: true, message: this.$t('common.PleaseSelect') + '  ' + this.$t('common.UnitType'), trigger: 'blur' },
        ],
        unitZhName: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.FullChinesenameofthecompany'), trigger: 'blur' }
        ],
        unitEnName: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.FullEnglishnameofunit'), trigger: 'blur' }
        ],
        unitAddress: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.Unitaddress'), trigger: 'blur' }
        ],
        corporateName: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.LegalRepresentative'), trigger: 'blur' }
        ],
        duty: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.Position'), trigger: 'blur' }
        ],
        unitIntroduction: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.BriefIntroductionOfApplicant'), trigger: 'blur' }
        ],
      }
    },
    rules () {
      return {
        depart: [{ required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.Department'), trigger: 'blur' }],
        contactsName: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.fullName'), trigger: 'blur' },
        ],
        currentDuty: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.Position'), trigger: 'blur' }
        ],
        telephoneNumber: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.ContactPhoneNumber'), trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: this.$t('common.OnlyInputNumber'), trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.mobilePhone'), trigger: 'blur' },
          { pattern: /^0{0,1}(13[0-9]|15[1-9]|17[1-9]|153|156|18[0-9])[0-9]{8}$/, message: this.$t('common.Theformatofmobilephonenumberisincorrect'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('common.PleaseEnter') + '  ' + this.$t('common.Email2'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/, message: this.$t('common.Emailformatisnotcorrect'), trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    agreementChange (val) {
      this.active = val
    },
    createPdf () {
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      this.$refs.imgDom.style.display = 'block';
      html2canvas(this.$refs.imgDom, {
        allowTaint: true,
        scale: 2,
        dpi: 182,//导出图片清晰度
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        //一页pdf显示html页面生成的canvas高度;
        let pageHeight = contentWidth / 592.28 * 841.89
        //未生成pdf的html页面高度
        let leftHeight = contentHeight
        //页面偏移
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        //返回图片dataURL，参数：图片格式和清晰度(0-1)
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        //方向默认竖直，尺寸ponits，格式 a4纸 [595.28,841.89]
        let PDF = new JsPDF('', 'pt', 'a4')
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          //addImage将图片添加到pdf中
          //addImage中间两个参数控制x、y边距，
          //后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            //避免添加空白页
            if (leftHeight > 0) {
              //addPage()添加pdf页数
              PDF.addPage()
            }
          }
        }
        //保存名称
        PDF.save('入会申请书.pdf');

      })
      this.$refs.imgDom.style.display = 'none';
    },
    getIntaData () {
      getDicts(this.$i18n.locale.toUpperCase() == "ZH" ? 'INDUSTRY_DICTS' : 'INDUSTRY_DICTS_EN').then(res => {
        this.UnitType = res.data[0]
      });
      getBaseLeagues({ language: this.$i18n.locale.toUpperCase() }).then(result => {
        const data = result.data
        this.baseLeagueInfos = data.baseLeagueInfos;
        this.baseLeagueInfos.forEach(element => {
          this.leagueMap[element.baseEntityId] = element.leagueName;
        })
      });
      country({ language: this.$i18n.locale.toUpperCase() }).then(res => {
        this.countryList = res.data.countryList;
      })

    },
    // 提交并下载
    submitForm (num) {
      this.$refs["form"].validate((valid1) => {
        if (valid1) {
          this.$refs["form2"].validate((valid2) => {
            if (valid2) {
              if (num == 1) {
                this.createPdf();
              } else {
                this.print();
              }

            } else {
              this.$notify.error({
                title: 'error',
                message: this.$t('common.pleaseContactInformation')
              });
              this.activeNames = ["2"]
              return false;
            }
          })
        } else {
          this.$notify.error({
            title: 'error',
            message: this.$t('common.unitInfo')
          });
          this.activeNames = ["1"]
          return false;
        }
      });
    },
    realTimeInfoScreen (i, index) {
      this.toView('IntroductionMemberProfile', i.value)
    },
    print () {
      loading();
      if (this.duty || this.group) {
        getUsers({
          duty: this.duty,
          groups: this.group,
        }).then(res => {
          let data = res.data || {};
          let approvers = data.authUsers || [];
          if (approvers && approvers.length > 0) {
            this.approver = '';
            approvers.forEach(item => {
              this.approver += item.userId + ",";
            });
            this.approver = this.approver.substring(0, this.approver.length - 1);
          }
        });
      }
      this.baseMemberApply.phaseDict = '1';
      this.baseMemberApply.statusDict = this.submitStatus;
      this.baseMemberApply.auditStatusDict = '1';
      this.baseMemberApply.leagueTypeDict = this.leagueType.join(',');
      var leagueType = [];
      if (this.leagueType.length > 0) {
        this.leagueType.forEach(e => {
          leagueType.push(this.leagueMap[e])
        })
      }
      this.baseMemberApply.leagueType = leagueType.join(',');
      var users = localStorage.getItem('user');
      var user = JSON.parse(users);
      this.baseMemberApply.subName = user.username;
      this.baseMemberApply.subAccount = user.umsUser.userUid;
      this.baseMemberApply.subCompany = this.baseMemberApply.unitZhName;
      this.baseMemberApply.subPhone = user.umsUser.userPreferredMobile;
      this.baseMemberApply.subMail = user.umsUser.userEmail;
      this.submitHandler((token) => {
        saveAndUpdate(JSON.stringify(this.baseMemberApply), JSON.stringify(this.baseContactsInfo), null, this.approver, this.taskComment, token).then(res => {
          this.$message({
            message: this.$i18n.locale.toUpperCase() == "ZH" ? '添加资料成功' : 'Submitted successfully',
            type: 'success'
          });
          this.resetToken();
          this.active = 2;
          closeLoading();
        }).catch(error => {
          this.resetToken();
          closeLoading();
        });
      })
    },
    // 发送申请表
    submitFormApplication () {

    },
    cancel () {
      this.active = 1;
      this.baseMemberApply = {
        id: null,
        country: '',
        countryDict: '',
        unitType: '',
        unitId: '',
        unitZhName: '',
        unitEnName: '',
        unitAddress: '',
        postalCode: '',
        unitWebsite: '',
        corporateName: '',
        duty: '',
        unitIntroduction: '',
        leagueType: '',
        leagueTypeDict: '',
        memberApplyDate: '',
        subName: '',
        subAccount: '',
        subCompany: '',
        subMail: '',
        subPhone: '',
        status: '',
        statusDict: '',
        phase: '',
        phaseDict: '1',
        areaDict: '',
        reviewerMechanism: '',
        reviewer: '',
        firstApprovalResult: '',
        firstApprovalComment: '',
        secondApprovalResult: '',
        secondApprovalComment: '',
        baseMessage: '',
        feeStandard: '',
        confirmationTemplate: '1',
        auditTime: '',
        createBy: '',
        createDate: '',
        updateBy: '',
        updateDate: '',
      };
      this.baseContactsInfo = {
        id: null,
        contactsType: '',
        contactsTypeDict: '',
        contactsName: '',
        currentDuty: '',
        depart: '',
        telephoneNumber: '',
        mobilePhone: '',
        email: '',
        spareEmail: '',
        faxNumber: '',
        userId: '',
        userType: 'member_apply',
        remarks: '',
        createBy: '',
        createDate: '',
        updateBy: '',
        updateDate: '',
      };
    },
    getIconUrl (url) {
      return require("@/assets/img/introductionCooperation/" + url);
    },
    toView (router, json) {
      this.$router.push({ name: router, query: { key: json } })
    },
    toNewView (router, json) {
      this.$store.commit('modify', router);
      window.localStorage.setItem('router', router);
      const { href } = this.$router.resolve({
        name: router,
        query: {
          key: json
        },
      });
      window.open(href, '_blank');
    }
  }
}
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.box {
  margin-top: 10px;
  background: #fff;
  min-height: 500px;
  padding: 20px 0;
}
.crumbs {
  margin-left: 20px;
}
body {
  margin: 0;
}
.crumbs >>> .el-step__icon {
  width: 37px;
  height: 37px;
  font-size: 18px;
}
.crumbs >>> .el-step.is-horizontal .el-step__line {
  top: 20px;
}
.crumbs >>> .el-step__head.is-process {
  color: #409eff;
  border-color: inherit;
}
.crumbs >>> .el-step__head.is-process .el-step__icon.is-text {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
  width: 46px;
  height: 46px;
}
.crumbs >>> .el-step__title.is-process,
.crumbs >>> .el-step__description.is-process {
  color: #409eff;
}
.crumbs >>> .el-collapse-item {
  /* width: 80%; */
  margin: auto;
}
.el-collapse {
  border: none;
}
.crumbs >>> .el-collapse-item__header {
  padding: 0 20px 0 100px;
  font-weight: 700;
}
.crumbs >>> .el-collapse-item__wrap {
  padding: 0 0 0 100px;
}
.el-checkbox {
  display: inline-block;
  margin-bottom: 20px;
}
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.crumbs >>> .el-form-item__error {
  width: 360px;
}
.screen1 {
  color: #2c5589;
}
.screen2 {
  font-size: 14px;
  color: #bebebe;
}
.crumbs >>> .el-collapse-item__header.is-active {
  border-bottom-color: #ebeef5;
}
.button_409EFF {
  border-color: #409eff;
  color: #409eff;
}
.screen1 {
    background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
    border-radius: 20px 20px 20px 20px;
    padding: 8px 12px;
    color: #F0F3F8;
    margin-left: 10px;
}
.screen2 {
    font-size: 14px;
    background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
    border-radius: 20px;
    padding: 8px 12px;
    color: #165099;
    margin-left: 10px;
}
</style>