From c4e15881bd34255f7b9c4406ea146c23c09d893a Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Mon, 14 Oct 2024 11:42:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=8B=E5=B7=A5=E5=85=B3=E8=81=94?=
 =?UTF-8?q?=E3=80=81=E6=8B=BC=E7=AE=B1=E5=85=B3=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/collect/relCode.js                    |  63 ++
 src/views/collect/relCode/operateRelCode.vue  | 896 +++++++++++++++++
 .../collect/relCode/operateRelCodeSpell.vue   | 939 ++++++++++++++++++
 src/views/collect/relCode/relCode.vue         | 382 +++++++
 src/views/collect/relCode/sonRelCode.vue      | 781 +++++++++++++++
 src/views/collect/relCode/sonRelCodeSpell.vue | 831 ++++++++++++++++
 6 files changed, 3892 insertions(+)
 create mode 100644 src/api/collect/relCode.js
 create mode 100644 src/views/collect/relCode/operateRelCode.vue
 create mode 100644 src/views/collect/relCode/operateRelCodeSpell.vue
 create mode 100644 src/views/collect/relCode/relCode.vue
 create mode 100644 src/views/collect/relCode/sonRelCode.vue
 create mode 100644 src/views/collect/relCode/sonRelCodeSpell.vue

diff --git a/src/api/collect/relCode.js b/src/api/collect/relCode.js
new file mode 100644
index 0000000..bdc5d88
--- /dev/null
+++ b/src/api/collect/relCode.js
@@ -0,0 +1,63 @@
+import axios from '@/utils/request'
+
+export function getList(query) {
+  return axios({
+    url: "/udiwms/relCode/batch/filter",
+    method: "get",
+    params: query
+  });
+}
+
+export function delRelCode(query) {
+  return axios({
+    url: "/udiwms/relCode/batch/delete",
+    method: "get",
+    params: query
+  });
+}
+export function deleteDetail(query) {
+  return axios({
+    url: "/udiwms/relCode/batch/deleteDetail",
+    method: "get",
+    params: query
+  });
+}
+
+export function addRelCode(query) {
+  return axios({
+    url: "/udiwms/relCode/batch/add",
+    method: "post",
+    data: query
+  });
+}
+export function deleteAllDetail(query) {
+  return axios({
+    url: "/udiwms/relCode/batch/deleteAllDetail",
+    method: "post",
+    data: query
+  });
+}
+export function addRelCodeSpellBox(query) {
+  return axios({
+    url: "/udiwms/relCode/batch/addRelCodeSpellBox",
+    method: "post",
+    data: query
+  });
+}
+
+export function getDetailList(query) {
+  return axios({
+    url: "/udiwms/relCode/detail/filter",
+    method: "get",
+    params: query
+  });
+}
+
+
+export function scanCodeRelCode(query) {
+  return axios({
+    url: "/udiwms/relCode/detail/scanCode",
+    method: "post",
+    data: query
+  });
+}
diff --git a/src/views/collect/relCode/operateRelCode.vue b/src/views/collect/relCode/operateRelCode.vue
new file mode 100644
index 0000000..299d329
--- /dev/null
+++ b/src/views/collect/relCode/operateRelCode.vue
@@ -0,0 +1,896 @@
+<template>
+    <div>
+      <el-form
+        :model="relFormData"
+        :rules="formRules"
+        ref="dataForm"
+        @submit.native.prevent
+        label-width="110px"
+      >
+        <el-card>
+          <el-row style="margin-top: 5px; display: flex; align-items: center;">
+            <div style="flex: 1;font-size: 24px">
+              <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+            </div>
+            <div style="margin-left: auto;">
+              <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"
+                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"
+              >清空
+              </el-button>
+              <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
+                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"
+              >提交
+              </el-button>
+            </div>
+
+          </el-row>
+
+          <el-row style="margin-top: 15px;font-size: 20px">
+            <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+              <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+              <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+              <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+              <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+            </el-descriptions>
+          </el-row>
+
+          <el-row style="margin-top: 10px;">
+          <el-divider></el-divider>
+          </el-row>
+
+          <el-row style="margin-top: 2px">
+            <el-col :span="12">
+              <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
+                <el-input
+                  v-model="relFormData.batchNo"
+                  auto-complete="off"
+                  style="width: 90%"
+                  :disabled="this.parentCode && this.detailList.length > 0"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
+                <el-date-picker
+                  v-model="relFormData.madeDate"
+                  type="date"
+                  placeholder="日期"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  style="width: 90%"
+                  :disabled="this.parentCode && this.detailList.length > 0"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
+                <el-date-picker
+                  v-model="relFormData.validateDate"
+                  type="date"
+                  placeholder="日期"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  style="width: 90%"
+                  :disabled="this.parentCode && this.detailList.length > 0"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="comment" class="query-form-item" label="备注:">
+                <el-input
+                  v-model="relFormData.comment"
+                  auto-complete="off"
+                  clearable
+                  style="width: 90%"
+                  placeholder="请输入备注"
+                  :disabled="this.parentCode && this.detailList.length > 0"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-divider></el-divider>
+          <el-row>
+            <el-col :span="18">
+              <el-form-item prop="code" label="扫码录入:">
+                <el-input
+                  id="inputer"
+                  @focus="getInputFocus($event)"
+                  @keypress.enter.native="enterKey($event)"
+                  ref="inputRef"
+                  style="ime-mode: disabled"
+                  type="tel"
+                  placeholder="请点击输入框进行扫码设置或者扫码录入"
+                  v-model="scanCode"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-button-group>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.native.stop="enterKey()"
+                  style="margin-left: 15px"
+                >添加
+                </el-button>
+              </el-button-group>
+            </el-col>
+          </el-row>
+
+          <el-alert
+            title="扫码结果:"
+            :type="scanResultType"
+            :closable="false"
+            :description="result">
+          </el-alert>
+          <el-alert
+            v-if="warnVisible"
+            title="警告信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="warnResult">
+          </el-alert>
+          <el-alert
+            v-if="errVisible"
+            title="错误信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="errResult">
+          </el-alert>
+        </el-card>
+      </el-form>
+      <el-tabs type="border-card" style="margin: 15px">
+        <el-tab-pane label="关联详情">
+          <div>
+              <el-table v-loading="loading"
+              :data="detailList"
+              style="width: 100%;" max-height="350" height="350"
+              border
+              :row-style="rowStyle"
+              ref="multipleTable">
+                <el-table-column type="index" label="序号" width="50"></el-table-column>
+                <el-table-column label="追溯码" width="250" prop="curCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="层级" width="150" prop="packLayer" show-overflow-tooltip></el-table-column>
+                <el-table-column label="父级编码" width="250" prop="parentCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="操作"  width="80">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="text"
+                      size="small"
+                      @click.native.stop="deleteDetail(scope.row)"
+                    >删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <el-dialog
+        :title="title"
+        :visible.sync="popDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        width="90%"
+        v-if="popDialogVisible"
+        @close='popCloseDialog'
+      >
+      <sonRelCode
+          :closeDialog="this.popCloseDialog"
+          :opeParentCode="this.popParentCode"
+          :opeRelFormData ="this.popRelFormData"
+      ></sonRelCode>
+    </el-dialog>
+    </div>
+  </template>
+
+  <script>
+  import {enterCodeWeb} from "@/api/inout/order";
+  import {addRelCode,scanCodeRelCode,deleteDetail,deleteAllDetail} from "@/api/collect/relCode";
+  import sonRelCode from './sonRelCode.vue';
+  import A from "@/plugins/KeyScaner";
+  export default {
+    name: "operateRelCode",
+    props: {
+      orderQuery: {
+        type: Object,
+        required: true,
+        default: null
+      },
+    },
+    watch: {
+      resetKey(newVal, oldVal) {
+        this.$refs.inputRef.focus();
+      }
+    },
+    data() {
+      return {
+        //扫码相关
+        codeFormData: {
+          code: "",
+          batchNo: null,
+          produceDate: null,
+          expireDate: null,
+          serialNo: null,
+          relId: null,
+        },
+        relFormData: {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          packLayer: null,
+          detailList:[]
+        },
+        detailList: [],
+        checkPreInArray: [],
+        errView: 0,
+        actionEnable: false,
+        formRules: {
+          batchNo: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          madeDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          validateDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+        },
+        isScan: true,
+        scanText: "扫码录入：",
+        corpOrderIdDisabled: false,
+        isSupVesion: false,
+        loading: false,
+        index: null,
+        formVisible: false,
+        deleteLoading: false,
+        orderNo: null,
+        fromStorageOptions: [],
+        curRow: null,
+        dialogTableVisible: false,
+        selectRlVisible: false,
+        selectSpaceVisible: false,
+        sitcomScan: false,
+        sictomText: "",
+        originCode: "",
+        checkSuccess: false,
+        codeDetail: null,
+        fromDeptOptions: [],
+        submitLoading: false,
+        scanCode: "",
+        isSuccess: false,
+        result: "",
+        scanResultType: "success",
+        splitType: null,
+        warnResult: "",
+        errResult: "",
+        warnVisible: false,
+        errVisible: false,
+        parentCode:null,
+        bhxjsl:0,
+        syxjsl:0,
+        packLayer: null,
+        popDialogVisible:false,
+        title:null,
+        popParentCode:null,
+        popRelFormData:{
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          detailList:[]
+        },
+        popLevel:1,
+      };
+    },
+    components: {
+      sonRelCode
+    },
+    methods: {
+      deleteDetail(row) {
+        this.$confirm('确定删除该层级码？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //删除缓存数据
+          let curCode = row.curCode
+          this.detailList = this.detailList.filter(row => row.curCode !== curCode)
+          this.syxjsl = this.syxjsl - 1
+
+          if (row.packLayer > 1) {
+            this.loading = true
+            //去后端触发删除当前码的关系
+            deleteDetail({ curCode: curCode }).then((response) => {
+              this.loading = false
+              if (response.code === 20000) {
+                this.$message.success('删除成功！')
+              } else {
+                this.$message.error(response.message)
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          } else {
+            this.$message.success('删除成功！')
+
+          }
+          this.splitChange()
+        })
+          .catch(() => {
+          })
+      },
+      splitChange() {
+        this.$refs.inputRef.focus();
+      },
+      popCloseDialog() {
+        this.popDialogVisible = false;
+        this.$refs.inputRef.focus();
+
+        if( this.bhxjsl === this.syxjsl){
+          this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.relFormData.detailList = this.detailList
+              this.submit()
+            })
+            .catch(() => {
+            });
+        }
+
+      },
+      //添加条码
+      addCode() {
+        if (this.parentCode != null) {
+          //控制三期
+          if (this.relFormData.batchNo == null) {
+            this.$message.warning("请输入批次号！");
+            return;
+          }
+          if (this.relFormData.madeDate == null) {
+            this.$message.warning("请选择生产日期！");
+            return;
+          }
+          if (this.relFormData.validateDate == null) {
+            this.$message.warning("请选择失效日期！");
+            return;
+          }
+        }
+        let tQuery = Object.assign(this.codeFormData);
+        tQuery.curCode = this.codeFormData.code;
+        tQuery.parentCode = this.parentCode;
+        scanCodeRelCode(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            let data = response.data;
+            if(data !== null){
+              //1.确定是否为最大层级
+              if (this.parentCode == null){
+                if (data.packLayer == 1) {
+                  this.$message.warning("该层级为最小包装层级无需进行码关联操作！");
+                  return;
+                }
+                this.relFormData.cpmctymc = data.cpmctymc;
+                this.relFormData.productCode = data.productCode;
+                this.relFormData.subTypeNo = data.subTypeNo;
+                this.relFormData.cascadeRatio = data.cascadeRatio;
+                this.relFormData.bhxjsl = data.bhxjsl;
+                this.relFormData.packageSpec = data.packageSpec;
+                this.relFormData.packLayer = data.packLayer;
+                this.relFormData.packUnit = data.packUnit;
+                this.relFormData.workShop = data.workShop;
+                this.relFormData.lineName = data.lineName;
+                this.relFormData.lineManager = data.lineManager;
+
+                this.parentCode = data.curCode;
+                this.bhxjsl = data.bhxjsl;
+                this.detailList = [];
+              }else {
+                if(this.detailList.some(item => item.curCode === data.curCode)) {
+                  //码重复提示
+                  this.$message.warning("录入码重复！");
+                  return;
+                } else {
+                  if(this.bhxjsl === this.syxjsl){
+                    //满了自动保存
+                    this.$message.warning("包含下级码已录满！");
+                    return;
+                  }
+                }
+                //判断是否是下级
+                if(data.packLayer == this.relFormData.packLayer) {
+                  //非当前编码的子层级码 是否进行替换操作
+                  this.$confirm("非当前编码的子层级码,是否进行替换操作?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                  }).then(() => {
+                    this.relFormData.cpmctymc = data.cpmctymc;
+                    this.relFormData.productCode = data.productCode;
+                    this.relFormData.subTypeNo = data.subTypeNo;
+                    this.relFormData.cascadeRatio = data.cascadeRatio;
+                    this.relFormData.bhxjsl = data.bhxjsl;
+                    this.relFormData.packageSpec = data.packageSpec;
+                    this.relFormData.packLayer = data.packLayer;
+                    this.relFormData.packUnit = data.packUnit;
+                    this.relFormData.workShop = data.workShop;
+                    this.relFormData.lineName = data.lineName;
+                    this.relFormData.lineManager = data.lineManager;
+
+                    this.parentCode = data.curCode;
+                    this.bhxjsl = data.bhxjsl;
+                    this.detailList = [];
+                    })
+                    .catch(() => {
+                      return;
+                    });
+                }else if(data.packLayer == (this.relFormData.packLayer-1) ) {
+                  //下级码
+                  this.detailList.push(data);
+                  this.syxjsl = this.detailList.length;
+
+                  //判断是否还有下级码 如果有进行弹窗 关联
+                  if (data.packLayer > 1 && data.bhxjsl > 0){
+                    this.popRelFormData.cpmctymc = data.cpmctymc;
+                    this.popRelFormData.productCode = data.productCode;
+                    this.popRelFormData.subTypeNo = data.subTypeNo;
+                    this.popRelFormData.cascadeRatio = data.cascadeRatio;
+                    this.popRelFormData.bhxjsl = data.bhxjsl;
+                    this.popRelFormData.packageSpec = data.packageSpec;
+                    this.popRelFormData.packLayer = data.packLayer;
+                    this.popRelFormData.packUnit = data.packUnit;
+                    this.popRelFormData.workShop = data.workShop;
+                    this.popRelFormData.lineName = data.lineName;
+                    this.popRelFormData.lineManager = data.lineManager;
+
+                    this.popRelFormData.comment = this.relFormData.comment;
+                    this.popRelFormData.batchNo = this.relFormData.batchNo;
+                    this.popRelFormData.madeDate = this.relFormData.madeDate;
+                    this.popRelFormData.validateDate = this.relFormData.validateDate;
+
+                    this.popDialogVisible = true;
+                    this.title = "手工关联:" + data.curCode;
+                    this.popParentCode = data.curCode;
+                  }else {
+                    if( this.bhxjsl === this.syxjsl){
+                      this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
+                        confirmButtonText: "确定",
+                        cancelButtonText: "取消",
+                        type: "warning",
+                      })
+                        .then(() => {
+                          this.relFormData.detailList = this.detailList
+                          this.submit()
+                        })
+                        .catch(() => {
+                        });
+                    }
+                  }
+                }
+              }
+              }
+          }else{
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      },
+
+      refreshCodesPanel() {
+        this.warnVisible = false;
+        this.errVisible = false;
+      },
+      giveUp() {
+        this.$confirm("确定清空当前操作的数据?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.loading = true;
+            deleteAllDetail(this.detailList).then((response) => {
+              this.loading = false;
+              if (response.code === 20000) {
+                this.$message.success("清空成功！");
+              } else {
+                this.$message.error(response.message);
+              }
+            })
+              .catch(() => {
+                this.loading = false;
+              });
+            this.relFormData = {
+              productCode: null,
+              subTypeNo: null,
+              cascadeRatio: null,
+              packageSpec: null,
+              comment: null,
+              batchNo: null,
+              madeDate: null,
+              validateDate: null,
+              workShop: null,
+              lineName: null,
+              lineManager: null,
+              packUnit: null,
+              bhxjsl: null,
+              detailList: []
+            }
+            this.detailList = []
+            this.parentCode = null
+            this.bhxjsl = 0
+            this.syxjsl = 0
+            this.packLayer = null
+          })
+          .catch(() => {
+          });
+
+      },
+      submit(val) {
+        if(this.detailList == null || this.detailList.length == 0){
+          this.$message.warning("请先录入关联码！");
+          return;
+        }
+        if (this.relFormData.batchNo == null) {
+          this.$message.warning("请输入批次号！");
+          return;
+        }
+        if (this.relFormData.madeDate == null) {
+          this.$message.warning("请选择生产日期！");
+          return;
+        }
+        if (this.relFormData.validateDate == null) {
+          this.$message.warning("请选择失效日期！");
+          return;
+        }
+
+
+        this.$set(this.relFormData, 'detailList', []);
+        this.detailList.forEach( item =>{
+          this.relFormData.detailList.push(item)
+        });
+
+        //增加数量是否完全判断
+        if( this.bhxjsl != this.syxjsl){
+          this.$confirm("该层级已录入数量与应录入数量不符, 是否继续提交?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.loading = true;
+              addRelCode(this.relFormData).then((response) => {
+                this.loading = false;
+                if (response.code === 20000) {
+                  this.$message.success("保存成功！");
+                  this.clearRel();
+                } else {
+                  this.$message.error(response.message);
+                }
+              })
+                .catch(() => {
+                  this.loading = false;
+                  this.clearRel();
+                });
+            })
+            .catch(() => {
+            });
+        }else {
+          this.loading = true;
+          addRelCode(this.relFormData).then((response) => {
+            this.loading = false;
+            if (response.code === 20000) {
+              this.$message.success("保存成功！");
+              this.clearRel();
+            } else {
+              this.$message.error(response.message);
+            }
+          }).catch(() => {
+            this.loading = false;
+            this.clearRel();
+          });
+        }
+
+
+      },
+      // 刷新表单
+      resetForm() {
+        if (this.$refs["dataForm"]) {
+          // 清空验证信息表单
+          this.$refs["dataForm"].clearValidate();
+          // 刷新表单
+          this.$refs["dataForm"].resetFields();
+        }
+      },
+      enterKey(event) {
+        this.warnResult = "";
+        this.errResult = "";
+        this.result = "";
+        this.warnVisible = false;
+        this.errVisible = false;
+
+        this.checkSuccess = true;
+        this.codeFormData.code = this.scanCode.trim();
+        let tQuery = {
+          originCode: this.originCode,
+          code: this.codeFormData.code.trim(),
+        };
+        enterCodeWeb(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            this.printCodeResult(response.data)
+            this.codeFormData.code = response.data.code;
+            this.scanCode = ""
+            this.addCode();
+          } else {
+            if (response.code == 502) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.originCode = this.codeFormData.code;
+            } else if (response.code == 501) {
+              this.checkSuccess = false;
+              this.scanCode = ""
+              this.$message.error(response.message);
+            } else if (response.code == 503) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.$confirm(response.message, "提示", {
+                type: "warning",
+              })
+                .then(() => {
+                  this.codeFormData.code = response.data.code;
+                  this.addCode();
+                })
+                .catch(() => {
+                  this.codeFormData.code = response.data.code;
+                });
+            } else if (response.code == 508) {
+              this.scanCode = ""
+              this.originCode = "";
+              this.codeFormData.code = "01" + response.data.nameCode;
+              this.originCode = this.codeFormData.code;
+            } else {
+              this.$alert(response.message, "提示", {
+                confirmButtonText: "确定",
+                type: "warning",
+                closeOnClickModal: true,
+                callback: (action) => {
+                  this.$refs.inputRef.focus();
+                  this.$refs.inputRef.select();
+                },
+              });
+            }
+          }
+          this.loading = false;
+        });
+
+      },
+      printCodeResult(data, isSuccess) {
+        const resultParts = ["扫码解析结果：" + data.code];
+
+        if (data.udi) {
+          resultParts.push("层级标识: " + data.udi);
+        }
+        if (data.batchNo) {
+          resultParts.push("批次号: " + data.batchNo);
+        }
+        if (data.produceDate) {
+          resultParts.push("生产日期: " + data.produceDate);
+        }
+        if (data.expireDate) {
+          resultParts.push("失效日期: " + data.expireDate);
+        }
+        if (data.serialNo) {
+          resultParts.push("序列号: " + data.serialNo);
+        }
+        this.result = resultParts.join(" , ");
+      },
+      getInputFocus(event) {
+        event.currentTarget.select();
+      },
+
+      clearRel() {
+        this.relFormData = {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          cpmctymc:null,
+        }
+        this.scanCode = "";
+        this.result = "";
+        this.detailList = [];
+        this.bhxjsl = 0;
+        this.syxjsl = 0;
+        this.parentCode = null;
+        this.refreshCodesPanel()
+      },
+      init(){
+        if(this.orderQuery != null){
+          this.relFormData = this.orderQuery;
+          this.bhxjsl = this.orderQuery.bhxjsl;
+        }
+      }
+    },
+    filters: {},
+    mounted() {
+      document.body.ondrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      var that = this;
+      var inputer = document.getElementById("inputer");
+      window.sc = new A.KeyScaner(inputer); //传入要监听的DOM节点
+      sc.onInput = function (text) {
+        if (text.includes("delete")) {
+          that.codeFormData.code = "";
+          that.sictomText = "";
+          that.originCode = "";
+          return;
+        }
+        if (that.sitcomScan) {
+          let tempTxt = text;
+          let str = tempTxt.replace(/[\r]/g, "");
+          that.sictomText = that.sictomText + str;
+          that.codeFormData.code = that.sictomText;
+        } else {
+          that.codeFormData.code = text;
+        }
+      };
+      inputer.focus();
+      this.$refs.inputRef.focus();
+    },
+    beforeDestroy() {
+
+    },
+    created() {
+      this.init();
+    },
+  };
+  </script>
+
+
+  <style scoped>
+  .scroll-alert {
+    width: 100%; /* 或者你需要的宽度 */
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
+    background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
+    padding: 10px;
+    position: relative;
+  }
+
+  .scroll-text {
+    display: inline-block;
+    padding-left: 100%; /* 初始位置在容器右侧 */
+    animation: scroll 10s linear infinite; /* 滚动动画 */
+  }
+
+  @keyframes scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  .query-form-item {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+  #inputer {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #d0d0d0;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  #inputer:focus {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #0080ff;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  .ime-disabled {
+    ime-mode: disabled;
+  }
+
+  .result-display {
+    border: 2px solid #ccc; /* 默认外框颜色 */
+    border-radius: 10px;
+    margin-top: 5px;
+    margin-left: 15px;
+    margin-right: 25px;
+    padding-left: 25px;
+    /* 不设置背景颜色 */
+  }
+
+  .result-success {
+    border-color: #4CAF50; /* 成功时外框颜色 */
+  }
+
+  .result-failure {
+    border-color: #0080ff; /* 失败时外框颜色 */
+  }
+
+  .result-text {
+    height: 18px;
+    /* 你可以在这里设置默认的文本颜色或其他样式 */
+  }
+
+  .result-text-success {
+    color: #4CAF50; /* 成功时文本颜色 */
+    font-size: 14px;
+  }
+
+  .result-text-failure {
+    color: #0080ff; /* 失败时文本颜色 */
+    font-size: 14px;
+  }
+
+  .mar-left {
+    margin-left: 20px;
+  }
+  </style>
+
diff --git a/src/views/collect/relCode/operateRelCodeSpell.vue b/src/views/collect/relCode/operateRelCodeSpell.vue
new file mode 100644
index 0000000..38b92de
--- /dev/null
+++ b/src/views/collect/relCode/operateRelCodeSpell.vue
@@ -0,0 +1,939 @@
+<template>
+    <div>
+      <el-form
+        :model="relFormData"
+        :rules="formRules"
+        ref="dataForm"
+        @submit.native.prevent
+        label-width="110px"
+      >
+        <el-card>
+            <el-row style="margin-top: 5px; display: flex; align-items: center;">
+              <div style="flex: 1;font-size: 24px">
+                <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+                <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+                <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+              </div>
+              <div style="margin-left: auto;">
+                <el-button size="mini" type="primary" @click.native="spellBox()" :loading="submitLoading"
+                           style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"
+                >拼箱
+                </el-button>
+                <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"
+                           style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"
+                >清空
+                </el-button>
+                <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
+                           style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"
+                >提交
+                </el-button>
+              </div>
+
+            </el-row>
+
+            <el-row style="margin-top: 15px;font-size: 20px">
+              <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+                <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+                <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+                <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+                <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+              </el-descriptions>
+            </el-row>
+
+            <el-row style="margin-top: 10px;">
+              <el-divider></el-divider>
+            </el-row>
+
+            <el-row style="margin-top: 2px">
+              <el-col :span="12">
+                <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
+                  <el-input
+                    v-model="relFormData.batchNo"
+                    auto-complete="off"
+                    style="width: 90%"
+                    :disabled="this.inputDisabled"
+                    clearable
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
+                  <el-date-picker
+                    v-model="relFormData.madeDate"
+                    type="date"
+                    placeholder="日期"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    style="width: 90%"
+                    :disabled="this.inputDisabled"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
+                  <el-date-picker
+                    v-model="relFormData.validateDate"
+                    type="date"
+                    placeholder="日期"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    style="width: 90%"
+                    :disabled="this.inputDisabled"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="comment" class="query-form-item" label="备注:">
+                  <el-input
+                    v-model="relFormData.comment"
+                    auto-complete="off"
+                    clearable
+                    style="width: 90%"
+                    placeholder="请输入备注"
+                    :disabled="this.inputDisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          <el-divider></el-divider>
+          <el-row>
+            <el-col :span="18">
+              <el-form-item prop="code" label="扫码录入:">
+                <el-input
+                  id="inputer"
+                  @focus="getInputFocus($event)"
+                  @keypress.enter.native="enterKey($event)"
+                  ref="inputRef"
+                  style="ime-mode: disabled"
+                  type="tel"
+                  placeholder="请点击输入框进行扫码设置或者扫码录入"
+                  v-model="scanCode"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-button-group>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.native.stop="enterKey()"
+                  style="margin-left: 15px"
+                >添加
+                </el-button>
+              </el-button-group>
+            </el-col>
+          </el-row>
+
+          <el-alert
+            title="扫码结果:"
+            :type="scanResultType"
+            :closable="false"
+            :description="result">
+          </el-alert>
+          <el-alert
+            v-if="warnVisible"
+            title="警告信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="warnResult">
+          </el-alert>
+          <el-alert
+            v-if="errVisible"
+            title="错误信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="errResult">
+          </el-alert>
+        </el-card>
+      </el-form>
+      <el-tabs type="border-card" style="margin: 15px">
+        <el-tab-pane label="关联详情">
+          <div>
+              <el-table v-loading="loading"
+              :data="detailList"
+              style="width: 100%;" max-height="350" height="350"
+              border
+              :row-style="rowStyle"
+              ref="multipleTable">
+                <el-table-column type="index" label="序号" width="50"></el-table-column>
+                <el-table-column label="追溯码" width="250" prop="curCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="层级" width="150" prop="packLayer" show-overflow-tooltip></el-table-column>
+                <el-table-column label="父级编码" width="250" prop="parentCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="操作"  width="80">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="text"
+                      size="small"
+                      @click.native.stop="deleteDetail(scope.row)"
+                    >删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <el-dialog
+        :title="title"
+        :visible.sync="popDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        width="90%"
+        v-if="popDialogVisible"
+        @close='popCloseDialog'
+      >
+      <sonRelCode
+          :closeDialog="this.popCloseDialog"
+          :opeParentCode="this.popParentCode"
+          :opeRelFormData ="this.popRelFormData"
+      ></sonRelCode>
+    </el-dialog>
+    </div>
+  </template>
+
+  <script>
+  import {enterCodeWeb} from "@/api/inout/order";
+  import {addRelCodeSpellBox,scanCodeRelCode,deleteDetail,deleteAllDetail} from "@/api/collect/relCode";
+  import sonRelCode from './sonRelCodeSpell.vue';
+  import A from "@/plugins/KeyScaner";
+  export default {
+    name: "operateRelCode",
+    props: {
+      orderQuery: {
+        type: Object,
+        required: true,
+        default: null
+      },
+    },
+    watch: {
+      resetKey(newVal, oldVal) {
+        this.$refs.inputRef.focus();
+      }
+    },
+    data() {
+      return {
+        inputDisabled: false,
+        //扫码相关
+        codeFormData: {
+          code: "",
+          batchNo: null,
+          produceDate: null,
+          expireDate: null,
+          serialNo: null,
+          relId: null,
+        },
+        relFormData: {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          packLayer: null,
+          detailList:[]
+        },
+        detailList: [],
+        checkPreInArray: [],
+        errView: 0,
+        actionEnable: false,
+        formRules: {
+          batchNo: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          madeDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          validateDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+        },
+        isScan: true,
+        scanText: "扫码录入：",
+        corpOrderIdDisabled: false,
+        isSupVesion: false,
+        loading: false,
+        index: null,
+        formVisible: false,
+        deleteLoading: false,
+        orderNo: null,
+        fromStorageOptions: [],
+        curRow: null,
+        dialogTableVisible: false,
+        selectRlVisible: false,
+        selectSpaceVisible: false,
+        sitcomScan: false,
+        sictomText: "",
+        originCode: "",
+        checkSuccess: false,
+        codeDetail: null,
+        fromDeptOptions: [],
+        submitLoading: false,
+        scanCode: "",
+        isSuccess: false,
+        result: "",
+        scanResultType: "success",
+        splitType: null,
+        warnResult: "",
+        errResult: "",
+        warnVisible: false,
+        errVisible: false,
+        parentCode:null,
+        bhxjsl:0,
+        syxjsl:0,
+        packLayer: null,
+        popDialogVisible:false,
+        title:null,
+        popParentCode:null,
+        popRelFormData:{
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          detailList:[]
+        },
+        relFormDatas:[],
+        detailListSpell: [],
+        popLevel:1,
+      };
+    },
+    components: {
+      sonRelCode
+    },
+    methods: {
+      deleteDetail(row) {
+        this.$confirm('确定删除该层级码？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //删除缓存数据
+          let curCode = row.curCode
+          this.detailList = this.detailList.filter(row => row.curCode !== curCode)
+          this.detailListSpell = this.detailListSpell.filter(row => row.curCode !== curCode)
+          this.syxjsl = this.syxjsl - 1
+
+          if (row.packLayer > 1) {
+            this.loading = true
+            //去后端触发删除当前码的关系
+            deleteDetail({ curCode: curCode }).then((response) => {
+              this.loading = false
+              if (response.code === 20000) {
+                this.$message.success('删除成功！')
+              } else {
+                this.$message.error(response.message)
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          } else {
+            this.$message.success('删除成功！')
+
+          }
+          this.splitChange()
+        })
+          .catch(() => {
+          })
+      },
+      splitChange() {
+        this.$refs.inputRef.focus();
+      },
+      popCloseDialog() {
+        this.popDialogVisible = false;
+        this.$refs.inputRef.focus();
+
+        if( this.bhxjsl === this.syxjsl){
+          this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.relFormData.detailList = this.detailList
+              this.submit()
+            })
+            .catch(() => {
+            });
+        }
+
+      },
+      //添加条码
+      addCode() {
+        if (this.parentCode != null) {
+          //控制三期
+          if (this.relFormData.batchNo == null) {
+            this.$message.warning("请输入批次号！");
+            return;
+          }
+          if (this.relFormData.madeDate == null) {
+            this.$message.warning("请选择生产日期！");
+            return;
+          }
+          if (this.relFormData.validateDate == null) {
+            this.$message.warning("请选择失效日期！");
+            return;
+          }
+        }
+
+        let tQuery = Object.assign(this.codeFormData);
+        tQuery.curCode = this.codeFormData.code;
+        tQuery.parentCode = this.parentCode;
+        scanCodeRelCode(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            let data = response.data;
+            if(data !== null){
+              //1.确定是否为最大层级
+              if (this.parentCode == null){
+                if (data.packLayer == 1) {
+                  this.$message.warning("该层级为最小包装层级无需进行码关联操作！");
+                  return;
+                }
+                this.relFormData.cpmctymc = data.cpmctymc;
+                this.relFormData.productCode = data.productCode;
+                this.relFormData.subTypeNo = data.subTypeNo;
+                this.relFormData.cascadeRatio = data.cascadeRatio;
+                this.relFormData.bhxjsl = data.bhxjsl;
+                this.relFormData.packageSpec = data.packageSpec;
+                this.relFormData.packLayer = data.packLayer;
+                this.relFormData.packUnit = data.packUnit;
+                this.relFormData.workShop = data.workShop;
+                this.relFormData.lineName = data.lineName;
+                this.relFormData.lineManager = data.lineManager;
+
+                this.parentCode = data.curCode;
+                this.bhxjsl = data.bhxjsl;
+                this.detailList = [];
+              }else {
+                if(this.detailList.some(item => item.curCode === data.curCode)) {
+                  //码重复提示
+                  this.$message.warning("录入码重复！");
+                  return;
+                } else {
+                  if(this.bhxjsl === this.syxjsl){
+                    //满了自动保存
+                    this.$message.warning("包含下级码已录满！");
+                    return;
+                  }
+                }
+                //判断是否是下级
+                if(data.packLayer == this.relFormData.packLayer) {
+                  //非当前编码的子层级码 是否进行替换操作
+                  this.$confirm("非当前编码的子层级码,是否进行替换操作?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                  }).then(() => {
+                    this.relFormData.cpmctymc = data.cpmctymc;
+                    this.relFormData.productCode = data.productCode;
+                    this.relFormData.subTypeNo = data.subTypeNo;
+                    this.relFormData.cascadeRatio = data.cascadeRatio;
+                    this.relFormData.bhxjsl = data.bhxjsl;
+                    this.relFormData.packageSpec = data.packageSpec;
+                    this.relFormData.packLayer = data.packLayer;
+                    this.relFormData.packUnit = data.packUnit;
+                    this.relFormData.workShop = data.workShop;
+                    this.relFormData.lineName = data.lineName;
+                    this.relFormData.lineManager = data.lineManager;
+
+                    this.parentCode = data.curCode;
+                    this.bhxjsl = data.bhxjsl;
+                    this.detailList = [];
+                    })
+                    .catch(() => {
+                      return;
+                    });
+                }else if(data.packLayer == (this.relFormData.packLayer-1) ) {
+                  //下级码
+                  this.detailList.push(data);
+                  this.detailListSpell.push(data);
+                  this.inputDisabled = true
+                  this.syxjsl = this.detailList.length;
+
+                  //判断是否还有下级码 如果有进行弹窗 关联
+                  if (data.packLayer > 1 && data.bhxjsl > 0){
+                    this.popRelFormData.cpmctymc = data.cpmctymc;
+                    this.popRelFormData.productCode = data.productCode;
+                    this.popRelFormData.subTypeNo = data.subTypeNo;
+                    this.popRelFormData.cascadeRatio = data.cascadeRatio;
+                    this.popRelFormData.bhxjsl = data.bhxjsl;
+                    this.popRelFormData.packageSpec = data.packageSpec;
+                    this.popRelFormData.packLayer = data.packLayer;
+                    this.popRelFormData.packUnit = data.packUnit;
+                    this.popRelFormData.workShop = data.workShop;
+                    this.popRelFormData.lineName = data.lineName;
+                    this.popRelFormData.lineManager = data.lineManager;
+
+                    this.popRelFormData.comment = this.relFormData.comment;
+                    this.popRelFormData.batchNo = this.relFormData.batchNo;
+                    this.popRelFormData.madeDate = this.relFormData.madeDate;
+                    this.popRelFormData.validateDate = this.relFormData.validateDate;
+
+                    this.popDialogVisible = true;
+                    this.title = "手工关联:" + data.curCode;
+                    this.popParentCode = data.curCode;
+                  }else {
+                    if( this.bhxjsl === this.syxjsl){
+                      this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
+                        confirmButtonText: "确定",
+                        cancelButtonText: "取消",
+                        type: "warning",
+                      })
+                        .then(() => {
+                          this.relFormData.detailList = this.detailList
+                          this.submit()
+                        })
+                        .catch(() => {
+                        });
+                    }
+                  }
+                }
+              }
+              }
+          }else{
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      },
+
+      refreshCodesPanel() {
+        this.warnVisible = false;
+        this.errVisible = false;
+      },
+      giveUp() {
+        this.$confirm("确定清空当前操作的数据?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.loading = true;
+            deleteAllDetail(this.detailList).then((response) => {
+              this.loading = false;
+              if (response.code === 20000) {
+                this.$message.success("清空成功！");
+              } else {
+                this.$message.error(response.message);
+              }
+            })
+              .catch(() => {
+                this.loading = false;
+              });
+            this.relFormData = {
+              productCode: null,
+              subTypeNo: null,
+              cascadeRatio: null,
+              packageSpec: null,
+              comment: null,
+              batchNo: null,
+              madeDate: null,
+              validateDate: null,
+              workShop: null,
+              lineName: null,
+              lineManager: null,
+              packUnit: null,
+              bhxjsl: null,
+              detailList: []
+            }
+            this.detailList = []
+            this.detailListSpell = []
+            this.parentCode = null
+            this.bhxjsl = 0
+            this.syxjsl = 0
+            this.packLayer = null
+          })
+          .catch(() => {
+          });
+
+
+      },
+      spellBox() {
+        const temp = JSON.parse(JSON.stringify(this.relFormData));
+        temp.detailList = []
+        this.detailListSpell.forEach( item =>{
+          item.flag = 2
+          temp.detailList.push(item)
+        });
+        this.relFormDatas.push(temp)
+        this.detailListSpell = []
+        this.relFormData.detailList = []
+        this.relFormData.batchNo = null
+        this.relFormData.madeDate = null
+        this.relFormData.validateDate = null
+        // console.log("拼凑箱子详情",this.relFormDatas)
+        this.inputDisabled = false
+      },
+      submit(val) {
+        if(this.detailList == null || this.detailList.length == 0){
+          this.$message.warning("请先录入关联码！");
+          return;
+        }
+        if (this.relFormData.batchNo == null) {
+          this.$message.warning("请输入批次号！");
+          return;
+        }
+        if (this.relFormData.madeDate == null) {
+          this.$message.warning("请选择生产日期！");
+          return;
+        }
+        if (this.relFormData.validateDate == null) {
+          this.$message.warning("请选择失效日期！");
+          return;
+        }
+
+        //增加数量是否完全判断
+        if( this.bhxjsl != this.syxjsl){
+          this.$confirm("该层级已录入数量与应录入数量不符, 是否继续提交?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.loading = true;
+
+              const temp = JSON.parse(JSON.stringify(this.relFormData));
+              temp.detailList = []
+              this.detailListSpell.forEach( item =>{
+                item.flag = 2
+                temp.detailList.push(item)
+              });
+              this.relFormDatas.push(temp)
+
+              addRelCodeSpellBox(this.relFormDatas).then((response) => {
+                this.loading = false;
+                if (response.code === 20000) {
+                  this.$message.success("保存成功！");
+                  this.clearRel();
+                } else {
+                  this.$message.error(response.message);
+                }
+              })
+                .catch(() => {
+                  this.loading = false;
+                  this.clearRel();
+                });
+            })
+            .catch(() => {
+            });
+        }else {
+          this.loading = true;
+
+          const temp = JSON.parse(JSON.stringify(this.relFormData));
+          temp.detailList = []
+          this.detailListSpell.forEach( item =>{
+            item.flag = 2
+            temp.detailList.push(item)
+          });
+          this.relFormDatas.push(temp)
+
+          addRelCodeSpellBox(this.relFormDatas).then((response) => {
+            this.loading = false;
+            if (response.code === 20000) {
+              this.$message.success("保存成功！");
+              this.clearRel();
+            } else {
+              this.$message.error(response.message);
+            }
+          }).catch(() => {
+            this.loading = false;
+            this.clearRel();
+          });
+        }
+
+
+      },
+      // 刷新表单
+      resetForm() {
+        if (this.$refs["dataForm"]) {
+          // 清空验证信息表单
+          this.$refs["dataForm"].clearValidate();
+          // 刷新表单
+          this.$refs["dataForm"].resetFields();
+        }
+      },
+      enterKey(event) {
+        this.warnResult = "";
+        this.errResult = "";
+        this.result = "";
+        this.warnVisible = false;
+        this.errVisible = false;
+
+        this.checkSuccess = true;
+        this.codeFormData.code = this.scanCode.trim();
+        let tQuery = {
+          originCode: this.originCode,
+          code: this.codeFormData.code.trim(),
+        };
+        enterCodeWeb(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            this.printCodeResult(response.data)
+            this.codeFormData.code = response.data.code;
+            this.scanCode = ""
+            this.addCode();
+          } else {
+            if (response.code == 502) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.originCode = this.codeFormData.code;
+            } else if (response.code == 501) {
+              this.checkSuccess = false;
+              this.scanCode = ""
+              this.$message.error(response.message);
+            } else if (response.code == 503) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.$confirm(response.message, "提示", {
+                type: "warning",
+              })
+                .then(() => {
+                  this.codeFormData.code = response.data.code;
+                  this.addCode();
+                })
+                .catch(() => {
+                  this.codeFormData.code = response.data.code;
+                });
+            } else if (response.code == 508) {
+              this.scanCode = ""
+              this.originCode = "";
+              this.codeFormData.code = "01" + response.data.nameCode;
+              this.originCode = this.codeFormData.code;
+            } else {
+              this.$alert(response.message, "提示", {
+                confirmButtonText: "确定",
+                type: "warning",
+                closeOnClickModal: true,
+                callback: (action) => {
+                  this.$refs.inputRef.focus();
+                  this.$refs.inputRef.select();
+                },
+              });
+            }
+          }
+          this.loading = false;
+        });
+
+      },
+      printCodeResult(data, isSuccess) {
+        const resultParts = ["扫码解析结果：" + data.code];
+
+        if (data.udi) {
+          resultParts.push("层级标识: " + data.udi);
+        }
+        if (data.batchNo) {
+          resultParts.push("批次号: " + data.batchNo);
+        }
+        if (data.produceDate) {
+          resultParts.push("生产日期: " + data.produceDate);
+        }
+        if (data.expireDate) {
+          resultParts.push("失效日期: " + data.expireDate);
+        }
+        if (data.serialNo) {
+          resultParts.push("序列号: " + data.serialNo);
+        }
+        this.result = resultParts.join(" , ");
+      },
+      getInputFocus(event) {
+        event.currentTarget.select();
+      },
+
+      clearRel() {
+        this.relFormData = {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          cpmctymc:null,
+        }
+        this.scanCode = "";
+        this.result = "";
+        this.detailList = [];
+        this.detailListSpell = []
+        this.bhxjsl = 0;
+        this.syxjsl = 0;
+        this.parentCode = null;
+        this.inputDisabled = false
+        this.refreshCodesPanel()
+      },
+      init(){
+        if(this.orderQuery != null){
+          this.relFormData = this.orderQuery;
+          this.bhxjsl = this.orderQuery.bhxjsl;
+        }
+      }
+    },
+    filters: {},
+    mounted() {
+      document.body.ondrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      var that = this;
+      var inputer = document.getElementById("inputer");
+      window.sc = new A.KeyScaner(inputer); //传入要监听的DOM节点
+      sc.onInput = function (text) {
+        if (text.includes("delete")) {
+          that.codeFormData.code = "";
+          that.sictomText = "";
+          that.originCode = "";
+          return;
+        }
+        if (that.sitcomScan) {
+          let tempTxt = text;
+          let str = tempTxt.replace(/[\r]/g, "");
+          that.sictomText = that.sictomText + str;
+          that.codeFormData.code = that.sictomText;
+        } else {
+          that.codeFormData.code = text;
+        }
+      };
+      inputer.focus();
+      this.$refs.inputRef.focus();
+    },
+    beforeDestroy() {
+
+    },
+    created() {
+      this.init();
+    },
+  };
+  </script>
+
+
+  <style scoped>
+  .scroll-alert {
+    width: 100%; /* 或者你需要的宽度 */
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
+    background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
+    padding: 10px;
+    position: relative;
+  }
+
+  .scroll-text {
+    display: inline-block;
+    padding-left: 100%; /* 初始位置在容器右侧 */
+    animation: scroll 10s linear infinite; /* 滚动动画 */
+  }
+
+  @keyframes scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  .query-form-item {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+  #inputer {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #d0d0d0;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  #inputer:focus {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #0080ff;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  .ime-disabled {
+    ime-mode: disabled;
+  }
+
+  .result-display {
+    border: 2px solid #ccc; /* 默认外框颜色 */
+    border-radius: 10px;
+    margin-top: 5px;
+    margin-left: 15px;
+    margin-right: 25px;
+    padding-left: 25px;
+    /* 不设置背景颜色 */
+  }
+
+  .result-success {
+    border-color: #4CAF50; /* 成功时外框颜色 */
+  }
+
+  .result-failure {
+    border-color: #0080ff; /* 失败时外框颜色 */
+  }
+
+  .result-text {
+    height: 18px;
+    /* 你可以在这里设置默认的文本颜色或其他样式 */
+  }
+
+  .result-text-success {
+    color: #4CAF50; /* 成功时文本颜色 */
+    font-size: 14px;
+  }
+
+  .result-text-failure {
+    color: #0080ff; /* 失败时文本颜色 */
+    font-size: 14px;
+  }
+
+  .mar-left {
+    margin-left: 20px;
+  }
+  </style>
+
diff --git a/src/views/collect/relCode/relCode.vue b/src/views/collect/relCode/relCode.vue
new file mode 100644
index 0000000..e7a45c5
--- /dev/null
+++ b/src/views/collect/relCode/relCode.vue
@@ -0,0 +1,382 @@
+<template>
+  <div>
+    <el-card class="el-card">
+      <el-form :model="filterQuery" class="query-form" label-width="100px" v-if="showSearch">
+        <el-row>
+          <el-col :span="12">
+           <el-form-item prop="code" label="扫码录入:">
+            <el-input
+                  id="inputer"
+                  @focus="getInputFocus($event)"
+                  ref="inputRef"
+                  style="ime-mode: disabled"
+                  type="tel"
+                  placeholder="请点击输入框进行扫码设置或者扫码录入"
+                  v-model="filterQuery.code"
+                ></el-input>
+           </el-form-item>
+         </el-col>
+        </el-row>
+        <el-row>
+         <el-col :span="4">
+           <el-form-item label="产品编码:">
+             <el-input v-model="filterQuery.productCode"  placeholder="请输入产品编码" clearable></el-input>
+           </el-form-item>
+         </el-col>
+         <el-col :span="4">
+           <el-form-item label="批次号:">
+             <el-input v-model="filterQuery.batchNo"  placeholder="请输入批次号" clearable></el-input>
+           </el-form-item>
+         </el-col>
+         <el-col :span="4">
+            <el-form-item label="失效日期:">
+            <el-date-picker
+                style="width: 100%"
+                :picker-options="pickerOptions"
+                v-model="actDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div class="top-right-btn">
+        <el-button-group style="display:flex;">
+          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
+          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
+          <!-- <el-button type="primary" icon="el-icon-plus" @click="newDistributionForm()" :loading="loading">手动新增</el-button> -->
+          <el-upload
+              :action="action"
+              :headers ="headers"
+              accept=".xml"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              :on-success="handleSuccess"
+              :on-progress="handleProgress"
+              :on-error="handleError"
+              :before-upload="beforeUpload"
+              :limit="5"
+              :on-exceed="handleExceed"
+              :file-list="fileList"
+              :show-file-list="false"
+              :data="extraData">
+              <el-button size="small" icon="el-icon-upload" type="primary">文件上传</el-button>
+              <!-- <div slot="tip" class="el-upload__tip">只能上传xml文件，且不超过5M</div> -->
+            </el-upload>
+        </el-button-group>
+      </div>
+
+      <el-divider style="margin: 15px"></el-divider>
+
+      <el-table v-loading="loading" :data="list" border highlight-current-row
+                :default-expand-all="isExpandAll"
+                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+                style="width: 100%"   row-key="id" >
+        <el-table-column label="序号" type="index" width="60"></el-table-column>
+        <el-table-column label="产品编码" prop="productCode"></el-table-column>
+        <el-table-column label="装箱类型" prop="packageSpec"></el-table-column>
+        <el-table-column label="批次号" prop="batchNo"></el-table-column>
+        <el-table-column label="生产日期" prop="madeDate"></el-table-column>
+        <el-table-column label="失效日期" prop="validateDate"></el-table-column>
+        <el-table-column label="备注" prop="comment"></el-table-column>
+        <el-table-column label="操作" width="120px">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.native.stop="deleteDialog(scope.row)">删除</el-button>
+<!--            <el-button type="text" size="small" @click.native="newDistributionForm(scope.$index, scope.row)">拼箱</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="filterQuery.page"
+        :limit.sync="filterQuery.limit"
+        @pagination="handleCurrentChange"
+
+      ></pagination>
+
+      <el-dialog
+        :title="formName"
+        :visible.sync="newSpDistributionVisible"
+        width="85%"
+        append-to-body
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        v-if="newSpDistributionVisible"
+        @close='closeDialog'
+      >
+        <operateRelCode
+          :closeDialog="closeDialog"
+          :orderQuery="idQuery"
+        ></operateRelCode>
+      </el-dialog>
+
+    </el-card>
+  </div>
+</template>
+<script>
+import {getList,delRelCode} from "@/api/collect/relCode";
+import {getAdminId, getToken} from '@/utils/auth';
+import operateRelCode from "@/views/collect/relCode/operateRelCode"
+import Treeselect from "@riophae/vue-treeselect";
+import A from "@/plugins/KeyScaner";
+
+export default {
+  name: "relCode",
+  data() {
+    return {
+      showSearch: true,
+      newSpDistributionVisible: false,
+      filterQuery: {
+        billAction: null,
+        billNo: "",
+        page: 1,
+        limit: 10,
+        corpName: null
+      },
+      isExpandAll: true,
+      idQuery: null,
+      formName: null,
+      loading: false,
+      list: [],
+      formData: null,
+      total: 0,
+      actDateRange:[],
+      scanCode:null,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      headers:{
+        ADMINID: getAdminId(),
+        ADMINTOKEN: getToken()
+      },
+      extraData:{"uuid": "upload-xml"},
+      uploadLoading: false,
+      action: process.env.VUE_APP_BASE_API + "/udiwms/relCode/batch/xmlUpload",
+      fileList: []
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$router.push({
+        path: "",
+      });
+      this.filterQuery = {
+        billNo: "",
+        thirdSysFk: "",
+        billFlag: null,
+        billAction: null,
+        startDate: null,
+        endDate: null,
+        code:null,
+        page: 1,
+        limit: 10,
+        corpName: null,
+        type: 1,
+        editStatus: 1,
+      };
+      this.actDateRange = [];
+      this.getList();
+    },
+    onSubmitFind() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    hideSearch() {
+      this.showSearch = !this.showSearch;
+    },
+    newDistributionForm(index, row) {
+      if (this.$isNotBlank(row) && this.$isNotBlank(row.id)) {
+        this.idQuery = row;
+        this.formName = "拼箱";
+        this.newSpDistributionVisible = true;
+      } else {
+        this.formName = "新增";
+        this.newSpDistributionVisible = true;
+      }
+    },
+    closeDialog() {
+      this.newSpDistributionVisible = false;
+      this.getList();
+      this.detailList = [];
+    },
+    getInputFocus(event) {
+        event.currentTarget.select();
+    },
+    deleteDialog(row) {
+      this.$confirm("此操作将永久删除关联记录, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delRelCode({id:row.id})
+          .then((response) => {
+            if (response.code == 20000) {
+              this.getList();
+            } else {
+              this.$message.error(response.message);
+            }
+          })
+        .catch(() => {
+
+        });
+        })
+        .catch(() => {
+        });
+    },
+    getList() {
+      this.loading = true;
+      if (this.actDateRange !== null) {
+        this.filterQuery.startDate = this.actDateRange[0];
+        this.filterQuery.endDate = this.actDateRange[1];
+      } else {
+        this.filterQuery.startDate = null;
+        this.filterQuery.endDate = null;
+      }
+      getList(this.filterQuery)
+        .then((response) => {
+          if (response.code == 20000) {
+            this.list = response.data.list || [];
+            this.total = response.data.total || 0;
+          } else {
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val.page;
+      this.getList();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    handleSuccess(res, file, fileList) {
+      fileList = fileList.filter(item => item.response.code === 20000);
+      this.fileList = fileList;
+      if (res.code === 20000) {
+        this.$message.success(res.message);
+      } else {
+        this.$message.error(res.message);
+      }
+      this.uploadLoading.close();
+    },
+    beforeUpload(file) {
+      const isXML = file.type === 'text/xml';
+      const isLt5M = file.size / 1024 / 1024 < 5;
+      if (!isXML) {
+        this.$message.error('上传文件只能是 XML 格式!');
+      }
+      if (!isLt5M) {
+        this.$message.error('上传文件大小不能超过 5MB!');
+      }
+      return isXML && isLt5M;
+    },
+    handleProgress() {
+      this.uploadLoading = this.$loading({
+        lock: true,
+        text: '文件上传中…',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.5)'
+      });
+    },
+    handleError() {
+      this.uploadLoading.close();
+      this.$message.error('文件上传失败，请检查文件大小或文件格式');
+    }
+  },
+  components: {
+    operateRelCode,
+    Treeselect,
+  },
+  filters: {},
+  mounted() {
+      document.body.ondrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      var that = this;
+      var inputer = document.getElementById("inputer");
+      window.sc = new A.KeyScaner(inputer); //传入要监听的DOM节点
+      sc.onInput = function (text) {
+        if (text.includes("delete")) {
+          that.codeFormData.code = "";
+          that.sictomText = "";
+          that.originCode = "";
+          return;
+        }
+        if (that.sitcomScan) {
+          let tempTxt = text;
+          let str = tempTxt.replace(/[\r]/g, "");
+          that.sictomText = that.sictomText + str;
+          that.codeFormData.code = that.sictomText;
+        } else {
+          that.codeFormData.code = text;
+        }
+      };
+      inputer.focus();
+      this.$refs.inputRef.focus();
+  },
+  created() {
+    this.getList();
+  },
+}
+;
+</script>
+<style scoped>
+</style>
+
diff --git a/src/views/collect/relCode/sonRelCode.vue b/src/views/collect/relCode/sonRelCode.vue
new file mode 100644
index 0000000..e740afe
--- /dev/null
+++ b/src/views/collect/relCode/sonRelCode.vue
@@ -0,0 +1,781 @@
+<template>
+    <div>
+      <el-form
+        :model="relFormData"
+        :rules="formRules"
+        ref="dataForm"
+        @submit.native.prevent
+        label-width="110px"
+      >
+        <el-card>
+          <el-row style="margin-top: 5px; display: flex; align-items: center;">
+            <div style="flex: 1;font-size: 24px">
+              <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+            </div>
+            <div style="margin-left: auto;">
+<!--              <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"-->
+<!--                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"-->
+<!--              >清空-->
+<!--              </el-button>-->
+              <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
+                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailList.length == 0"
+              >提交
+              </el-button>
+            </div>
+
+          </el-row>
+
+          <el-row style="margin-top: 15px;font-size: 20px">
+            <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+              <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+              <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+              <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+              <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+            </el-descriptions>
+          </el-row>
+
+          <el-row style="margin-top: 10px;">
+            <el-divider></el-divider>
+          </el-row>
+
+          <el-row style="margin-top: 2px">
+            <el-col :span="12">
+              <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
+                <el-input
+                  v-model="relFormData.batchNo"
+                  auto-complete="off"
+                  style="width: 90%"
+                  :disabled="true"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
+                <el-date-picker
+                  v-model="relFormData.madeDate"
+                  type="date"
+                  placeholder="日期"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  style="width: 90%"
+                  :disabled="true"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
+                <el-date-picker
+                  v-model="relFormData.validateDate"
+                  type="date"
+                  placeholder="日期"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  style="width: 90%"
+                  :disabled="true"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="comment" class="query-form-item" label="备注:">
+                <el-input
+                  v-model="relFormData.comment"
+                  auto-complete="off"
+                  clearable
+                  style="width: 90%"
+                  placeholder="请输入备注"
+                  :disabled="true"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-divider></el-divider>
+          <el-row>
+            <el-col :span="18">
+              <el-form-item prop="code" label="扫码录入:">
+                <el-input
+                  id="inputer"
+                  @focus="getInputFocus($event)"
+                  @keypress.enter.native="enterKey($event)"
+                  ref="inputRef"
+                  style="ime-mode: disabled"
+                  type="tel"
+                  placeholder="请点击输入框进行扫码设置或者扫码录入"
+                  v-model="scanCode"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-button-group>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.native.stop="enterKey()"
+                  style="margin-left: 15px"
+                >添加
+                </el-button>
+              </el-button-group>
+            </el-col>
+          </el-row>
+
+          <el-alert
+            title="扫码结果:"
+            :type="scanResultType"
+            :closable="false"
+            :description="result">
+          </el-alert>
+          <el-alert
+            v-if="warnVisible"
+            title="警告信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="warnResult">
+          </el-alert>
+          <el-alert
+            v-if="errVisible"
+            title="错误信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="errResult">
+          </el-alert>
+        </el-card>
+      </el-form>
+      <el-tabs type="border-card" style="margin: 15px">
+        <el-tab-pane label="关联详情">
+          <div>
+              <el-table v-loading="loading"
+              :data="detailList"
+              style="width: 100%;" max-height="350" height="350"
+              border
+              :row-style="rowStyle"
+              ref="multipleTable">
+                <el-table-column type="index" label="序号" width="50"></el-table-column>
+                <el-table-column label="追溯码" width="250" prop="curCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="层级" width="150" prop="packLayer" show-overflow-tooltip></el-table-column>
+                <el-table-column label="父级编码" width="250" prop="parentCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="操作"  width="80">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="text"
+                      size="small"
+                      @click.native.stop="deleteDetail(scope.row)"
+                    >删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+        </el-tab-pane>
+      </el-tabs>
+
+    </div>
+  </template>
+
+  <script>
+  import {enterCodeWeb} from "@/api/inout/order";
+  import {addRelCode,scanCodeRelCode,deleteDetail} from "@/api/collect/relCode";
+  import A from "@/plugins/KeyScaner";
+  export default {
+    name: "operateRelCode",
+    props: {
+      closeDialog: {
+        type: Function,
+        required: true,
+      },
+      orderQuery: {
+        type: Object,
+        required: true,
+        default: null
+      },
+      resetKey: {
+        type: Function,
+        required: true
+      },
+      opeParentCode:{
+        type: String,
+        required: true,
+        default: null
+      },
+      opeRelFormData:{
+        type: Object,
+        required: true,
+        default: null
+      }
+    },
+    watch: {
+      resetKey(newVal, oldVal) {
+        this.$refs.inputRef.focus();
+      }
+    },
+    data() {
+      return {
+        //扫码相关
+        codeFormData: {
+          code: "",
+          batchNo: null,
+          produceDate: null,
+          expireDate: null,
+          serialNo: null,
+          relId: null,
+        },
+        relFormData: {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          detailList:[]
+        },
+        detailList: [],
+        checkPreInArray: [],
+        errView: 0,
+        actionEnable: false,
+        formRules: {
+          batchNo: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          madeDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          validateDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+        },
+        isScan: true,
+        scanText: "扫码录入：",
+        corpOrderIdDisabled: false,
+        isSupVesion: false,
+        loading: false,
+        index: null,
+        formVisible: false,
+        deleteLoading: false,
+        orderNo: null,
+        fromStorageOptions: [],
+        curRow: null,
+        dialogTableVisible: false,
+        selectRlVisible: false,
+        selectSpaceVisible: false,
+        sitcomScan: false,
+        sictomText: "",
+        originCode: "",
+        checkSuccess: false,
+        codeDetail: null,
+        fromDeptOptions: [],
+        submitLoading: false,
+        scanCode: "",
+        isSuccess: false,
+        result: "",
+        scanResultType: "success",
+        splitType: null,
+        warnResult: "",
+        errResult: "",
+        warnVisible: false,
+        errVisible: false,
+        parentCode:null,
+        bhxjsl:0,
+        syxjsl:0,
+        popDialogVisible:false,
+        title:null,
+        popParentCode:null,
+        popRelFormData:null,
+        popLevel:1,
+      };
+    },
+    methods: {
+      deleteDetail(row) {
+        this.$confirm('确定删除该层级码？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //删除缓存数据
+          let curCode = row.curCode
+          this.detailList = this.detailList.filter(row => row.curCode !== curCode)
+          this.syxjsl = this.syxjsl - 1
+
+          if (row.packLayer > 1) {
+            this.loading = true
+            //去后端触发删除当前码的关系
+            deleteDetail({ curCode: curCode }).then((response) => {
+              this.loading = false
+              if (response.code === 20000) {
+                this.$message.success('删除成功！')
+              } else {
+                this.$message.error(response.message)
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          } else {
+            this.$message.success('删除成功！')
+
+          }
+          this.splitChange()
+        })
+          .catch(() => {
+          })
+      },
+      splitChange() {
+        this.$refs.inputRef.focus();
+      },
+      handleDataSent(data){
+        // this.relFormData = data;
+        // console.log("00000",data)
+      },
+      popCloseDialog() {
+        this.popDialogVisible = false;
+      },
+      //添加条码
+      addCode() {
+        //控制三期
+        if (this.relFormData.batchNo == null) {
+          this.$message.warning("请输入批次号！");
+          return;
+        }
+        if (this.relFormData.madeDate == null) {
+          this.$message.warning("请选择生产日期！");
+          return;
+        }
+        if (this.relFormData.validateDate == null) {
+          this.$message.warning("请选择失效日期！");
+          return;
+        }
+
+        let tQuery = Object.assign(this.codeFormData);
+        tQuery.curCode = this.codeFormData.code;
+        tQuery.parentCode = this.parentCode;
+        scanCodeRelCode(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            let data = response.data;
+            if(data !== null){
+              if(this.detailList.some(item => item.curCode === data.curCode)) {
+                //码重复提示
+                this.$message.warning("录入码重复！");
+                return;
+              } else {
+                if( this.bhxjsl !=0 && this.syxjsl != 0 && this.bhxjsl === this.syxjsl){
+                  //满了自动保存
+                  this.$message.warning("包含下级码已录满！");
+                  return;
+                }
+
+                if (this.relFormData.productCode){
+                  this.detailList.push(data);
+                }
+
+                //存在一个父级关联需-1
+                this.syxjsl = this.detailList.length;
+
+                if( this.bhxjsl === this.syxjsl){
+                    this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
+                      confirmButtonText: "确定",
+                      cancelButtonText: "取消",
+                      type: "warning",
+                    })
+                      .then(() => {
+                        this.relFormData.detailList = this.detailList
+                        //触发保存 切换到上一级别
+                        this.submit()
+                        this.closeDialog()
+                      })
+                      .catch(() => {
+                      });
+                  }
+              }
+              //判断是否是下级
+              if(data.packLayer > 1){
+                this.relFormData.cpmctymc = data.cpmctymc;
+                this.relFormData.productCode = data.productCode;
+                  this.relFormData.subTypeNo = data.subTypeNo;
+                  this.relFormData.cascadeRatio = data.cascadeRatio;
+                  this.relFormData.bhxjsl = data.bhxjsl;
+                  this.relFormData.packageSpec = data.packageSpec;
+                  // this.relFormData.comment = data.comment;
+                  this.relFormData.packLayer = data.packLayer;
+                  this.relFormData.packUnit = data.packUnit;
+                  // this.relFormData.batchNo= data;
+                  // this.relFormData.madeDate= data;
+                  // this.relFormData.validateDate = data;
+                  this.relFormData.workShop = data.workShop;
+                  this.relFormData.lineName = data.lineName;
+                  this.relFormData.lineManager = data.lineManager;
+                  // this.relFormData.detailList:[]
+
+                // this.relFormData = data;
+                this.parentCode = data.curCode;
+                this.bhxjsl = data.bhxjsl;
+                //弹框
+                this.popDialogVisible = true;
+                this.popRelFormData =  this.relFormData;
+                this.title = "手工关联:" + data.curCode;
+                this.popParentCode = data.curCode;
+              }
+            }
+
+          }else{
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      },
+
+      refreshCodesPanel() {
+        this.warnVisible = false;
+        this.errVisible = false;
+      },
+      giveUp() {
+        this.relFormData = {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          detailList: []
+        }
+        this.detailList = []
+        this.parentCode = null
+        this.bhxjsl = 0
+        this.syxjsl = 0
+        this.packLayer = null
+      },
+      submit() {
+        //增加数量是否完全判断
+        if( this.bhxjsl != this.syxjsl){
+          this.$confirm("该层级已录入数量与应录入数量不符, 是否继续提交?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              addRelCode(this.relFormData).then((response) => {
+                this.loading = false;
+                if (response.code === 20000) {
+                  this.$message.success("保存成功！");
+                  this.clearRel();
+                } else {
+                  this.$message.error(response.message);
+                }
+              })
+                .catch(() => {
+                  this.loading = false;
+                  this.clearRel();
+                });
+            })
+            .catch(() => {
+            });
+        }else {
+          addRelCode(this.relFormData).then((response) => {
+            this.loading = false;
+            if (response.code === 20000) {
+              this.$message.success("保存成功！");
+              this.clearRel();
+            } else {
+              this.$message.error(response.message);
+            }
+          }).catch(() => {
+              this.loading = false;
+              this.clearRel();
+            });
+        }
+
+      },
+      // 刷新表单
+      resetForm() {
+        if (this.$refs["dataForm"]) {
+          // 清空验证信息表单
+          this.$refs["dataForm"].clearValidate();
+          // 刷新表单
+          this.$refs["dataForm"].resetFields();
+        }
+      },
+      enterKey(event) {
+        this.warnResult = "";
+        this.errResult = "";
+        this.result = "";
+        this.warnVisible = false;
+        this.errVisible = false;
+
+        this.checkSuccess = true;
+        this.codeFormData.code = this.scanCode.trim();
+        let tQuery = {
+          originCode: this.originCode,
+          code: this.codeFormData.code.trim(),
+        };
+        enterCodeWeb(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            this.printCodeResult(response.data)
+            this.codeFormData.code = response.data.code;
+            this.scanCode = ""
+            this.addCode();
+          } else {
+            if (response.code == 502) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.originCode = this.codeFormData.code;
+            } else if (response.code == 501) {
+              this.checkSuccess = false;
+              this.scanCode = ""
+              this.$message.error(response.message);
+            } else if (response.code == 503) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.$confirm(response.message, "提示", {
+                type: "warning",
+              })
+                .then(() => {
+                  this.codeFormData.code = response.data.code;
+                  this.addCode();
+                })
+                .catch(() => {
+                  this.codeFormData.code = response.data.code;
+                });
+            } else if (response.code == 508) {
+              this.scanCode = ""
+              this.originCode = "";
+              this.codeFormData.code = "01" + response.data.nameCode;
+              this.originCode = this.codeFormData.code;
+            } else {
+              this.$alert(response.message, "提示", {
+                confirmButtonText: "确定",
+                type: "warning",
+                closeOnClickModal: true,
+                callback: (action) => {
+                  this.$refs.inputRef.focus();
+                  this.$refs.inputRef.select();
+                },
+              });
+            }
+          }
+          this.loading = false;
+        });
+
+      },
+      printCodeResult(data, isSuccess) {
+        const resultParts = ["扫码解析结果：" + data.code];
+
+        if (data.udi) {
+          resultParts.push("层级标识: " + data.udi);
+        }
+        if (data.batchNo) {
+          resultParts.push("批次号: " + data.batchNo);
+        }
+        if (data.produceDate) {
+          resultParts.push("生产日期: " + data.produceDate);
+        }
+        if (data.expireDate) {
+          resultParts.push("失效日期: " + data.expireDate);
+        }
+        if (data.serialNo) {
+          resultParts.push("序列号: " + data.serialNo);
+        }
+        this.result = resultParts.join(" , ");
+      },
+      getInputFocus(event) {
+        event.currentTarget.select();
+      },
+
+      clearRel() {
+        this.relFormData = {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          cpmctymc:null,
+        }
+        this.scanCode = "";
+        this.result = "";
+        this.detailList = [];
+        this.bhxjsl = 0;
+        this.syxjsl = 0;
+        this.parentCode = null;
+        this.refreshCodesPanel()
+        this.closeDialog()
+      },
+      init(){
+        if(this.opeParentCode != null){
+          this.parentCode = this.opeParentCode;
+        }
+        if(this.opeRelFormData != null){
+          this.relFormData = this.opeRelFormData;
+          // this.detailList.push(this.relFormData);
+          this.bhxjsl = this.relFormData.bhxjsl;
+        }
+      }
+    },
+    filters: {},
+    mounted() {
+      document.body.ondrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      var that = this;
+      var inputer = document.getElementById("inputer");
+      window.sc = new A.KeyScaner(inputer); //传入要监听的DOM节点
+      sc.onInput = function (text) {
+        if (text.includes("delete")) {
+          that.codeFormData.code = "";
+          that.sictomText = "";
+          that.originCode = "";
+          return;
+        }
+        if (that.sitcomScan) {
+          let tempTxt = text;
+          let str = tempTxt.replace(/[\r]/g, "");
+          that.sictomText = that.sictomText + str;
+          that.codeFormData.code = that.sictomText;
+        } else {
+          that.codeFormData.code = text;
+        }
+      };
+      inputer.focus();
+      this.$refs.inputRef.focus();
+    },
+    beforeDestroy() {
+
+    },
+    created() {
+      this.init();
+    },
+  };
+  </script>
+
+
+  <style scoped>
+  .scroll-alert {
+    width: 100%; /* 或者你需要的宽度 */
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
+    background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
+    padding: 10px;
+    position: relative;
+  }
+
+  .scroll-text {
+    display: inline-block;
+    padding-left: 100%; /* 初始位置在容器右侧 */
+    animation: scroll 10s linear infinite; /* 滚动动画 */
+  }
+
+  @keyframes scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  .query-form-item {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+  #inputer {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #d0d0d0;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  #inputer:focus {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #0080ff;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  .ime-disabled {
+    ime-mode: disabled;
+  }
+
+  .result-display {
+    border: 2px solid #ccc; /* 默认外框颜色 */
+    border-radius: 10px;
+    margin-top: 5px;
+    margin-left: 15px;
+    margin-right: 25px;
+    padding-left: 25px;
+    /* 不设置背景颜色 */
+  }
+
+  .result-success {
+    border-color: #4CAF50; /* 成功时外框颜色 */
+  }
+
+  .result-failure {
+    border-color: #0080ff; /* 失败时外框颜色 */
+  }
+
+  .result-text {
+    height: 18px;
+    /* 你可以在这里设置默认的文本颜色或其他样式 */
+  }
+
+  .result-text-success {
+    color: #4CAF50; /* 成功时文本颜色 */
+    font-size: 14px;
+  }
+
+  .result-text-failure {
+    color: #0080ff; /* 失败时文本颜色 */
+    font-size: 14px;
+  }
+
+  .mar-left {
+    margin-left: 20px;
+  }
+  </style>
+
diff --git a/src/views/collect/relCode/sonRelCodeSpell.vue b/src/views/collect/relCode/sonRelCodeSpell.vue
new file mode 100644
index 0000000..4a791f8
--- /dev/null
+++ b/src/views/collect/relCode/sonRelCodeSpell.vue
@@ -0,0 +1,831 @@
+<template>
+    <div>
+      <el-form
+        :model="relFormData"
+        :rules="formRules"
+        ref="dataForm"
+        @submit.native.prevent
+        label-width="110px"
+      >
+        <el-card>
+          <el-row style="margin-top: 5px; display: flex; align-items: center;">
+            <div style="flex: 1;font-size: 24px">
+              <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+            </div>
+            <div style="margin-left: auto;">
+              <el-button size="mini" type="primary" @click.native="spellBox()" :loading="submitLoading"
+                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailListSpell.length == 0"
+              >拼箱
+              </el-button>
+<!--              <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"-->
+<!--                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailListSpell.length == 0"-->
+<!--              >清空-->
+<!--              </el-button>-->
+              <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
+                         style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailListSpell.length == 0"
+              >提交
+              </el-button>
+            </div>
+
+          </el-row>
+
+          <el-row style="margin-top: 15px;font-size: 20px">
+            <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+              <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+              <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+              <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+              <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+            </el-descriptions>
+          </el-row>
+
+          <el-row style="margin-top: 10px;">
+            <el-divider></el-divider>
+          </el-row>
+
+          <el-row style="margin-top: 2px">
+            <el-col :span="12">
+              <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
+                <el-input
+                  v-model="relFormData.batchNo"
+                  auto-complete="off"
+                  style="width: 90%"
+                  :disabled="this.inputDisabled"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
+                <el-date-picker
+                  v-model="relFormData.madeDate"
+                  type="date"
+                  placeholder="日期"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  style="width: 90%"
+                  :disabled="this.inputDisabled"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
+                <el-date-picker
+                  v-model="relFormData.validateDate"
+                  type="date"
+                  placeholder="日期"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  style="width: 90%"
+                  :disabled="this.inputDisabled"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="comment" class="query-form-item" label="备注:">
+                <el-input
+                  v-model="relFormData.comment"
+                  auto-complete="off"
+                  clearable
+                  style="width: 90%"
+                  placeholder="请输入备注"
+                  :disabled="this.inputDisabled"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-divider></el-divider>
+          <el-row>
+            <el-col :span="18">
+              <el-form-item prop="code" label="扫码录入:">
+                <el-input
+                  id="inputer"
+                  @focus="getInputFocus($event)"
+                  @keypress.enter.native="enterKey($event)"
+                  ref="inputRef"
+                  style="ime-mode: disabled"
+                  type="tel"
+                  placeholder="请点击输入框进行扫码设置或者扫码录入"
+                  v-model="scanCode"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-button-group>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.native.stop="enterKey()"
+                  style="margin-left: 15px"
+                >添加
+                </el-button>
+              </el-button-group>
+            </el-col>
+          </el-row>
+
+          <el-alert
+            title="扫码结果:"
+            :type="scanResultType"
+            :closable="false"
+            :description="result">
+          </el-alert>
+          <el-alert
+            v-if="warnVisible"
+            title="警告信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="warnResult">
+          </el-alert>
+          <el-alert
+            v-if="errVisible"
+            title="错误信息:"
+            type="warning"
+            :closable="true"
+            :dangerouslyUseHTMLString="true"
+            :description="errResult">
+          </el-alert>
+        </el-card>
+      </el-form>
+      <el-tabs type="border-card" style="margin: 15px">
+        <el-tab-pane label="关联详情">
+          <div>
+              <el-table v-loading="loading"
+              :data="detailList"
+              style="width: 100%;" max-height="350" height="350"
+              border
+              :row-style="rowStyle"
+              ref="multipleTable">
+                <el-table-column type="index" label="序号" width="50"></el-table-column>
+                <el-table-column label="追溯码" width="250" prop="curCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="层级" width="150" prop="packLayer" show-overflow-tooltip></el-table-column>
+                <el-table-column label="父级编码" width="250" prop="parentCode" show-overflow-tooltip></el-table-column>
+                <el-table-column label="操作"  width="80">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="text"
+                      size="small"
+                      @click.native.stop="deleteDetail(scope.row)"
+                    >删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+        </el-tab-pane>
+      </el-tabs>
+
+    </div>
+  </template>
+
+  <script>
+  import {enterCodeWeb} from "@/api/inout/order";
+  import {addRelCodeSpellBox,scanCodeRelCode,deleteDetail} from "@/api/collect/relCode";
+  import A from "@/plugins/KeyScaner";
+  export default {
+    name: "operateRelCode",
+    props: {
+      closeDialog: {
+        type: Function,
+        required: true,
+      },
+      orderQuery: {
+        type: Object,
+        required: true,
+        default: null
+      },
+      resetKey: {
+        type: Function,
+        required: true
+      },
+      opeParentCode:{
+        type: String,
+        required: true,
+        default: null
+      },
+      opeRelFormData:{
+        type: Object,
+        required: true,
+        default: null
+      }
+    },
+    watch: {
+      resetKey(newVal, oldVal) {
+        this.$refs.inputRef.focus();
+      }
+    },
+    data() {
+      return {
+        inputDisabled:true,
+        //扫码相关
+        codeFormData: {
+          code: "",
+          batchNo: null,
+          produceDate: null,
+          expireDate: null,
+          serialNo: null,
+          relId: null,
+        },
+        relFormData: {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          detailList:[]
+        },
+        detailList: [],
+        detailListSpell: [],
+        relFormDatas: [],
+        checkPreInArray: [],
+        errView: 0,
+        actionEnable: false,
+        formRules: {
+          batchNo: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          madeDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+          validateDate: [
+            {required: true, message: " ", trigger: "blur"},
+          ],
+        },
+        isScan: true,
+        scanText: "扫码录入：",
+        corpOrderIdDisabled: false,
+        isSupVesion: false,
+        loading: false,
+        index: null,
+        formVisible: false,
+        deleteLoading: false,
+        orderNo: null,
+        fromStorageOptions: [],
+        curRow: null,
+        dialogTableVisible: false,
+        selectRlVisible: false,
+        selectSpaceVisible: false,
+        sitcomScan: false,
+        sictomText: "",
+        originCode: "",
+        checkSuccess: false,
+        codeDetail: null,
+        fromDeptOptions: [],
+        submitLoading: false,
+        scanCode: "",
+        isSuccess: false,
+        result: "",
+        scanResultType: "success",
+        splitType: null,
+        warnResult: "",
+        errResult: "",
+        warnVisible: false,
+        errVisible: false,
+        parentCode:null,
+        bhxjsl:0,
+        syxjsl:0,
+        popDialogVisible:false,
+        title:null,
+        popParentCode:null,
+        popRelFormData:null,
+        popLevel:1,
+      };
+    },
+    methods: {
+      deleteDetail(row) {
+        this.$confirm('确定删除该层级码？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //删除缓存数据
+          let curCode = row.curCode
+          this.detailList = this.detailList.filter(row => row.curCode !== curCode)
+          this.detailListSpell = this.detailListSpell.filter(row => row.curCode !== curCode)
+          this.syxjsl = this.syxjsl - 1
+
+          if (row.packLayer > 1) {
+            this.loading = true
+            //去后端触发删除当前码的关系
+            deleteDetail({ curCode: curCode }).then((response) => {
+              this.loading = false
+              if (response.code === 20000) {
+                this.$message.success('删除成功！')
+              } else {
+                this.$message.error(response.message)
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          } else {
+            this.$message.success('删除成功！')
+
+          }
+          this.splitChange()
+        })
+          .catch(() => {
+          })
+      },
+      splitChange() {
+        this.$refs.inputRef.focus();
+      },
+      handleDataSent(data){
+        // this.relFormData = data;
+        // console.log("00000",data)
+      },
+      popCloseDialog() {
+        this.popDialogVisible = false;
+      },
+      //添加条码
+      addCode() {
+        //控制三期
+        if (this.relFormData.batchNo == null) {
+          this.$message.warning("请输入批次号！");
+          return;
+        }
+        if (this.relFormData.madeDate == null) {
+          this.$message.warning("请选择生产日期！");
+          return;
+        }
+        if (this.relFormData.validateDate == null) {
+          this.$message.warning("请选择失效日期！");
+          return;
+        }
+
+        let tQuery = Object.assign(this.codeFormData);
+        tQuery.curCode = this.codeFormData.code;
+        tQuery.parentCode = this.parentCode;
+        scanCodeRelCode(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            let data = response.data;
+            if(data !== null){
+              if(this.detailList.some(item => item.curCode === data.curCode)) {
+                //码重复提示
+                this.$message.warning("录入码重复！");
+                return;
+              } else {
+                if( this.bhxjsl !=0 && this.syxjsl != 0 && this.bhxjsl === this.syxjsl){
+                  //满了自动保存
+                  this.$message.warning("包含下级码已录满！");
+                  return;
+                }
+
+                if (this.relFormData.productCode){
+                  this.detailList.push(data);
+                  this.detailListSpell.push(data);
+                  this.inputDisabled = true
+                }
+
+                //存在一个父级关联需-1
+                this.syxjsl = this.detailList.length;
+
+                if( this.bhxjsl === this.syxjsl){
+                    this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
+                      confirmButtonText: "确定",
+                      cancelButtonText: "取消",
+                      type: "warning",
+                    })
+                      .then(() => {
+                        this.relFormData.detailList = this.detailList
+                        //触发保存 切换到上一级别
+                        this.submit()
+                        this.closeDialog()
+                      })
+                      .catch(() => {
+                      });
+                  }
+              }
+              //判断是否是下级
+              if(data.packLayer > 1){
+                this.relFormData.cpmctymc = data.cpmctymc;
+                this.relFormData.productCode = data.productCode;
+                  this.relFormData.subTypeNo = data.subTypeNo;
+                  this.relFormData.cascadeRatio = data.cascadeRatio;
+                  this.relFormData.bhxjsl = data.bhxjsl;
+                  this.relFormData.packageSpec = data.packageSpec;
+                  // this.relFormData.comment = data.comment;
+                  this.relFormData.packLayer = data.packLayer;
+                  this.relFormData.packUnit = data.packUnit;
+                  // this.relFormData.batchNo= data;
+                  // this.relFormData.madeDate= data;
+                  // this.relFormData.validateDate = data;
+                  this.relFormData.workShop = data.workShop;
+                  this.relFormData.lineName = data.lineName;
+                  this.relFormData.lineManager = data.lineManager;
+                  // this.relFormData.detailList:[]
+
+                // this.relFormData = data;
+                this.parentCode = data.curCode;
+                this.bhxjsl = data.bhxjsl;
+                //弹框
+                this.popDialogVisible = true;
+                this.popRelFormData =  this.relFormData;
+                this.title = "手工关联:" + data.curCode;
+                this.popParentCode = data.curCode;
+              }
+            }
+
+          }else{
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      },
+
+      refreshCodesPanel() {
+        this.warnVisible = false;
+        this.errVisible = false;
+      },
+      giveUp() {
+        this.relFormData = {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          bhxjsl: null,
+          detailList: []
+        }
+        this.detailList = []
+        this.detailListSpell = []
+        this.parentCode = null
+        this.bhxjsl = 0
+        this.syxjsl = 0
+        this.packLayer = null
+      },
+      spellBox() {
+        this.inputDisabled = false
+        const temp = JSON.parse(JSON.stringify(this.relFormData));
+        temp.detailList = []
+        this.detailListSpell.forEach( item =>{
+          item.flag = 2
+          temp.detailList.push(item)
+        });
+        this.relFormDatas.push(temp)
+        this.detailListSpell = []
+        this.relFormData.detailList = []
+        this.relFormData.batchNo = null
+        this.relFormData.madeDate = null
+        this.relFormData.validateDate = null
+        this.inputDisabled = false
+        // console.log("拼凑箱子详情",this.relFormDatas)
+
+      },
+      submit() {
+        //增加数量是否完全判断
+        if( this.bhxjsl != this.syxjsl){
+          this.$confirm("该层级已录入数量与应录入数量不符, 是否继续提交?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+
+              const temp = JSON.parse(JSON.stringify(this.relFormData));
+              temp.detailList = []
+              this.detailListSpell.forEach( item =>{
+                item.flag = 2
+                temp.detailList.push(item)
+              });
+              this.relFormDatas.push(temp)
+
+              this.loading = true;
+              addRelCodeSpellBox(this.relFormDatas).then((response) => {
+                this.loading = false;
+                if (response.code === 20000) {
+                  this.$message.success("保存成功！");
+                  this.clearRel();
+                } else {
+                  this.$message.error(response.message);
+                }
+              })
+                .catch(() => {
+                  this.loading = false;
+                  this.clearRel();
+                });
+            })
+            .catch(() => {
+            });
+        }else {
+          const temp = JSON.parse(JSON.stringify(this.relFormData));
+          temp.detailList = []
+          this.detailListSpell.forEach( item =>{
+            item.flag = 2
+            temp.detailList.push(item)
+          });
+          this.relFormDatas.push(temp)
+
+          this.loading = true;
+          addRelCodeSpellBox(this.relFormDatas).then((response) => {
+            this.loading = false;
+            if (response.code === 20000) {
+              this.$message.success("保存成功！");
+              this.clearRel();
+            } else {
+              this.$message.error(response.message);
+            }
+          }).catch(() => {
+              this.loading = false;
+              this.clearRel();
+            });
+        }
+
+      },
+      // 刷新表单
+      resetForm() {
+        if (this.$refs["dataForm"]) {
+          // 清空验证信息表单
+          this.$refs["dataForm"].clearValidate();
+          // 刷新表单
+          this.$refs["dataForm"].resetFields();
+        }
+      },
+      enterKey(event) {
+        this.warnResult = "";
+        this.errResult = "";
+        this.result = "";
+        this.warnVisible = false;
+        this.errVisible = false;
+
+        this.checkSuccess = true;
+        this.codeFormData.code = this.scanCode.trim();
+        let tQuery = {
+          originCode: this.originCode,
+          code: this.codeFormData.code.trim(),
+        };
+        enterCodeWeb(tQuery).then((response) => {
+          if (response.code === 20000) {
+            this.$refs.inputRef.focus();
+            this.$refs.inputRef.select();
+            this.isSuccess = true;
+            this.printCodeResult(response.data)
+            this.codeFormData.code = response.data.code;
+            this.scanCode = ""
+            this.addCode();
+          } else {
+            if (response.code == 502) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.originCode = this.codeFormData.code;
+            } else if (response.code == 501) {
+              this.checkSuccess = false;
+              this.scanCode = ""
+              this.$message.error(response.message);
+            } else if (response.code == 503) {
+              this.checkSuccess = false;
+              this.isSuccess = false;
+              this.scanCode = ""
+              this.printCodeResult(response.data)
+              this.codeFormData.code = response.data.code;
+              this.$confirm(response.message, "提示", {
+                type: "warning",
+              })
+                .then(() => {
+                  this.codeFormData.code = response.data.code;
+                  this.addCode();
+                })
+                .catch(() => {
+                  this.codeFormData.code = response.data.code;
+                });
+            } else if (response.code == 508) {
+              this.scanCode = ""
+              this.originCode = "";
+              this.codeFormData.code = "01" + response.data.nameCode;
+              this.originCode = this.codeFormData.code;
+            } else {
+              this.$alert(response.message, "提示", {
+                confirmButtonText: "确定",
+                type: "warning",
+                closeOnClickModal: true,
+                callback: (action) => {
+                  this.$refs.inputRef.focus();
+                  this.$refs.inputRef.select();
+                },
+              });
+            }
+          }
+          this.loading = false;
+        });
+
+      },
+      printCodeResult(data, isSuccess) {
+        const resultParts = ["扫码解析结果：" + data.code];
+
+        if (data.udi) {
+          resultParts.push("层级标识: " + data.udi);
+        }
+        if (data.batchNo) {
+          resultParts.push("批次号: " + data.batchNo);
+        }
+        if (data.produceDate) {
+          resultParts.push("生产日期: " + data.produceDate);
+        }
+        if (data.expireDate) {
+          resultParts.push("失效日期: " + data.expireDate);
+        }
+        if (data.serialNo) {
+          resultParts.push("序列号: " + data.serialNo);
+        }
+        this.result = resultParts.join(" , ");
+      },
+      getInputFocus(event) {
+        event.currentTarget.select();
+      },
+
+      clearRel() {
+        this.relFormData = {
+          productCode: null,
+          subTypeNo: null,
+          cascadeRatio: null,
+          packageSpec: null,
+          comment: null,
+          batchNo: null,
+          madeDate: null,
+          validateDate: null,
+          workShop: null,
+          lineName: null,
+          lineManager: null,
+          packUnit: null,
+          cpmctymc:null,
+        }
+        this.scanCode = "";
+        this.result = "";
+        this.detailList = [];
+        this.detailListSpell = []
+        this.bhxjsl = 0;
+        this.syxjsl = 0;
+        this.parentCode = null;
+        this.inputDisabled = false
+        this.refreshCodesPanel()
+        this.closeDialog()
+      },
+      init(){
+        if(this.opeParentCode != null){
+          this.parentCode = this.opeParentCode;
+        }
+        if(this.opeRelFormData != null){
+          this.relFormData = this.opeRelFormData;
+          // this.detailList.push(this.relFormData);
+          this.bhxjsl = this.relFormData.bhxjsl;
+        }
+      }
+    },
+    filters: {},
+    mounted() {
+      document.body.ondrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      var that = this;
+      var inputer = document.getElementById("inputer");
+      window.sc = new A.KeyScaner(inputer); //传入要监听的DOM节点
+      sc.onInput = function (text) {
+        if (text.includes("delete")) {
+          that.codeFormData.code = "";
+          that.sictomText = "";
+          that.originCode = "";
+          return;
+        }
+        if (that.sitcomScan) {
+          let tempTxt = text;
+          let str = tempTxt.replace(/[\r]/g, "");
+          that.sictomText = that.sictomText + str;
+          that.codeFormData.code = that.sictomText;
+        } else {
+          that.codeFormData.code = text;
+        }
+      };
+      inputer.focus();
+      this.$refs.inputRef.focus();
+    },
+    beforeDestroy() {
+
+    },
+    created() {
+      this.init();
+    },
+  };
+  </script>
+
+
+  <style scoped>
+  .scroll-alert {
+    width: 100%; /* 或者你需要的宽度 */
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
+    background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
+    padding: 10px;
+    position: relative;
+  }
+
+  .scroll-text {
+    display: inline-block;
+    padding-left: 100%; /* 初始位置在容器右侧 */
+    animation: scroll 10s linear infinite; /* 滚动动画 */
+  }
+
+  @keyframes scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  .query-form-item {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+  #inputer {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #d0d0d0;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  #inputer:focus {
+    width: 100%;
+    min-height: 30px;
+    background-color: white;
+    border: #0080ff;
+    border-style: solid;
+    border-width: 0.1px;
+    color: #4a4a4a;
+  }
+
+  .ime-disabled {
+    ime-mode: disabled;
+  }
+
+  .result-display {
+    border: 2px solid #ccc; /* 默认外框颜色 */
+    border-radius: 10px;
+    margin-top: 5px;
+    margin-left: 15px;
+    margin-right: 25px;
+    padding-left: 25px;
+    /* 不设置背景颜色 */
+  }
+
+  .result-success {
+    border-color: #4CAF50; /* 成功时外框颜色 */
+  }
+
+  .result-failure {
+    border-color: #0080ff; /* 失败时外框颜色 */
+  }
+
+  .result-text {
+    height: 18px;
+    /* 你可以在这里设置默认的文本颜色或其他样式 */
+  }
+
+  .result-text-success {
+    color: #4CAF50; /* 成功时文本颜色 */
+    font-size: 14px;
+  }
+
+  .result-text-failure {
+    color: #0080ff; /* 失败时文本颜色 */
+    font-size: 14px;
+  }
+
+  .mar-left {
+    margin-left: 20px;
+  }
+  </style>
+