打印组件

src/components/print/Print.vue

@@ -17,10 +17,6 @@
               <i class="iconfont">&#xea3f;</i>
               <span>表格</span>
             </div>
-            <div class="ep-draggable-item item" tid="defaultModule.html">
-              <i class="iconfont">&#xea3f;</i>
-              <span>html</span>
-            </div>
           </div>
           <div class="title">辅助元素</div>
           <div class="left-item__wrapper">
@@ -44,6 +40,38 @@
           <div class="title">常用元素</div>
           <div class="left-item__wrapper" id="custom-provider">
           </div>
+          <div class="title">
+            <span>素材</span>
+            <el-button type="primary" size="mini" @click="addField">添加</el-button>
+          </div>
+          <div class="left-item__wrapper">
+            <el-popover
+              title="图片素材(点击添加)"
+              trigger="hover">
+              <div
+                class="item"
+                slot="reference"
+                style="cursor: pointer;">
+                <div>图片素材</div>
+              </div>
+              <div class="print-images">
+                <img src="../../assets/images/triman1.png" v-for="(item, index) in 20" :key="index"  @click="addImage(`https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200`)" />
+              </div>
+            </el-popover>
+            <el-popover
+              title="图片素材(点击添加)"
+              trigger="hover">
+              <div
+                class="item"
+                slot="reference"
+                style="cursor: pointer;">
+                <div>文字素材</div>
+              </div>
+              <div class="print-images">
+                <p v-for="(item, index) in 20" @click="addText(`EVATOST CONSULTING LTD CONSULTING CONSULTING CONSULTING CONSULTING`)" :key="index">EVATOST CONSULTING LTD</p>
+              </div>
+            </el-popover>
+          </div>
           <div class="title">
             <span>动态数据（如日期）</span>
             <el-button type="primary" size="mini" @click="addField">添加</el-button>
@@ -259,32 +287,14 @@
         this.isShowDynamicForm = true
       },
 
-      addItemToCanvas(name) {
-        this.panel.addPrintText({
+      addImage(src) {
+        this.panel.addPrintImage({
           options: {
-            field: name,
-            testData: name,
             title: '',
             left: 70.5,
             top: 58.5,
-            height: 18,
-            width: 116,
-            coordinateSync: false,
-            widthHeightSync: false,
-            hideTitle: true,
-            fontFamily: 'Microsoft YaHei',
-            fontWeight: '700',
-            textContentVerticalAlign: 'middle',
-            contentPaddingLeft: 5.25,
-            qrCodeLevel: 0,
-            right: 186.5,
-            bottom: 73.5,
-            vCenter: 128.5,
-            hCenter: 64.5
-          },
-          printElementType: {
-            title: '文本',
-            type: 'text'
+            src: src,
+            widthHeightSync: true
           }
         })
         const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
@@ -293,6 +303,33 @@
         el.design(void 0, designPaper)
       },
 
+      addText(text) {
+        this.panel.addPrintText({
+          options: {
+            field: text || '',
+            testData: text || '',
+            title: '',
+            left: 70.5,
+            top: 58.5,
+            width: 140,
+            height: 20,
+            coordinateSync: true,
+            widthHeightSync: true,
+            hideTitle: true,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '700'
+          }
+        })
+        const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
+        const designPaper = this.hiprintTemplate.printPanels[0].designPaper
+        this.hiprintTemplate.printPanels[0].appendDesignPrintElement(designPaper, el, true)
+        el.design(void 0, designPaper)
+      },
+
+      addItemToCanvas(name) {
+        this.addText(name)
+      },
+
       onConfirm() {
         this.$refs.form.validate((valid) => {
           if (valid) {
@@ -341,11 +378,11 @@
 
 
         this.$nextTick(() => {
-          !this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', {
+          this.hiprintTemplate.design('#hiprint-printTemplate', {
             grid: true
           })
 
-          // this.panel = this.hiprintTemplate.printPanels[0]
+          this.panel = this.hiprintTemplate.printPanels[0]
         })
       },
 
@@ -413,6 +450,7 @@
     }
   }
 </script>
+
 <style lang="scss" scoped>
   .print {
     height: 100%;
@@ -519,8 +557,8 @@
               margin-right: 0;
             }
 
-            span {
-              margin-top: 10px;
+            i {
+              margin-bottom: 10px;
             }
           }