二级出库弹框逻辑调整

src/api/secondOrder/outbound.js

@@ -76,3 +76,26 @@ export const getStatistics = data => {
     data: data,
   })
 }
+
+
+// 获取物资分组数据 twoOutStorage/getOutGroupName
+export const getOutGroupName = params => {
+  return request({
+    url: '/smartpark/twoOutStorage/getOutGroupName',
+    method: 'get',
+    params: params,
+    cryptoToken: false,
+    cryptoData: false
+  })
+}
+
+// 获取分组中的数据物资数据  twoOutStorage/getGroupMaterial
+export const getGroupMaterial = params => {
+  return request({
+    url: '/smartpark/twoOutStorage/getGroupMaterial',
+    method: 'get',
+    params: params,
+    cryptoToken: false,
+    cryptoData: false
+  })
+}

src/views/secondOrder/components/outDialog.vue

@@ -1,30 +1,56 @@
 <template>
   <div>
-    <el-dialog :close-on-click-modal="false" :title="outDialogTiltle" :visible.sync="outDialogVisible"
+    <el-dialog
-      :append-to-body="true" @close="handleCloseDetail" fullscreen>
+      :close-on-click-modal="false"
+      :title="outDialogTiltle"
+      :visible.sync="outDialogVisible"
+      :append-to-body="true"
+      @close="handleCloseDetail"
+      fullscreen
+    >
       <div class="dialog-content">
         <!-- 基本信息 -->
-        <el-form :model="sizeForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"
+        <el-form
-          :rules="dynamicRules">
+          :model="sizeForm"
+          ref="dynamicValidateForm"
+          label-width="100px"
+          class="demo-dynamic"
+          :rules="dynamicRules"
+        >
           <div class="form-title">基本信息</div>
           <el-row>
             <el-col :span="12">
               <el-form-item label="出库申请时间">
-                <el-date-picker v-model="sizeForm.ldTwoOutStorage.outDate" type="date" placeholder="选择日期"
+                <el-date-picker
-                  style="width: 100%" disabled>
+                  v-model="sizeForm.ldTwoOutStorage.outDate"
+                  type="date"
+                  placeholder="选择日期"
+                  style="width: 100%"
+                  disabled
+                >
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="事由" prop="ldTwoOutStorage.reason">
-                <el-input v-model="sizeForm.ldTwoOutStorage.reason" :disabled="outDialogType != 'add'"
+                <el-input
-                  placeholder="请输入"></el-input>
+                  v-model="sizeForm.ldTwoOutStorage.reason"
+                  :disabled="outDialogType != 'add'"
+                  placeholder="请输入"
+                ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="物资类型" prop="ldTwoOutStorage.materialType">
+              <el-form-item
-                <el-select v-model="sizeForm.ldTwoOutStorage.materialType" placeholder="请选择" style="width: 100%"
+                label="物资类型"
-                  :disabled="outDialogType != 'add'">
+                prop="ldTwoOutStorage.materialType"
+              >
+                <el-select
+                  v-model="sizeForm.ldTwoOutStorage.materialType"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  :disabled="outDialogType != 'add'"
+                >
                   <el-option label="办公室物资" value="1"></el-option>
                   <el-option label="其他物资" value="2"></el-option>
                 </el-select>
@@ -32,102 +58,268 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="部门" prop="ldTwoOutStorage.departmentInfo">
-                <el-select v-model="sizeForm.ldTwoOutStorage.departmentInfo" placeholder="请选择" style="width: 100%"
+                <el-select
-                  :disabled="outDialogType != 'add'" @change="deptChange" clearable filterable value-key="departmentId">
+                  v-model="sizeForm.ldTwoOutStorage.departmentInfo"
-                  <el-option v-for="item in departmentOptions" :key="item.departmentId" :label="item.department"
+                  placeholder="请选择"
-                    :value="item"></el-option>
+                  style="width: 100%"
+                  :disabled="outDialogType != 'add'"
+                  @change="deptChange"
+                  clearable
+                  filterable
+                  value-key="departmentId"
+                >
+                  <el-option
+                    v-for="item in departmentOptions"
+                    :key="item.departmentId"
+                    :label="item.department"
+                    :value="item"
+                  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
+
             <el-col :span="12">
               <el-form-item label="领用人" prop="ldTwoOutStorage.proposerInfo">
