储位选择弹窗 交互

src/views/ecw/order/index.vue

@@ -130,6 +130,8 @@
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
             v-hasPermi="['ecw:order:update']">编辑</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="$router.push('/order/warehousing?id=' + scope.row.orderId)"
+            v-hasPermi="['ecw:order:update']">入仓</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
             v-hasPermi="['ecw:order:update']">退仓</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"

src/views/ecw/order/warehousing/components/warehouse-area-dialog.vue

@@ -6,16 +6,16 @@
       width="600px"
       :before-close="handleClose()"
     >
-      <el-tabs v-model="activeName" type="card">
+      <el-tabs v-model="activeName" type="card" @tab-click="activeWarehouse = {}">
         <el-tab-pane :label="item.name" :name="'' + index" v-for="(item, index) in area" :key="index">
           <div>
             <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="10">
+              <el-row :gutter="20">
                <el-col :span="12" v-for="(warehouse, i) in item.children" :key="i">
                  <div
-                   class="warehouse-block warehouse-block-selected"
-                   :class="{active: selected.find(domain => domain.pid === warehouse.id)}"
+                   class="warehouse-block"
+                   :class="{'warehouse-block-selected': warehouse.selected, 'warehouse-block-active': warehouse.id === activeWarehouse.id}"
                    @click="handleSelectWarehouse(warehouse)"
                  >
                    {{ warehouse.name }}
@@ -26,10 +26,20 @@
           </div>
           <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>
+            </div>
           </div>
           <el-divider></el-divider>
-          已选择：
+          已选择：{{ selected.join(', ') }}
           <el-divider></el-divider>
         </el-tab-pane>
       </el-tabs>
@@ -58,9 +68,12 @@ export default {
       opened: false,
       key: 0,
 
+      orderId: '',
       area: [],
       activeName: '0',
-      selected: []
+      selectedWarehouse: [],
+      selectedPosition: [],
+      activeWarehouse: {}
     };
   },
 
@@ -82,7 +95,46 @@ export default {
   methods: {
     handleClose() {},
     handleSelectWarehouse(warehouse) {
-      console.log(warehouse)
+      this.activeWarehouse = warehouse
+      if (!!warehouse.selected) {
+        warehouse.selected = false
+      } else {
+        warehouse.selected = true
+
+        // 区域被选，清空该区域下的位置
+        warehouse.positionList.forEach(g => {
+          g.children.forEach(k => {
+            k.selected = false
+          })
+        })
+      }
+    },
+    handleSelectPosition(position) {
+      if (!!position.selected) {
+        position.selected = false
+
+        // 反选位置时，检查父区域下是否所有位置被反选，若是，选父区域
+        const parentAre = this.area.find(e => e.id === position.domainId).children.find(f => f.id === position.areaId)
+        if (!parentAre.selected) {
+          // 检查父区域下是否所有位置被反选
+          let hasSelected = false
+          parentAre.positionList.forEach(g => {
+            // 位置
+            g.children.forEach(k => {
+              // 子位置
+              if (k.selected) hasSelected = true
+            })
+          })
+          // 所有子位置被反选，选父区域
+          if (!hasSelected) parentAre.selected = true
+        }
+      } else {
+        position.selected = true
+
+        // 选位置时，父区域反选
+        this.area.find(e => e.id === position.domainId).children.find(f => f.id === position.areaId).selected = false
+
+      }
     }
   },
 
@@ -92,9 +144,48 @@ export default {
     }
 
     getByWarehouseId().then(r => {
-      this.area = r.data
+      const area = r.data
+      area.forEach(e => {
+        // 仓库
+        e.children.forEach(f => {
+          // 区域
+          f.selected = false
+          f.positionList.forEach(g => {
+            // 位置
+            g.children.forEach(k => {
+              // 子位置
+              k.selected = false
+            })
+          })
+        })
+      })
+      this.area = area
     })
   },
+
+  computed: {
+    selected() {
+      const result = []
+
+      this.area.forEach(e => {
+        // 仓库
+        e.children.forEach(f => {
+          // 区域
+          if (f.selected) result.push(f.code)
+          f.positionList.forEach(g => {
+            // 位置
+            g.children.forEach(k => {
+              // 子位置
+
+              if (k.selected) result.push(k.code)
+            })
+          })
+        })
+      })
+
+      return result
+    }
+  }
 }
 </script>
 
@@ -105,14 +196,58 @@ export default {
   height: 42px;
   line-height: 42px;
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
   cursor: pointer;
+  transition: 0.5s;
+  box-shadow: #bfbfbf 3px 3px 14px 0;
 }
-.warehouse-block:hover, .warehouse-block .active{
-  color: #ffffff;
-  background-color: #388fe5;
+.warehouse-block:hover{
+  opacity: 0.9;
+  transition: 0.5s;
+  transform: scale(1.02);
+  box-shadow: #8f8f8f 7px 5px 14px 0;
+}
+.warehouse-block-active{
+  box-shadow: #7e9dbd 7px 5px 14px 0;
+  transform: scale(1.04);
 }
 .warehouse-block-selected{
-  border: #388fe5 solid 5px;
+  color: #ffffff;
+  background-color: #4085e3;
+}
+.position-group{
+  display: flex;
+  background-color: #EFEFEF;
+  border: 1px #EFEFEF solid;
+  gap: 1px;
+  min-height: 64px;
+}
+.position{
+  width: 20%;
+  height: 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.position-item{
+  width: 100%;
+  background-color: #FFFFFF;
+  flex: 1;
+  cursor: pointer;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.position-item:hover{
+  background-color: #d7dbe3;
+}
+.position-item-active{
+  background-color: #4085e3;
+  color: white;
+}
+.position-item-active:hover{
+  background-color: #4085e3;
+  opacity: 0.8;
 }
 </style>

src/views/ecw/order/warehousing/index.vue

 <template>
   <div class="app-container">
-    <h2>入仓操作-NC1231231N</h2>
+    <h2>入仓操作-{{ order.orderNo }}</h2>
 
     <order-base-info :order="order"></order-base-info>
 
-    <div style="margin-top: 10px">
-      <span>储位：</span><el-button type="primary" size="mini">选择</el-button>
+    <div style="margin-top: 20px">
+      <span>储位：</span><el-button type="primary" size="mini" @click="areaVisible = true">选择</el-button>
     </div>
 
     <h2>货物信息</h2>
@@ -154,6 +154,8 @@
         <el-button type="primary">完成入仓</el-button>
       </div>
     </el-form>
+
+    <warehouse-area-dialog :visible.sync="areaVisible"></warehouse-area-dialog>
   </div>
 </template>
 
@@ -161,20 +163,26 @@
 import {getCurrencyList} from "@/api/ecw/currency"
 import {getOrder} from "@/api/ecw/order"
 import orderBaseInfo from "@/views/ecw/order/warehousing/components/orderBaseInfo"
+import WarehouseAreaDialog from '@/views/ecw/order/warehousing/components/warehouse-area-dialog'
 
 export default {
   name: "Warehousing",
 
   components: {
-    orderBaseInfo
+    orderBaseInfo,
+    WarehouseAreaDialog
   },
 
   mounted() {
+    if(this.$route.query.id){
+      this.orderId = this.$route.query.id
+      getOrder(this.orderId).then(r => this.order = r.data)
+    }
     getCurrencyList().then(res => this.currencyList = res.data)
-    getOrder(15).then(r => this.order = r.data)
   },
   data() {
     return {
+      areaVisible: false,
       form: {
         a: '',
         b: 3