dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCentermyConcernsProgressCheckAlliance.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.ApplicationForMembership')}}
        </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.Printanduploadwithcompanyseal1') + '）'"></el-step>
                <el-step :title="$t('common.Preliminaryreview')" ></el-step>
                <el-step :title="$t('common.CooperativeOrganizationReview')" 
                  :description="'('+ $t('common.Submissionforconsideration')+ ')'">
                </el-step>
                <el-step :title="$t('common.SendthenoticeofjoiningtheLeague')" >
                </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="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="1" v-if="active==0">
                        <template slot="title">
                            <span style="color: red;margin-right: 3px;">* </span>  {{$t('common.Basicinformationofapplicant')}}
                        </template>
                        <el-form ref="form" :model="baseLeagueApply" :rules="form1Rules" label-width="260px" class="demo-ruleForm"
                                 style="margin-top: 20px;width: 1000px;">
                            <!-- 国别 -->
                            <el-form-item :label="$t('common.Country')" prop='unitCountryDict'>
                                <el-select
                                        filterable
                                        :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                                        v-model="baseLeagueApply.unitCountryDict"
                                        :placeholder="$t('common.PleaseSelect')+$t('common.Country')"
                                        style="width: 70%;">
                                    <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.NameoftheEntity')" prop='unitZhName'>
                                <el-input v-model="baseLeagueApply.unitZhName"  style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.NameoftheEntity')"></el-input>
                            </el-form-item>
                            <!-- 单位英文全称 -->
                            <el-form-item :label="$t('common.FullEnglishnameofunit')"  prop='unitEnName' style="display: block;">
                                <el-input v-model="baseLeagueApply.unitEnName"
                                          style="width: 70%;" :placeholder="this.$t('common.PleaseEnter')+$t('common.FullEnglishnameofunit')">
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="$t('common.OfficialWebsite')" prop='unitWebsite'>
                                <el-input v-model="baseLeagueApply.unitWebsite"  style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.OfficialWebsite')"></el-input>
                            </el-form-item>
                            <!-- 单位地址 -->
                            <el-form-item :label="$t('common.Unitaddress')" prop='unitAddress'>
                                <el-input v-model="baseLeagueApply.unitAddress"  style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.Unitaddress')"></el-input>
                            </el-form-item>
                            <!-- 邮政编码 -->
                            <el-form-item :label="$t('common.PostalCode')" prop='postalCode'>
                                <el-input v-model="baseLeagueApply.postalCode"  style="width: 70%;" :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="baseLeagueApply.corporateName"  style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.LegalRepresentative')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('common.BriefIntroductionOfApplicant')" prop='unitIntroduction'>
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        :placeholder="$t('common.Pleaseinputthecompanyprofileregistered')"
                                        v-model="baseLeagueApply.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')">
                                <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.mobilePhone"
                                          style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.ContactPhoneNumber')">
                                </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.Email')">
                                </el-input>
                            </el-form-item>
                            <!-- 传真 -->
                            <el-form-item :label="$t('common.Fax')" prop='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 :label="$t('common.upLoadStampDoc')" name="4" v-if="active==1">
                    <el-form ref="form" :model="baseLeagueApply" label-width="160px" class="demo-ruleForm"  style="margin-left: 100px;margin-top: 20px;width: 700px;">
                        <el-form-item :label="$t('common.upLoadStampDoc')" style="position: relative;">
                            <el-form-item :label="$t('common.upLoadStampDoc')">
                              <el-upload
                                      class="upload-demo"
                                      action="./api/file/upload/attachment?module=base_league_apply"
                                      :on-change="handleChange"
                                      :on-success="docSuccess1"
                                      :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  name="5" v-if="active==2">
                     <template slot="title">
                      <span style="font-size: 15px!important;">{{$t('common.PreliminaryAuditInformation')}}</span>
                    </template>
                    <div style="height: 120px;padding-top: 30px;">
                        <img :src="getImgIcon(baseLeagueApply.firstApprovalResult?baseLeagueApply.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;">
                                {{baseLeagueApply.firstApprovalResult?baseLeagueApply.firstApprovalResult=='y'?$t('common.ThepreliminaryApproved'):$t('common.ThepreliminaryNoApproved'):$t('common.ToAudit')}}</span>
                            <span>{{$t('common.PreliminaryauditTime')}}：{{baseLeagueApply.firstApprovalResult?formatDate(baseLeagueApply.firstApprovalTime):''}}</span>
                              <br/>
                              <span v-if="baseLeagueApply.firstApprovalResult=='n'">{{$t('common.Reasonfailure')}}：{{baseLeagueApply.firstApprovalComment}}</span>
                              <span style="float: right;margin-right: 150px;color: #1890ff;transform: translateY(-20px);">
                              </span>
                        </div>
                    </div>
                    </el-collapse-item>
                    <el-collapse-item title="* 合作组织审议信息" name="5" v-if="active==3">
                        <div style="height: 120px;padding-top: 30px;">
                        <img :src="getImgIcon(baseLeagueApply.secondApprovalResult?baseLeagueApply.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;">
                            {{baseLeagueApply.secondApprovalResult?baseLeagueApply.secondApprovalResult=='y'?$t('common.OrganizationApproved'):$t('common.OrganizationNoApproved'):$t('common.ToAudit')}}</span>
                          <span>{{$t('common.Organizationdeliberatestime')}}：{{baseLeagueApply.secondApprovalResult?formatDate(baseLeagueApply.secondApprovalTime):''}}</span>
                          <br/>
                          <span v-if="baseLeagueApply.secondApprovalResult=='n'">{{$t('common.Reasonfailure')}}:{{baseLeagueApply.secondApprovalComment}}</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.MembershipNotification')" name="4" v-if="active==5">
                    <div style="margin: 53px 114px 300px 156px;">
                        <span v-if="baseLeagueApply.baseMessage">{{baseLeagueApply.baseMessage}}</span>
                    </div>
                </el-collapse-item>
                </el-collapse>
                </div>
                <div style="text-align: center;margin: 20px 0 0px 20px;height:100px">
                    <span v-if="active == 0" >
                        <el-button style="margin-left: 10px;height: 40px;" type="primary" @click="onSubmitUpdate">提交修改</el-button>
                    </span>
                    <el-button style="margin-left: 10px;height: 40px;" v-if="active == 1 ||(active == 2 && baseLeagueApply.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: 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">
                    <userCenterTaberListUnionPrint  :form="baseLeagueApply" :form2="baseContactsInfo" ></userCenterTaberListUnionPrint>
                </div>
                <el-dialog
                    title="文件在线预览"
                    :visible.sync="dialogVisible"
                    width="595px"
                    height="842px">
                    <template>
                    <userCenterTaberListUnionPrint  :form="baseLeagueApply" :form2="baseContactsInfo" ></userCenterTaberListUnionPrint>
                    </template>
                </el-dialog>
        </div>
          
    </div>
