山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统(11)

        近期也新增了一项功能：打印单据

        这一功能并不复杂，但是要在很多地方都上线，所以写出其中的一个，剩余的只需稍作修改即可正常使用。因此我只以打印中心库库存列表为例写此篇博客。

        首先从网上学习并借鉴了网页上打印的方法并稍做修改。

optionsDefault 的说明：
   表头数据 - 列属性
   Array - 必填
   {
       field,          // 列字段
       name,           // 表头名称
       style,          // 表头样式
       columnSize,     // 列宽 单位为 % - 默认 100%
    }

properties的说明：
    data
    Array
    {
       [表头字段]: T,
    }
   

import {Message} from 'element-ui';
import {number2chinese} from './common';

// 默认配置
const optionsDefault = {
  
  properties: [],
  
  data: null,
  // 单据名
  // HTML 或 String
  // 例如：随货同行单
  title: '',
  // 订单号 - 必填
  orderNumber: '',
  // 单据创建时间
  // String - 必填
  // 格式必须为 xxxx-xx-xx
  createTime: '',
  // 制单人
  creator: '',
  //制单人所属科室
  billBranch: '',
  // 单据来源
  // HTML 或 String
  // 例如：供货单位、申领人
  fromWho: '',
  fromBranch: '',
  // 单据二维码
  qrcode: null,
  // 是否显示序号
  showIds: false,
  /**
   * 统计 - 累加 - 某条属性（必须为 number）
   * 一般为总价
   *
   * {
   *    val: '',      // 是否已有计算好的值，若没有则不填，可指定字段进行累加统计
   *    unit: '',     // 合计的单位，默认为 「元」
   *    field: '',    // 要累加的字段值（val 有值则不会累加统计）
   *    name: '',     // 对应的名字，默认为 「合计」
   *    colspan: 2,   // 字段名所占的单元格数，默认为 「2」
   *    showChinese: false, // 是否显示中文大写统计
   * }
   *
   */
  total: {},

  mulTotal: [],

  // header
  // HTML 或 String
  // 最上方的文字，例如医院名称、公司名称
  header: '临沂市河东区妇幼保健院',
  headerStyle: '',
  // 自定义 footer
  // HTML
  footer: '',
  // table item style
  formStyle: `border: 1px solid #000; padding: 5px 0; word-break: break-word;`,
  // table header style
  formHeaderStyle: `border: 1px solid #000; padding: 5px 0; word-break: break-word;`,
  // 序号列的宽度
  idsWidth: '2rem',
  // 文本对齐
  // center, left, right
  textAlign: 'center',

  // 空数据填充
  stuffing: '-',
  showStuffing:false,

};


const CONFIG = {
  a4: ['210mm', '297mm'],
  // 页边距 [上 右 下 左]
  pageMargin: ['0', '12.7mm', '12.7mm', '12.7mm'],
  // 二维码大小
  qrCodeSize: 70,
}

class PrintForm {

  options = {};
  _id = 1; // 起始序号
  _html = '';
  _class = 'print-form';  // 标识 div ，用于清除
  _iframe = null; // 当前 iframe
  _columnSize = '100%'; // 默认列宽
  _flagError = false;

  constructor(opts) {
    this.options = {...optionsDefault, ...opts};

    if (this.options.properties === null || this.options.length === 0) {
      console.error('表头为空');
      this.showMessage();
      return;
    }

    this.generateHtml();
  }

  /**
   * 生成 HTML 片段
   */
  generateHtml() {
    let page = 0;
    let flagStop = false; // 终止生成新页面

    if (this._html !== '') this._html = '';

    while (!flagStop) {
      flagStop = this.generateHtmlPage(page);
    }

    // 单据二维码
    if (this.options.qrcode) {
      this._html += `
        <script src="static/qrcode.min.js"></script>
        <script>
          var qrcode = new