feat(stock): 添加物料信息和以及物料修改

src/layout/location.vue

@@ -11,60 +11,105 @@
                 <el-button color="green">空闲</el-button>
                 <el-button color="red">占用</el-button>
                 <el-button color="yellow">锁定</el-button>
+               <span style="margin-left: 20px;">层数选择：</span>
+                <el-select v-model="chooseLayer" placeholder="层数选择" @change="getAllLocations">
+                  <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                  </el-option>
+                </el-select>
                 <el-button color="#00BFFF" style="margin: 0 0 0 auto;" @click="getAllLocations">刷新</el-button>
             </el-row>
             <hr style="border: 1px solid #ff0000" />
             <div>
-                <el-scrollbar max-height="760px">
+                <el-scrollbar max-height="600px" :native="true" >
-                    <div v-for="currentRowLocation in allLocations">
+                    <div v-for="currentRowLocation in allLocations" class="scrollbar-flex-content">
-                        <span>第{{ currentRowLocation.row }}排</span>
+                        <span class="row" v-for="currentLayerLocation in currentRowLocation.currentLayerLocations">
-                        <div class="row" v-for="currentLayerLocation in currentRowLocation.currentLayerLocations">
+                            <span class="col" v-for="currentColLocation in currentLayerLocation.currentColLocations">
-                            <div class="col" v-for="currentColLocation in currentLayerLocation.currentColLocations">
                                 <el-button :color="getLocationStatus(currentColLocation)"
-                                    @click="showDialog(currentColLocation)">
+                                           @click="showDialog(currentColLocation)">
                                     <span style="font-size: 13px;">{{ currentColLocation.queue}}排{{ currentColLocation.line}}列{{ currentColLocation.layer}}层 -{{ currentColLocation.wareArea}}</span>
                                 </el-button>
-                            </div>
+                            </span>
-                        </div>
+                        </span>
-                        <hr style="border: 1px solid #000000" />
                     </div>
                 </el-scrollbar>
+                <!-- 库位信息和物料信息弹出框             -->
                 <el-dialog v-model="dialogVisible" :title="currentLocationTitle" width="30%" draggable :show-close="false">
-                    <el-form :model="location">
+                  <el-tabs
+                      v-model="activeTabName"
+                      type="card"
+                      class="demo-tabs"
+                      @tab-click="handleTabClick"
+                  >
+                    <el-tab-pane label="库位信息" name="location">
+                      <el-form :model="location">
                         <el-form-item label="库位号" :label-width="140">
-                            <el-input v-model="this.currentSelectedLocation.locationId" style="width: 70%;" readonly />
+                          <el-input v-model="this.currentSelectedLocation.locationId" style="width: 70%;" readonly />
                         </el-form-item>
                         <el-form-item label="占用/解除占用库位" :label-width="140">
-                            <el-select v-model="location.locationStatus" placeholder="库位是否占用" style="width: 70%;">
+                          <el-select v-model="location.locationStatus" placeholder="库位是否占用" style="width: 70%;">
-                                <el-option label="空闲" :value='0' />
+                            <el-option label="空闲" :value='0' />
-                                <el-option label="占用" :value='1' />
+                            <el-option label="占用" :value='1' />
-                            </el-select>
+                          </el-select>
                         </el-form-item>
                         <el-form-item label="锁定/解锁库位" :label-width="140">
-                            <el-select v-model="location.isLock" placeholder="库位是否锁定" style="width: 70%;">
+                          <el-select v-model="location.isLock" placeholder="库位是否锁定" style="width: 70%;">
-                                <el-option label="解锁" :value='0' />
+                            <el-option label="解锁" :value='0' />
-                                <el-option label="锁定" :value='1' />
+                            <el-option label="锁定" :value='1' />
-                            </el-select>
+                          </el-select>
                         </el-form-item>
                         <el-form-item label="载具" :label-width="140">
-                            <el-input v-model="location.vehicleId" style="width: 70%;" />
+                          <el-input v-model="location.vehicleId" style="width: 70%;" />
                         </el-form-item>
                         <el-form-item label="库区选择" :label-width="140">
-                            <el-select v-model="location.wareArea" placeholder="选择库区" style="width: 70%;">
+                          <el-select v-model="location.wareArea" placeholder="选择库区" style="width: 70%;">
-                                <el-option label="A" value="A" />
+                            <el-option label="A" value="A" />
-                                <el-option label="B" value="B" />
+                            <el-option label="B" value="B" />
-                                <el-option label="C" value="C" />
+                            <el-option label="C" value="C" />
-                            </el-select>
+                          </el-select>
-                        </el-form-item>                       
+                        </el-form-item>
-                    </el-form>
+                      </el-form>
-                    <template #footer>
+                    </el-tab-pane>
-                        <span class="dialog-footer">
+                    <el-tab-pane label="物料信息" name="stock">
-                            <el-button @click="dialogVisible = false">取消</el-button>
+                      <el-form :model="stock">
-                            <el-button type="primary" @click="submitLocationStatus()">
+                        <el-form-item label="托盘号" :label-width="140">
-                                确定
+                          <el-input v-model="stock.vehicleId" style="width: 70%;"  />
-                            </el-button>
+                        </el-form-item>
-                        </span>
+                        <el-form-item label="物料号" :label-width="140">
-                    </template>
+                          <el-input v-model="stock.goodsId" style="width: 70%;" />
+                        </el-form-item>
+                        <el-form-item label="数量" :label-width="140">
+                          <el-input v-model="stock.availableNum" style="width: 70%;" />
+                        </el-form-item>
+                        <el-form-item label="规格描述" :label-width="140">
+                          <el-input v-model="stock.goodsName" style="width: 70%;"  />
+                        </el-form-item>
+                      </el-form>
+                    </el-tab-pane>
+                    <el-tab-pane label="托盘信息" name="vehicle">Config</el-tab-pane>
+                  </el-tabs>
+                  <template #footer>
+                          <span class="dialog-footer">
+                              <el-button @click="dialogVisible = false">取消</el-button>
+                              <el-button v-if="activeTabName == 'location'" type="primary" @click="submitLocationStatus()">
+                                  更新库位信息
+                              </el-button>
+                               <el-button v-if="activeTabName == 'stock'" type="primary" @click="submitLocationStatus()">
+                                  <span v-if="isAddStock" @click="handleAddStock">
+                                    添加物料信息
+                                  </span>
+                                  <span v-else @click="handleAddStock">
+                                      更新物料信息
+                                  </span>
+                              </el-button>
+                               <el-button v-if="activeTabName == 'vehicle'" type="primary" @click="submitLocationStatus()">
+                                  更新托盘信息
+                              </el-button>
+                          </span>
+                  </template>
                 </el-dialog>
             </div>
         </el-config-provider>
