add：扫码枪扫码组件

src/views/component/trainingManage/barcodeDialog.vue

@@ -0,0 +1,139 @@
+<!--
+ * @Descripttion: 培训管理-培训信息里扫码枪签到使用，扫码获取条码信息并通过表单脚本传过来的方法，重新返回给表单脚本
+ * @version: 1.0
+ * @Author: Liu_jiaYin
+ * @Date: 2024-04-11 14:43:46
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-04-11 17:09:36
+-->
+<template>
+    <div class="sample-scan">
+        <!-- 扫码接收的输入框-->
+        <el-input
+            ref="redarInput"
+            v-model="scanDetail"
+            style="z-index: -999;"
+            @change="change(scanDetail)"
+        />
+        <!-- 扫码操作组件-->
+        <div v-if="visible" class="popContainer" @click="TipsClick">
+            <dv-decoration-12 style="width:150px;height:150px;margin:0 auto;top: 35%;">
+                <span style=" color: #66D9EF;">开始扫描</span>
+            </dv-decoration-12>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+
+    },
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        func: {
+            type: Function,
+            required: false
+        }
+    },
+    data () {
+        return {
+            redar: false,
+            scanDetail: ''
+        }
+    },
+    watch: {
+        visible: {
+            handler (val, oldName) {
+                if (val) {
+                    this.$nextTick(() => {
+                        this.$refs.redarInput.focus() // 聚焦input
+                    })
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    methods: {
+        change (page) {
+            if (page) {
+                this.func(page)
+                this.scanDetail = ''
+            }
+        },
+        TipsClick () {
+            this.$refs.redarInput.focus() // 聚焦input
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-form-item__label,
+/deep/ .el-input__inner {
+    color: none;
+}
+
+.sample-scan .popContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999999;
+    background: rgba(0, 0, 0, 0.7);
+}
+
+// .dynamic-form-table__label:before {
+//   content: '*';
+//   color: #F56C6C;
+// }
+.dynamic-form-table__label {
+    color: #F56C6C;
+    font-size: 18px;
+    line-height: 40px;
+    font-weight: bold;
+}
+
+/**必须设置.el-form-item__label为none */
+/deep/.zzj .el-form-item__content .el-input__inner {
+    color: #e60c14;
+}
+
+/deep/.el-form-item__content {
+    display: inline-block;
+}
+
+/deep/.el-form-item__label {
+    padding: 0;
+    margin-right: 5px;
+    width: 120px;
+    // width: 101px;
+    // margin-left:25px;
+}
+
+/deep/.el-input__inner {
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-radius: 0;
+}
+
+/deep/.jiaji {
+    // color: #F56C6C;
+    // font-size: 18px;
+    // line-height: 40px;
+    // font-weight: bold;
+}
+
+/deep/.el-dialog__title {
+    line-height: 24px;
+    color: #e60c14;
+    font-weight: 600;
+}
+</style>