u

src/components/article/boxes/ArticleViewEANs.jsx

@@ -8,6 +8,7 @@ import { StorageManagerContext } from '../../../api/storageManagerContext';
 import { requireObject } from '../../../utils/apiShape';
 import { articleEans } from '../../../utils/articleDetail';
 import { notifyError } from '../../../utils/notify';
+import JsBarcode from 'jsbarcode';
 class PanelValue extends Component {
   render() {
     const { label, children } = this.props;
@@ -41,20 +42,63 @@ function eansDraftValid(draft) {
   );
 }
 
+class SkuBarcode extends PureComponent {
+  componentDidMount() {
+    this.renderBarcode();
+  }
+
+  componentDidUpdate() {
+    this.renderBarcode();
+  }
+
+  renderBarcode() {
+    if (!this._svg || !this.props.value) return;
+    try {
+      JsBarcode(this._svg, String(this.props.value).trim(), {
+        format: 'CODE128',
+        width: 1.5,
+        height: 38,
+        displayValue: false,
+        margin: 0,
+        background: 'transparent',
+        lineColor: '#1e293b',
+      });
+    } catch (e) {
+      console.warn('Barcode render error:', e);
+    }
+  }
+
+  render() {
+    const { value } = this.props;
+    if (!value) return null;
+    return (
+      <Box sx={{ my: 1, display: 'flex', alignItems: 'center' }}>
+        <svg
+          ref={(el) => {
+            this._svg = el;
+          }}
+          style={{ maxWidth: '100%', height: 'auto' }}
+        />
+      </Box>
+    );
+  }
+}
+
 const SECOND_ROW_MIN_HEIGHT = 220;
 
 class EansDisplay extends Component {
   render() {
     const { sku, eans } = this.props;
     return (
-      <>
+      <Box sx={{ width: '100%' }}>
         <PanelValue label="SKU">{sku}</PanelValue>
+        <SkuBarcode value={sku} />
         {(eans ?? []).map((ean) => (
           <PanelValue key={ean} label="EAN">
             {ean}
           </PanelValue>
         ))}
-      </>
+      </Box>
     );
   }
 }
@@ -65,7 +109,8 @@ class EansEdit extends Component {
     return (
       <Box sx={{ width: '100%' }}>
         <PanelValue label="SKU">{sku}</PanelValue>
-        <Box sx={{ mt: 3 }}>
+        <SkuBarcode value={sku} />
+        <Box sx={{ mt: 2 }}>
           <Autocomplete
             fullWidth
             multiple