-                <el-select v-model="sizeForm.ldTwoOutStorage.proposerInfo" placeholder="请选择" style="width: 100%"
+                <el-select
-                  :disabled="sizeForm.departmentId == '' || outDialogType == 'details'
+                  v-model="sizeForm.ldTwoOutStorage.proposerInfo"
-                    " clearable filterable value-key="userId" @change="proposerChange">
+                  placeholder="请选择"
-                  <el-option v-for="item in userOptions" :key="item.userId" :label="item.name" :value="item">
+                  style="width: 100%"
+                  :disabled="
+                    sizeForm.departmentId == '' || outDialogType == 'details'
+                  "
+                  clearable
+                  filterable
+                  value-key="userId"
+                  @change="proposerChange"
+                >
+                  <el-option
+                    v-for="item in userOptions"
+                    :key="item.userId"
+                    :label="item.name"
+                    :value="item"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="物资分组" prop="ldTwoOutStorage.groupName">
+                <el-select
+                  v-model="sizeForm.ldTwoOutStorage.groupName"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  :disabled="outDialogType != 'add'"
+                  clearable
+                  filterable
+                  value-key="departmentId"
+                  @change="groupNameChange"
+                >
+                  <el-option
+                    v-for="item in groupNameOptions"
+                    :key="item.groupIds"
+                    :label="item.groupName"
+                    :value="item.groupIds"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+
             <el-col :span="12" v-if="outDialogType == 'details'">
               <el-form-item label="填报人">
-                <el-input v-model="sizeForm.ldTwoOutStorage.shipperName" :disabled="outDialogType != 'add'"></el-input>
+                <el-input
+                  v-model="sizeForm.ldTwoOutStorage.shipperName"
+                  :disabled="outDialogType != 'add'"
+                ></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <div class="form-title">{{ outDateInfo }} 出库信息：</div>
+          <div v-if="sizeForm.ldTwoOutStorage.groupName != null">
+            <el-table :data="groupTableData" style="width: 100%" border>
+              <!-- 展开行详情 -->
+              <el-table-column type="expand">
+                <template slot-scope="props">
+                  <!-- 关联表单列表（带复选框） -->
+                  <el-table
+                    :data="props.row.twoInventoryVOList || []"
+                    size="mini"
+                    style="width: 100%"
+                    @selection-change="
+                      (val) => handleSelectionChange(val, props.row)
+                    "
+                    border
+                  >
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column type="index" label="#" width="55" />
+                    <el-table-column label="物料名称" prop="materialName" />
+                    <el-table-column label="物料编码" prop="materialCode" />
+                    <el-table-column label="规格型号" prop="model" />
+                    <el-table-column label="数量" prop="num" />
+                    <el-table-column label="本次出库数量" prop="num">
+                      <template slot-scope="scope">
+                        <el-input-number
+                          size="mini"
+                          v-model="scope.row.num"
+                          :min="0"
+                          :max="getMaxQuantity(scope.row)"
+                          style="width: 100%"
+                          :disabled="
+                            outDialogType != 'add' || scope.row.type === 'NY'
+                          "
+                          @change="
+                            (newValue) =>
+                              handleQuantityChange(newValue, scope.$index)
+                          "
+                        ></el-input-number>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="单价" prop="unitPrice" width="80" />
+                  </el-table>
+                </template>
+              </el-table-column>
 
-          <el-button type="primary" size="mini" style="margin-bottom: 18px" @click="categoryHandle"
+              <!-- 常规列展示 -->
-            v-if="outDialogType != 'details'">新增</el-button>
+              <el-table-column label="物料编码" prop="materialCode" />
-          <el-table :data="sizeForm.ldTwoOutStorageDetailList" border style="width: 100%">
+              <el-table-column label="物料名称" prop="materialName" />
-            <el-table-column prop="materialCode" label="物资编码">
+              <el-table-column label="规格型号" prop="model" />
-            </el-table-column>
+              <el-table-column label="申请数量" prop="applyNum" />
+              <el-table-column label="单位" prop="unit" />
+            </el-table>
+          </div>
 
