打印备份

<!--
 * @Description: 使用 — 入门篇; 
 * @Author: CcSimple
 * @Github: https://github.com/CcSimple
 * @Date: 2023-02-07 11:52:50
 * @LastEditors: CcSimple
 * @LastEditTime: 2023-02-09 11:25:36
-->
<template>
  <div class="flex-col">
    <div class="flex-row justify-center" style="margin-bottom: 10px">
      <!-- <button class="secondary circle-10" @click="print">
        <i class="iconfont sv-printer" />
        浏览器打印
      </button> -->
      <div class='button'  @click="print">浏览器打印</div>
      <div class='button' @click="exportJson"> json打印</div>
      <div  class='button'  @click="print2"> 直接打印(需要连接客户端)</div>
      <!-- <button class="warning circle-10 ml-10" @click.stop="print2">
        直接打印(需要连接客户端)
        <i class="iconfont sv-printer" />
      </button> -->
      <!-- <button class="secondary circle-10" @click="exportJson"><i class="iconfont sv-printer" />
        json打印</button> -->
    </div>
    <div class="flex-row" style="height: 87vh">
      <div class="flex-2 left">
        <div class="flex-row justify-center flex-wrap">
          <div class="title">基础元素</div>
          <div class="ep-draggable-item item" tid="defaultModule.text">
            <i class="iconfont sv-text" />
            <span>文本</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.image">
            <i class="iconfont sv-image" />
            <span>图片</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.longText">
            <i class="iconfont sv-longText" />
            <span>长文</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.table">
            <i class="iconfont sv-table" />
            <span>表格</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.html">
            <i class="iconfont sv-html" />
            <span>html</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.customText">
            <i class="iconfont sv-text" />
            <span>自定义</span>
          </div>
          <div class="title">辅助元素</div>
          <div class="ep-draggable-item item" tid="defaultModule.hline">
            <i class="iconfont sv-hline" />
            <span>横线</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.vline">
            <i class="iconfont sv-vline" />
            <span>竖线</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.rect">
            <i class="iconfont sv-rect" />
            <span>矩形</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.oval">
            <i class="iconfont sv-oval" />
            <span>圆形</span>
          </div>
        </div>
        <div id="provider-container1" class="container rect-printElement-types"></div>
      </div>
      <div class="flex-5 center">
        <!-- 设计器的容器 -->
        <div id="hiprint-printTemplate" :key="shouldUpdate"></div>
      </div>
      <div class="flex-2 right">
        <!-- 元素参数的容器 -->
        <div id="PrintElementOptionSetting"></div>
      </div>
    </div>
    <div class="dialog-footer" style="display: flex;justify-content: right;margin-top:20px;">
      <el-button @click="handCancel">取 消</el-button>
      <el-button type="primary" @click="handConfirm">确 定</el-button>
    </div>
    <print-preview ref="preView"/>
  </div>
   <!-- 预览 -->

</template>

