新增代码添加添加元素

src/components/print/Print.vue

@@ -43,21 +43,19 @@
           </div>
           <div class="title">常用元素</div>
           <div class="left-item__wrapper" id="custom-provider">
-            <div class="ep-draggable-item item" tid="defaultModule.hline">
-              <i class="iconfont">&#xe7dd;</i>
-              <span>横线</span>
-            </div>
-            <div class="ep-draggable-item item" tid="defaultModule.vline">
-              <i class="iconfont">&#xe70f;</i>
-              <span>竖线</span>
-            </div>
-            <div class="ep-draggable-item item" tid="defaultModule.rect">
-              <i class="iconfont">&#xe620;</i>
-              <span>矩形</span>
-            </div>
-            <div class="ep-draggable-item item" tid="defaultModule.oval">
-              <i class="iconfont">&#xe76a;</i>
-              <span>圆形</span>
+          </div>
+          <div class="title">
+            <span>动态数据（如日期）</span>
+            <el-button type="primary" size="mini" @click="addField">添加</el-button>
+          </div>
+          <div class="left-item__wrapper">
+            <div
+              class="item"
+              v-for="(item, index) in dynamicFromList"
+              :key="index"
+              style="cursor: pointer;"
+              @click="addItemToCanvas(item.fieldValue)">
+              <div>{{ item.fieldValue }}</div>
             </div>
           </div>
         </div>
@@ -108,6 +106,20 @@
         <el-button @click="isShowPreview = false">取消</el-button>
       </div>
     </ai-dialog>
+    <ai-dialog
+      :visible.sync="isShowDynamicForm"
+      title="动态数据"
+      width="590px"
+      @confirm="onConfirm">
+      <el-form :model="dynamicFrom" ref="form" label-width="100px">
+        <el-form-item
+          label="数据名称："
+          :prop="`field${dynamicFromList.length}`"
+          :rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
+          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field${dynamicFromList.length}`]"></el-input>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
   </div>
 </template>
 
@@ -168,7 +180,13 @@
         },
         paperPopVisible: false,
         paperWidth: 200,
-        paperHeight: 200
+        paperHeight: 200,
+        isShowDynamicForm: false,
+        dynamicFrom: {
+
+        },
+        dynamicFromList: [],
+        panel: null
       }
     },
 
@@ -197,6 +215,41 @@
     },
 
     methods: {
+      addField() {
+        this.$set(this.dynamicFrom, `field${this.dynamicFromList.length}`, '')
+        this.isShowDynamicForm = true
+      },
+
+      addItemToCanvas(name) {
+        this.panel.addPrintText({
+          type: 'text',
+          data: 'XS888888888',
+          options: {
+            field: 'barcode',
+            testData: 'XS888888888',
+            height: 32,
+            fontSize: 12,
+            lineHeight: 18,
+            textAlign: 'left',
+            textType: 'barcode',
+            hideTitle: true
+          }
+        });
+      },
+
+      onConfirm() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.dynamicFromList.push({
+              fieldName: `field${this.dynamicFromList.length}`,
+              fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`]
+            })
+
+            this.isShowDynamicForm = false
+          }
+        })
+      },
+
       buildLeftElement() {
         // eslint-disable-next-line no-undef
         hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
@@ -210,12 +263,8 @@
         // eslint-disable-next-line no-undef
         $('#hiprint-printTemplate').empty()
         this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
-          template: template,
+          template: {},
           settingContainer: '#PrintElementOptionSetting',
-          fields: [{
-            field: 'html',
-
-          }],
           onImageChooseClick: (target) => {
             let input = document.createElement('input')
             input.setAttribute('type', 'file')
@@ -234,10 +283,12 @@
           }
         })
 
+
         this.$nextTick(() => {
           this.hiprintTemplate.design('#hiprint-printTemplate', {
             grid: true
           })
+          console.log(this.hiprintTemplate.printPanels[0])
         })
       },
 
@@ -387,6 +438,10 @@
         overflow-y: auto;
 
         .title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 320px;
           margin: 14px 0;
         }
 

src/components/print/customProvider.js

@@ -71,66 +71,7 @@ export const customProvider = function (options) {
           options: {
             width: 316,
             height: 120,
-            elId: '',
-            formatter: function (data, options, templateData) {
-              console.log(data, options, templateData)
-              const elId = options.elId || 'barCode-' + new Date().getTime()
-              const codeWidth = parseInt((options.width - 22) * 0.85)
-              options.elId = `${elId}`
-
-              // eslint-disable-next-line no-undef
-              $('body').append(`<div id="codewrapper-${elId}" style="width: ${codeWidth}pt">
-                <svg id="${elId}" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>
-              </div>`)
-              // eslint-disable-next-line no-undef
-              JsBarcode('#'+ elId, '96778555251', {
-                format: "CODE128B",
-                width: 2,
-                height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
-                margin: 0,
-                displayValue: false
-              })
-
-              // eslint-disable-next-line no-undef
-              const codeHtml = $(`#codewrapper-${elId}`).html()
-              // eslint-disable-next-line no-undef
-              $(`body>#codewrapper-${elId}`).remove()
-              // eslint-disable-next-line no-undef
-              const resizeObserver = new ResizeObserver(() => {
-                JsBarcode('#'+ elId, '96778555251', {
-                  format: "CODE128B",
-                  width: 2,
-                  height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
-                  margin: 0,
-                  displayValue: false
-                })
-              })
-
-              setTimeout(() => {
-                const node = document.getElementById(`temuBarCode-${elId}`)
-                if (node) {
-                  resizeObserver.observe(node)
-                }
-              }, 0)
-              var html = `
-                <div class="temuBarCode" id="temuBarCode-${elId}">
-                  <div class="temuBarCode-top">
-                    <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
-                    <div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
-                  </div>
-                  <div class="temuBarCode-middle">
-                    <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code" style="width: 100%">
-                      ${codeHtml}
-                    </div>
-                  </div>
-                  <div class="temuBarCode-bottom">
-                    <div class="hiprint-printElement-text-content hiprint-printElement-content">1034130097</div>
-                    <div class="hiprint-printElement-text-content hiprint-printElement-content">Made in China</div>
-                  </div>
-                </div>
-              `
-              return html
-            },
+            elId: ''
           },
           printElementType: {
           }
@@ -168,7 +109,7 @@ export const customProvider = function (options) {
         },
         {
           tid: 'providerModule1.image',
-          title: 'Logo',
+          title: '图片',
           data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
           type: 'image'
         }

src/utils/index.js

@@ -128,7 +128,6 @@ const initWindow = () => {
 
   window.JsBarcode = JsBarcode
   window.eval = (code, context) => {
-    console.log(code)
     const interpreter = new Interpreter(context || window, {
       timeout: 1000,
     })