-            <el-table-column prop="materialName" label="物资名称"></el-table-column>
+          <div v-if="sizeForm.ldTwoOutStorage.groupName == null">
-            <el-table-column prop="model" label="规格/型号"> </el-table-column>
+            <el-button
-            <el-table-column prop="type" label="类别">
+              type="primary"
-              <template slot-scope="scope">
+              size="mini"
-                {{
+              style="margin-bottom: 18px"
-                  scope.row.type === "NY"
+              @click="categoryHandle"
-                    ? "耐用品"
+              v-if="outDialogType != 'details'"
-                    : scope.row.type === "YH"
+              >新增</el-button
+            >
+            <el-table
+              :data="sizeForm.ldTwoOutStorageDetailList"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="expand"
+                v-if="sizeForm.ldTwoOutStorage.groupName != null"
+              >
+                <template slot-scope="props">
+                  <el-table
+                    :data="scope.row.twoInventoryVOList"
+                    border
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="materialName"
+                      label="物资名称"
+                    ></el-table-column>
+                    <el-table-column
+                      prop="materialCode"
+                      label="物资编码"
+                    ></el-table-column>
+                    <el-table-column
+                      prop="type"
+                      label="物资类型"
+                    ></el-table-column>
+                    <el-table-column prop="num" label="数量"></el-table-column>
+                  </el-table>
+                </template>
+              </el-table-column>
+              <el-table-column prop="materialCode" label="物资编码">
+              </el-table-column>
+
+              <el-table-column
+                prop="materialName"
+                label="物资名称"
+              ></el-table-column>
+              <el-table-column prop="model" label="规格/型号">
+              </el-table-column>
+              <el-table-column prop="type" label="类别">
+                <template slot-scope="scope">
+                  {{
+                    scope.row.type === "NY"
+                      ? "耐用品"
+                      : scope.row.type === "YH"
                       ? "易耗品"
                       : ""
-                }}
+                  }}
-              </template>
+                </template>
-            </el-table-column>
+              </el-table-column>
-            <el-table-column prop="unit" label="单位"> </el-table-column>
+              <el-table-column prop="unit" label="单位"> </el-table-column>
-            <el-table-column prop="num" label="数量">
+              <el-table-column prop="num" label="数量">
-              <template slot-scope="scope">
+                <template slot-scope="scope">
-                <el-input-number size="mini" v-model="scope.row.num" 
+                  <el-input-number
-                :min="0" 
+                    size="mini"
-                :max="getMaxQuantity(scope.row)"
+                    v-model="scope.row.num"
-
+                    :min="0"
-                style="width: 100%"
+                    :max="getMaxQuantity(scope.row)"
-                  :disabled="outDialogType != 'add' || scope.row.type === 'NY'" @change="
+                    style="width: 100%"
-                    (newValue) => handleQuantityChange(newValue, scope.$index)
+                    :disabled="
-                  "></el-input-number>
+                      outDialogType != 'add' || scope.row.type === 'NY'
-              </template>
+                    "
-            </el-table-column>
+                    @change="
-            <el-table-column label="操作" width="100" v-if="outDialogType != 'details'">
+                      (newValue) => handleQuantityChange(newValue, scope.$index)
-              <template slot-scope="scope">
+                    "
-                <div :disabled="outDialogType == 'details'">
+                  ></el-input-number>
-                  <el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">
+                </template>
-                    删除
+              </el-table-column>
-                  </el-button>
+              <el-table-column
-                </div>
+                label="操作"
-              </template>
+                width="100"
-            </el-table-column>
+                v-if="outDialogType != 'details'"
-          </el-table>
+              >
+                <template slot-scope="scope">
+                  <div :disabled="outDialogType == 'details'">
+                    <el-button
+                      type="text"
+                      size="mini"
+                      @click="handleDelete(scope.$index, scope.row)"
+                    >
+                      删除
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
           <div class="form-title" v-if="outDialogType != 'details'">
             出库账目表格：
           </div>
-          <el-table :data="statisticsList" border style="width: 100%" v-if="outDialogType != 'details'">
+          <el-table
+            :data="statisticsList"
+            border
+            style="width: 100%"
+            v-if="outDialogType != 'details'"
+          >
             <el-table-column prop="date" label="当前库存">
               <el-table-column prop="materialCode" label="编码">
               </el-table-column>
               <el-table-column prop="materialName" label="名称">
               </el-table-column>
               <el-table-column prop="model" label="规格"> </el-table-column>
