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

<template>
  <div>
        <div class="autoBox box">
           <div class="crumbs">
              <el-breadcrumb separator="/" replace>
                  <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile?key=union' }">{{$t('common.AllianceIntroduction')}}</el-breadcrumb-item>
                  <el-breadcrumb-item >{{$t('common.Membershipapplicationinformation')}}</el-breadcrumb-item>
              </el-breadcrumb>
              <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">
                <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens2"> 
                  &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;
                </span>
              </el-breadcrumb>
             <div >
              <div style="width: 80%;margin: auto;margin-top: 20px;">
                <div style="width: 100%;text-align: center;font-size: 27px;color:#2C2F32;">{{$t('common.Applicationformembership')}}</div>
              </div>
              <div style="margin-top: 50px;width: 100%;">
                <el-steps :active="active" align-center>
                  <el-step :title="$t('common.Applytojoin')" ></el-step>
                  <el-step :title="$t('common.Fillintheinformation')" ></el-step>
                  <el-step :title="$t('common.Sealandsubmit')" :description="'（' + $t('common.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>
              <div style="width: 100%;margin: auto;margin-top: 20px;">
                <el-collapse v-model="activeNames" >
                  <!-- 全球能源互联网 -->
                  <el-collapse-item  name="3" v-if="active==1">
                    <template slot="title">
                      <span style="font-size: 15px!important;">{{$t('common.GlobalenergyInternetprofessionalalliance')}}</span>  {{ '（' + $t('common.Multiplechoicesareavailable') + '）'}}
                    </template>
                    <el-checkbox-group v-model="leagueType" style="margin-left: 100px;margin-top: 20px;width: 815px;">
                      <el-checkbox :key="item.baseEntityId" :label="item.baseEntityId" v-for="(item,index) in baseLeagueInfos">{{$i18n.locale=='zh'?'全球能源互联网'+item.leagueName:'Global Energy Internet '+item.leagueName}}</el-checkbox>
                      <div style="height: 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==1">
                    <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
                              :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                              filterable
                              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 show-word-limit maxlength="100" 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 show-word-limit maxlength="100" 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 show-word-limit maxlength="100" 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 show-word-limit maxlength="1000" 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 show-word-limit maxlength="60" 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 show-word-limit maxlength="60" 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==1">
                    <template slot="title">
                      <span style="color: red;margin-right: 3px;">* </span>  {{$t('common.Contactbasicinformation')}}
                    </template>
                    <el-form ref="form2" :inline="true" :model="baseContactsInfo" :rules="rules" label-width="200px" class="demo-ruleForm"  style="margin-top: 20px;width: 1000px;">
                        <!-- 姓名 -->
                        <el-form-item :label="$t('common.fullName')" prop='contactsName'>
                            <el-input show-word-limit maxlength="60" v-model="baseContactsInfo.contactsName"
                               style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.fullName')">
                            </el-input>
                        </el-form-item>
                        <!-- 所在部门 -->
                        <el-form-item :label="$t('common.Department')">
                          <el-input show-word-limit maxlength="20" v-model="baseContactsInfo.depart"
                            style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Department')">
                          </el-input>
                        </el-form-item>
                          <!-- 职务 -->
                          <el-form-item :label="$t('common.Position')" prop='currentDuty'>
                              <el-input show-word-limit maxlength="100" v-model="baseContactsInfo.currentDuty"
                                        style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Position')">
                              </el-input>
                          </el-form-item>
                        <!-- 联系电话 -->
                        <el-form-item :label="$t('common.ContactPhoneNumber')" prop='telephoneNumber'>
                          <el-input show-word-limit maxlength="100" 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.Emails')" prop='email'>
                            <el-input show-word-limit maxlength="40" 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 show-word-limit maxlength="20" v-model="baseContactsInfo.faxNumber"
                            style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Fax')">
                          </el-input>
                        </el-form-item>
                      </el-form>
                  </el-collapse-item>
                  <div style="text-align: center;margin-top: 50px;" v-if="active!==1">{{$t('common.AlreadySubmit')}}<span @click="toViewCenter('myConcerns','2')" style="color: #409eff;" class="cursor">{{$t('common.UserCenterMyApplication')}}</span> {{$t('common.UpdateInfoAndUpload')}}</div>
                </el-collapse>
              </div>
              <!-- 按钮 -->
              <div style="width: 80%;margin: auto;margin-top: 50px;height: 100px;">
                <el-button style="margin-left: 200px;width: 150px;height: 40px;"
                   v-if="active==1" class="button_409EFF"
                   @click="realTimeInfoScreen(null,'union')">
                   {{$t('common.cancel')}}
                </el-button>
                <el-button 
                   style="margin-left: 10px;width: 150px;height: 40px;"
                   v-if="active==1" 
                   class="button_409EFF"
                   @click="dialogVisible=true">
                   {{$t('common.preview')}}
                </el-button>
                <el-button 
                   style="margin-left: 10px;width: 150px;height: 40px;"
                   type="primary"
                   @click="submitForm" 
                   v-if="active==1">
                   {{$t('common.SubmitAndDownload')}}
                </el-button>
              </div>
              <el-dialog
                      :title="$i18n.locale === 'zh'?'文件在线预览':'File Online Preview'"
                    :visible.sync="dialogVisible"
                    width="595px"
                    height="842px">
                   <template>
                    <userCenterTaberListUnionPrint  :form="baseLeagueApply" :form2="baseContactsInfo" ></userCenterTaberListUnionPrint>
                   </template>
                </el-dialog>
              <div class="row" style="padding-top: 55px;background-color:#fff;display: none;"  ref="imgDom">
                <!-- 申请单位基本信息form 联系人基本信息form2 -->
                <userCenterTaberListUnionPrint  :form="baseLeagueApply" :form2="baseContactsInfo" ></userCenterTaberListUnionPrint>
              </div>
             
             </div>
           </div>
        </div>  
  </div>
