关联关系界面修改

src/views/collect/relCode/operateRelCode.vue

@@ -7,12 +7,18 @@
       @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>
+            <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"
@@ -27,8 +33,61 @@
 
         </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-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="this.parentCode ?'请点击输入框进行扫码设置或者扫码录入':'请先扫码选入产品'"
+                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-divider></el-divider>
+
+        <el-row style="margin-top: 6px;font-size: 20px">
+          <el-descriptions :column="4" border label-style="width:75px" style="margin-top: 6px;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>
@@ -93,57 +152,6 @@
             </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="this.parentCode ?'请点击输入框进行扫码设置或者扫码录入':'请先扫码选入产品'"
-                  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">
@@ -186,18 +194,19 @@
       <sonRelCode
         :closeDialog="this.popCloseDialog"
         :opeParentCode="this.popParentCode"
-          :opeRelFormData ="this.popRelFormData"
+        :opeRelFormData="this.popRelFormData"
       ></sonRelCode>
     </el-dialog>
   </div>
-  </template>
+</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";
 
-  <script>
+export default {
-  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: {
@@ -237,7 +246,7 @@
         packUnit: null,
         bhxjsl: null,
         packLayer: null,
-          detailList:[]
+        detailList: []
       },
       detailList: [],
       checkPreInArray: [],
@@ -284,14 +293,14 @@
       errResult: "",
       warnVisible: false,
       errVisible: false,
-        parentCode:null,
+      parentCode: null,
-        bhxjsl:0,
+      bhxjsl: 0,
-        syxjsl:0,
+      syxjsl: 0,
       packLayer: null,
-        popDialogVisible:false,
+      popDialogVisible: false,
-        title:null,
+      title: null,
-        popParentCode:null,
+      popParentCode: null,
-        popRelFormData:{
+      popRelFormData: {
         productCode: null,
         subTypeNo: null,
         cascadeRatio: null,
@@ -305,9 +314,9 @@
         lineManager: null,
         packUnit: null,
         bhxjsl: null,
-          detailList:[]
+        detailList: []
       },
-        popLevel:1,
+      popLevel: 1,
     };
   },
   components: {
@@ -328,7 +337,7 @@
         if (row.packLayer > 1) {
           this.loading = true
           //去后端触发删除当前码的关系
-            deleteDetail({ curCode: curCode }).then((response) => {
+          deleteDetail({curCode: curCode}).then((response) => {
             this.loading = false
             if (response.code === 20000) {
               this.$message.success('删除成功！')
@@ -354,7 +363,7 @@
       this.popDialogVisible = false;
 
 
-        if( this.bhxjsl === this.syxjsl){
+      if (this.bhxjsl === this.syxjsl) {
         this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
@@ -366,7 +375,7 @@
           })
           .catch(() => {
           });
-        }else {
+      } else {
         this.$refs.inputRef.focus();
       }
 
@@ -398,9 +407,9 @@
           this.$refs.inputRef.select();
           this.isSuccess = true;
           let data = response.data;
-            if(data !== null){
+          if (data !== null) {
             //1.确定是否为最大层级
-              if (this.parentCode == null){
+            if (this.parentCode == null) {
               if (data.packLayer == 1) {
                 this.$message.warning("该层级为最小包装层级无需进行码关联操作！");
                 return;
@@ -420,20 +429,20 @@
               this.parentCode = data.curCode;
               this.bhxjsl = data.bhxjsl;
               this.detailList = [];
-              }else {
+            } else {
-                if(this.detailList.some(item => item.curCode === data.curCode)) {
+              if (this.detailList.some(item => item.curCode === data.curCode)) {
                 //码重复提示
                 this.$message.warning("录入码重复！");
                 return;
               } else {
-                  if(this.bhxjsl === this.syxjsl){
+                if (this.bhxjsl === this.syxjsl) {
                   //满了自动保存
                   this.$message.warning("包含下级码已录满！");
                   return;
                 }
               }
               //判断是否是下级
-                if(data.packLayer == this.relFormData.packLayer) {
+              if (data.packLayer == this.relFormData.packLayer) {
                 //非当前编码的子层级码 是否进行替换操作
                 this.$confirm("非当前编码的子层级码,是否进行替换操作?", "提示", {
                   confirmButtonText: "确定",
@@ -459,13 +468,13 @@
                   .catch(() => {
                     return;
                   });
-                }else if(data.packLayer == (this.relFormData.packLayer-1) ) {
+              } else if (data.packLayer == (this.relFormData.packLayer - 1)) {
                 //下级码
                 this.detailList.push(data);
                 this.syxjsl = this.detailList.length;
 
                 //判断是否还有下级码 如果有进行弹窗 关联
-                  if (data.packLayer > 1 && data.bhxjsl > 0){
+                if (data.packLayer > 1 && data.bhxjsl > 0) {
                   this.popRelFormData.cpmctymc = data.cpmctymc;
                   this.popRelFormData.productCode = data.productCode;
                   this.popRelFormData.subTypeNo = data.subTypeNo;
@@ -486,8 +495,8 @@
                   this.popDialogVisible = true;
                   this.title = "手工关联:" + data.curCode;
                   this.popParentCode = data.curCode;
-                  }else {
+                } else {
-                    if( this.bhxjsl === this.syxjsl){
+                  if (this.bhxjsl === this.syxjsl) {
                     this.$confirm("该层级已录入完成, 是否关闭?", "提示", {
                       confirmButtonText: "确定",
                       cancelButtonText: "取消",
@@ -504,7 +513,7 @@
               }
             }
           }
-          }else{
+        } else {
           this.$message.error(response.message);
         }
         this.loading = false;
@@ -564,7 +573,7 @@
 
     },
     submit(val) {
-        if(this.detailList == null || this.detailList.length == 0){
+      if (this.detailList == null || this.detailList.length == 0) {
         this.$message.warning("请先录入关联码！");
         return;
       }
@@ -583,12 +592,12 @@
 
 
       this.$set(this.relFormData, 'detailList', []);
-        this.detailList.forEach( item =>{
+      this.detailList.forEach(item => {
         this.relFormData.detailList.push(item)
       });
 
       //增加数量是否完全判断
-        if( this.bhxjsl != this.syxjsl){
+      if (this.bhxjsl != this.syxjsl) {
         this.$confirm("该层级已录入数量与应录入数量不符, 是否继续提交?", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
@@ -612,7 +621,7 @@
           })
           .catch(() => {
           });
-        }else {
+      } else {
         this.loading = true;
         addRelCode(this.relFormData).then((response) => {
           this.loading = false;
@@ -748,7 +757,7 @@
         lineName: null,
         lineManager: null,
         packUnit: null,
-          cpmctymc:null,
+        cpmctymc: null,
       }
       this.scanCode = "";
       this.result = "";
@@ -758,8 +767,8 @@
       this.parentCode = null;
       this.refreshCodesPanel()
     },
-      init(){
+    init() {
-        if(this.orderQuery != null){
+      if (this.orderQuery != null) {
         this.relFormData = this.orderQuery;
         this.bhxjsl = this.orderQuery.bhxjsl;
       }
@@ -799,12 +808,12 @@
   created() {
     this.init();
   },
-  };
+};
-  </script>
+</script>
 
 
-  <style scoped>
+<style scoped>
-  .scroll-alert {
+.scroll-alert {
   width: 100%; /* 或者你需要的宽度 */
   overflow: hidden;
   white-space: nowrap;
@@ -813,29 +822,29 @@
   background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
   padding: 10px;
   position: relative;
-  }
+}
 
-  .scroll-text {
+.scroll-text {
   display: inline-block;
   padding-left: 100%; /* 初始位置在容器右侧 */
   animation: scroll 10s linear infinite; /* 滚动动画 */
-  }
+}
 
-  @keyframes scroll {
+@keyframes scroll {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-100%);
   }
-  }
+}
 
-  .query-form-item {
+.query-form-item {
   margin-right: 5px;
   margin-bottom: 6px;
-  }
+}
 
-  #inputer {
+#inputer {
   width: 100%;
   min-height: 30px;
   background-color: white;
@@ -843,9 +852,9 @@
   border-style: solid;
   border-width: 0.1px;
   color: #4a4a4a;
-  }
+}
 
-  #inputer:focus {
+#inputer:focus {
   width: 100%;
   min-height: 30px;
   background-color: white;
@@ -853,13 +862,13 @@
   border-style: solid;
   border-width: 0.1px;
   color: #4a4a4a;
-  }
+}
 
-  .ime-disabled {
+.ime-disabled {
   ime-mode: disabled;
-  }
+}
 
-  .result-display {
+.result-display {
   border: 2px solid #ccc; /* 默认外框颜色 */
   border-radius: 10px;
   margin-top: 5px;
@@ -867,33 +876,33 @@
   margin-right: 25px;
   padding-left: 25px;
   /* 不设置背景颜色 */
-  }
+}
 
-  .result-success {
+.result-success {
   border-color: #4CAF50; /* 成功时外框颜色 */
-  }
+}
 
-  .result-failure {
+.result-failure {
   border-color: #0080ff; /* 失败时外框颜色 */
-  }
+}
 
-  .result-text {
+.result-text {
   height: 18px;
   /* 你可以在这里设置默认的文本颜色或其他样式 */
-  }
+}
 
-  .result-text-success {
+.result-text-success {
   color: #4CAF50; /* 成功时文本颜色 */
   font-size: 14px;
-  }
+}
 
-  .result-text-failure {
+.result-text-failure {
   color: #0080ff; /* 失败时文本颜色 */
   font-size: 14px;
-  }
+}
 
-  .mar-left {
+.mar-left {
   margin-left: 20px;
-  }
+}
-  </style>
+</style>
 

src/views/collect/relCode/operateRelCodeSpell.vue

@@ -28,9 +28,56 @@
                 >提交
                 </el-button>
               </div>
-
             </el-row>
-
+          <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="this.parentCode ?'请点击输入框进行扫码设置或者扫码录入':'请先扫码选入产品'"
+                  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-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>
@@ -98,56 +145,7 @@
               </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="this.parentCode ?'请点击输入框进行扫码设置或者扫码录入':'请先扫码选入产品'"
-                  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">