-              <el-table-column prop="type" label="类别"> 
+              <el-table-column prop="type" label="类别">
                 <template slot-scope="scope">
-                {{
+                  {{
-                  scope.row.type === "NY"
+                    scope.row.type === "NY"
-                    ? "耐用品"
+                      ? "耐用品"
-                    : scope.row.type === "YH"
+                      : scope.row.type === "YH"
                       ? "易耗品"
                       : ""
-                }}
+                  }}
-              </template>
+                </template>
               </el-table-column>
               <el-table-column prop="unit" label="单位"> </el-table-column>
               <el-table-column prop="num" label="数量"> </el-table-column>
             </el-table-column>
             <el-table-column prop="date" label="出库信息">
-              <el-table-column prop="theOutboundQuantity" label="数量"> </el-table-column>
+              <el-table-column prop="theOutboundQuantity" label="数量">
+              </el-table-column>
             </el-table-column>
             <el-table-column prop="date" label="出库后库存">
-              <el-table-column prop="totalQuantity" label="数量"> </el-table-column>
+              <el-table-column prop="totalQuantity" label="数量">
+              </el-table-column>
             </el-table-column>
             <el-table-column prop="date" label="出库信息">
               <el-table-column label="出库人">
@@ -151,13 +343,24 @@
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleCloseDetail()">取 消</el-button>
-        <el-button v-if="outDialogType != 'details'" type="primary" @click="sumbit()">确 定</el-button>
+        <el-button
+          v-if="outDialogType != 'details'"
+          type="primary"
+          @click="sumbit()"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <!-- 新增数据 -->
-    <categoryDialog v-if="categoryVisible" :categoryVisible="categoryVisible" :selectionData="selectionData"
+    <categoryDialog
-      :departmentId="sizeForm.ldTwoOutStorage.departmentId" :categoryDialogTitle="categoryDialogTitle"
+      v-if="categoryVisible"
-      @confirm="confirm" @categoryClose="categoryClose"></categoryDialog>
+      :categoryVisible="categoryVisible"
+      :selectionData="selectionData"
+      :departmentId="sizeForm.ldTwoOutStorage.departmentId"
+      :categoryDialogTitle="categoryDialogTitle"
+      @confirm="confirm"
+      @categoryClose="categoryClose"
+    ></categoryDialog>
   </div>
 </template>
 <script>
