Web端输入表单配合扫码枪

聚焦输入框，扫码枪输入，自动换行，若重复扫码，删除

</template>
    <div>
        <!-- *** -->

        <!-- 扫码枪交接对话框 -->
        <el-dialog v-dialogDrag title="报告交接" :visible.sync="isScannerHandoverDialogOpen" width="400px" append-to-body :close-on-click-modal="false" destroy-on-close>
          <el-row v-for="(param, index) in handoverParamList" :key="index">
            <el-col class="inputCol" :span="18">
              <input style="width:100%;" class="input" ref="handoverInputRef" @keydown.enter="handleEnterEvent(index)" v-model="param.reportNo" placeholder="请输入报告编号">
            </el-col>
            <el-col :span="6">
              <el-button style="margin-left: 5px;" @click="addHandoverParam" type="primary" icon="el-icon-plus" plain circle></el-button>
              <el-button style="margin-left: 5px;" @click="deleteHandoverParam(index)" type="danger" icon="el-icon-delete" plain circle></el-button>
            </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button :loading="buttonLoading" type="primary" @click="handleScannerHandover">确 定</el-button>
            <el-button @click="isScannerHandoverDialogOpen = false">取 消</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                handoverParamList: [{ reportNo: "" }],
            }
        },
        methods: {
            // 添加交接列表项
            addHandoverParam() {
              this.handoverParamList.push({ reportNo: "" });
            },
            // 删除交接列表项
            deleteHandoverParam(index) {
              if (this.handoverParamList.length == 1) {
                return;
              }
              this.handoverParamList.splice(index, 1);
            },
            // 监听回车事件
            handleEnterEvent(index) {
              console.log("回车");
                // 首先取到列表，去除最后一项（需要判断是否重复的，即当前项）
                let list = this.handoverParamList.map((item, index) => {
                  if (this.handoverParamList.length - 1 == index) return "";
                  return item.reportNo;
                });
                // 转为字符串后判断是否包含当前项
                if (list.join().includes(this.$refs.handoverInputRef[index].value)) {
                  // 有重复项时清空
                  this.$refs.handoverInputRef[index].value = "";
                  this.$message({
                    message: "扫描重复!",
                    type: "warning",
                  });
                  return;
                } else {
                  // 没有重复项时新增一行，并自动聚焦
                  this.addHandoverParam();
                  this.$nextTick(() => {
                    // console.log(this.$refs.inputRef[index + 1]);
                    this.$refs.handoverInputRef[index + 1].focus();
                  });
                }
            },
        }
    }
</script>