dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCentermyConcernsProgressCheck.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
        <div style="height: 60px;line-height: 60px;padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
            {{$t('common.MembershipApplication')}}
        </div>
        <div style="margin-top: 50px;width: 100%;" class="crumbs">
            <el-steps :active="Number(active)+1" 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 style="width: 100%;margin: auto;margin-top: 20px;">
                <el-collapse v-model="activeNames" accordion>
                    <el-collapse-item name="1" v-if="active==0">
                        <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 :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="$t('common.FullChinesenameofthecompany')"  prop='unitZhName' style="display: block;">
                                <el-input 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 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 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 v-model="baseMemberApply.unitAddress"
                                          style="width: 300%;"  :placeholder="$t('common.PleaseEnter')+$t('common.Unitaddress')">
                                </el-input>
                            </el-form-item>
                            <!-- 邮政编码 -->myConcernsProgressCheck
                            <el-form-item :label="$t('common.PostalCode')" style="display: block;">
                                <el-input 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 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 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
                                        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==0">
                        <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 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 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 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 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 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 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 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 title="全球能源互联网专业联盟（请根据业务领域选择，可多选）" name="3" v-if="active==0">
                        <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: 50px;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>
                    <el-collapse-item name="4" v-if="active==1">
                        <el-form ref="form" :model="baseMemberApply" label-width="164px" class="demo-ruleForm"  style="margin-left: 100px;margin-top: 20px;width: 700px;">
                            <el-form-item style="position: relative;">
                                <el-form-item :label="$t('common.upLoadStampDoc')">
                                    <el-upload
                                            class="upload-demo"
                                            action="./api/file/upload/attachment?module=base_member_apply"
                                            :on-change="handleChange"
                                            :on-success="docSuccess"
                                            :headers="myHeaders"
                                            :before-upload="beforeUpload"
                                            :file-list="fileList">
                                        <el-button size="small" type="primary">{{$t('common.SelectUploadCUnit')}}</el-button>
                                        <div slot="tip" class="el-upload__tip">{{$t('common.OnlyUploadPdf')}}</div>
                                    </el-upload>
                                </el-form-item>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    <el-collapse-item :title="$t('common.Preliminaryreview*')" name="5" v-if="active==2">
                        <!-- 审批状态 -->
                        <div style="height: 120px;padding-top: 30px;">
                            <img :src="getImgIcon(baseMemberApply.firstApprovalResult?baseMemberApply.firstApprovalResult=='y'?'approvalPassed.png':'approvalReject.png':'toApproval.png')"
                                 alt="" style="margin: 0px 0px 50px 99px;height: 100px;">
                            <div style="float: right;width: 775px;height: 100px;color: #999;font-size: 16px;line-height: 46px;">
                                <span style="color: #3300ff;font-size: 20px;font-weight: 700;margin-right: 60px;">
                                    {{baseMemberApply.firstApprovalResult?baseMemberApply.firstApprovalResult=='y'?$t('common.Alreadypassed'):$t('common.Notpass'):$t('common.Checkpending')}}
                                </span>
                                <span>{{$t('common.PreliminaryreviewTime')}}：{{baseMemberApply.firstApprovalResult?formatDate(baseMemberApply.firstApprovalTime):''}}</span>
                                <br/>
                                <span v-if="baseMemberApply.firstApprovalResult=='n'">{{$t('common.Reasonfailure')}}：{{baseMemberApply.firstApprovalComment}}</span>
                                <span style="float: right;margin-right: 150px;color: #1890ff;transform: translateY(-20px);"></span>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item :title="$t('common.CooperativeOrganizationReview')" name="5" v-if="active==3">
                        <!-- 审批状态 -->
                        <div style="height: 120px;padding-top: 30px;">
                            <img :src="getImgIcon(baseMemberApply.secondApprovalResult?baseMemberApply.secondApprovalResult=='y'?'approvalPassed.png':'approvalReject.png':'toApproval.png')"
                                 alt="" style="margin: 0px 0px 50px 99px;height: 100px;">
                            <div style="float: right;width: 775px;height: 100px;color: #999;font-size: 16px;line-height: 46px;">
                                <span style="color: #3300ff;font-size: 20px;font-weight: 700;margin-right: 60px;">
                                    {{baseMemberApply.secondApprovalResult?baseMemberApply.secondApprovalResult=='y'?$t('common.Alreadypassed'):$t('common.Notpass'):$t('common.Checkpending')}}
                                </span>
                                <span>{{$t('common.CooperativeOrganizationReviewTime')}}：{{formatDate(baseMemberApply.secondApprovalTime)}}</span>
                                <br/>
                                <span v-if="baseMemberApply.secondApprovalResult=='n'">{{$t('common.Reasonfailure')}}：{{baseMemberApply.secondApprovalComment}}</span>
                                <span style="float: right;margin-right: 150px;color: #1890ff;transform: translateY(-20px);"></span>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="4" v-if="active==4 && baseMemberApply.memberConfirmFileFlag != 'y' && baseMemberApply.memberConfirmFilePassFlag !='y'">
                        <el-form ref="form" :model="baseMemberApply" label-width="160px" class="demo-ruleForm"  style="margin-left: 100px;margin-top: 20px;width: 700px;">
                            <el-form-item :label="$t('common.Downloadletter')" style="position: relative;">
                                <table class="footable table table-stripped" lay-even="" lay-skin="row">
                                    <thead>
                                    <tr>
                                        <th>{{$t('common.Name')}}</th>
                                        <th width="160">{{$t('common.Option')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(attaInfo, index) in confirmAttachments"
                                            :key="attaInfo.sort">
                                        <td
                                            @click="preview(attaInfo)"
                                            :title="attaInfo.attachmentName"
                                            class="atta-name"><i :class="getFileIcon(attaInfo.attachmentName)"></i> {{ attaInfo.attachmentName }}</td>
                                        <td>
                                            <a style="cursor:pointer;color: violet;"  @click="preview(attaInfo)">{{$t('common.Download')}}</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </el-form-item>
                            <el-form-item :label="$t('common.Uploadletter')" style="position: relative;">
                                <el-upload
                                        class="upload-demo"
                                        action="./api/file/upload/attachment?module=base_member_apply_member_confirmation_seal"
                                        :on-change="handleChange1"
                                        :on-success="docSuccess1"
                                        :headers="myHeaders"
                                        :before-upload="beforeUpload"
                                        :file-list="conFirmList">
                                    <el-button size="small" type="primary">{{$t('common.SelectUploadCUnit')}}</el-button>
                                    <div slot="tip" class="el-upload__tip">{{$t('common.OnlyUploadPdf')}}</div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    <el-collapse-item :title="$t('common.Uploadedletter')" name="4" v-if="active == 4 && baseMemberApply.memberConfirmFileFlag == 'y' && baseMemberApply.memberConfirmFilePassFlag =='n'">
                        <div style="height: 120px;padding-top: 30px;">
                            <img :src="getImgIcon('approvalPassed.png')"
                                 alt="" style="margin: 0px 0px 50px 99px;height: 100px;">
                            <div style="float: right;width: 775px;height: 100px;color: #999;font-size: 16px;line-height: 46px;">
                                    <span style="color: #3300ff;font-size: 20px;font-weight: 700;margin-right: 60px;">{{$t('common.MemberConfirmationLetter')}}</span>
                                <span>{{$t('common.UploadedTime')}}{{formatDate(baseMemberApply.memberConfirmFileTime)}}</span>
                                <br/>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item :title="$t('common.Issuingcertificates')" name="4" v-if="active >5 ">
                        <div style="margin: 26px 109px 281px 307px;">
                            <span v-if="baseMemberApply.baseMessage">{{baseMemberApply.baseMessage}}</span>
                            <span v-else style="color: #3300ff;font-size: 20px;font-weight: 700;margin-right: 60px;">{{$t('common.PleaseWait')}}</span>
                            <table >
                              <thead>
                              <tr>
                                <th>{{$t('common.certificates')}}</th>
                                <th width="160">{{$t('common.Option')}}</th>
                              </tr>
                              </thead>
                              <tbody>
                              <tr v-for="(attaInfo, index) in confirmAttachmentsLsat"
                                  :key="attaInfo.sort">
                                <td
                                    @click="preview(attaInfo)"
                                    :title="attaInfo.attachmentName"
                                    class="atta-name"><i :class="getFileIcon(attaInfo.attachmentName)"></i> {{ attaInfo.attachmentName }}</td>
                                <td>
                                  <a style="cursor:pointer;color: violet;"  @click="preview(attaInfo)">{{$t('common.Download')}}</a>
                                </td>
                              </tr>
                              </tbody>
                            </table>

                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div style="text-align: center;margin: 20px 0 0 20px;">
                <span v-if="active == 0" >
                    <el-button style="margin-left: 10px;width: 150px;height: 40px;" type="primary" @click="onSubmitUpdate">{{$t('common.submitapplications')}}</el-button>
                </span>
                <el-button style="margin-left: 10px;width: 80px;height: 40px;" v-if="active == 1 ||(active == 2 && baseMemberApply.firstApprovalResult =='n' )" @click="changeActive(0)">{{$t('common.Modificationfilling')}}</el-button>
                <el-button style="margin-left: 10px;width: 150px;height: 40px;" @click="onSubmit123" v-if="active == 1">{{$t('common.submitapplications')}}</el-button>
                <el-button style="margin-left: 10px;width: 150px;height: 40px;" @click="submitMemberConfirm" v-if="active==4 && baseMemberApply.memberConfirmFileFlag != 'y' && baseMemberApply.memberConfirmFilePassFlag !='y'">{{$t('common.Confirm')}}</el-button>
                <el-button style="margin-left: 10px;width: 80px;height: 40px;" @click="dialogVisible=true" v-if="active == 1 ||active == 0">{{$t('common.preview')}}</el-button>
                <el-button style="margin-left: 10px;width: 150px;height: 40px;" @click="createPDF()" v-if="active == 1">{{$t('common.Downloadapplication')}}</el-button>
                <el-button style="margin-left: 10px;width: 80px;height: 40px;" @click="changeActive(1)" v-if="active == 0">{{$t('common.cancel')}}</el-button>
            </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="$i18n.locale=='zh'?'700px':'900px'"
                    height="842px">
                <template>
                    <userCenterTaberListPrint  :form="baseMemberApply" :form2="baseContactsInfo" ></userCenterTaberListPrint>
                </template>
            </el-dialog>
        </div>

    </div>
</template>
<script>
    import {getDicts} from '@/api/dict'
    import userCenterTaberListPrint from './userCenterTaberListPrint'
    import { getAttaments,downloadAttachment} from '@/api/file'
    import {getBaseMemberApplys,submitMemberConfirm} from '@/api/baseMemberApply'
    import {saveAndUpdate} from '@/api/baseMemberApply'
    import Base from '@/views/base/Base'
    import {country} from '@/api/country'
    import { getUsers } from '@/api/user'
    import {getToken} from '@/utils/auth';
    import html2canvas from 'html2canvas'
    import {getBaseLeagues} from '@/api/cooperation/baseLeagueEntity'
    import JsPDF from 'jspdf'
    export default {
        name: 'userCentermyConcernsProgressCheck',
        extends:Base,
        components:{userCenterTaberListPrint},
        data () {
            return {
                active:1,
                activeNames: ['1','2','3','4','5'],
                dialogVisible:false,
                printObj: {
                    id: "#printMe",
                    popTitle: "",
                    extraCss: "",
                },
                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: '',
                    areaDict: '',
                    reviewerMechanism: '',
                    firstApprovalUser: '',
                    firstApprovalResult: '',
                    firstApprovalComment: '',
                    firstApprovalTime: '',
                    secondApprovalUser: '',
                    secondApprovalResult: '',
                    secondApprovalComment: '',
                    secondApprovalTime: '',
                    auditUser: '',
                    auditTime: '',
                    auditStatusDict: '',
                    memberConfirmFileFlag: '',
                    memberConfirmFileTime: '',
                    memberConfirmFilePassFlag: '',
                    baseMessage: '',
                    feeStandard: '',
                    chairManAuditTime: '',
                    confirmationTemplate: '',
                    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:[],
                countryList:[],
                myHeaders: {Authorization: ('Bearer ' + getToken())},
                AttachmentUpload: 'common.AttachmentUpload',
                fileList:[],
                attachmentIds:[],
                processKey: 'MEMBER_APPROVAL',
                approvers:[],
                duty:'',
                group:'MEMBER.GROUP.APPROVE.APPLY',
                confirmAttachments:[],
              confirmAttachmentsLsat:[],
                conFirmList:[],
                conFirmAttachmentIds:[],
                baseLeagueInfos:[],
                leagueMap:{},
            }
        },
        watch:{
            "$i18n.locale"(){
                this.$refs.form.clearValidate();
                this.getInitData();
            }
        },
        computed:{
            form1Rules(){
                return {
                    unitCountry:[
                        {required: true, message: this.$t('common.PleaseSelect')+'  '+this.$t('common.Country'), trigger: 'change'}
                    ],
                    unitZhName: [
                        { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.NameoftheEntity'), trigger: 'blur' }
                    ],
                    unitAddress:[
                        { required: true, message: "", 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 {
                    contactsName: [
                        { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.fullName'), trigger: 'blur' },
                    ],
                    depart:[{ required: true,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' }
                    ],
                    mobilePhone: [
                        {required: true,message: this.$t('common.PleaseEnter')+'  '+this.$t('common.mobilePhone'),trigger: 'blur'},
                        { pattern: /^0{0,1}(13[0-9]|15[7-9]|17[1-9]|153|156|18[7-9])[0-9]{8}$/, message: this.$t('common.Theformatofmobilephonenumberisincorrect'), trigger: 'blur'}
                    ],
                    email: [
                        { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Email'), 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'}
                    ],
                }

            },
        },
        created(){
            this.getInitData();
        },
        methods:{
            beforeUpload(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (['pdf'].indexOf(FileExt.toLowerCase()) === -1) {
                    this.$message({
                        type: 'warning',
                        message: '请上传pdf格式的附件！'
                    });
                    this.fileList.splice(this.fileList.indexOf(file), 1)
                    return false;
                }
                this.isLt2k = file.size / 1024 / 1024 < 2 ? '1' : '0';
                if (this.isLt2k === '0') {
                    this.$message({
                        message: '上传文件大小不能超过2M!',
                        type: 'error'
                    });
                    this.fileList.splice(this.fileList.indexOf(file), 1)
                    return false;
                }
            },
            getInitData(){
                getBaseMemberApplys().then(res=>{
                    var data = res.data;
                    if(data){
                        this.baseMemberApply = data.baseMemberApplies[0]||{};
                        this.active = this.baseMemberApply.phaseDict;
                        if(this.active > 4){
                            this.active = 7;
                        }
                        this.baseContactsInfo = data.baseContactsInfo||{};
                        this.leagueType = data.leagueType||[];
                        if(this.baseMemberApply.phaseDict=='4' ||this.baseMemberApply.phaseDict=='5'){
                            var attachmentBusinessType = 'base_member_apply_member_confirmation_upload';
                            getAttaments({
                                attachmentBusinessId: this.baseMemberApply.id,
                                attachmentBusinessType: this.baseMemberApply.phaseDict=='4'?attachmentBusinessType:'base_member_apply_member_confirmation_seal'
                            }).then(res => {
                                var data = res.data;
                                if (data && data.attachmentInfos) {
                                    let attachments = [];
                                    data.attachmentInfos.forEach((element, index) => {
                                        attachments.push({
                                            attachmentBusinessId: this.attachmentBusinessId,
                                            attachmentId: element.id,
                                            attachmentName: element.attachmentName,
                                            attachmentSize: element.attachmentSize,
                                            attachmentStatement: element.attachmentStatement,
                                            attachmentSavePath: element.attachmentSavePath,
                                            fileFunctionTypeDict: element.fileFunctionTypeDict,
                                            sort: index,
                                            status: element.status,
                                            createBy: element.createBy,
                                            createDate: element.createDate,
                                        });
                                    });
                                    this.confirmAttachments = attachments;

                                }
                            });
                        }
                      if(this.baseMemberApply.phaseDict==='6'){
                        getAttaments({
                          attachmentBusinessId: this.baseMemberApply.id,
                          attachmentBusinessType: 'base_member_apply_member_last'
                        }).then(res => {
                          let lastdata = res.data;
                          console.log(lastdata)
                          if (lastdata && lastdata.attachmentInfos) {
                            let attachmentslast = [];
                            lastdata.attachmentInfos.forEach((element, index) => {
                              attachmentslast.push({
                                attachmentBusinessId: this.attachmentBusinessId,
                                attachmentId: element.id,
                                attachmentName: element.attachmentName,
                                attachmentSize: element.attachmentSize,
                                attachmentStatement: element.attachmentStatement,
                                attachmentSavePath: element.attachmentSavePath,
                                fileFunctionTypeDict: element.fileFunctionTypeDict,
                                sort: index,
                                status: element.status,
                                createBy: element.createBy,
                                createDate: element.createDate,
                              });
                            });
                            this.confirmAttachmentsLsat = attachmentslast;
                          }
                        });
                      }

                    }
                });
                country({language:this.$i18n.locale.toUpperCase()}).then(res=>{
                    this.countryList=res.data.countryList;
                });
                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;
                    })
                });
                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);
                        }
                    });
                }
            },
            createPDF () {
                window.pageYOffset = 0;
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
                this.$refs.imgDom.style.display='block';
                var _this = this;
                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(_this.$i18n.locale.toUpperCase()=="ZH"?'入会申请书.pdf':'Application for membership.pdf');

                })
                this.$refs.imgDom.style.display='none';
            },
            submitMemberConfirm:function(){
                // 提交入会申请和盖章文件
                if(this.conFirmAttachmentIds.length>0){
                    this.submitHandler((token) => {
                        submitMemberConfirm(JSON.stringify(this.baseMemberApply),JSON.stringify(this.conFirmAttachmentIds),"ums_user",token).then(res=>{
                            this.$message({
                                message: this.$t('common.submittedsuccessfully'),
                                type: 'success'
                            });
                            this.active=this.baseMemberApply.phaseDict;
                            this.getInitData();
                            this.resetToken();
                        }).catch(error => {
                            this.resetToken();
                        });
                    })
                }else{
                    this.$notify.error({
                        title: 'error',
                        message: this.$t('common.uploadmembershipconfirmation')
                    });
                }
            },
            onSubmit123(){
                // 提交入会申请和盖章文件
                if(this.attachmentIds.length>0){
                    loading();
                    this.baseMemberApply.phaseDict = '2';
                    this.baseMemberApply.statusDict = '4';
                    this.baseMemberApply.auditStatusDict = '2';
                    this.baseMemberApply.leagueTypeDict = this.leagueType.join(',');
                    this.baseMemberApply.firstApprovalUser = '';
                    this.baseMemberApply.firstApprovalResult = '';
                    this.baseMemberApply.firstApprovalComment = '';
                    this.baseMemberApply.firstApprovalTime = '';
                    this.submitHandler((token) => {
                        saveAndUpdate(JSON.stringify(this.baseMemberApply),JSON.stringify(this.baseContactsInfo),JSON.stringify(this.attachmentIds),this.approver, this.taskComment,token).then(res=>{
                            this.$message({
                                message: this.$t('common.membershipsuccesssubmitted'),
                                type: 'success'
                            });
                            this.active=this.baseMemberApply.phaseDict;
                            this.resetToken();
                        }).catch(error => {
                            this.resetToken();
                        });
                    })
                }else{
                    this.$notify.error({
                        title: 'error',
                        message: this.$t('common.UploadSealedDocument')
                    });
                }
            },
            onSubmitUpdate(){
                this.$refs["form"].validate((valid1) => {
                    if (valid1) {
                        this.$refs["form2"].validate((valid2) => {
                            if (valid2) {
                                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(',');
                                this.baseMemberApply.firstApprovalUser = '';
                                this.baseMemberApply.firstApprovalResult = '';
                                this.baseMemberApply.firstApprovalComment = '';
                                this.baseMemberApply.firstApprovalTime = '';
                                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"?'保存成功':'save success',
                                            type: 'success'
                                        });
                                        this.resetToken();
                                        this.active=1;
                                        this.getInitData();
                                        closeLoading();
                                    }).catch(error => {
                                        this.resetToken();
                                        closeLoading();
                                    });
                                })
                            } 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;
                    }
                });
            },
            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');
            },
            changeActive(active){
                this.active = active;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
            },
            docSuccess(res, file) {
                if (res.data) {
                    this.attachmentIds.push(res.data.attachmentId)
                }
            },
            handleChange1(file, fileList) {
                this.conFirmList = fileList.slice(-3);
            },
            docSuccess1(res, file) {
                if (res.data) {
                    this.conFirmAttachmentIds.push(res.data.attachmentId)
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            getImgIcon(url){
                return require('@/assets/img/userCenter/'+url)

            },
            preview: function(atta) {
                if (!atta.attachmentId) {
                    alert("未上传成功，无法下载。");
                    return;
                }
                var path = atta.attachmentSavePath;
                if (path == "") {
                    alert("附件未成功保存，无法下载。");
                    return;
                }
                // window.open('/api/file/pub/' + path, '_blank');
                downloadAttachment(atta.attachmentId).then(res => {
                   if (res.size > 0) {
		    			const link = document.createElement('a')
		    			let blob = new Blob([res], {
		    				type: res.type,
		    			})
		    			link.style.display = 'none'
		    			link.href = URL.createObjectURL(blob)
		    			link.download = decodeURIComponent(atta.attachmentName) //下载的文件名  注意：加.xls是兼容火狐浏览器
		    			document.body.appendChild(link)
		    			link.click()
		    			document.body.removeChild(link)
		    		}
                }).catch(err => {
                    if (err.msg) {
                        alert(err.msg);
                    }
                    console.log(err);
                });
            },
            getFileIcon: function(attachmentName) {
                if (!attachmentName) {
                    return 'fa fa-file-o text-danger';
                }
                if (attachmentName.endWith("doc") || attachmentName.endWith("docx")) {
                    return 'fa fa-file-word-o text-blue';
                }

                if (attachmentName.endWith("ppt") || attachmentName.endWith("pptx")) {
                    return 'fa fa-file-powerpoint-o text-warning';
                }

                if (attachmentName.endWith("xlsx") || attachmentName.endWith("xls")) {
                    return 'fa fa-file-excel-o text-green';
                }

                if (attachmentName.endWith("pdf")) {
                    return 'fa fa-file-pdf-o text-success';
                }

                if (isImg(attachmentName)) {
                    return 'fa fa-file-image-o text-danger';
                }

                return 'fa fa-file-o text-danger';

                function isImg() {
                    var suffs = ['bmp','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','psd','cdr','pcd','dxf','ufo','eps','ai','raw','WMF','webp'];
                    var isImg = false;
                    suffs.forEach(suff => {
                        if (attachmentName.endWith(suff)) {
                            isImg = true;
                            return;
                        }
                    });
                    return isImg;
                }
            },


        }
    }