@@ -169,6 +372,8 @@ import {
   submit,
   getDetails,
   getStatistics,
+  getOutGroupName,
+  getGroupMaterial,
 } from "@/api/secondOrder/outbound";
 export default {
   components: {
@@ -237,6 +442,7 @@ export default {
           departmentInfo: null,
           proposerInfo: null,
           optionType: "YH",
+          groupName: "", //物资分组
         },
         ldTwoOutStorageDetailList: [], //出库单详情
         inAccountsTableData: [], //库存汇总
@@ -287,6 +493,9 @@ export default {
       departmentOptions: [], //部门列表
       dynamicRules: {}, // 动态校验规则
       statisticsList: [], //批量更改后的明细数据
+      groupNameOptions: [], //物资分组数据
+      groupTableData: [], //选取分组表格数据
+      selectedGroupMap: {}, // key: group 的唯一标识（如 materialId 或 index），value: 选中的子项数组
     };
   },
   mounted() {
@@ -298,8 +507,55 @@ export default {
     }
 
     this.getDetailedItems();
+    this.getOutGroupName();
   },
   methods: {
+    // 监听嵌套表格的勾选事件
+    handleSelectionChange(selection, parentRow) {
+      // 使用 parentRow 的唯一标识作为 key，例如 materialId 或 materialCode
+      const key =
+        parentRow.materialId || parentRow.materialCode || parentRow.id;
+      if (!key) {
+        console.warn("Parent row has no unique key for selection tracking");
+        return;
+      }
+
+      // 缓存当前分组的选中项
+      this.$set(this.selectedGroupMap, key, selection);
+
+      // 重建整个出库明细列表：扁平化所有选中项
+      let allDetails = [];
+      Object.values(this.selectedGroupMap).forEach((selectedList) => {
+        allDetails = allDetails.concat(
+          selectedList.map((item) => ({
+            ...item,
+            // 确保有 num 字段，默认为 0 或 1
+            num: item.num || (item.type === "NY" ? 1 : 0),
+          }))
+        );
+      });
+
+      // 赋值给主表单
+      this.sizeForm.ldTwoOutStorageDetailList = allDetails;
+      console.log(this.sizeForm.ldTwoOutStorageDetailList,'批量数据');
+
+      // 触发统计更新
+      this.getStatistics();
+
+
+    },
+    groupNameChange() {
+      if (this.sizeForm.ldTwoOutStorage.groupName != null) {
+        getGroupMaterial(this.sizeForm.ldTwoOutStorage).then((res) => {
+          this.groupTableData = res.data.result;
+        });
+      }
+    },
+    getOutGroupName() {
+      getOutGroupName().then((res) => {
+        this.groupNameOptions = res.data.result;
+      });
+    },
     // 批量 更改明细表数据
     getStatistics() {
       getStatistics(this.sizeForm.ldTwoOutStorageDetailList).then((res) => {
@@ -319,37 +575,42 @@ export default {
     },
     // 最大数量
     getMaxQuantity(row) {
-      const stockInfo = this.statisticsList.find(stat => stat.materialCode === row.materialCode)
+      const stockInfo = this.statisticsList.find(
-      if (row.type === 'NY') {
+        (stat) => stat.materialCode === row.materialCode
-        return  1
+      );
+      if (row.type === "NY") {
+        return 1;
       } else {
         return stockInfo ? stockInfo.num : 999999;
       }
     },
     categoryHandle() {
-      if ((!this.sizeForm.ldTwoOutStorage.proposerInfo) || (!this.sizeForm.ldTwoOutStorage.departmentInfo)) {
+      if (
-        this.$message.error('请先选择部门和领用人');
+        !this.sizeForm.ldTwoOutStorage.proposerInfo ||
-        return false
+        !this.sizeForm.ldTwoOutStorage.departmentInfo
+      ) {
+        this.$message.error("请先选择部门和领用人");
+        return false;
       }
       this.categoryVisible = true;
     },
     confirm(allSelectedList) {
       // 保存已选数量
       const existingQuantities = {};
-      this.sizeForm.ldTwoOutStorageDetailList.forEach(item => {
+      this.sizeForm.ldTwoOutStorageDetailList.forEach((item) => {
-        existingQuantities[item.id] = item.num
+        existingQuantities[item.id] = item.num;
-      })
+      });
-      const updatedList = allSelectedList.map(item => {
+      const updatedList = allSelectedList.map((item) => {
         const existingNum = existingQuantities[item.id];
         if (existingNum !== undefined) {
           return {
             ...item,
-            num: existingNum 
+            num: existingNum,
           };
         }
         return item;
       });
-      
+
       this.selectionData = updatedList;
       this.categoryVisible = false;
       this.sizeForm.ldTwoOutStorageDetailList = updatedList;
@@ -358,7 +619,7 @@ export default {
     // 删除表格行数据
     handleDelete(index, row) {
       this.sizeForm.ldTwoOutStorageDetailList.splice(index, 1);
-      this.getStatistics()
+      this.getStatistics();
     },
     // 初始化  汇总库存 inAccountsTableData
     summaryTableData() {
@@ -367,15 +628,15 @@ export default {
       );
     },
     handleQuantityChange(newValue, index) {
-      console.log(newValue, '点击数量变化数量的值')
+      console.log(newValue, "点击数量变化数量的值");
       const currentRow = this.sizeForm.ldTwoOutStorageDetailList[index];
       if (!currentRow) return;
-      
+
       // 易耗品的有效数量
       currentRow.num = newValue;
       this.$set(this.sizeForm.ldTwoOutStorageDetailList, index, currentRow);
       this.$set(this.sizeForm.inAccountsTableData, index, { ...currentRow });
-      this.getStatistics()
+      this.getStatistics();
     },
 
     // 更新全局总计
@@ -510,4 +771,4 @@ export default {
   padding-right: 10px;
   /* 预留滚动条空间 */
 }
-</style>
+</style>