【订单入仓】选择储位，只有区域没有仓位时不能提交，实际上已选择成功了，页面关不掉

http://zentao.jdshangmen.com/bug-view-941.html

src/components/WarehouseAreaDialog/index.vue

@@ -13,7 +13,7 @@
             <div style="text-align: center">区域</div>
             <div style="background-color: #efefef;padding: 10px 10px 0;border: #dcdcdc solid 1px;border-radius: 2px">
               <el-row :gutter="20">
-               <el-col :span="12" v-for="(warehouse, i) in item.children" :key="i">
+               <el-col :span="12" v-for="warehouse in item.children" :key="warehouse.id">
                  <div
                    class="warehouse-block"
                    :class="{'warehouse-block-selected': warehouse.selected, 'warehouse-block-active': warehouse.id === activeWarehouse.id}"
@@ -28,14 +28,25 @@
           <div>
             <div style="text-align: center">仓位</div>
             <div class="position-group">
-              <div class="position" v-for="position in activeWarehouse.positionList" :key="item.id">
-                <div
-                  class="position-item"
-                  v-for="item in position.children"
-                  @click="handleSelectPosition(item)"
-                  :class="{'position-item-active': item.selected}">
-                  {{ item.code }}
-                </div>
+              <div class="position" v-for="position in activeWarehouse.positionList" :key="position.id" @click="handleSelectPosition(position)">
+                <template v-if="position.children">
+                  <div
+                    class="position-item"
+                    v-for="item in position.children"
+                    :key="item.id"
+                    @click.stop="handleSelectPositionChild(item)"
+                    :class="{'position-item-active': item.selected}">
+                    {{ item.code }}
+                  </div>
+                </template>
+                <template v-else>
+                  <div
+                    class="position-item"
+
+                    :class="{'position-item-active': position.selected}">
+                    {{ position.code }}
+                  </div>
+                </template>
               </div>
             </div>
           </div>
@@ -100,6 +111,7 @@ export default {
               f.selected = false
               if(f.positionList) f.positionList.forEach(g => {
                 // 位置
+                g.selected = false
                 g.children?.forEach(k => {
                   // 子位置
                   k.selected = false
@@ -134,14 +146,15 @@ export default {
         warehouse.selected = true
 
         // 区域被选，清空该区域下的位置
-        if(warehouse.positionList) warehouse.positionList.forEach(g => {
+        if(warehouse.positionList) warehouse.positionList?.forEach(g => {
+          g.selected = false
           g.children?.forEach(k => {
             k.selected = false
           })
         })
       }
     },
-    handleSelectPosition(position) {
+    handleSelectPositionChild(position) {
       if (!!position.selected) {
         position.selected = false
 
@@ -150,7 +163,7 @@ export default {
         if (!parentAre.selected) {
           // 检查父区域下是否所有位置被反选
           let hasSelected = false
-          parentAre.positionList.forEach(g => {
+          parentAre.positionList?.forEach(g => {
             // 位置
             g.children?.forEach(k => {
               // 子位置
@@ -166,6 +179,17 @@ export default {
         // 选位置时，父区域反选
         this.area.find(e => e.id === position.domainId).children.find(f => f.id === position.areaId).selected = false
 
+      }
+    },
+    handleSelectPosition(position) {
+      if (!!position.selected) {
+        position.selected = false
+      } else {
+        position.selected = true
+
+        // 选位置时，父区域反选
+        this.area.find(e => e.id === position.domainId).children.find(f => f.id === position.areaId).selected = false
+
       }
     }
   },
@@ -179,15 +203,15 @@ export default {
     selected() {
       const result = []
 
-      this.area.forEach(e => {
+      this.area?.forEach(e => {
         // 仓库
-        e.children.forEach(f => {
+        e.children?.forEach(f => {
           // 区域
           if (f.selected) result.push(f.code)
-          else if(f.positionList) f.positionList.forEach(g => {
+          else f.positionList?.forEach(g => {
             // 位置
-            if (g.selected) result.push(k.code)
-            g.children?.forEach(k => {
+            if (g.selected) result.push(g.code)
+            else if(g.children) g.children?.forEach(k => {
               // 子位置
               if (k.selected) result.push(k.code)
             })
@@ -200,33 +224,35 @@ export default {
     inputValue(){
       const result = []
 
-      this.area.forEach(e => {
+      this.area?.forEach(e => {
         // 仓库
-        e.children.forEach(f => {
+        e.children?.forEach(f => {
           // 区域
           if (f.selected) result.push({
             orderId: this.orderId,
             wareId: f.pid,
             areaId: f.id
           })
-          else if(f.positionList) f.positionList.forEach(g => {
-            // 位置
-            if (g.selected) result.push({
-              orderId: this.orderId,
-              wareId: g.domainId,
-              areaId: g.areaId,
-              locationId: g.id
-            })
-            else g.children.forEach(k => {
-              // 子位置
-              if (k.selected) result.push({
+          else {
+            f.positionList?.forEach(g => {
+              // 位置
+              if (g.selected) result.push({
                 orderId: this.orderId,
-                wareId: k.domainId,
-                areaId: k.areaId,
-                locationId: k.id
+                wareId: g.domainId,
+                areaId: g.areaId,
+                locationId: g.id
+              })
+              else g.children?.forEach(k => {
+                // 子位置
+                if (k.selected) result.push({
+                  orderId: this.orderId,
+                  wareId: k.domainId,
+                  areaId: k.areaId,
+                  locationId: k.id
+                })
               })
             })
-          })
+          }
         })
       })
 
@@ -269,9 +295,10 @@ export default {
   border: 1px #EFEFEF solid;
   gap: 1px;
   min-height: 64px;
+  flex-flow: wrap;
 }
 .position{
-  width: 20%;
+  width: calc(20% - 1px);
   height: 64px;
   display: flex;
   flex-direction: column;