后台发货动态校验多包裹及校验可选择发货数量

之前通过多级动态表单获取到多包裹，接下来就是再根据多包裹来判断可选择发货数量
要结合之前的多级表单动态添加包裹会更好理解

目前这个只是一种方法，我相信还有别的方法，可能会更简单

选择商品

• 选择商品里面选择可选择发货数量，
  • 可选择的发货数量是总数量-每个包裹选择的当前商品的数量-已发货数量
• 可选择发货数量为0时禁用
• 默认展开时全选商品
• 默认展开时可选择商品数默认展示

展示

思路

• 只要把可选择商品把选择商品的数量解决来其他的都好说

  • 复选框的禁用
  • 商品可选择的数量
  • 商品最大值最小值的范围

• 还有一个就是默认展示 这个只要根据element 的toggleRowSelection方法就可以默认全选选中了

页面代码

  <BaseDialog title="选择商品" v-model="goodsModel" @close="closegoodGroup">
    <div>
      <el-table
        ref="shopTable"
        :data="newTableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKey"
      >
        <el-table-column
          type="selection"
          :selectable="selected"
          :reserve-selection="true"
          width="55"
        ></el-table-column>
        <el-table-column label="SKUID" prop="outerSkuId"></el-table-column>
        <el-table-column label="商品名称" prop="skuName"></el-table-column>
        <el-table-column label="所属组合商品" prop="packageSkuName" width="200">
        </el-table-column>
        <el-table-column
          v-if="!subDeliver"
          label="商品规格"
          prop="specs"
        ></el-table-column>
        <el-table-column
          v-if="!subDeliver"
          label="总数量"
          prop="number"
        ></el-table-column>
        <el-table-column
          v-if="!subDeliver"
          label="已发货数量"
          prop="hadDeliveryNumber"
        ></el-table-column>
        <el-table-column
          v-if="!subDeliver"
          label="本次发货数量"
          prop=""
          width="200"
        >
          <template #default="{ row, $index }">
            <el-input-number
              :disabled="getMaxNumber(row) === 0 ? true : false"
              :max="getMaxNumber(row, $index)"
              :min="0"
              v-model="row.theSendGoods"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="default" @click="closegoodGroup">取消</el-button>
        <el-button type="primary" @click="submitGood">确认</el-button>
      </div>
    </template>
  </BaseDialog>

逻辑代码