</template>
<script>
    import userCenterTaberListUnionPrint from '@/views/userCenter/userCenterItem/userCenterTaberListUnionPrint'
    import { downloadAttachment} from '@/api/file'
    import {submitApplyPortal,getBaseLeagueApplys} from '@/api/cooperation/baseLeagueApply'
    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: 'userCentermyConcernsProgressCheckAlliance',
        extends:Base,
        components:{userCenterTaberListUnionPrint},
        data () {
            return {
                active:1,
                activeNames: ['1','2','3','4','5'],
                dialogVisible:false,
                printObj: {
                    id: "#printMe",
                    popTitle: "",
                    extraCss: "",
                },
                baseLeagueApply: {
                id: null,
                userId: '',
                leagueName: '',
                leagueId: '',
                unitId: '',
                unitZhName: '',
                unitEnName: '',
                unitCountry: '',
                unitCountryDict: '',
                corporateName: '',
                unitAddress: '',
                postalCode: '',
                unitWebsite: '',
                unitIntroduction: '',
                linkName: '',
                linkDuty: '',
                linkDept: '',
                linkPhoneNumber: '',
                linkEmail: '',
                linkFaxNumber: '',
                area: '',
                areaDict: '',
                leagueApplyDate: '',
                subName: '',
                subAccount: '',
                subCompany: '',
                subMail: '',
                subPhone: '',
                status: '',
                statusDict: '',
                phase: '',
                phaseDict: '1',
                firstApprovalUser: '',
                firstApprovalResult: '',
                firstApprovalComment: '',
                firstApprovalTime: '',
                secondApprovalUser: '',
                secondApprovalResult: '',
                secondApprovalComment: '',
                secondApprovalTime: '',
                auditUser: '',
                auditTime: '',
                auditStatusDict: '',
                baseMessage: '',
                createBy: '',
                createDate: '',
                updateBy: '',
                updateDate: '',
            },
            baseContactsInfo:{
                id: null,
                contactsType: '',
                contactsTypeDict: '',
                contactsName: '',
                currentDuty: '',
                depart: '',
                telephoneNumber: '',
                mobilePhone: '',
                email: '',
                spareEmail: '',
                faxNumber: '',
                userId: '',
                userType:'alliance_apply',
                remarks: '',
                createBy: '',
                createDate: '',
                updateBy: '',
                updateDate: '',
            },
            leagueType:[],
            countryList:[],
            myHeaders: {Authorization: ('Bearer ' + getToken())},
            AttachmentUpload: 'common.AttachmentUpload',
            fileList:[],
            attachmentIds:[],
            processKey: 'MEMBER_APPROVAL',
            approvers:[],
            duty:'',
            group:'ALLIANCE.GROUP.APPROVE.APPLY',
            confirmAttachments:[],
            conFirmList:[],
            conFirmAttachmentIds:[],
            baseLeagueInfos:[],
            leagueMap:{},
        }
    },
    watch:{
        "$i18n.locale"(){
            this.$refs.form.clearValidate();
            this.getIntaData();
        }
    },
    created(){
        this.getIntaData();
    },
    computed:{
        form1Rules(){
            return {
                unitCountryDict:[
                    {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' }
                ],
                unitEnName: [
                    { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.FullEnglishnameofunit'), trigger: 'blur' }
                ],
                unitWebsite: [
                    { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.OfficialWebsite'), trigger: 'blur' }
                ],
                unitAddress: [
                    { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Unitaddress'), trigger: 'blur' }
                ],
                postalCode: [
                    { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.PostalCode'), trigger: 'blur' }
                ],
                corporateName:[
                    { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.LegalRepresentative'), 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' },
                ],
                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' }
                ],
                email: [
                    { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Email'), trigger: 'blur' },
                ],
            }
        },
    },
    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;
            }
        },
        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');
        },
        getIntaData(){
            getBaseLeagueApplys().then(res=>{
                var data = res.data;
                if(data){
                    this.baseLeagueApply = data.baseLeagueApplyList[0]||{};
                    this.baseContactsInfo = data.baseContactsInfo||{};
                    this.leagueType = data.leagueType||[];
                    this.active = this.baseLeagueApply.phaseDict;
                }
            });
            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);
                    }
                });
            };
            country({language:this.$i18n.locale.toUpperCase()}).then(res=>{
                this.countryList=res.data.countryList;
            });
            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;
                })
            });
        },
        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
              let pageHeight = contentWidth / 592.28 * 841.89
              let leftHeight = contentHeight
              let position = 0
              let imgWidth = 595.28
              let imgHeight = 592.28 / contentWidth * contentHeight
              let pageData = canvas.toDataURL('image/jpeg', 1.0)
              let PDF = new JsPDF('', 'pt', 'a4')
              if (leftHeight < pageHeight) {
                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) {
                    PDF.addPage()
                  }
                }
              }
              PDF.save('入盟申请书.pdf');
            })
            this.$refs.imgDom.style.display='none';
        },
        onSubmit123(){
            // 提交入会申请和盖章文件
            if(this.conFirmAttachmentIds.length > 0){
                loading();
                this.baseLeagueApply.phaseDict = '2';
                this.baseLeagueApply.statusDict = '4';
                this.baseLeagueApply.auditStatusDict = '2';
                this.baseLeagueApply.leagueTypeDict = this.leagueType.join(',');
                this.baseLeagueApply.firstApprovalUser = '';
                this.baseLeagueApply.firstApprovalResult = '';
                this.baseLeagueApply.firstApprovalComment = '';
                this.baseLeagueApply.firstApprovalTime = '';
                this.submitHandler((token) => {
                  submitApplyPortal(JSON.stringify(this.baseLeagueApply),JSON.stringify(this.baseContactsInfo),JSON.stringify(this.conFirmAttachmentIds),this.approver, this.taskComment,token).then(res=>{
                      this.$message({
                          message: this.$i18n.locale.toUpperCase()=="ZH"?'添加资料成功':'submit success',
                          type: 'success'
                      });
                      this.resetToken();
                      this.active=this.baseLeagueApply.phaseDict;
                  }).catch(error => {
                      this.resetToken();
                  });
                })
            }else{
                this.$message({
                  title: 'error',
                  message: '请上传盖章文件'
                });
            }
        },
        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.baseLeagueApply.phaseDict = '1';
                            this.baseLeagueApply.statusDict = this.submitStatus;
                            this.baseLeagueApply.auditStatusDict = '1';
                            this.baseLeagueApply.leagueId = this.leagueType.join(',');
                            var users=localStorage.getItem('user');
                            var user = JSON.parse(users);
                            this.baseLeagueApply.subName = user.username;
                            this.baseLeagueApply.subAccount = user.umsUser.userUid;
                            this.baseLeagueApply.subCompany = this.baseLeagueApply.unitZhName;
                            this.baseLeagueApply.subPhone = user.umsUser.userPreferredMobile;
                            this.baseLeagueApply.subMail = user.umsUser.userEmail;
                            var leagueType = [];
                            if(this.leagueType.length > 0){
                                this.leagueType.forEach(e=>{
                                    leagueType.push(this.leagueMap[e])
                                })
                            }
                            this.baseLeagueApply.leagueName = leagueType.join(',');
                            this.baseLeagueApply.firstApprovalUser = '';
                            this.baseLeagueApply.firstApprovalResult = '';
                            this.baseLeagueApply.firstApprovalComment = '';
                            this.baseLeagueApply.firstApprovalTime = '';
                            this.submitHandler((token) => {
                                submitApplyPortal(JSON.stringify(this.baseLeagueApply),JSON.stringify(this.baseContactsInfo),null,this.approver, this.taskComment,token).then(res=>{
                                    this.$message({
                                        message: this.$i18n.locale.toUpperCase()=="ZH"?'添加资料成功':'submit success',
                                        type: 'success'
                                    });
                                    this.resetToken();
                                    this.active=1;
                                    this.getIntaData();
                                    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;
                }
            });
        },
        changeActive(){
            this.active = 0;
        },
        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 => {
                this.download(res);
            }).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>