打印组件修改

node_modules/vue-plugin-hiprint/dist/vue-plugin-hiprint.js

@@ -7466,10 +7466,11 @@
               }, t.prototype.mathroundToporleft = function (t) {
                 var e = p.a.instance.movingDistance;
                 return Math.round(t / e) * e
-              }, t.prototype.appendDesignPrintElement = function (t, e, i) {
+              }, t.prototype.appendDesignPrintElement = function (t, e, i, className) {
                 e.setCurrenttemplateData(void 0);
                 var n = e.getDesignTarget(t);
-                n.addClass("design"), i && e.initSizeByHtml(n), t.append(n)
+                const isAddClass = !!e.options.field
+                n.addClass(`design ${isAddClass ? 'dynamicField' : ''}`), i && e.initSizeByHtml(n), t.append(n)
               }, t.prototype.createNewPage = function (t, e) {
                 t = new T(this.templateId, this.index, this.watermarkOptions, this.panelPageRule, this.scale, this.width, this.height, this.paperHeader, this.paperFooter, this.paperNumberLeft, this.paperNumberTop, this.paperNumberDisabled, this.paperNumberContinue, this.paperNumberFormat, t, e);
                 return t.setFooter(this.firstPaperFooter, this.evenPaperFooter, this.oddPaperFooter, this.lastPaperFooter), t.setOffset(this.leftOffset, this.topOffset), t

src/components/print/Print.vue

@@ -190,10 +190,12 @@
         :size.sync="searchTemplate.size"
         style="margin-top: 8px;"
         height="400"
-        @getList="getTemplateList">
-        <el-table-column slot="options" label="操作" align="center">
+        @getList="getTemplateList"
+        v-loading="templateLoading">
+        <el-table-column slot="options" label="操作" align="center" width="200">
           <template v-slot="{ row }">
             <div class="table-options">
+              <el-button type="text" @click="showTemplate(row)">模板预览</el-button>
               <el-button type="text" @click="updateTempate(row), isShowTemplate = false">使用</el-button>
             </div>
           </template>
@@ -280,13 +282,21 @@
           height: 200
         },
         paperTypes: {
-          '1:1': {
+          '100 * 100': {
             width: 200,
             height: 200
           },
-          '1:1.2': {
+          '100 * 80': {
             width: 200,
-            height: 240
+            height: 160
+          },
+          '80 * 60': {
+            width: 160,
+            height: 120
+          },
+          '60 * 40': {
+            width: 120,
+            height: 80
           }
         },
         paperPopVisible: false,
@@ -314,8 +324,9 @@
         tableData: [],
         total: 0,
         templateColConfigs: [
-          { prop: 'name', label: '模板名称', align: 'center' }
-        ]
+          { prop: 'name', label: '模板名称', align: 'left' }
+        ],
+        templateLoading: false
       }
     },
 
@@ -398,8 +409,16 @@
       },
 
       updateTempate(row) {
+        this.templateLoading = true
+        this.$http.post(`/api/templateRecommend/detail?id=${row.id}`).then(res => {
+          if (res.code === 0) {
+            const config = JSON.parse(res.data.content)
+            this.hiprintTemplate.update(config)
+            this.hiprintTemplate.setPaper(config.panels[0].width, config.panels[0].height)
+          }
 
-        this.hiprintTemplate.update(JSON.parse(row.content))
+          this.templateLoading = false
+        })
       },
 
       getTemplateList() {
@@ -413,6 +432,17 @@
         })
       },
 
+      showTemplate (row) {
+        this.templateLoading = true
+        this.$http.post(`/api/templateRecommend/detail?id=${row.id}`).then(res => {
+          this.templateLoading = false
+          if (res.code === 0) {
+            this.html = res.data.codes
+            this.isShowPreview = true
+          }
+        })
+      },
+
       getConfig() {
         this.$http.post(`/api/material/getPage?current=${this.search.current}&size=${this.search.size}&type=${this.search.type}`).then(res => {
           if (res.code === 0) {
@@ -439,7 +469,7 @@
         el.design(void 0, designPaper)
       },
 
-      addText(text, isSetField = true) {
+      addText(text, isSetField = false) {
         this.panel.addPrintText({
           options: {
             field: isSetField ? text : '',
@@ -465,7 +495,7 @@
       },
 
       addItemToCanvas(name) {
-        this.addText(name)
+        this.addText(name, true)
       },
 
       onConfirm() {
@@ -640,8 +670,9 @@
       ::v-deep(.hiprint-printPanel) {
         display: block;
 
-        & > div {
-          // margin: 0 auto !important;
+        .dynamicField {
+          background-color: #bfc2e9;
+          border-color: #bfc2e9;
         }
       }
 

src/components/print/vue-plugin-hiprint.js

@@ -7466,10 +7466,11 @@
               }, t.prototype.mathroundToporleft = function (t) {
                 var e = p.a.instance.movingDistance;
                 return Math.round(t / e) * e
-              }, t.prototype.appendDesignPrintElement = function (t, e, i) {
+              }, t.prototype.appendDesignPrintElement = function (t, e, i, className) {
                 e.setCurrenttemplateData(void 0);
                 var n = e.getDesignTarget(t);
-                n.addClass("design"), i && e.initSizeByHtml(n), t.append(n)
+                const isAddClass = !!e.options.field
+                n.addClass(`design ${isAddClass ? 'dynamicField' : ''}`), i && e.initSizeByHtml(n), t.append(n)
               }, t.prototype.createNewPage = function (t, e) {
                 t = new T(this.templateId, this.index, this.watermarkOptions, this.panelPageRule, this.scale, this.width, this.height, this.paperHeader, this.paperFooter, this.paperNumberLeft, this.paperNumberTop, this.paperNumberDisabled, this.paperNumberContinue, this.paperNumberFormat, t, e);
                 return t.setFooter(this.firstPaperFooter, this.evenPaperFooter, this.oddPaperFooter, this.lastPaperFooter), t.setOffset(this.leftOffset, this.topOffset), t