やりたいこと
ハンディバーコードスキャナからQRコード等を読み取り、値を抽出、項目ごとに振り分け表示する。（Vue.js）
伝票のデータは以下の仕様があるものとします。
| 項目 | 何番目の桁数か | 読み取り値 |
|---|---|---|
| 納入番号 | 8-12桁目 | A2563 |
| 品番 | 20-29桁目 | 2301255567 |
| 数量 | 13-14桁目 | 05 |
画面の動き
ページ表示時に自動でテキストボックスへフォーカスされる。
↓
①値を入力（QRコード読み取り）
例えば、ある伝票のQRコードを読み取った時、
"12345␣␣A2563405G01␣␣2301255567" が入力されたとします。
↓
②追加ボタン押下
↓
③各項目値を表示する。
以下の様に、入力されたQRコードを納入番号、品番、数量の右欄へ振り分け表示します。
以下のソースコードをjsfiddleのHTML欄へコピペして動きを確認して頂けます。
vue.js
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Practice</title>
</head>
<body>
<!-- Vue.js アプリケーションのマウントポイント -->
<div id="app">
<!-- フォームの送信時に addQrCode メソッドを呼び出す -->
<form @submit.prevent="addQrCode">
<label for="name">QRコード</label>
<!-- v-model を使用して qrCode データプロパティとバインド -->
<input type="text" id="name" v-model="qrCode" ref="qrInput" style="width: 220px;" />
<button type="submit">追加</button>
</form>
<br>
<!-- qrData 配列の各要素を表示 -->
<div v-for="(data, index) in qrData" :key="index">
<div>QRコード：{{ data.qrCode }}</div>
<div>納入番号：{{ data.nonyuNum }}</div>
<div>品番：{{ data.hinban }}</div>
<div>数量：{{ data.suryou }}</div>
<br>
</div>
</div>
<!-- Vue.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
const { createApp } = Vue;
createApp({
data() {
return {
qrCode: '', // QRコードの入力値
qrData: [] // QRコードデータの配列
};
},
computed: {
// 納入番号を計算するコンピューテッドプロパティ
nonyuNum() {
return this.qrCode.length >= 13 ? this.qrCode.substring(8, 13) : '';
},
// 品番を計算するコンピューテッドプロパティ
hinban() {
if (this.qrCode.length >= 30) {
let part1 = this.qrCode.substring(20, 25);
let part2 = this.qrCode.substring(26, 30);
return `${part1}-${part2}`;
} else {
return '';
}
},
// 数量を計算するコンピューテッドプロパティ
suryou() {
return this.qrCode.length >= 15 ? this.qrCode.substring(13, 15) : '';
}
},
methods: {
// QRコードを qrData 配列に追加する
addQrCode() {
this.qrData.push({
qrCode: this.qrCode,
nonyuNum: this.nonyuNum,
hinban: this.hinban,
suryou: this.suryou
});
this.qrCode = ''; // 入力フィールドをクリア
},
// QRコード入力フィールドにフォーカス
focusInput() {
this.$refs.qrInput.focus();
}
},
// コンポーネントのマウント時に実行される処理
mounted() {
this.focusInput();
document.addEventListener('click', this.focusInput);
},
// コンポーネントが破棄される前に実行される処理
beforeUnmount() {
document.removeEventListener('click', this.focusInput);
}
}).mount('#app'); // Vue.js アプリケーションを #app 要素にマウント
</script>
</body>
</html>
ソースコードの概要
①"12345␣␣A2563405G01␣␣2301255567" が入力されqrCodeへ格納。
②追加ボタン押下でaddQrCode()メソッドが走り各変数へ値が格納。
③例えばthis.qrCode.substring(8, 13)であればqrCodeの8‐12桁目の値を抽出しnonyuMum()へリターン。
④例えばnonyuMum()でリターンされた値をnonyuNumへ格納。
addQrCode()
addQrCode() {
this.qrData.push({
qrCode: this.qrCode, // QRコード
nonyuNum: this.nonyuNum, // 納入番号
hinban: this.hinban, // 品番
suryou: this.suryou // 数量
});
⑤<div>納入番号：{{ data.nonyuNum }}</div>で表示。