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

<template>
    <div id="print">
        <div style="text-align: center;color: #000;font-size: 18px;font-weight: 700;">
            <div>{{$i18n.locale=='zh'?'全球能源互联网发展合作组织及':'Global energy Internet development cooperation organization and'}}</div>
            <div>{{$i18n.locale=='zh'?'全球能源互联网联盟成员申请表':'Global energy Internet alliance membership application form'}}</div>
        </div>
        <div style="width: 100%;margin-top: 10px;" class="border">
               <div class="table-head">
               <table>
                   <colgroup>
                       <col style="width: 80px;" />
                       <col />
                   </colgroup>
                   <thead>
                       <tr class="linkCenter"><th>{{$t('common.Basicinformationofapplicant')}}</th></tr>
                   </thead>
               </table>
               </div>
               <div class="table-body">
               <table>
                   <colgroup><col style="width: 80px;" /><col /></colgroup>
                   <tbody class="linkCenter">
                       <tr>
                            <td :style="$i18n.locale=='zh'?'width: 30%':'width:40%'" class="black">{{$t('common.FullChinesenameofthecompany')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'">{{form.unitZhName}}</td>
                        </tr>
                       <tr>
                           <td :style="$i18n.locale=='zh'?'width: 30%':'width:40%'" class="black">{{$t('common.FullEnglishnameofunit')}}</td>
                           <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'">{{form.unitEnName}}</td>
                        </tr>
                       <tr>
                           <td  :style="$i18n.locale=='zh'?'width: 30%':'width:40%'" class="black">{{$t('common.Unitaddress')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'">{{form.unitAddress}}</td>
                        </tr>
                       <tr>
                           <td  :style="$i18n.locale=='zh'?'width: 30%':'width:40%'" class="black">{{$t('common.PostalCode')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'">{{form.postalCode}}</td>
                        </tr>
                       <tr>
                           <td  :style="$i18n.locale=='zh'?'width: 30%':'width:40%'" class="black">{{$t('common.OfficialWebsite')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'">{{form.unitWebsite}}</td>
                        </tr>
                       <tr>
                           <td  :style="$i18n.locale=='zh'?'width: 30%':'width:40%'" class="black">{{$t('common.LegalRepresentative')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'" >{{form.corporateName}}</td>
                            
                        </tr>
                        <tr>    
                            <td :style="$i18n.locale=='zh'?'width: 30%':'width:40%'"  class="black">{{$t('common.Position')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'">{{form.duty}}</td>
                        </tr>                      
                   </tbody>
               </table>
               </div>
               <div style="width:100%">
                <div style="font-weight: 700;color: #000; text-align: center">{{$t('common.BriefIntroductionOfApplicant')}}</div>
                <p style="line-height: 30px;margin:0 40px 20px 20px;min-height: 200px;white-space:normal">{{form.unitIntroduction}}</p>
                </div>
               <div class="table-head">
                <table cellspacing="0" cellpadding="0"width="100%" height="100%">
                    <colgroup>
                        <col style="width: 80px;" />
                        <col />
                    </colgroup>
                    <thead>
                        <tr class="linkCenter"><th>{{$t('common.Contactbasicinformation')}}</th></tr>
                    </thead>
                </table>
                </div>
                <div class="table-body">
                <table  width="100%"  cellpadding="0" cellspacing="0">
                    <colgroup><col style="width: 80px;" /><col /></colgroup>
                    <tbody class="linkCenter">
                        <tr>
                            <td style="width: 30%;" class="black">{{$t('common.fullName')}}</td>
                            <td>{{form2.contactsName}}</td>
                            <td  class="black">{{$t('common.Department')}}</td>
                             <td>{{form2.depart}}</td>
                         </tr>
                        <tr>
                            <td  class="black">{{$t('common.Position')}}</td>
                            <td>{{form2.currentDuty}}</td>
                            <td  class="black">{{$t('common.ContactPhoneNumber')}}</td>
                            <td>{{form2.telephoneNumber}}</td>
                        </tr>
                        <tr>
                            <td  class="black">{{$t('common.mobilePhone')}}</td>
                            <td>{{form2.mobilePhone}}</td>
                            <td class="black">{{$t('common.Emails')}}</td>
                            <td>{{form2.email}}</td>
                         </tr>
                        <tr>
                            <td  class="black">{{$t('common.Fax')}}</td>
                            <td>{{form2.faxNumber}}</td>
                         </tr>
                    </tbody>
                </table>
                </div>
                <div class="table-head" v-if="!form.leagueType">
                    <table cellspacing="0" cellpadding="0"width="100%" height="100%">
                        <colgroup>
                            <col style="width: 80px;" />
                            <col />
                        </colgroup>
                        <thead>
                            <tr class="linkCenter"><th>{{$i18n.locale=='zh'?'全球能源互联网联盟':'Global Energy Internet '}}</th></tr>
                        </thead>
                      
                    </table>
                </div>
                <div class="table-head">
                    <table cellspacing="0" cellpadding="0"width="100%" height="100%">
                        <colgroup>
                            <col style="width: 80px;" />
                            <col />
                        </colgroup>
                        <thead>
                        <tr class="linkCenter"><th>{{$i18n.locale=='zh'?'选择加入的联盟':'Choose to join the Alliance'}}：</th></tr>
                        </thead>
                    </table>
                </div>
                <div class="table-body" v-if="form.leagueType">
                    <table  width="100%"  cellpadding="0" cellspacing="0">
                        <colgroup><col style="width: 80px;" /><col /></colgroup>
                        <tbody class="linkCenter" >
                        <div style="width: 100%;margin-top: 30px;margin-bottom: 30px;">
                            <el-radio v-for="(item,index) in baseLeagueEntities" :label="form.leagueType.indexOf(item.leagueName) ==-1 ? index + 1 : index " v-model="index">{{$i18n.locale=='zh'?'全球能源互联网联盟':'Global Energy Internet '}}{{item.leagueName}}</el-radio>
                        </div>
                        </tbody>
                    </table>
                </div>
                <div class="table-head">
                    <table cellspacing="0" cellpadding="0"width="100%" height="100%">
                        <colgroup>
                            <col style="width: 80px;" />
                            <col />
                        </colgroup>
                        <thead>
                            <tr class="linkCenter"><span>{{$t('common.Statement')}}:</span></tr>
                        </thead>
                    </table>
                </div>
                <div class="table-body">
                <table  width="100%"  cellpadding="0" cellspacing="0">
                    <div style="text-indent: 30px; line-height: 30px;"> 
                       {{ $i18n.locale=='zh'?'本单位意愿加入全球能源互联网发展合作组织(GEIDCO),并遵守全球能源互联网发展合作组织章程。'
                        :'We are willing to join the Global Energy Interconnection Development and Cooperation(GEIDCO) and abide by the articles of association of Global Energy Interconnection Development and Cooperation'}}
                    </div>
                    <div>{{$t('common.herebydeclarethat')}}:</div>
                    <div style="margin-left: 65%;line-height: 30px;">
                        <div style="margin-left: 30px;">{{$t('common.Unitseal')}}</div>
                        <div>
                            <span style="margin-right: 35px;">{{$t('common.year')}}</span>
                            <span style="margin-right: 35px;">{{$t('common.Months')}}</span>
                            <span style="margin-right: 35px;">{{$t('common.day')}}</span>
                        </div>
                    </div>
                </table>
                </div>
        </div>
      </div>
</template>
<script>
    import {getBaseLeagues } from '@/api/cooperation/baseLeagueEntity'
     export default {
         name:'userCenterTaberListPrint',
         props:['form',"form2"],
         data(){
             return{
                 baseLeagueEntities:[],
             }
         },
         watch:{
            "$i18n.locale" () {
                this.getData();
            },
         },
         mounted(){
             this.getData();
         },
         methods:{
            getData(){
                getBaseLeagues({language:this.$i18n.locale.toUpperCase()}).then(result =>{
                    const data = result.data
                    this.baseLeagueEntities = data.baseLeagueInfos;
                });
            }
         }
     }
</script>
<style scoped>
    table{width: 80%;margin: 0 auto;border-collapse: collapse}
    #print .table-head{padding-right:17px;background-color:#e2efd9;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;
    }
    td {
        border: 1px solid #ccc;
        height: 40px;
    }
    .border {
        border: 1px solid #ccc;
    }
     @media print
       {
       table{
           border-collapse: collapse;
           border: none;
           width:100%;
           border: 1px solid #ccc;
       }
       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;
           border: 1px solid #ccc;
       }
       .none {
           display: none
       }
       span {
           margin-right:15px
       }
       .a4 {
           page-break-before: auto;
           page-break-after: always;
       }
       }
       .linkCenter{
        line-height:50px;
        text-align: center;
        }
</style>