dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterTaberListUnionPrint.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 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.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.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.LegalRepresentative')}}</td>
                            <td :style="$i18n.locale=='zh'?'width: 70%':'width:60%'" >{{form.corporateName}}</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: 20%;" class="black">{{$t('common.fullName')}}</td>
                            <td style="width: 30%;">{{form2.contactsName}}</td>
                            <td  class="black" style="width: 20%;">{{$t('common.Department')}}</td>
                            <td>{{form2.depart}}</td>
                         </tr>
                        <tr>
                        </tr>
                        <tr style="width: 100%;">
                            <td  class="black"  style="width: 20%;">{{$t('common.Position')}}</td>
                            <td  style="width: 30%;">{{form2.currentDuty}}</td>
                            <td  class="black" style="width: 20%;">{{$t('common.ContactPhoneNumber')}}</td>
                            <td>{{form2.telephoneNumber}}</td>
                         </tr>
                        <tr>
                            <td class="black" style="width: 20%;">{{$t('common.Emails')}}</td>
                            <td style="width: 30%;">{{form2.email}}</td>
                            <td  class="black" style="width: 20%;">{{$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.leagueName">
                    <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.leagueName.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:'userCenterTaberListUnionPrint',
        props:['form',"form2"],
        data(){
            return{
                baseLeagueEntities:[],
            }
        },
        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 {
            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>