Merge pull request #48 from Xavier9896/main

CcSimple · Aug 16, 2023 · c99cd3f · c99cd3f
2 parents 60f35ca + f8e5344
commit c99cd3f
Show file tree

Hide file tree

Showing 9 changed files with 1,029 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@
 ### 💐  同时自动更新 GitHub Pages 同步 Gitee;
 ### 💐  感谢各位贡献者的支持。 🔥
 
+## 0.0.55-beta3(2023-08-16)
+<details>
+  <summary>01. 🌈 新增 条形码、二维码独立元素，使用 bwip-js 库生成 svg </summary>
+解决原 text 元素中的条形码、二维码 类型不全，生成条码、二维码不清晰的问题
+</details>
+
 ## 0.0.54 (2023-07-05)
 > 使用此版本 请更新最新的 print-lock.css
 <details>

diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@claviska/jquery-minicolors": "^2.3.6",
+    "bwip-js": "^4.0.0",
     "canvg": "^3.0.10",
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.0",

diff --git a/src/demo/custom/providers.js b/src/demo/custom/providers.js
@@ -213,6 +213,16 @@ export const aProvider = function (ops) {
             tid: 'aProviderModule.oval',
             title: '椭圆',
             type: 'oval'
+          },
+          {
+            tid: 'aProviderModule.barcode',
+            title: '条形码',
+            type: 'barcode',
+          },
+          {
+            tid: 'aProviderModule.qrcode',
+            title: '二维码',
+            type: 'qrcode',
           }
         ])
       ]

diff --git a/src/demo/design/index.vue b/src/demo/design/index.vue
@@ -258,6 +258,24 @@
                   </div>
                 </a-col>
               </a-row>
+              <a-row style="height: 100px;">
+                <a-col :span="12" class="drag_item_box">
+                  <div>
+                    <a class="ep-draggable-item" tid="defaultModule.barcode">
+                      <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
+                      <p class="glyphicon-class">条形码</p>
+                    </a>
+                  </div>
+                </a-col>
+                <a-col :span="12" class="drag_item_box">
+                  <div>
+                    <a class="ep-draggable-item" tid="defaultModule.qrcode">
+                      <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
+                      <p class="glyphicon-class">二维码</p>
+                    </a>
+                  </div>
+                </a-col>
+              </a-row>
             </a-col>
           </a-row>
         </a-card>

diff --git a/src/demo/design/panel.js b/src/demo/design/panel.js
@@ -83,14 +83,42 @@ export default {
     }, {
       "options": {
         "left": 60,
-        "top": 132,
+        "top": 110,
         "height": 19,
         "width": 213,
         "title": "所有打印元素都可已拖拽的方式来改变元素大小",
         "fontFamily": "微软雅黑",
         "textAlign": "center",
         "lineHeight": 18
       }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 130,
+        "height": 40,
+        "width": 40,
+        "title": "qrcode",
+        "field": "qrcode",
+        "testData": "qrcode",
+      },
+      "printElementType": {
+        "title": "二维码",
+        "type": "qrcode",
+      }
+    }, {
+      "options": {
+        "left": 160,
+        "top": 130,
+        "height": 40,
+        "width": 80,
+        "title": "barcode",
+        "field": "barcode",
+        "testData": "barcode",
+      },
+      "printElementType": {
+        "title": "条形码",
+        "type": "barcode",
+      }
     }, {
       "options": {
         "left": 153,

diff --git a/src/demo/design/print-data.js b/src/demo/design/print-data.js
@@ -3,6 +3,8 @@ export default {
   logoTest: 'https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60',
   password: '12346',
   longText: '浙江在线3月29日讯最近，\n一篇小学五年级学生写的作文引起了钱报记者的关注这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文',
+  barcode: '123456',
+  qrcode: 'https://hi.printjs.cn',
   table: [
     {id: '1', name: '王小可', gender: '男', count: '120', amount: '9089元'},
     {id: '2', name: '梦之遥', gender: '女', count: '20', amount: '89元'},

diff --git a/src/hiprint/etypes/default-etyps-provider.js b/src/hiprint/etypes/default-etyps-provider.js
@@ -132,6 +132,16 @@ export default function (hiprint) {
             tid: "defaultModule.oval",
             title: "椭圆",
             type: "oval"
+          },
+          {
+            tid: 'defaultModule.barcode',
+            title: '条形码',
+            type: 'barcode',
+          },
+          {
+            tid: 'defaultModule.qrcode',
+            title: '二维码',
+            type: 'qrcode',
           }
         ])
       ]);