@@ -78,10 +123,31 @@ import { ElMessage, ElLoading } from 'element-plus'
 import { reactive } from 'vue'
 </script>
 <script>
+import {reactive} from "vue";
+import {addStockInfo, getStockByLocation, updateStockInfo} from "@/api/stock";
+import {ElLoading, ElMessage} from "element-plus";
+
 export default {
     name: 'location',
     data() {
         return {
+            isAddStock:true,
+            stock:{},
+            activeTabName:'stock',
+            options: [{
+              value: 1,
+              label: '第一层'
+            }, {
+              value: 2,
+              label: '第二层'
+            }, {
+              value: 3,
+              label: '第三层'
+            }, {
+              value: 4,
+              label: '第四层'
+            }],
+            chooseLayer: 1,
             dialogVisible: false,
             currentSelectedLocation: {},
             allLocations: [],
@@ -100,6 +166,43 @@ export default {
         this.getAllLocations()
     },
     methods: {
+        handleAddStock() {
+          if (this.isAddStock) {
+            addStockInfo(this.stock).then(res=> {
+              if (res.data.code == 0) {
+                this.dialogVisible = false
+                ElMessage({
+                  message: '添加物料信息成功！',
+                  type: 'success',
+                })
+                this.getAllLocations()
+              } else {
+                ElMessage.error(res.data.message)
+              }
+            }).catch(err => {
+              ElMessage.error('添加物料信息失败！',err)
+            })
+          }else {
+            updateStockInfo(this.stock).then(res=>{
+              if (res.data.code == 0) {
+                this.dialogVisible = false
+                ElMessage({
+                  message: '更新物料信息成功！',
+                  type: 'success',
+                })
+                this.getAllLocations()
+              } else {
+                ElMessage.error(res.data.message)
+              }
+            }).catch(err => {
+              ElMessage.error('更新物料信息失败！',err)
+            })
+          }
+
+        },
+        handleTabClick(tab, event){
+          console.log(tab,event)
+        },
         getLocationStatus: (currentColLocation) => {
             if (currentColLocation.isLock === 1) {
                 return 'yellow'
@@ -109,17 +212,32 @@ export default {
             }
             return 'green'
         },
+        getStockLocation(locationId){
+          getStockByLocation({locationId: locationId}).then(res=> {
+            if (res.data.code == 0) {
+              this.isAddStock = false
+              this.stock = res.data.returnData
+            } else {
+              this.isAddStock = true
+              this.stock = {}
+            }
+          }).catch(err => {
+            loading.close()
+            ElMessage.error('查询库存信息失败！')
+          })
+        },
         getAllLocations() {
             const loading = ElLoading.service({
                 lock: true,
                 text: 'Loading',
                 background: 'rgba(0, 0, 0, 0.7)',
             })
-            const data = { areaId: this.areaId }
+            const data = { areaId: this.areaId,layer: this.chooseLayer }
             getLocations(data).then(res => {
                 loading.close()
+                let sum = 0
                 if (res.data.code == 0) {
-                    console.log(res.data.returnData)
+
                     this.allLocations = res.data.returnData
                 } else {
                     ElMessage.error(res.data.message)
@@ -135,13 +253,13 @@ export default {
         showDialog(currentColLocation) {
             this.dialogVisible = true
             this.currentSelectedLocation = currentColLocation
+            this.getStockLocation(this.currentSelectedLocation.locationId)
             this.setCurrentLocationTitle()
             this.location.locationId = this.currentSelectedLocation.locationId
             this.location.locationStatus = this.currentSelectedLocation.locationStatus
             this.location.isLock = this.currentSelectedLocation.isLock
             this.location.vehicleId = this.currentSelectedLocation.vehicleId
             this.location.wareArea = this.currentSelectedLocation.wareArea
-            
         },
         submitLocationStatus() {
             const loading = ElLoading.service({
@@ -186,8 +304,8 @@ export default {
 }
 
 .row {
-    display: flex;
+    //display: flex;
-    justify-content: space-between;
+    //justify-content: space-between;
     margin: 5px;
 }
 
@@ -202,4 +320,13 @@ export default {
     width: 100px;
     height: 50px;
 }
-</style>
+.scrollbar-flex-content {
+  display: flex;
+}
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>