补充提交

zkqy-ui/src/views/orderMange/outStock/index.vue

@@ -1,111 +1,127 @@
 <template>
   <el-card shadow="always" :body-style="{ padding: '10px' }">
     <div class="app-container">
-      <div class="table-area">
-        <el-button
-          type="success"
-          size="small"
-          @click="handleRefresh"
-          :icon="loading ? 'el-icon-loading' : 'el-icon-refresh'"
-          :disabled="loading"
-        >刷新
-        </el-button>
+      <el-row :gutter="10">
+        <el-col :span="10">
+          <div class="table-area">
+            <el-button
+              type="success"
+              size="small"
+              @click="handleRefresh"
+              :icon="loading ? 'el-icon-loading' : 'el-icon-refresh'"
+              :disabled="loading"
+              >刷新
+            </el-button>
 
-        <el-table
-          :data="leftTableData"
-          border
-          stripe
-          @selection-change="handleSelectionChange"
-          @cell-click="cellClick"
-          highlight-current-row
-        >
-          <!-- <el-table-column type="selection" width="55" /> -->
-          <el-table-column type="index" label="序号" width="50"/>
-          <el-table-column align="center" prop="customerName" label="客户名称">
-          </el-table-column>
-          <el-table-column align="center" prop="noticeNumber" label="通知单号">
-          </el-table-column>
-          <el-table-column align="center" prop="noticeDate" label="开单日期">
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="form-area">
-        <el-row :gutter="20">
-          <el-form
-            :model="form"
-            ref="form"
-            label-width="80px"
-            :inline="true"
-            size="mini"
-            :rules="rules"
-          >
-            <el-col :span="16">
-              <el-form-item label="通知单号" prop="noticeNumber">
-                <div class="text-area">
-                  <span class="mr10">{{ form.noticeNumber }}</span>
-                  <span>{{ form.documentTypeName }}</span>
-                </div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="销售员" prop="salesman">
-                {{ form.salesman }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="16">
-              <el-form-item label="客户名称" prop="customerName">
-                {{ form.customerName }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="售货单位" prop="sellingUnit">
-                {{ form.sellingUnit }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="16">
-              <el-form-item label="货车信息" prop="truckRegistration">
-                {{ form.truckRegistration }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="发货员" prop="deliveryClerk">
-                {{ form.deliveryClerk }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="备注" prop="dispatchNoteRemark">
-                {{ form.dispatchNoteRemark }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="发货日期" prop="deliveryDate">
-                <el-date-picker
-                  v-model="form.deliveryDate"
-                  type="date"
-                  size="mini"
-                  placeholder="选择日期"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="发货仓库" prop="deliveryWarehouse">
-                <el-select
-                  v-model="form.deliveryWarehouse"
-                  clearable
-                  filterable
-                >
-                  <el-option
-                    v-for="item in warehouseList"
-                    :key="item.id"
-                    :label="item.warehouseName"
-                    :value="item.id"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <!-- <el-col :span="12">
+            <el-table
+              :data="leftTableData"
+              border
+              stripe
+              @selection-change="handleSelectionChange"
+              @cell-click="cellClick"
+              highlight-current-row
+            >
+              <!-- <el-table-column type="selection" width="55" /> -->
+              <el-table-column type="index" label="序号" width="50" />
+              <el-table-column
+                align="center"
+                prop="customerName"
+                label="客户名称"
+              >
+              </el-table-column>
+              <el-table-column
+                align="center"
+                prop="noticeNumber"
+                label="通知单号"
+              >
+              </el-table-column>
+              <el-table-column
+                align="center"
+                prop="noticeDate"
+                label="开单日期"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+        <el-col :span="14">
+          <div class="form-area">
+            <el-row :gutter="20">
+              <el-form
+                :model="form"
+                ref="form"
+                label-width="80px"
+                :inline="true"
+                size="mini"
+                :rules="rules"
+              >
+                <el-col :span="16">
+                  <el-form-item label="通知单号" prop="noticeNumber">
+                    <div class="text-area">
+                      <span class="mr10">{{ form.noticeNumber }}</span>
+                      <span>{{ form.documentTypeName }}</span>
+                    </div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="销售员" prop="salesman">
+                    {{ form.salesman }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="16">
+                  <el-form-item label="客户名称" prop="customerName">
+                    {{ form.customerName }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="售货单位" prop="sellingUnit">
+                    {{ form.sellingUnit }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="16">
+                  <el-form-item label="货车信息" prop="truckRegistration">
+                    {{ form.truckRegistration }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="发货员" prop="deliveryClerk">
+                    {{ form.deliveryClerk }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="备注" prop="dispatchNoteRemark">
+                    {{ form.dispatchNoteRemark }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="发货日期" prop="deliveryDate">
+                    <el-date-picker
+                      v-model="form.deliveryDate"
+                      type="date"
+                      size="mini"
+                      placeholder="选择日期"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="发货仓库" prop="deliveryWarehouse">
+                    <el-select
+                      v-model="form.deliveryWarehouse"
+                      clearable
+                      filterable
+                    >
+                      <el-option
+                        v-for="item in warehouseList"
+                        :key="item.id"
+                        :label="item.warehouseName"
+                        :value="item.id"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <!-- <el-col :span="12">
               <el-form-item label="调拨仓库" prop="transferWarehouse">
                 <el-select
                   v-model="form.transferWarehouse"
@@ -122,48 +138,67 @@
                 </el-select>
               </el-form-item>
             </el-col> -->
-            <el-form-item>
-              <el-button type="primary" @click="outStockHandler"
-              >出库
-              </el-button>
-              <el-button @click="refreshHandler">刷新</el-button>
-            </el-form-item>
-          </el-form>
-        </el-row>
-        <el-table :data="saleProductInfoList" border stripe :span-method="objectSpanMethod"
-                  :row-class-name="tableRowClassName">
-          <el-table-column align="center" label="编码" prop="productCode">
-          </el-table-column>
-          <el-table-column align="center" label="品名" prop="productName">
-          </el-table-column>
-          <el-table-column
-            align="center"
-            label="规格"
-            prop="productSpecifications"
-          >
-          </el-table-column>
-          <el-table-column align="center" label="色泽" prop="productColor">
-          </el-table-column>
-          <el-table-column align="center" label="批号" prop="lotNum">
-          </el-table-column>
-          <el-table-column align="center" label="等级" prop="levels">
-          </el-table-column>
-          <el-table-column align="center" label="通知">
-            <el-table-column align="center" label="重量" prop="actualWeight">
-            </el-table-column>
-          </el-table-column>
-          <el-table-column align="center" label="实发">
-            <el-table-column align="center" label="总箱数" prop="coutBoxNum">
-            </el-table-column>
-            <el-table-column align="center" label="箱数" prop="boxNum">
-            </el-table-column>
-            <el-table-column align="center" label="总重量" prop="coutweight">
-            </el-table-column>
-            <el-table-column align="center" label="重量" prop="weight">
-            </el-table-column>
-          </el-table-column>
-        </el-table>
-      </div>
+                <el-form-item>
+                  <el-button type="primary" @click="outStockHandler"
+                    >出库
+                  </el-button>
+                  <el-button @click="refreshHandler">刷新</el-button>
+                </el-form-item>
+              </el-form>
+            </el-row>
+            <el-table
+              :data="saleProductInfoList"
+              border
+              stripe
+              :span-method="objectSpanMethod"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column align="center" label="编码" prop="productCode">
+              </el-table-column>
+              <el-table-column align="center" label="品名" prop="productName">
+              </el-table-column>
+              <el-table-column
+                align="center"
+                label="规格"
+                prop="productSpecifications"
+              >
+              </el-table-column>
+              <el-table-column align="center" label="色泽" prop="productColor">
+              </el-table-column>
+              <el-table-column align="center" label="批号" prop="lotNum">
+              </el-table-column>
+              <el-table-column align="center" label="等级" prop="levels">
+              </el-table-column>
+              <el-table-column align="center" label="通知">
+                <el-table-column
+                  align="center"
+                  label="重量"
+                  prop="actualWeight"
+                >
+                </el-table-column>
+              </el-table-column>
+              <el-table-column align="center" label="实发">
+                <el-table-column
+                  align="center"
+                  label="总箱数"
+                  prop="coutBoxNum"
+                >
+                </el-table-column>
+                <el-table-column align="center" label="箱数" prop="boxNum">
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  label="总重量"
+                  prop="coutweight"
+                >
+                </el-table-column>
+                <el-table-column align="center" label="重量" prop="weight">
+                </el-table-column>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </el-card>
 </template>
@@ -175,7 +210,7 @@ import {
   queryDropDownBoxData,
   noticeOutStorage,
 } from "@/api/tablelist/commonTable";
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "OutStock",
@@ -208,40 +243,48 @@ export default {
       saleProductInfoList: [],
       rules: {
         deliveryDate: [
-          {required: true, message: "请选择发货日期", trigger: "change"},
+          { required: true, message: "请选择发货日期", trigger: "change" },
         ],
         deliveryWarehouse: [
-          {required: true, message: "请选择发货仓库", trigger: "change"},
+          { required: true, message: "请选择发货仓库", trigger: "change" },
         ],
         transferWarehouse: [
-          {required: true, message: "请选择调拨仓库", trigger: "change"},
+          { required: true, message: "请选择调拨仓库", trigger: "change" },
         ],
       },
     };
   },
   methods: {
-    tableRowClassName({row, rowIndex}) {
+    tableRowClassName({ row, rowIndex }) {
       if (!row.actualWeight && row.actualWeight != 0) {
-        return 'warning-row';
+        return "warning-row";
       }
     },
-    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       // 重量
       if (columnIndex === 6 || columnIndex === 7 || columnIndex === 9) {
-        const prevRow2 = this.saleProductInfoList[rowIndex - 1] //上一行数据
-        let nextRow2 = this.saleProductInfoList[rowIndex + 1] //下一行数据
+        const prevRow2 = this.saleProductInfoList[rowIndex - 1]; //上一行数据
+        let nextRow2 = this.saleProductInfoList[rowIndex + 1]; //下一行数据
         // 当上一行的数据等于当前行数据时，当前行单元格隐藏
-        if (prevRow2 && prevRow2.productCode == row.productCode && prevRow2.productColor == row.productColor) {
-          return {rowspan: 0, colspan: 0}
+        if (
+          prevRow2 &&
+          prevRow2.productCode == row.productCode &&
+          prevRow2.productColor == row.productColor
+        ) {
+          return { rowspan: 0, colspan: 0 };
         } else {
           // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
-          let countRowspan2 = 1 //用于合并计数多少单元格
-          while (nextRow2 && nextRow2.productCode == row.productCode && nextRow2.productColor == row.productColor) {
-            nextRow2 = this.saleProductInfoList[++countRowspan2 + rowIndex]
+          let countRowspan2 = 1; //用于合并计数多少单元格
+          while (
+            nextRow2 &&
+            nextRow2.productCode == row.productCode &&
+            nextRow2.productColor == row.productColor
+          ) {
+            nextRow2 = this.saleProductInfoList[++countRowspan2 + rowIndex];
           }
           if (countRowspan2 > 1) {
             // this.saleProductInfoList[rowIndex].coutBoxNum = 9;
-            return {rowspan: countRowspan2, colspan: 1}
+            return { rowspan: countRowspan2, colspan: 1 };
           }
         }
       }
@@ -274,7 +317,7 @@ export default {
             type: "warning",
           })
             .then(async () => {
-              let payLoad = {...this.form};
+              let payLoad = { ...this.form };
               payLoad.transferWarehouse = payLoad.deliveryWarehouse;
               if (!this.form.id) {
                 return;
@@ -301,8 +344,7 @@ export default {
         }
       });
     },
-    handleSelectionChange() {
-    },
+    handleSelectionChange() {},
     // 初始化仓库选项数据
     async initWarehouse() {
       try {
@@ -322,8 +364,7 @@ export default {
         } else {
           throw new Error(res.msg);
         }
-      } catch (error) {
-      }
+      } catch (error) {}
     },
     // 初始化数据
     async initData() {
@@ -342,8 +383,7 @@ export default {
         } else {
           throw new Error(res.msg);
         }
-      } catch (error) {
-      }
+      } catch (error) {}
     },
     // 根据字典获取文件类型
     getdocumentTypeName(value) {
@@ -399,35 +439,41 @@ export default {
           //   return (colorA+codeA)-(colorB-codeB)
           // })
 
-
-          this.saleProductInfoList = saleProductInfoList
+          this.saleProductInfoList = saleProductInfoList;
           // 使用 reduce 方法来累加相同 productCode 和 productColor 的第一条数据的 boxNum
-          const codeColorSums = this.saleProductInfoList.reduce((acc, curr, index) => {
-            // 创建一个用于组合 productCode 和 productColor 的键
-            const key = `${curr.productCode}-${curr.productColor}`;
+          const codeColorSums = this.saleProductInfoList.reduce(
+            (acc, curr, index) => {
+              // 创建一个用于组合 productCode 和 productColor 的键
+              const key = `${curr.productCode}-${curr.productColor}`;
 
-            // 检查当前 key 是否已经存在
-            if (!acc[key]) {
-              // 如果不存在，添加 key 作为键，并将 boxNum 设置为当前值
-              acc[key] = {
-                firstIndex: index,
-                sum: curr.boxNum,
-                weight: curr.weight,
-                count: 1
-              };
-            } else {
-              acc[key].count++; // 增加计数
-              acc[key].sum += curr.boxNum;
-              acc[key].weight += curr.weight;
-            }
-            return acc;
-          }, {});
+              // 检查当前 key 是否已经存在
+              if (!acc[key]) {
+                // 如果不存在，添加 key 作为键，并将 boxNum 设置为当前值
+                acc[key] = {
+                  firstIndex: index,
+                  sum: curr.boxNum,
+                  weight: curr.weight,
+                  count: 1,
+                };
+              } else {
+                acc[key].count++; // 增加计数
+                acc[key].sum += curr.boxNum;
+                acc[key].weight += curr.weight;
+              }
+              return acc;
+            },
+            {}
+          );
           this.saleProductInfoList.forEach((item, index) => {
             if (codeColorSums[`${item.productCode}-${item.productColor}`]) {
-              item.coutBoxNum = codeColorSums[`${item.productCode}-${item.productColor}`].sum
-              item.coutweight = codeColorSums[`${item.productCode}-${item.productColor}`].weight.toFixed(2)
+              item.coutBoxNum =
+                codeColorSums[`${item.productCode}-${item.productColor}`].sum;
+              item.coutweight =
+                codeColorSums[
+                  `${item.productCode}-${item.productColor}`
+                ].weight.toFixed(2);
             }
-          })
+          });
 
           Object.assign(this.form, {
             noticeNumber, //通知单号
@@ -442,25 +488,19 @@ export default {
           });
           this.form.deliveryClerk = this.nickName;
         }
-      } catch (error) {
-      }
+      } catch (error) {}
     },
-  }
-  ,
+  },
   computed: {
-    ...
-      mapState({
-        nickName: (state) => state.user.nickName,
-      }),
-  }
-  ,
+    ...mapState({
+      nickName: (state) => state.user.nickName,
+    }),
+  },
   mounted() {
     this.initData();
     this.initWarehouse();
-  }
-  ,
-}
-;
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -468,11 +508,11 @@ export default {
   display: flex;
 
   .table-area {
-    width: 600px;
+    // width: 600px;
   }
 
   .form-area {
-    flex: 1;
+    // flex: 1;
   }
 }
 
@@ -484,9 +524,7 @@ export default {
   display: table-cell !important;
 }
 
-
 ::v-deep .el-table .warning-row {
   color: red;
 }
-
 </style>