ducha-qianduan/src/components/look_word/personnelRoster.vue

<template>
  <div>
    <el-button class="box1" @click="daochu">导出</el-button>

    <div class="word" id="contents" style="font-family: 'fangsong'">
      <p
        style="
          font-size: 14pt;
          font-weight: 900;
          margin-botttom: 30px;
          color: black;
          text-align: center;
        "
      >
        《人员名册》
      </p>

      <table
        border="1"
        style="
          border-collapse: collapse;
          border: none;
          mso-border-left-alt: 0.5pt solid windowtext;
          mso-border-top-alt: 0.5pt solid windowtext;
          mso-border-right-alt: 0.5pt solid windowtext;
          mso-border-bottom-alt: 0.5pt solid windowtext;
          mso-border-insideh: 0.5pt solid windowtext;
          mso-border-insidev: 0.5pt solid windowtext;
          mso-padding-alt: 0pt 0pt 0pt 0pt;
        "
        width="900"
        align="center"
        bordercolor="black"
      >
        <tbody>
          <tr class="JR_tr" height="40" align="center">
            <td class="JR_left" rowspan="2">日期</td>
            <td class="JR_left" colspan="3">编制人数</td>
            <td class="JR_left" colspan="3">在位人数</td>
            <td class="JR_left" colspan="3">超（缺）编人员情况</td>
          </tr>
          <tr class="JR_tr" height="40" align="center">
            <td class="JR_left">干部</td>
            <td class="JR_left">士官</td>
            <td class="JR_left">义务兵</td>
            <td class="JR_left">干部</td>
            <td class="JR_left">士官</td>
            <td class="JR_left">义务兵</td>
            <td class="JR_left">干部</td>
            <td class="JR_left">士官</td>
            <td class="JR_left">义务兵</td>
          </tr>
          <tr class="JR_tr" height="40" align="center">
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
            <td class="JR_right"></td>
          </tr>

          <tr class="JR_tr" height="40" align="center">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>

      <p
        align="right"
        style="margin: 20px 200px 5px 0px; font-size: 16px; color: black"
      >
        日期
      </p>
      <table
        border="1"
        style="
          border-collapse: collapse;
          border: none;
          mso-border-left-alt: 0.5pt solid windowtext;
          mso-border-top-alt: 0.5pt solid windowtext;
          mso-border-right-alt: 0.5pt solid windowtext;
          mso-border-bottom-alt: 0.5pt solid windowtext;
          mso-border-insideh: 0.5pt solid windowtext;
          mso-border-insidev: 0.5pt solid windowtext;
          mso-padding-alt: 0pt 0pt 0pt 0pt;
        "
        width="900"
        align="center"
        bordercolor="black"
      >
        <tbody>
          <tr class="JR_tr" height="40" align="center">
            <td class="JR_left">姓名</td>
            <td class="JR_left">职务</td>
            <td class="JR_left">军衔</td>
            <td class="JR_left">名族</td>
            <td class="JR_left">籍贯</td>
            <td class="JR_left">出生<br />年月</td>
            <td class="JR_left">入伍<br />年月</td>
            <td class="JR_left">
              入党（团）<br />
              时间
            </td>
            <td class="JR_left">文化<br />程度</td>
            <td class="JR_left">婚姻<br />状况</td>
            <td class="JR_left">家庭住址及联系方式</td>
            <td class="JR_left">备注</td>
          </tr>
          <tr class="JR_tr" height="40" align="center">
            <td class="JR_right">{{ message.name }}</td>
            <td class="JR_right">{{ message.postId }}</td>
            <td class="JR_right">{{ message.rankId }}</td>
            <td class="JR_right">{{ message.nationId }}</td>
            <td class="JR_right">{{ message.origin }}</td>
            <td class="JR_right">{{ message.birthDate }}</td>
            <td class="JR_right">{{ message.enlistDate }}</td>
            <td class="JR_right">{{ message.partyDate }}</td>
            <td class="JR_right">{{ message.educationId }}</td>
            <td class="JR_right">{{ message.marryList }}</td>
            <td class="JR_right">{{ message.live }}{{ message.phone }}</td>
            <td class="JR_right"></td>
          </tr>
          <tr class="JR_tr" height="40" align="center">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { lookWord } from "@/utils/look_word.js";

import "@/utils/lodJs.js";
export default {
  name: "bdgleven",
  props: ["message"],
  data() {
    return {
      title: "人员名册",
      style:
        ".JR_tr {height: 40px;};.JR_left{font-size: 1.331em; font-family: '楷体_GB2312';};.JR_right{ font-size: 1.331em; font-family: 仿宋_GB2312;};.JR_bottom{border-left:0; font-size: 1.331em; font-family: 仿宋_GB2312; text-align: right}",
    };
  },
  methods: {
    daochu() {
      lookWord(this.title, "#contents", this.style, true);
    },
  },
};
</script>
<style scoped>
tbody {
  color: #fff;
  text-align: center;
}
tr:last-child {
  border-bottom: 1px solid;
}

.box1 {
  position: absolute;
  right: 30px;
  top: 80px;
  border: 1px solid rgb(129, 130, 131);
  border-radius: 5px;
}
</style>