</script>
<style scoped>
    .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;
    }
    .crumbs>>>.el-collapse-item__wrap {
        padding: 0 0 0 0px;
    }
    .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;
    }
    .userCenterAuthenticationPersonal>>>.el-upload {
        border: 1px solid rgba(204, 204, 204, 1);
    }
    .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;
    }

    .linkLeft{
        line-height: 30px;
        text-align: left;
    }
    .linkRight{
        line-height: 30px;
        text-align: right;
    }
    table{
        border-collapse: collapse;
        border: none;
        width:100%
    }
    td,th {
        padding:2px 4px;
        min-height:50px;
        line-height: 20px;
        font-size: 10px;
        border:1px solid #e6e6e6;

    }
    td,tr {
        /* width:15%; */
        font-size: 9px;
        background-color: #e5f5fb;
        background-color: #fbfbfb;
    }
    .none {
        display: none
    }
    span {
        margin-right:15px
    }
    .a4 {
        page-break-before: auto;
        page-break-after: always;
    }
    #print .table-head{width:100%;color:#000;}
    #print.table-body{width:100%; }
    #print.table-head table,.table-body table{width:100%;}
    /* #print.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;} */
    .black {
        color: #000;
        font-weight: 700;
        font-size: 15px;
    }
    @media print
    {
        table{
            border-collapse: collapse;
            border: none;
            width:100%
        }
        td,th {
            padding:2px 4px;
            min-height:50px;
            line-height: 20px;
            font-size: 10px;
            border:1px solid #e6e6e6;

        }
        td,tr {
            /* width:15%; */
            font-size: 9px;
            background-color: #e5f5fb;
            background-color: #fbfbfb;
        }
        .none {
            display: none
        }
        span {
            margin-right:15px
        }
        .a4 {
            page-break-before: auto;
            page-break-after: always;
        }
    }
</style>