【新增】打印

src/components/print/Print.vue

@@ -42,7 +42,6 @@
           </div>
           <div class="title">
             <span>素材</span>
-            <el-button type="primary" size="mini" @click="addField">添加</el-button>
           </div>
           <div class="left-item__wrapper">
             <el-popover
@@ -55,7 +54,12 @@
                 <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`)" />
+                <img
+                  :src="item.imgUrl"
+                  v-for="(item, index) in images"
+                  :key="index"
+                  :title="item.remark"
+                  @click="addImage(item.imgUrl)" />
               </div>
             </el-popover>
             <el-popover
@@ -68,7 +72,12 @@
                 <div>文字素材</div>
               </div>
               <div class="print-images">
-                <p v-for="(item, index) in 20" @click="addText(`EVATOST CONSULTING LTD CONSULTING CONSULTING CONSULTING CONSULTING`, false)" :key="index">EVATOST CONSULTING LTD</p>
+                <p
+                  @click="addText(item.contents)"
+                  v-for="(item, index) in contents"
+                  :key="index">
+                  {{ item.contents }}
+                </p>
               </div>
             </el-popover>
           </div>
@@ -82,8 +91,9 @@
               v-for="(item, index) in dynamicFromList"
               :key="index"
               style="cursor: pointer;"
-              @click="addItemToCanvas(item.fieldValue)">
-              <div>{{ item.fieldValue }}</div>
+              @click="addItemToCanvas(item.fieldName)">
+              <div>{{ item.fieldName }}</div>
+              <span class="el-icon-error" @click.stop="removeField(index)"></span>
             </div>
           </div>
         </div>
@@ -142,9 +152,9 @@
       <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>
+          :prop="`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`"
+          :rules="[{ required: true, message: '请输入数据名称', trigger: 'blur' }]">
+          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`]"></el-input>
         </el-form-item>
       </el-form>
     </ai-dialog>
@@ -167,6 +177,13 @@
         }
       },
 
+      params: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+
       printData: {
         type: Object,
         default: () => {
@@ -179,20 +196,22 @@
         type: Object,
         default: () => {
           return {
-            "index": 0,
-            "name": 1,
-            "height": 200,
-            "width": 200,
-            "paperHeader": 0,
-            "paperFooter": 547,
-            "printElements": [],
-            "paperNumberLeft": 500,
-            "paperNumberTop": 530,
-            "paperNumberDisabled": true,
-            "paperNumberContinue": true,
-            "fontFamily": "Microsoft YaHei",
-            "scale": 1,
-            "watermarkOptions": {}
+            "panels": [{
+              "index": 0,
+              "name": 1,
+              "height": 200,
+              "width": 200,
+              "paperHeader": 0,
+              "paperFooter": 547,
+              "printElements": [],
+              "paperNumberLeft": 500,
+              "paperNumberTop": 530,
+              "paperNumberDisabled": true,
+              "paperNumberContinue": true,
+              "fontFamily": "Microsoft YaHei",
+              "scale": 1,
+              "watermarkOptions": {}
+            }]
           }
         }
       },
@@ -244,10 +263,30 @@
         paperHeight: 200,
         isShowDynamicForm: false,
         dynamicFrom: {
-
         },
         dynamicFromList: [],
-        panel: null
+        panel: null,
+        contents: [],
+        images: []
+      }
+    },
+
+    watch: {
+      template: {
+        handler(value) {
+          if (value && this.hiprintTemplate && !this.isPrint) {
+            console.log(value)
+            const config = value.panels[0]
+            this.hiprintTemplate.update(value)
+            this.curPaper = {type: 'other', width: config.width, height: config.height}
+            this.hiprintTemplate.setPaper(config.width, config.height)
+
+            if (this.params) {
+              this.dynamicFromList = this.params
+            }
+          }
+        },
+        deep: true
       }
     },
 
@@ -267,31 +306,42 @@
     },
 
     mounted() {
-      hiprint.init({
-        providers: [defaultElementTypeProvider(), customProvider({})]
-      })
-
       if (this.isPrint) {
-        this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
-          template: this.template
-        })
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables')
       } else {
+        hiprint.init({
+          providers: [defaultElementTypeProvider(), customProvider({})]
+        })
         this.buildLeftElement()
         this.buildDesigner()
+        this.getConfig()
       }
-
-      this.getConfig()
     },
 
     methods: {
       addField() {
-        this.$set(this.dynamicFrom, `field${this.dynamicFromList.length}`, '')
+        const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
+
+        if (this.dynamicFromList.length && !this.dynamicFromList.at(-1)[`field_${num}`]) {
+        } else {
+          this.$set(this.dynamicFrom, `field_${num}`, '')
+        }
+
         this.isShowDynamicForm = true
+
+        console.log(this.dynamicFrom)
+      },
+
+      removeField(index) {
+        this.dynamicFromList.splice(index, 1)
       },
 
       getConfig() {
-        this.$http.post(`/api/material/getPage`).then(res => {
-
+        this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => {
+          if (res.code === 0) {
+            this.images = res.data.records.filter(v => v.type === '1')
+            this.contents = res.data.records.filter(v => v.type === '0')
+          }
         })
       },
 
@@ -322,6 +372,7 @@
             width: 140,
             height: 20,
             coordinateSync: true,
+            textContentVerticalAlign: 'middle',
             widthHeightSync: true,
             hideTitle: true,
             fontFamily: 'Microsoft YaHei',
@@ -341,11 +392,11 @@
       onConfirm() {
         this.$refs.form.validate((valid) => {
           if (valid) {
+            const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
             this.dynamicFromList.push({
-              fieldName: `field${this.dynamicFromList.length}`,
-              fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`]
+              fieldValue: `field_${num}`,
+              fieldName: this.dynamicFrom[`field_${num}`]
             })
-
             this.isShowDynamicForm = false
           }
         })
@@ -566,6 +617,7 @@
 
           .item {
             display: flex;
+            position: relative;
             flex-direction: column;
             align-items: center;
             justify-content: center;
@@ -583,6 +635,15 @@
             i {
               margin-bottom: 10px;
             }
+
+            .el-icon-error {
+              position: absolute;
+              top: -6px;
+              right: -6px;
+              color: red;
+              font-size: 18px;
+              cursor: pointer;
+            }
           }
 
           ::v-deep(ul) {