<script>
import { ref } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import { provider1 } from "./provider1";
import printPreview from './preview'
import { createTemplateLog} from "@/api/print/templateLog";
import {
  createTemplate,
  updateTemplate,
  deleteTemplate,
  getTemplate,
  getTemplatePage,
  exportTemplateExcel,
} from "@/api/print/template";
import printData from "./printData";
import panel from './panel'
export default {
  components: {printPreview},
  props: {
    open:{
       type:Boolean,
       default: true
    },
    currentId: {
      type: Object,
      default: null,
    },
    // templateData:{
    //   type: Object,
    //   default: null,
    // },
    jsonContent: {
      type: String,
      default: "",
    },
    dataList:{
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      shouldUpdate: false,
      templateJson:{},
      templateData:{}
    };
  },
  beforeMount() {
    // this.templateJson = JSON.parse(this.jsonContent);
  },
  mounted() {
    this.init()
  },
  watch: {
    open: {
      // immediate: true, // 立即执行第一次监听
      handler(val) {
        this.init()
      },
      deep: true,
    },
  },

  methods: {
    init(json,templateData){
      hiprint.init({
        providers: [defaultElementTypeProvider()],
      });
      if(this.jsonContent||json){
        this.templateData=templateData
        this.templateJson = this.jsonContent?JSON.parse(this.jsonContent):JSON.parse(json);
      }

      this.buildLeftElement();
      this.buildDesigner();
    },
    showTemplateData(){
      hiprint.init({
        providers: [defaultElementTypeProvider()],
      });
      this.buildLeftElement();
      this.buildDesigner();
    },
    // 获取模板JSON数据
    fetchTemplateJson(id) {},
    // 构建左侧可拖拽元素
    buildLeftElement() {
      hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1");
      hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
    },
    // 构建设计器
    buildDesigner() {
      $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
        (this.hiprintTemplate = new hiprint.PrintTemplate({
          template:this.templateJson,
          settingContainer: "#PrintElementOptionSetting", // 元素参数容器
        }));
      // 构建并填充到容器中
      this.hiprintTemplate.design("#hiprint-printTemplate");
    },
    // 浏览器打印
    print() {
      // 打印数据，key 对应 元素的 字段名
      let printData = this.dataList;
      // 参数: 打印时设置 左偏移量，上偏移量
      let options = { leftOffset: 5, topOffset: -1 };
      // 扩展
      let ext = {
        callback: () => {
          console.log("浏览器打印窗口已打开");
        },
        styleHandler: () => {
          // 重写 文本 打印样式
          return "<style>.hiprint-printElement-text{color:red !important;}</style>";
        },
      };
      // 调用浏览器打印
      this.hiprintTemplate.print(printData, options,ext);
      console.log('模板数据1',printData)
      this.$nextTick(()=>{
        // 创建打印日志模板
        let jsonData = this.hiprintTemplate.getJson();
        console.log(jsonData,'创建打印日志模板数据')
        let data={
            "printTemplateId": this.templateData.id,
            "jsonContent": JSON.stringify(jsonData),
            "printData":JSON.stringify(printData),
            "title": this.templateData.title,
            "source": this.templateData.source,
            "type": this.templateData.type,
        }
        createTemplateLog(data).then(response => {
          console.log('创建打印成功')
        })
      })


    },
    // 直接打印: 借助客户端,静默打印(无弹窗直接打印)
    print2() {
      if (hiprint.hiwebSocket.opened) {
        this.hiprintTemplate.print2({});
      } else {
        alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
      }
    },
    // json打印
    exportJson() {
      let json = this.hiprintTemplate.getJson();
    },
    updateJson(templateData) {
      this.hiprintTemplate.update(JSON.parse(templateData.jsonContent))
      // this.hiprintTemplate.print()
    },
    preView(row) {
      // 各个平台不一样, 用法见: https://www.npmjs.com/package/address

      this.$refs.preView.show(this.hiprintTemplate,JSON.parse(row.printData))
    },
    //确定
    handCancel(){
      this.$emit('Cancel')
    },
    handConfirm(){
      let json = this.hiprintTemplate.getJson();
      this.$emit('Ok',json)
    }
  },
};
</script>

<style>
.button{
  padding:10px;border:1px solid #333;
  margin:0 10px;
  border-radius: 4px;
  cursor: pointer;
}
/* 重写默认的一个样式 */
.rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
  color: red !important;
}
/* 重写全局 hiprint 样式 */
.hiprint-headerLine,
.hiprint-footerLine {
  border-color: purple !important;
}

.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
  border-top: 3px dashed purple !important;
}

.hiprint-headerLine:hover:before {
  content: "页眉线";
  left: calc(50% - 18px);
  position: relative;
  background: #ffff;
  top: -14px;
  color: purple;
  font-size: 12px;
}

.hiprint-footerLine:hover:before {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: purple;
  background: #ffff;
  top: -14px;
  font-size: 12px;
}
</style>
<style scoped>
/* 区域 */
.left {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
.center {
  margin: 0 10px;
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 20px;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
.right {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
/* 左侧拖拽元素样式 */
.title {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  margin: 10px 0 0 24px;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 4px 10px;
  margin: 10px 8px 4px 8px;
  width: 38%;
  min-height: 60px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}
.item .iconfont {
  font-size: 1.5rem;
}
.item span {
  font-size: 14px;
}
</style>