Add Barcode

.gitignore

@@ -9,3 +9,4 @@ pnpm-debug
 auto-*.d.ts
 .idea
 .history
+*.iml

package.json

@@ -53,6 +53,7 @@
     "fast-xml-parser": "^4.2.2",
     "highlight.js": "^11.8.0",
     "intro.js": "^7.0.1",
+    "jsbarcode": "^3.11.5",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "min-dash": "^4.1.1",
@@ -68,6 +69,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.1",
     "vue-types": "^5.0.3",
+    "vue3-barcode": "^1.0.1",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
     "xe-utils": "^3.5.7",

src/components/Barcode/index.ts

@@ -1,3 +0,0 @@
-import Barcode from './src/Barcode.vue'
-
-export { Barcode }

src/components/Barcode/src/Barcode.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <canvas ref="barcodeRef" v-show="valid"></canvas>
-    <div v-show="!valid">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, defineProps } from 'vue'
-import JsBarcode from 'jsbarcode'
-const props = defineProps({
-  value: [String, Number],
-  //选择要使用的条形码类型
-  format: {
-    type: [String],
-    default: "CODE39"
-  },
-  //设置条之间的宽度
-  width: {
-    type:[String, Number],
-    default: 3
-  },
-  height: {
-    type:[String, Number],
-    default: 100
-  },
-  //覆盖显示的文本
-  text: [String, Number],
-  //使文字加粗体或变斜体
-  fontOptions: {
-    type: [String],
-    default: "bold italic"
-  },
-  //设置文本的字体
-  font: [String, Number],
-  //设置文本的水平对齐方式
-  textAlign: [String],
-  //设置文本的垂直位置
-  textPosition: [String],
-  //设置条形码和文本之间的间距
-  textMargin: [String, Number],
-  //设置文本的大小
-  fontSize: {
-    type:[String, Number],
-    default: 15
-  },
-  //设置条和文本的颜色
-  lineColor: [String],
-  //设置条形码的背景
-  background: {
-    type:[String],
-    default:"#eee"
-  },
-  //设置条形码周围的空白边距
-  margin: [String, Number],
-  // 是否在条形码下方显示文字
-  displayValue: {
-    type: [String, Boolean],
-    default: true
-  }
-})
-
-const settings = {
-  format: props.format,//选择要使用的条形码类型
-  width: props.width,//设置条之间的宽度
-  height: props.height,//高度
-  displayValue: props.displayValue,//是否在条形码下方显示文字
-  text: props.text,//覆盖显示的文本
-  fontOptions: props.fontOptions,//使文字加粗体或变斜体
-  font: props.font,//设置文本的字体
-  textAlign: props.textAlign,//设置文本的水平对齐方式
-  textPosition: props.textPosition,//设置文本的垂直位置
-  textMargin: props.textMargin,//设置条形码和文本之间的间距
-  fontSize: props.fontSize,//设置文本的大小
-  background: props.background,//设置条形码的背景
-  lineColor: props.lineColor,//设置条和文本的颜色。
-  margin: props.margin//设置条形码周围的空白边距
-}
-
-const removeUndefinedProps = (obj) => {
-  for (let prop in obj) {
-    if (obj.hasOwnProperty(prop) && obj[prop] === undefined) {
-      delete obj[prop]
-    }
-  }
-}
-
-const valid = ref(true)
-const barcodeRef = ref(null)
-
-onMounted(() => {
-  removeUndefinedProps(settings)
-  render()
-})
-
-const render = () => {
-  JsBarcode(barcodeRef.value, props.value, settings)
-}
-</script>

src/components/index.ts

@@ -1,6 +1,8 @@
 import type { App } from 'vue'
 import { Icon } from './Icon'
+import Vue3Barcode from 'vue3-barcode'
 
 export const setupGlobCom = (app: App<Element>): void => {
   app.component('Icon', Icon)
+  app.component('Barcode', Vue3Barcode)
 }

src/views/system/group/GroupForm.vue

@@ -11,7 +11,9 @@
         <el-input v-model="formData.name" placeholder="请输入名字" />
       </el-form-item>
       <el-form-item label="描述">
-        <Qrcode :logo="logoImg" />
+        <Qrcode :text="formData.description" />
+        <!--        <Editor v-model="formData.description" height="150px" />-->
+        <!--        <Barcode :value="formData.description" :height="50" />-->
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="formData.status" placeholder="请选择状态">
@@ -33,7 +35,6 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as GroupApi from '@/api/system/group'
-import logoImg from '@/assets/imgs/logo.png'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