</template>

<script>
  import {submitApplyPortal,getBaseLeagueApplys} from '@/api/cooperation/baseLeagueApply'
  import {getBaseLeagues} from '@/api/cooperation/baseLeagueEntity'
  import {country} from '@/api/country'
  import Base from '@/views/base/Base'
  import userCenterTaberListUnionPrint from '@/views/userCenter/userCenterItem/userCenterTaberListUnionPrint'

export default {
  name: 'IntroductionApplicationMembership',
  extends: Base,
  components:{userCenterTaberListUnionPrint},
  data () {
    return {
      active:1,
      activeNames: ['1','2','3'],
      countryList:[],
      screenIndex: null,
      baseLeagueInfos:[],
      realTimeInfoScreens2:[{
        lable:"common.MemberIntroduction",
        value:'member'
      },{
        lable:"common.CooperativeUnitIntroduction",
        value:'cooperation'
      },{
        lable:"common.CustomizedService",
        value:'custom'
      }],
      dialogVisible:false,
      leagueType:[],
      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: '1',
          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: '',
      },
      processKey: 'ALLIANCE_APPROVAL',
      approvers:[],
      duty:'',
      group:'',
      leagueMap:{}
    }
  },
  created(){
      getBaseLeagueApplys().then(res=>{
          var data = res.data;
          if(data){
              this.baseLeagueApply = data.baseLeagueApplyList[0]||{};
              this.baseContactsInfo = data.baseContactsInfo||{};
              this.leagueType = data.leagueType||[];
              this.active=2;
          }
      });
  },
  mounted(){
      this.getIntaData();
  },
  watch:{
    "$i18n.locale"(){
      this.$refs.form.clearValidate();
      this.$refs.form2.clearValidate();
      this.getIntaData();
    },
    leagueType: function () {
        var leagueType = [];
        if(this.leagueType.length > 0){
            this.leagueType.forEach(e=>{
                leagueType.push(this.leagueMap[e])
            })
        }
        this.baseLeagueApply.leagueName = leagueType.join(',');
    },
  },
  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' },
            { pattern: /^[0-9]*$/, message: this.$t('common.OnlyInputNumber'), trigger: 'blur' }
          ],
          email: [
            { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Email'), trigger: 'blur' },
          ],
       }
    
    },
  },
  methods:{
    agreementChange(val){
      this.active=val;
    },
    getIntaData(){
      getBaseLeagues({language:this.$i18n.locale.toUpperCase()}).then(result =>{
          const data = result.data
          this.baseLeagueInfos = data.baseLeagueInfos;
          this.baseLeagueInfos.forEach(element=>{
              this.leagueMap[element.baseEntityId] = element.leagueName;
          })
      });
      country({language:this.$i18n.locale.toUpperCase()}).then(res=>{
          this.countryList=res.data.countryList;
      })
    },
    // 提交并下载
   submitForm(){
    this.$refs["form"].validate((valid1) => {
        if (valid1) {
          this.$refs["form2"].validate((valid2) => {
                if (valid2) {
                  this.print()
                } else {
                  this.$notify.error({
                    title: 'error',
                    message: this.$t('common.pleaseContactInformation')
                  });
                  this.activeNames=["2"]
                  return false;
                }
              })
         
        } else {
          this.$notify.error({
            title: 'error',
            message: this.$t('common.unitInfo')
          });
          this.activeNames=["1"]
          return false;
        }
      });
   
   },
   print(){
      loading();
        if (this.duty || this.group) {
            getUsers({
                duty: this.duty,
                groups: this.group,
            }).then(res => {
                let data = res.data || {};
                let approvers = data.authUsers || [];
                if (approvers && approvers.length > 0) {
                    this.approver = '';
                    approvers.forEach(item => {
                        this.approver += item.userId + ",";
                    });
                    this.approver = this.approver.substring(0, this.approver.length - 1);
                }
            });
        }
        this.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.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=2;
              closeLoading();
          }).catch(error => {
              this.resetToken();
              closeLoading();
          });
      })
   },
    // 发送申请表
    submitFormApplication(){

    },
    realTimeInfoScreen(item,index){
    this.toView('IntroductionMemberProfile',index)
    },
    getIconUrl(url){
      return require("@/assets/img/introductionCooperation/"+url);
    },
    toView(router,json){
        this.$router.push({name:router,query:{key:json}})
    },
    toNewView(router,json){
        this.$store.commit('modify', router);
        window.localStorage.setItem('router', router);
        const { href } = this.$router.resolve({
          name: router,
          query: {
            key: json
          },
        });
        window.open(href, '_blank');
    },
    toViewCenter(router,json){
        this.$router.push({name:router,params:{index:json}})
    },
    resetForm(item) {
      this[item] = {};
      console.log( this.form2)
      this.$refs.form2.resetFields()
    
        if(this.$refs[formName]){
          this.$refs[item].resetFields()
        }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
      margin-top: 10px;
      background: #fff;
      min-height: 500px; 
      padding: 20px 0;
  }
  .crumbs {
      margin-left: 20px;
  }
  body {
      margin: 0;
  }
  .crumbs >>>.el-step__icon {
    width: 37px;
    height: 37px;
    font-size: 18px;
  }
  .crumbs>>> .el-step.is-horizontal .el-step__line {
    top:20px;
  }
  .crumbs>>>.el-step__head.is-process {
    color: #409eff;
    border-color:inherit;
  }
  .crumbs>>>.el-step__head.is-process .el-step__icon.is-text {
    background: #409eff;
    color: #fff;
    border-color:#409eff;
    width: 46px;
    height: 46px;
  }
  .crumbs>>>.el-step__title.is-process,
  .crumbs>>>.el-step__description.is-process {
    color: #409eff;
  }
  .crumbs>>>.el-collapse-item {
    /* width: 80%; */
    margin: auto;
  }
  .el-collapse {
    border: none;
  }
  .crumbs>>>.el-collapse-item__header {
    padding: 0 20px 0 100px;
    font-weight: 700;
  }
  .crumbs>>>.el-collapse-item__content {
    padding: 0 0 0 100px;
   
  }
  .el-checkbox {
    display: inline-block;
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.crumbs>>>.el-collapse-item__header.is-active {
        border-bottom-color:  #EBEEF5;
  }
.button_409EFF {
    border-color:#409EFF ;
    color: #409EFF;
}

.form2Sty{

margin-top: 20px;
width: 100%;
}
.form2Sty>>>.el-collapse-item__content{
  /* padding-left: 20px; */
  width: 49%;
}
.form2Sty>>>.el-form-item{
  width: 50%;
  float: left;

}
.screen1 {
    background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
    border-radius: 20px 20px 20px 20px;
    padding: 8px 12px;
    color: #F0F3F8;
    margin-left: 10px;
}
.screen2 {
    font-size: 14px;
    background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
    border-radius: 20px;
    padding: 8px 12px;
    color: #165099;
    margin-left: 10px;
}
</style>