新增代码添加添加元素

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;
         }