label-print-design/es/components/design/barcode/barcode.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"barcode.vue2.mjs","sources":["../../../../../../src/components/design/barcode/barcode.vue"],"sourcesContent":["<template>\n    <div class=\"display-flex display-flex-column\"\n         :style=\"style\">\n        <div v-if=\"data.errorMsg\">{{ data.errorMsg }}</div>\n        <div class=\"my-print-barcode_svg_wrapper display-flex\">\n            <svg v-show=\"!data.errorMsg\" :style=\"svgStyle\" ref=\"barCode\" preserveAspectRatio=\"none\"></svg>\n        </div>\n        <div class=\"barcode-value display-flex\" v-if=\"showCustomValueIs()\" :style=\"valueStyle\">\n            {{ props.element.data }}\n        </div>\n    </div>\n\n</template>\n\n<script setup lang=\"ts\">\nimport JsBarcode from 'jsbarcode';\nimport { MyElement } from '@myprint/design/types/entity';\nimport { computed, CSSProperties, reactive, ref, watch } from 'vue-demi';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport { _defaultNum } from '@myprint/design/utils/numberUtil';\nimport {\n    elementBarCodeValueStyle,\n    elementCommonStyle,\n    getRecursionParentPanel\n} from '@myprint/design/utils/elementUtil';\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement\n}>(), {\n    element: () => ({} as MyElement)\n});\n\nconst barCode = ref();\nconst svgStyle = ref({});\nconst data = reactive({\n    errorMsg: undefined as string | undefined\n});\n\nconst style = computed(() => {\n    return elementCommonStyle(props.element);\n});\n\nconst valueStyle = computed(() => {\n    return elementBarCodeValueStyle(props.element, {\n        lineHeight: `${props.element.option.fontSize}px`,\n        height: `${props.element.option.fontSize}px`,\n        fontSize: `${props.element.option.fontSize}px`\n    } as CSSProperties);\n});\n\nfunction setSvgStyle() {\n    let height = unit2px(props.element.height, getRecursionParentPanel(props.element)) - (showCustomValueIs() ? _defaultNum(props.element.option.fontSize, 10) : 0);\n    let subHeight = 0;\n    const option = props.element.option;\n    if (option.margin.top) {\n        subHeight += unit2px(option.margin.top, getRecursionParentPanel(props.element));\n    }\n    if (option.margin.bottom) {\n        subHeight += unit2px(option.margin.bottom, getRecursionParentPanel(props.element));\n    }\n    if (option.padding.top) {\n        subHeight += unit2px(option.padding.top, getRecursionParentPanel(props.element));\n    }\n    if (option.padding.bottom) {\n        subHeight += unit2px(option.padding.bottom, getRecursionParentPanel(props.element));\n    }\n    // if (option.margin.left) {\n    //     subWidth += unit2px(option.margin.left, getRecursionParentPanel(props.element));\n    // }\n    // if (option.margin.right) {\n    //     subWidth += unit2px(option.margin.right, getRecursionParentPanel(props.element));\n    // }\n    svgStyle.value['height'] = (height - subHeight) + 'px';\n}\n\nwatch([() => props.element.height,\n    () => props.element.option.padding.top, () => props.element.option.padding.bottom, () => props.element.option.margin.top, () => props.element.option.margin.bottom\n], (_n, _o) => {\n    setSvgStyle();\n});\n\n\nwatch([() => barCode.value, () => props.element.data, () => props.element.option.barCodeType, () => props.element.option.fontSize,\n    () => props.element.option.color, () => props.element.option.background, () => props.element.option.barCodeDisplayValIs], (_n, _o) => {\n    data.errorMsg = undefined;\n    if (barCode.value == null) {\n        return;\n    }\n    if (!props.element.option.barCodeType) {\n        props.element.option.barCodeType = 'CODE128';\n    }\n    \n    try {\n        // 计算条形码每个条的宽度\n        // const numBars = props.element.data.length * 7; // 条形码的条数，根据条码类型会有所不同\n        // const barWidth = unit2px(props.element.width, getRecursionParentPanel(props.element)) / numBars;\n        const codeLength = props.element.data.length;\n        let numBars: number;\n        \n        // 根据不同的条形码类型设置条数\n        switch (props.element.option.barCodeType) {\n            case 'EAN2':\n                numBars = 20;\n                break;\n            case 'EAN5':\n                numBars = 47;\n                break;\n            case 'EAN8':\n                numBars = 67;\n                break;\n            case 'EAN13':\n            case 'UPC':\n                numBars = 95;\n                break;\n            case 'UPC_E':\n                numBars = 57;\n                break;\n            case 'ITF':\n                numBars = codeLength * 3;\n                break;\n            case 'ITF14':\n                numBars = 94;\n                break;\n            case 'CODE39':\n            case 'codabar':\n                numBars = codeLength * 12;\n                break;\n            case 'CODE128':\n            case 'CODE128A':\n            case 'CODE128B':\n            case 'CODE128C':\n                numBars = codeLength * 5;\n                break;\n            case 'pharmacode':\n                numBars = codeLength * 10;\n                break;\n            case 'MSI':\n            case 'MSI10':\n            case 'MSI11':\n            case 'MSI1010':\n            case 'MSI1110':\n                numBars = codeLength * 2.5;\n                break;\n            default:\n                numBars = codeLength * 7;  // 默认设置\n        }\n        // props.element.option.barCodeDisplayValIs\n        const barWidth = unit2px(props.element.width, getRecursionParentPanel(props.element)) / numBars;\n        JsBarcode(barCode.value, '123456789', {\n            format: props.element.option.barCodeType,//选择要使用的条形码类型\n            width: barWidth, //设置条之间的宽度\n            height: unit2px(props.element.height, getRecursionParentPanel(props.element)),//高度\n            displayValue: showJsBarcodeValueIs(),//是否在条形码下方显示文字\n            //   text:\"456\",//覆盖显示的文本\n            //   fontOptions:\"bold italic\",//使文字加粗体或变斜体\n            //   font:\"fantasy\",//设置文本的字体\n            //   textAlign:\"left\",//设置文本的水平对齐方式\n            //   textPosition:\"top\",//设置文本的垂直位置\n            // textMargin: 0,//设置条形码和文本之间的间距\n            // fontSize: _defaultNum(props.element.option.fontSize, 10),//设置文本的大小\n            // background: props.element.option.background,//设置条形码的背景\n            // lineColor: props.element.option.color,//设置条和文本的颜色。\n            margin: 0//设置条形码周围的空白边距\n        });\n        setSvgStyle();\n    } catch (e) {\n        data.errorMsg = '不支持的内容';\n    }\n    \n}, { immediate: true });\n\nfunction showCustomValueIs() {\n    if (props.element.option.barCodeDisplayValIs) {\n        return !barValueList.includes(props.element.option.barCodeType);\n    }\n    \n    return false;\n}\n\nfunction showJsBarcodeValueIs() {\n    if (props.element.option.barCodeDisplayValIs) {\n        return barValueList.includes(props.element.option.barCodeType);\n    }\n    \n    return false;\n}\n\nconst barValueList = ['EAN13'];\n</script>\n"],"names":[],"mappings":"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"}