dvcp_v2_webapp/packages/meta/AppVillageCadres/components/printTpl.vue

<template>
  <section class="printTpl">
    <div class="exectl" id="printAll"><p class="printHeader">{{ info.workAreaName }}干部基本情况表</p>
      <table cellpadding="7" cellspacing="0" border="1">
        <tr>
          <td height="29"><p>姓名</p></td>
          <td colspan="2" width="60"><p class="colors"> {{ info.name || '' }} </p></td>
          <td width="65"><p>性别</p></td>
          <td colspan="3" width="84"><p class="colors"> {{ dict.getLabel('sex', info.gender) || '' }} </p></td>
          <td width="79"><p> 出生年月 </p></td>
          <td width="91"><p class="colors">              <!-- 8888 -->{{ $dateFormat(info.birthday) }} </p>
          </td>
          <td rowspan="4" width="107"><img v-if="info.avatarUrl" :src="info.avatarUrl" width="150" height="230" alt=""/>
          </td>
        </tr>
        <tr>
          <td height="24"><p>民族</p></td>
          <td colspan="2" width="60"><p class="colors">{{ dict.getLabel('nation', info.nation) || '' }}</p></td>
          <td width="65"><p>籍贯</p></td>
          <td colspan="3" width="84"><p class="colors">{{ info.areaName || '' }}</p></td>
          <td width="79"><p>联系电话</p></td>
          <td width="91"><p class="colors">{{ info.phone || '' }}</p></td>
        </tr>
        <tr>
          <td height="24"><p>入党时间</p></td>
          <td colspan="2" width="60"><p class="colors">
            {{ $dateFormat(info.membershipTime) }}</p></td>
          <td width="65"><p>参加工作时间</p></td>
          <td colspan="3" width="84"><p class="colors">{{ $dateFormat(info.jobTime) }}</p></td>
          <td width="79"><p>职称</p></td>
          <td width="91"><p class="colors">{{ info.jobTitle || '' }}</p></td>
        </tr>
        <tr>
          <td height="24"><p>家庭住址</p></td>
          <td colspan="4" width="139"><p class="colors">{{ info.currentAreaName + info.currentAddress || '' }}</p></td>
          <td width="90"><p>身份证号</p></td>
          <td colspan="3"><p class="colors">{{ info.idNumber || '' }}</p></td>
        </tr>
        <tr v-for="(item,index) in educations" :key="index">
          <td v-if="index==0" :rowspan="index==0 ? educations.length:''"><p>学历学位</p></td>
          <td width="80"><p>{{ dict.getLabel("appVillageCadresEducationType", item.educationType) || '' }}</p></td>
          <td colspan="2" width="10"><p class="colors">
            {{ dict.getLabel("education_village_rc", item.educationalLevel) || '' }}</p></td>
          <td width="100"><p>毕业院校系及专业</p></td>
          <td colspan="5" width="280"><p class="colors" v-if="educations.length">
            {{ item.graduatedSchool + "," + item.learnProfession }}</p></td>
        </tr>
        <tr v-for="(xl,idx) in serves" :key="idx">
          <td v-if="idx==0" align="center" height="194"
              :rowspan="idx==0?serves.length:''"><p>简历</p></td>
          <td colspan="10" width="557" valign="top"><p class="colors" v-if="serves.length">
            {{ $dateFormat(xl.careerBeginTime) + "-" + $dateFormat(xl.careerEndTime) + " 在" + xl.workAreaName + "担任" }}
            {{ dict.getLabel('partyPosition', xl.position) }}</p>
          </td>
        </tr>
        <tr v-for="(cf,ix) in negatives" :key="ix">
          <td height="32" v-if="ix==0" :rowspan="ix==0?negatives.length:''"><p
              align="center">奖惩情况</p></td>
          <td colspan="10" width="557"><p class="colors" v-if="negatives.length">{{ $dateFormat(cf.punishTime) }}
            因{{ cf.punishContent }}给予警告处分</p></td>
        </tr>
        <tr>
          <td rowspan="8" height="18"><p>家庭主要成员</p></td>
          <td width="49"><p>称谓</p></td>
          <td colspan="2" width="66"><p>姓名</p></td>
          <td colspan="2" width="28"><p>年龄</p></td>
          <td width="80"><p>政治面貌</p></td>
          <td colspan="4" width="316"><p>工作单位及职位</p></td>
        </tr>
        <tr v-for="(fm,index) in families" :key="index">
          <td><p class="colors">{{ dict.getLabel('householdRelation', fm.relateType) || '' }}</p></td>
          <td colspan="2" width="66"><p class="colors">{{ fm.name || '' }}</p></td>
          <td colspan="2" width="28"><p class="colors">{{ $calcAge(fm.idNumber) || '' }}</p></td>
          <td width="41"><p class="colors">群众</p></td>
          <td colspan="4" width="316"><p class="colors">{{ fm.workUnit || "" }}</p></td>
        </tr>
      </table>
    </div>
  </section>
</template>
<script>
export default {
  name: "printTpl",
  props: {
    info: {
      default: () => {
      }
    },
    dict: Object
  },
  computed: {
    families() {
      return this.info.families?.length > 0 ? this.info.families : 1
    },
    negatives() {
      return this.info.negatives?.length > 0 ? this.info.negatives : 1
    },
    serves() {
      return this.info.serves?.length > 0 ? this.info.serves : 1
    },
    educations() {
      return this.info.educations?.length > 0 ? this.info.educations : 1
    },
  }
}
</script>
<style lang="scss" scoped>.printTpl {
  .exectl {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    margin: auto;
    height: auto;
    background: #fff;

    .printHeader {
      font-size: 24px;
      text-align: center;
      height: 60px;
      margin: auto;
    }

    table {
      width: 100%;
      font-size: 14px;
      text-align: center;
    }

    .colors {
      color: #000000;
    }

    tr {
      line-height: 50px;

      td {
        height: 50px;
        line-height: 30px !important;
        text-align: center !important;

        &:first-of-type {
          width: 50px;
        }
      }
    }
  }
}</style>