frame/parts/print/print-sign.vue

<template>
  <div id="print-sign">
    <el-row>
      <span v-if="display == 'list'">
        <el-col :span="24">
          <el-col :span="24" style="margin:15px 0;">
            <el-button type="primary" size="mini" @click="display = 'listView'">打印预览</el-button>
          </el-col>
          <el-col :span="24">
            <el-table border :data="list" size="small" style="border: solid #cecece;">
              <el-table-column align="center" label="姓名" prop="name"></el-table-column>
              <el-table-column align="center" label="性别" prop="gender"></el-table-column>
              <el-table-column align="center" label="民族" prop="nation"></el-table-column>
              <el-table-column align="center" label="身份证号" prop="id_number"></el-table-column>
              <el-table-column align="center" label="学校" prop="school_name"></el-table-column>
              <el-table-column align="center" label="专业" prop="major"></el-table-column>
              <el-table-column align="center" label="入学年份" prop="entry_year"></el-table-column>
              <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
              <el-table-column align="center" label="班级" prop="classname"></el-table-column>
              <el-table-column align="center" label="寝室" prop="bedroom"></el-table-column>
              <el-table-column align="center" label="签名"></el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </span>
      <span v-else>
        <el-col :span="24">
          <el-col :span="24" style="margin:15px 0;">
            <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
            <el-button type="primary" size="mini" @click="toPrint()">打印</el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="printList" ref="print">
          <div>
            <p>
              <span class="textOver xuhao">序号</span>
              <span class="textOver one">姓名</span>
              <span class="textOver two">性别</span>
              <span class="textOver three">民族</span>
              <span class="textOver four">身份证号</span>
              <span class="textOver five">学校</span>
              <span class="textOver six">专业</span>
              <span class="textOver seven">入学年份</span>
              <span class="textOver eight">手机号</span>
              <span class="textOver nine">班级</span>
              <span class="textOver ten">寝室</span>
              <span class="textOver twlve">签名</span>
            </p>
            <p class="list" v-for="(item, index) in list" :key="index">
              <span class="textOver xuhao">{{ index + 1 }}</span>
              <span class="textOver one">{{ item.name }}</span>
              <span class="textOver two">{{ item.gender }}</span>
              <span class="textOver three">{{ item.nation }}</span>
              <span class="textOver four">{{ item.id_number }}</span>
              <span class="textOver five">{{ item.school_name }}</span>
              <span class="textOver six">{{ item.major }}</span>
              <span class="textOver seven">{{ item.entry_year }}</span>
              <span class="textOver eight">{{ item.phone }}</span>
              <span class="textOver nine">{{ item.classname }}</span>
              <span class="textOver ten">{{ item.bedroom ? item.bedroom : '暂无' }}</span>
              <span class="textOver twlve"></span>
            </p>
          </div>
        </el-col>
      </span>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'print-sign',
  props: {
    list: { type: Array, default: () => [] },
  },
  components: {},
  data: function() {
    return {
      display: 'list',
    };
  },
  created() {},
  methods: {
    toPrint() {
      this.$print(this.$refs.print);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.printList {
  width: 1050px;
  div {
    // height: 890px;
    overflow: hidden;
    // border: 1px solid #000;
    zoom: 0.8;
    p:nth-child(1) {
      height: 29.5px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-left: 1px solid #000;
        // border-right: 1px solid #000;
        font-weight: bold;
      }
    }
    .list {
      border: 1px solid #000;
      height: 21px;
      border-bottom: 0;
      span {
        text-align: center;
        display: inline-block;
        // border-left: 1px solid #000;
        border-right: 1px solid #000;
      }
    }
    .list:nth-child(39) {
      border-bottom: 1px solid #000;
    }
    .list:last-child {
      border-bottom: 1px solid #000;
    }
    p {
      .xuhao {
        width: 40px;
      }
      .one {
        width: 150px;
      }
      .two {
        width: 40px;
      }
      .three {
        width: 90px;
      }
      .four {
        width: 180px;
      }
      .five {
        width: 185px;
      }
      .six {
        width: 205px;
      }
      .seven {
        width: 70px;
      }
      .eight {
        width: 110px;
      }
      .nine {
        width: 70px;
      }
      .ten {
        width: 90px;
      }
      .twlve {
        width: 64px;
      }
    }
  }
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>