后台入仓操作、补充、修改储位规则调整-前

https://zentao.test.jdshangmen.com/task-view-1635.html

src/components/WarehouseAreaSelect/index.vue

 <template>
   <div>
-    <div class="area-code"></div>
-    <el-button type="primary" size="mini" @click="dialogVisible = true">选择</el-button>
+    <div class="area-code">{{ selected.join(', ') }}</div>
+    <el-button v-show="!readonly" type="primary" size="mini" @click="handleOpen">选择</el-button>
 
     <el-dialog
       title="提示"
@@ -9,44 +9,344 @@
       width="30%"
       append-to-body
       :before-close="handleClose">
-      <span>这是一段信息</span>
+      <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">{{$t('区域')}}</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 in item.children" :key="warehouse.id">
+                  <div
+                    class="warehouse-block"
+                    :class="{'warehouse-block-selected': warehouse.selected, 'warehouse-block-active': warehouse.id === activeWarehouse.id}"
+                    @click="handleSelectWarehouse(warehouse)"
+                  >
+                    {{ warehouse.name }}
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <div>
+            <div style="text-align: center">{{$t('仓位')}}</div>
+            <div class="position-group">
+              <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>
+          <el-divider></el-divider>
+          {{$t('已选择')}}：{{ selected.join(', ') }}
+          <el-divider></el-divider>
+        </el-tab-pane>
+      </el-tabs>
       <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    <el-button type="primary" @click="handleSave">确 定</el-button>
   </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import {getByWarehouseId} from "@/api/ecw/warehouseArea"
+import {saveOrUpdateOrderLocation} from "@/api/ecw/order"
+
 export default {
   name: "WarehouseAreaSelect",
 
   props: {
-    input: {
+    value: {
       type: Array,
       default: () => []
+    },
+    orderId: Number,
+    warehouseId: {
+      type: Number,
+      default: undefined
+    },
+    // 是否入仓修改
+    isEditing: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
 
   data() {
     return {
-      dialogVisible: false
+      dialogVisible: false,
+      activeName: '0',
+      activeWarehouse: {},
+      area: [],
     }
   },
 
-  methods: {
-    handleClose(done) {
-      this.$confirm('确认关闭？')
-        .then(_ => {
-          done();
+  mounted() {
+    this.initArea()
+  },
+
+  computed: {
+    // code array
+    selected() {
+      const result = []
+
+      this.area?.forEach(e => {
+        // 仓库
+        e.children?.forEach(f => {
+          // 区域
+          if (f.selected) result.push(f.code)
+          else f.positionList?.forEach(g => {
+            // 位置
+            if (g.selected) result.push(f.code + g.code)
+            else if(g.children) g.children?.forEach(k => {
+              // 子位置
+              if (k.selected) result.push(f.code + k.code)
+            })
+          })
+        })
+      })
+
+      return result
+    },
+    inputValue(){
+      const result = []
+
+      this.area?.forEach(e => {
+        // 仓库
+        e.children?.forEach(f => {
+          // 区域
+          if (f.selected) result.push({
+            orderId: this.orderId,
+            wareId: f.pid,
+            areaId: f.id
+          })
+          else {
+            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({
+                  orderId: this.orderId,
+                  wareId: k.domainId,
+                  areaId: k.areaId,
+                  locationId: k.id
+                })
+              })
+            })
+          }
         })
-        .catch(_ => {});
+      })
+
+      return result
     }
+  },
+
+  methods: {
+    handleOpen(){
+      this.dialogVisible = true
+      this.initArea()
+    },
+    handleSave(){
+      this.$emit('input', this.inputValue)
+      this.dialogVisible = false
+
+      if (this.isEditing) {
+        this.$nextTick(() => {
+          saveOrUpdateOrderLocation({
+            "orderId": this.orderId,
+            "orderLocationCreateReqVOList": this.inputValue
+          })
+        })
+      }
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSelectWarehouse(warehouse) {
+      this.activeWarehouse = warehouse
+      if (!!warehouse.selected) {
+        warehouse.selected = false
+        return
+      } else if(this.activeWarehouseId !== warehouse.id) {
+        this.activeWarehouseId = warehouse.id
+        if (this.inputValue.find(e => e.areaId === warehouse.id)){
+          return
+        }
+      }
+      warehouse.selected = true
+
+      // 区域被选，清空该区域下的位置
+      if(warehouse.positionList) warehouse.positionList?.forEach(g => {
+        g.selected = false
+        g.children?.forEach(k => {
+          k.selected = false
+        })
+      })
+    },
+    handleSelectPositionChild(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
+
+      }
+    },
+    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
+
+      }
+    },
+
+    initArea(){
+      return getByWarehouseId({ warehouseId: this.warehouseId }).then(r => {
+        const area = r.data
+        area.forEach(e => {
+          // 仓库
+          e.children?.forEach(f => {
+            // 区域
+            f.selected = this.isSelected(e.id, f.id)
+            if(f.positionList) f.positionList.forEach(g => {
+              // 位置
+              g.selected = this.isSelected(e.id, f.id, g.id)
+              g.children?.forEach(k => {
+                // 子位置
+                k.selected = this.isSelected(e.id, f.id, k.id)
+              })
+            })
+          })
+        })
+        this.area = area
+      })
+    },
+    // 用于储位回显选中
+    isSelected(warehouse, area, position = 0){
+      return !!this.value.find(e => warehouse === e.wareId && area === e.areaId && position === e.locationId)
+    },
   }
 }
 </script>
 
 <style scoped>
