From afe056649b266d56c248bfaa7679f8f47b27cf8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=87?=
 <52823142+Ten-K@users.noreply.github.com>
Date: Mon, 25 Apr 2022 17:17:21 +0800
Subject: [PATCH] feat: barcode demo (#252)

---
 locales/en.yaml                        |  1 +
 locales/zh-CN.yaml                     |  1 +
 package.json                           |  1 +
 pnpm-lock.yaml                         | 10 +++++
 src/components/ReBarcode/index.ts      | 10 +++++
 src/components/ReBarcode/src/index.vue | 44 ++++++++++++++++++++
 src/components/ReCard/src/index.vue    |  6 +++
 src/router/modules/able.ts             |  9 +++++
 src/views/able/barcode.vue             | 56 ++++++++++++++++++++++++++
 9 files changed, 138 insertions(+)
 create mode 100644 src/components/ReBarcode/index.ts
 create mode 100644 src/components/ReBarcode/src/index.vue
 create mode 100644 src/views/able/barcode.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index e11ca567c..d78665748 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -78,3 +78,4 @@ menus:
   hsListCard: Card List Page
   hsDebounce: Debounce & Throttle
   hsFormDesign: Form Design
+  hsBarcode: Barcode
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 5f6a7d473..17059726c 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -78,3 +78,4 @@ menus:
   hsListCard: 卡片列表页
   hsDebounce: 防抖节流
   hsFormDesign: 表单设计器
+  hsBarcode: 条形码
diff --git a/package.json b/package.json
index 1783ece29..ef4e60408 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "element-plus": "^2.1.10",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
+    "jsbarcode": "^3.11.5",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 034a6fecc..9a39221c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,7 @@ specifiers:
   font-awesome: ^4.7.0
   husky: ^7.0.4
   js-cookie: ^3.0.1
+  jsbarcode: ^3.11.5
   lint-staged: 11.1.2
   lodash: ^4.17.21
   lodash-es: ^4.17.21
@@ -129,6 +130,7 @@ dependencies:
   element-plus: 2.1.10_vue@3.2.33
   element-resize-detector: 1.2.4
   js-cookie: 3.0.1
+  jsbarcode: 3.11.5
   lodash: 4.17.21
   lodash-es: 4.17.21
   lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
@@ -5240,6 +5242,14 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsbarcode/3.11.5:
+    resolution:
+      {
+        integrity: sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA==
+      }
+    hasBin: true
+    dev: false
+
   /jsesc/2.5.2:
     resolution:
       {
diff --git a/src/components/ReBarcode/index.ts b/src/components/ReBarcode/index.ts
new file mode 100644
index 000000000..dc16c1d83
--- /dev/null
+++ b/src/components/ReBarcode/index.ts
@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reBarcode from "./src/index.vue";
+
+export const ReBarcode = Object.assign(reBarcode, {
+  install(app: App) {
+    app.component(reBarcode.name, reBarcode);
+  }
+});
+
+export default ReBarcode;
diff --git a/src/components/ReBarcode/src/index.vue b/src/components/ReBarcode/src/index.vue
new file mode 100644
index 000000000..c6bd94d0b
--- /dev/null
+++ b/src/components/ReBarcode/src/index.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+export default {
+  name: "ReBarcode"
+};
+</script>
+
+<script setup lang="ts">
+import JsBarcode from "jsbarcode";
+import { ref, onMounted } from "vue";
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "canvas"
+  },
+  text: {
+    type: String,
+    default: null
+  },
+  // 完整配置 https://github.com/lindell/JsBarcode/wiki/Options
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  // type 相当于 options.format，如果 type 和 options.format 同时存在，type 值优先；
+  type: {
+    type: String,
+    default: "CODE128"
+  }
+});
+
+const wrapEl = ref(null);
+
+onMounted(() => {
+  const opt = { ...props.options, format: props.type };
+  JsBarcode(wrapEl.value, props.text, opt);
+});
+</script>
+
+<template>
+  <component :is="tag" ref="wrapEl" />
+</template>
diff --git a/src/components/ReCard/src/index.vue b/src/components/ReCard/src/index.vue
index ed39ff7a7..2ff95d744 100644
--- a/src/components/ReCard/src/index.vue
+++ b/src/components/ReCard/src/index.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "ReCard"
+};
+</script>
+
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 import shopIcon from "/@/assets/svg/shop.svg?component";
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index 18f60ca82..e8087b94a 100644
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -101,6 +101,15 @@ const ableRouter = {
         title: $t("menus.hsDebounce"),
         i18n: true
       }
+    },
+    {
+      path: "/able/barcode",
+      name: "reBarcode",
+      component: () => import("/@/views/able/barcode.vue"),
+      meta: {
+        title: $t("menus.hsBarcode"),
+        i18n: true
+      }
     }
   ]
 };
diff --git a/src/views/able/barcode.vue b/src/views/able/barcode.vue
new file mode 100644
index 000000000..8a5b3ba49
--- /dev/null
+++ b/src/views/able/barcode.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import ReBarcode from "/@/components/ReBarcode";
+
+const barcodes = [
+  {
+    text: "CODE128",
+    type: "CODE128",
+    options: {}
+  },
+  {
+    text: "CODE39",
+    type: "CODE39",
+    options: {
+      lineColor: "#990000"
+    }
+  },
+  {
+    text: "123456",
+    type: "pharmacode",
+    options: {
+      background: "#eee",
+      width: 5
+    }
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-card>
+      <template #header>
+        <div class="font-medium">
+          条形码（基于<el-link
+            href="https://lindell.me/JsBarcode/"
+            target="_blank"
+            style="font-size: 16px; margin: 0 5px 4px 0"
+            >JsBarcode</el-link
+          >生成）
+        </div>
+      </template>
+      <el-row :gutter="12">
+        <template v-for="(item, index) in barcodes" :key="index">
+          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+            <el-card shadow="hover" class="flex justify-center">
+              <ReBarcode
+                :text="item.text"
+                :type="item.type"
+                :options="item.options"
+              />
+            </el-card>
+          </el-col>
+        </template>
+      </el-row>
+    </el-card>
+  </div>
+</template>