export default {
 name: '',
 props: {
   subDeliver: {
     type: Boolean,
     default: null,
   },
   goodsModel: {
     type: Boolean,
     default: null,
   },
   newGoodList: {
     type: Array,
     default: () => {
       return []
     },
   },
 },

 data() {
   return {
     // goodsModel: false, // 选择商品弹框
     pitchData: [],
     flagNum: false,
     newTableData: [],
     tableData: [],
   }
 },

 watch: {
   tableData: {
     deep: true,
     immediate: true,
     handler(newVal, oldVal) {
       console.log('newVal: ', newVal)
       this.newTableData = JSON.parse(JSON.stringify(newVal))
       this.newTableData.forEach((v) => {
         this.$nextTick(() => {
           v.selectFlagState = false
           v.theSendGoods = this.setSelectNum(v)
           this.$refs.shopTable.toggleRowSelection(v, true)
         })
       })
     },
   },
 },

 methods: {
   selected(row, index) {
     if (this.subDeliver) {
       return true
     } else {
       return this.setSelectNum(row) === 0 ? false : true
     }
   },
   getMaxNumber(row) {
     return this.setSelectNum(row)
   },
   // 返回唯一值
   getRowKey(row) {
     return row.id
   },
   closegoodGroup() {
     // this.goodsModel = false
     this.$emit('closeGood', false)
   },
   submitGood() {
     // this.goodsModel = false

     if (this.pitchData.length > 0) {
       if (this.subDeliver) {
         if (this.flagSelect) {
           this.$emit('subPitchData', this.pitchData)
         } else {
           this.$message.warning('请选择子商品')
           this.$emit('subPitchData', [])
         }
       } else {
         let selectEditData = []
         JSON.parse(JSON.stringify(this.newTableData)).map((i) => {
           i.isCommonProduct = i.packageSkuName ? true : false
           i.isCommonProduct
             ? (i.newSkuId = i.skuId + i.outerSkuId)
             : (i.newSkuId = i.skuId)
           this.pitchData.map((v) => {
             v.isCommonProduct
               ? (v.newSkuId = v.skuId + v.outerSkuId)
               : (v.newSkuId = v.skuId)
             if (v.selectFlagState && v.newSkuId === i.newSkuId) {
               selectEditData.push({
                 orderItemId: i.id,
                 skuId: i.skuId,
                 skuName: i.skuName,
                 storeOuCode: i.storeOuCode,
                 theSendGoods: i.theSendGoods,
                 number: i.theSendGoods,
                 totalNumber: i.number,
                 outerSkuId: v.outerSkuId,
                 packageSkuName: v.packageSkuName,
               })
             }
           })
         })

         try {
           let isHasProduct = selectEditData.every((item) => item.number === 0)
           if (isHasProduct) {
             throw new Error('请选择商品')
           } else {
           }
           selectEditData = selectEditData.filter((item) => item.number !== 0)
         } catch (error) {
           this.$message.error(error.message)
         }

         this.$emit('pitchData', selectEditData)
       }
     } else {
       this.$message({
         type: 'warning', // success error warning
         message: '请选择商品',
         duration: 2000,
       })
     }
     this.flagSelect = false
   },
   handleSelectionChange(data) {
     this.pitchData = []
     this.pitchData = JSON.parse(JSON.stringify(data)).map((v) => {
       return {
         orderItemId: v.id,
         skuId: v.skuId,
         skuName: v.skuName,
         storeOuCode: v.storeOuCode,
         number: this.subDeliver ? '0' : v.number,
         selectFlagState: true,
         outerSkuId: v.outerSkuId,
         packageSkuName: v.packageSkuName,
         isCommonProduct: v.packageSkuName ? true : false,
       }
     })

     this.flagSelect = this.pitchData.length > 0 ? true : false
   },
   //默认展示最发货数量 及
   setSelectNum(row) {
     // 当前包裹没有商品可选择的商品数量
     let selectCanNumber = 0

     // 有多个包裹那么此商品累计的数量
     let selectNumber = 0

     // 当前包裹有商品可选择的商品数量
     let selectFlagNumber = 0

     // 判断当前包裹是否有商品
     let flagNum = false

     this.newGoodList.forEach((item) => {
       console.log('item: ', item)
       //如果该项目有多个 packageList，则进一步遍历每个包裹
       if (item.packageList.length > 0) {
         item.packageList.forEach((v) => {
           // 对于每个包裹，判断里面是否有商品，如果有 packageSkuList 商品
           // 如果包裹里面有商品
           if (v.packageSkuList.length > 0) {
             // 遍历每一个商品
             v.packageSkuList.forEach((value) => {
               // 如果包裹里面的商品与可选择的表格商品中每一个商品保持一致
               if (value.skuId == row.skuId) {
                 selectNumber += value.number
                 // 累计其他包裹中该商品的数量
                 // 可选择的商品数量 等于总的商品数量减去已发货数量减去其他包裹的该商品的数量
                 selectFlagNumber =
                   parseInt(row.number) -
                   parseInt(row.hadDeliveryNumber) -
                   parseInt(selectNumber)

                 // 做一步校验如果总数量等于已发货数量，则可选择的数量为0
                 if (
                   selectNumber >=
                   parseInt(row.number) - parseInt(row.hadDeliveryNumber)
                 ) {
                   selectFlagNumber = 0
                 }
                 flagNum = true
               } else {
                 // 其他包裹中该商品不包含当前表格中的商品

                 // 可选择的商品等总数量的商品减去已发货的商品
                 selectFlagNumber =
                   parseInt(row.number) - parseInt(row.hadDeliveryNumber)
                 // 做一步校验如果总数量等于已发货数量，则可选择的数量为0
                 console.log('selectNumber: ', selectNumber)
                 console.log('row.number: ', row.number)
                 console.log('row.hadDeliveryNumber: ', row.hadDeliveryNumber)

                 if (
                   selectNumber >=
                   parseInt(row.number) - parseInt(row.hadDeliveryNumber)
                 ) {
                   selectFlagNumber = 0
                 } else {
                   // 其他包裹中该商品不包含当前表格中的商品 且总数量减去发货数量不等于0 那么得需要再减去其他包裹已选择的发货数量
                   selectFlagNumber =
                     parseInt(row.number) -
                     parseInt(row.hadDeliveryNumber) -
                     parseInt(selectNumber)
                 }
                 flagNum = true
               }
             })
           } else {
             // 如果包裹里面没有商品 那么可以选择商品数量等于总数量减去已发货的数量
             selectCanNumber =
               parseInt(row.number) - parseInt(row.hadDeliveryNumber)
           }
         })
       } else {
         // 如果当前包裹的数量只有一个  那么可以选择的商品等于总数量减去已发货的商品数量
         selectCanNumber =
           parseInt(row.number) - parseInt(row.hadDeliveryNumber)
       }
     })

     if (flagNum) {
       // 如果包裹里面有商品 那么可选择的商品数量就是 selectFlagNumber
       return selectFlagNumber
     } else {
       // 如果包裹里面没有商品 那么可选择的商品数量就是 selectCanNumber
       return selectCanNumber
     }
   },
 },
}