+.area-code{
+  display: inline-block;
+  margin-right: 15px;
+}
 
+.warehouse-block{
+  background-color: white;
+  border-radius: 5px;
+  height: 42px;
+  line-height: 42px;
+  text-align: center;
+  margin-bottom: 15px;
+  cursor: pointer;
+  transition: 0.5s;
+  box-shadow: #bfbfbf 3px 3px 14px 0;
+  user-select: none;
+}
+.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: #b1a4cb 7px 5px 14px 0;
+  transform: scale(1.04);
+  background-color: #9ab7e1;
+  color: #ffffff;
+}
+.warehouse-block-selected{
+  color: #ffffff;
+  background-color: #4085e3;
+}
+.position-group{
+  display: flex;
+  background-color: #EFEFEF;
+  border: 1px #EFEFEF solid;
+  gap: 1px;
+  min-height: 64px;
+  flex-flow: wrap;
+}
+.position{
+  width: calc(20% - 1px);
+  height: 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  user-select: none;
+}
+.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/components/editDialog.vue

@@ -171,9 +171,14 @@
                     </el-form-item>
                   </template>
                 </el-table-column>
-                <el-table-column :label="$t('储位')" prop="orderLocationBackVOList">
+                <el-table-column :label="$t('储位')" prop="orderLocationBackVOList"  width="150px">
                   <template v-slot="{ row, column, $index }">
-                    <warehouse-area-select v-model="column"></warehouse-area-select>
+                    <warehouse-area-select
+                      v-model="tableData[$index].orderLocationBackVOList"
+                      :readonly="tableData[$index].id && !edit"
+                      :order-id="orderId"
+                      :warehouse-id="warehouseId"
+                      :is-editing="edit"></warehouse-area-select>
                   </template>
                 </el-table-column>
               </el-table>
@@ -344,6 +349,16 @@
                     </el-form-item>
                   </template>
                 </el-table-column>
+                <el-table-column :label="$t('储位')" prop="orderLocationBackVOList"  width="150px">
+                  <template v-slot="{ row, column, $index }">
+                    <warehouse-area-select
+                      v-model="tableData1[$index].orderLocationBackVOList"
+                      :readonly="tableData1[$index].id && !edit"
+                      :order-id="orderId"
+                      :warehouse-id="warehouseId"
+                      :is-editing="edit"></warehouse-area-select>
+                  </template>
+                </el-table-column>
               </el-table>
             </el-form>
           </el-card>
@@ -396,6 +411,10 @@ export default {
   },
 
   props: {
+    order: {
+      type: Object,
+      default: undefined
+    },
     orderId: {
       type: Number,
       default: undefined
@@ -611,7 +630,8 @@ export default {
         ...this.form.orderWarehouseInItemDoList.map(e => {
           return {
             ...e,
-            boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3
+            boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
+            orderLocationCreateReqVOList: e.orderLocationBackVOList
           }
         })
       ]
@@ -631,7 +651,8 @@ export default {
               orderWarehouseInItemDoList: this.form1.orderWarehouseInItemDoList.map(e => {
                 return {
                   ...e,
-                  boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3
+                  boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
+                  orderLocationCreateReqVOList: e.orderLocationBackVOList
                 }
               })
             }).then(r => {
@@ -665,7 +686,8 @@ export default {
                 "orderWarehouseInUpdateItemDoList": this.tableData.map(e => {
                   return {
                     ...e,
-                    boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3
+                    boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
+                    orderLocationCreateReqVOList: e.orderLocationBackVOList
                   }
                 }),
                 copyUserId: this.selectedUsers
@@ -808,6 +830,9 @@ export default {
         }
       }
       return ''
+    },
+    warehouseId(){
+      return this.order?.logisticsInfoDto?.startWarehouseId
     }
   }
 }

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

@@ -4,7 +4,7 @@
 
     <order-base-info :order="order"></order-base-info>
 
-    <div style="margin-top: 20px">
+    <div style="margin-top: 20px;display: none">
       <span>{{$t('储位')}}：{{ ($refs.area ? $refs.area.selected : []).join(',') }}</span>
       <el-button type="primary" size="mini" @click="areaVisible = true" style="margin-left: 15px">{{$t('选择')}}</el-button>
     </div>
@@ -153,7 +153,7 @@
     <warehouse-area-dialog ref="area" :visible.sync="areaVisible" v-model="form.orderLocationCreateReqVOList"
                            :order-id="orderId" :warehouse-id="warehouseId" :is-editing="isEdit"></warehouse-area-dialog>
 
-    <edit-dialog :title="title" :order-id="order.orderId" :visible.sync="warehousingVisible" :warehousing="warehousing" :edit="isEdit" :is-jiyun="order.type && order.type.indexOf('1') !== -1"></edit-dialog>
+    <edit-dialog :order="order" :title="title" :order-id="order.orderId" :visible.sync="warehousingVisible" :warehousing="warehousing" :edit="isEdit" :is-jiyun="order.type && order.type.indexOf('1') !== -1"></edit-dialog>
 
 <!--  完成入仓  -->
     <el-dialog