美文网首页
js 实现报表汇总 + 打印报表

js 实现报表汇总 + 打印报表

作者: web30 | 来源:发表于2022-04-16 16:53 被阅读0次
表格样式
表格部分
<el-card shadow="always" class="table-wrap">
      <div class="table" v-loading="isLoading">
        <template>
          <table ref="table" border="1" class="tableDiv" style="border: 1px solid #000;border-collapse: collapse;">
            <tr>
              <td class="th" colspan="8" rowspan="2" style="font-size: 20px; font-weight: 600; text-align: center;">{{ 'xx结算报表-' + titleYear + '年' + titleMonth + '月' }}</td>
            </tr>
            <tr></tr>
            <tr>
              <td class="limitTd">收费员:</td>
              <td class="limitTd"></td>
              <td>起始时间:</td>
              <td colspan="2">{{ tableData.kssj }}</td>
              <td>结束时间:</td>
              <td colspan="2">{{ tableData.jssj }}</td>
            </tr>
            <tr>
              <td colspan="2">收费项目</td>
              <td colspan="2">金额</td>
              <td colspan="1">收费项目</td>
              <td colspan="3">金额</td>
            </tr>
            <tr>
              <td colspan="2">西药费</td>
              <td colspan="2">{{ tableData.xyf }}</td>
              <td colspan="1">诊查费</td>
              <td colspan="3">{{ tableData.zcf }}</td>
            </tr>
            <tr>
              <td colspan="2">检查费</td>
              <td colspan="2">{{ tableData.jcf }}</td>
              <td colspan="1">检验费</td>
              <td colspan="3">{{ tableData.jyf }}</td>
            </tr>
            <tr>
              <td colspan="2">合计:</td>
              <td colspan="6">{{ tableData.wxzsr }}</td>
            </tr>
            <tr>
              <td colspan="1">使用票据号:</td>
              <td colspan="7">{{ tableData.sypjh }}</td>
            </tr>
            <tr>
              <td colspan="1">票据类型</td>
              <td colspan="3">收费净收入</td>
              <td colspan="4">额</td>
            </tr>
            <tr>
              <td colspan="1">微信</td>
              <td colspan="3">{{ tableData.wxzsr }}</td>
              <td colspan="4">0.00</td>
            </tr>
            <tr>
              <td colspan="1">合计:</td>
              <td colspan="3">{{ tableData.wxzsr }}</td>
              <td colspan="4">0.00</td>
            </tr>
            <tr>
              <td colspan="1">本期收入合计:</td>
              <td colspan="3">{{ tableData.wxzsr }}</td>
              <td colspan="4">大写:{{ tableData.totalCapital }}</td>
            </tr>
          </table>
        </template>
      </div>
    </el-card>
import utils from '@/assets/js/utils'  // 引入格式化金额(大写)

loadStatsData() {
      const date = this.queryParam.date ? this.queryParam.date.split('-') : [0, 0]
      const year = parseInt(date[0])
      const month = parseInt(date[1])
      const params = {
        year: year,
        month: month,
        feeType: this.queryParam.feeType || 0
      }
      this.isLoading = true
      this.$requestInternet.post('/api/xxx', params).then(res => {
        // 格式化金额(大写)
        const totalCapital = utils.toChineseNum(res.wxzsr) 
        this.tableData = Object.assign(res,
          {
            kssj: utils.formatDate(res.kssj, 'yyyy/MM/dd hh:mm '),
            jssj: utils.formatDate(res.jssj, 'yyyy/MM/dd hh:mm '),
            totalCapital: totalCapital
          }
        ) // 转成最终的数据展示在表格里
        this.isLoading = false
      })
      this.titleYear = year
      this.titleMonth = month
    }
.tableDiv {
  width: 100%;
}
/deep/ .el-descriptions {
  .el-descriptions-item__label.is-bordered-label {
    background: white;
  }
  .el-descriptions__header {
    border: 1px solid #ebeef5;
    padding: 20px 0px;
    margin: 0px;
    border-bottom: none;
  }
  .el-descriptions__title {
    width: 100%;
    text-align: center;
  }
}
.tableDiv {
  td {
    padding: 15px;
    text-align: center;
    word-break: break-all;
  }
  .limitTd {
    width: 180px;
  }
}
打印报表部分
printHtml() {
      const iframe = document.createElement('iframe')
      iframe.setAttribute('id', 'iframe')
      iframe.style.border = '0px'
      iframe.style.position = 'absolute'
      iframe.style.width = '0px'
      iframe.style.height = '0px'
      iframe.style.right = '0px'
      iframe.style.top = '0px'

      document.body.appendChild(iframe)
      const iframeWindow = document.getElementById('iframe').contentWindow
      const iframeDocument = iframeWindow.document
      iframeDocument.body.innerHTML = `
        <div style="color: #000;font-size: 14px;border: 1px solid #000;text-align: center;">
          <div style="font-size: 16px;font-weight: bold;padding: 10px;border: 1px solid #000;">互联网医院结算报表-${this.titleYear}年${this.titleMonth}月</div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">收费员:</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px"></div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">起始时间:</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.kssj}</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">结束时间:</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.jssj}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">收费项目</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">金额</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">收费项目</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">金额</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">西药费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.xyf}</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">诊查费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.zcf}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">检查费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.jcf}</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">检验费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.jyf}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">合计:</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">使用票据号:</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px;word-break: break-all;">${this.tableData.sypjh}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">票据类型</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">收费净收入</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">额</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">微信</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">0.00</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">合计:</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">0.00</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">本期收入合计:</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">大写:${this.tableData.totalCapital}</div></div>
          </div>
        </div>
      `
      iframeWindow.print()
      iframe.parentNode.removeChild(iframe)
    },

相关文章

网友评论

      本文标题:js 实现报表汇总 + 打印报表

      本文链接:https://www.haomeiwen.com/subject/lllhertx.html