sfms3.0-ui/src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/labelForm.vue

<template>
  <el-dialog v-model="dialogTableVisible" title="标签" width="1100">
    <el-table
      :data="tableData"
      border
      row-key="id"
      style="width: 1050px; max-height: 70vh; overflow-y: auto"
    >
      <el-table-column type="expand" width="50">
        <template #default="scope">
          <div
            style="margin-left: 400px; margin-top: -8px; margin-bottom: -8px"
          >
            <el-table
              :data="scope.row.children"
              border
              style="width: 550px"
              row-key="id"
              :row-class-name="getRowClass"
            >
              <el-table-column type="expand" width="50">
                <template #default="scope1">
                  <div style="margin-left: 150px; margin-top: -8px; margin-bottom: -8px">
                    <el-table :data="scope1.row.children" border style="width: 300px" row-key="id">
                      <el-table-column label="箱行号" width="100" prop="xPoNumber" align="center" />
                      <el-table-column label="数量" width="100" prop="qtyTwo" align="center">
                        <template #default="scope2">
                          <el-input
                            v-model="scope2.row.qtyTwo"
                            @blur="blurTwo(scope.row, scope1.row, scope2.row)"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column label="添加箱" width="100" prop="add" align="center">
                        <template #header>
                          <el-button
                            type="primary"
                            link
                            @click="addX(scope.row, scope.$index, scope1.row, scope1.$index, 1)"
                            >添加箱</el-button
                          >
                        </template>
                        <template #default="scope2">
                          <el-button
                            type="warning"
                            link
                            @click="
                              removeX(
                                scope.row,
                                scope.$index,
                                scope1.row,
                                scope1.$index,
                                scope2.row,
                                scope2.$index,
                                1
                              )
                            "
                            >移出</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column> 
              <el-table-column label="托行号" width="100" prop="tPoNumber" align="center" />
              <el-table-column label="箱个数" width="100" prop="xNumber" align="center">
                <template #default="scope1">
                  <el-input v-model="scope1.row.xNumber" @blur="blurOne(scope.row, scope1.row)" />
                </template>
              </el-table-column>
              <el-table-column label="数量" width="100" prop="qtyOne" align="center" />
              <el-table-column label="操作" width="100" prop="action" align="center">
                <template #default="scope1">
                  <el-button
                    type="warning"
                    link
                    @click="removeT(scope.row, scope.$index, scope1.row, scope1.$index)"
                    >移出</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="添加托" width="100" prop="add" align="center">
                <template #header>
                  <el-button type="primary" link @click="addT(scope.row)">添加托</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div style="margin-left: 550px; margin-top: -8px; margin-bottom: -8px" v-else>
            <el-table :data="scope.row.children" border style="width: 300px" row-key="id">
              <el-table-column label="箱行号" width="100" prop="xPoNumber" align="center" />
              <el-table-column label="数量" width="100" prop="qtyOne" align="center">
                <template #default="scope1">
                  <el-input v-model="scope1.row.qtyOne" @blur="blurThree(scope.row, scope1.row)" />
                </template>
              </el-table-column>
              <el-table-column label="添加箱" width="100" prop="add" align="center">
                <template #header>
                  <el-button type="primary" link @click="addX(scope.row, scope.$index)"
                    >添加箱</el-button
                  >
                </template>
                <template #default="scope1">
                  <el-button
                    type="warning"
                    link
                    @click="removeX(scope.row, scope.$index, scope1.row, scope1.$index)"
                    >移出</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div> -->
        </template>
      </el-table-column>
      <el-table-column label="物料代码" width="150" prop="itemCode" align="center" />
      <el-table-column label="批次" width="150" prop="batch" align="center" />
      <el-table-column label="数量" width="100" prop="orderQty" align="center" />
      <el-table-column label="计量单位" width="100" prop="uom" align="center" />
      <el-table-column label="托个数" width="100" prop="packQty1" align="center" />
      <el-table-column label="托规格" width="100" prop="packUnit" align="center" />
      <el-table-column label="托数量" width="100" prop="packQty" align="center" />
      <el-table-column label="箱规格" width="100" prop="secondPackUnit" align="center" />
      <el-table-column label="箱数量" width="100" prop="secondPackQty" align="center" />
    </el-table>
    <template #footer>
      <slot name="foorter"></slot>
      <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as defaultButtons from '@/utils/disposition/defaultButtons'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const props = defineProps({
  // 列表 相关信息
  tableAllSchemas: {
    type: Array,
    required: true,
    default: null
  }
})

const dialogTableVisible = ref(false)

const tableData = ref([])
const openLabel = (tableList) => {
  console.log(tableList)
  dialogTableVisible.value = true
  tableData.value = tableList
  intData()
}
const oneId = ref(0) //每托的id
const twoId = ref(0) //每箱的id
const intData = () => {
  // 目前托信息等于包装规格1
  tableData.value.forEach((item) => {
    item.packQty1 = 11

    // 判断托信息是否存在
    if (item.packUnit && item.packQty) {
      // 数量除以托数量获取余数
      item.lastNumber = parseFloat(item.orderQty) % parseFloat(item.packQty)
      // 托数量/箱数量  一托可以放几箱
      item.otherNumber = parseFloat(item.packQty) / parseFloat(item.secondPackQty)
      // 数量%每箱数量  获取总共几箱
      item.allPackQty = Math.ceil(parseFloat(item.orderQty) / parseFloat(item.secondPackQty))
      // 数量%托数量  获取总共几托
      item.allTuoQty = Math.ceil(parseFloat(item.orderQty) / parseFloat(item.packQty))
      item.children = []
      // 循环托
      for (let i = 0; i < item.packQty1; i++) {
        oneId.value++
        // 先给所有托一个默认对象值
        item.children[i] = {
          id: oneId.value,
          tPoNumber: i + 1,
          xNumber: '',
          qtyOne: ''
        }
        // 循环当前数量所需要的托数量
        for (let j = 0; j < item.allTuoQty; j++) {
          if (i == j) {
            // 如果有余数
            if (item.lastNumber) {
              // 最后一条信息直接展示余数的信息
              if (j == item.allTuoQty - 1) {
              item.children[j].xNumber =  Math.ceil(item.lastNumber / parseFloat(item.secondPackQty))
              item.children[j].qtyOne = item.lastNumber
              }else{
                // 其他数据展示一托的全部箱数和全部数量
              item.children[j].xNumber = item.otherNumber
              item.children[j].qtyOne = item.packQty
            }
            }else{
              // 如果沒有余数,直接展示一托的全部箱数和全部数量
              item.children[j].xNumber = item.otherNumber
              item.children[j].qtyOne = item.packQty
            }
           
          }
        }
      }
      // 判断箱信息是否存在
      if (item.secondPackUnit && item.secondPackQty) {
        item.children.forEach((cur, key) => {
          cur.children = []
          // 数量除以箱数量获取余数
          cur.xLastNumber = parseFloat(cur.qtyOne) % parseFloat(item.secondPackQty)
          // cur.xiangNumber = Math.ceil(parseFloat(cur.qtyOne) / parseFloat(item.secondPackQty))
          for (let i = 0; i < cur.xNumber; i++) {
            twoId.value++
            cur.children[i]={
              id: twoId.value,
              xPoNumber: i + 1,
            }
            // 如果有余数
            if (cur.xLastNumber) {
              // 最后一条信息直接展示余数的信息
              if (i == cur.xNumber - 1) {
                cur.children[i].qtyTwo = cur.xLastNumber
              } else {
                // 其他数据展示一托的全部箱数和全部数量
                cur.children[i].qtyTwo = item.secondPackQty
              }
            } else {
              // 如果沒有余数,直接展示一托的全部箱数和全部数量
              cur.children[i].qtyTwo = item.secondPackQty
            }
          }
        })
      }
    } else {
      // 数量除以箱数量获取余数
      item.lastNumber = parseFloat(item.orderQty) % parseFloat(item.secondPackQty)
      // 数量%每箱数量  获取总共几箱
      item.allPackQty = Math.ceil(parseFloat(item.orderQty) / parseFloat(item.secondPackQty))
      item.children = []
      console.log(333,item.lastNumber)
      // 循环箱
      for (let i = 0; i < item.packQty1; i++) {
        oneId.value++
        // 先给所有托一个默认对象值
        item.children[i] = {
          id: oneId.value,
          xPoNumber: i + 1,
          qtyOne: ''
        }
        console.log(444,item.allPackQty)
         // 循环当前数量所需要的箱数量
         for (let j = 0; j < item.allPackQty; j++) {
          if (i == j) {
            // 如果有余数
            if (item.lastNumber) {
              // 最后一条信息直接展示余数的信息
              if (j == item.allPackQty - 1) {
              item.children[j].qtyOne = item.lastNumber
              }else{
                // 其他数据展示一托的全部箱数和全部数量
              item.children[j].qtyOne = item.secondPackQty
            }
            }else{
              // 如果沒有余数,直接展示一托的全部箱数和全部数量
              item.children[j].qtyOne = item.secondPackQty
            }
           
          }
        }
      }
     
    }
  })
  console.log(111, tableData.value)
}
/** 弹窗按钮 */
let Butttondata: any = []
Butttondata = [
  defaultButtons.formSaveBtn(null), // 保存
  defaultButtons.formCloseBtn(null) // 关闭
]

/** 按钮事件 */
const buttonBaseClick = (val) => {
  // 保存
  if (val == 'save') {
    submitForm()
  }
  // 关闭
  else if (val == 'close') {
    dialogTableVisible.value = false
  }
}
// 保存
const submitForm = () => {
  let arr = tableData.value.map((item) => {
    item.allNumber = 0
    // 判断托信息是否存在
    item.children.forEach((cur) => {
      item.allNumber += parseFloat(cur.qtyOne) || 0
    })

    if (item.allNumber == parseFloat(item.orderQty)) {
      return true
    } else {
      return false
    }
  })
  const isBol = arr.some((item) => item == false)
  if (isBol) {
    message.warning('当前添加的数量与总数量不一致')
    return
  }
}
// 添加托
const addT = (oneRow) => {
  oneId.value++
  oneRow.children.push({
    id: oneId.value,
    tPoNumber: oneRow.children[oneRow.children.length - 1].tPoNumber + 1, //行号是上一行的行号加1
    xNumber: '',
    qtyOne: ''
  })
  oneRow.packQty1 = oneRow.children.length
}
// 移出托
const removeT = (oneRow, oneIndex, twoRow, twoIndex) => {
  oneRow.children.splice(twoIndex, 1)
  oneRow.packQty1 = oneRow.children.length
}
// 添加箱
const addX = (oneRow, oneIndex, twoRow, twoIndex, type) => {
  twoId.value++
  //  有父级托的时候
  if (type == 1) {
    // 在托下添加箱
    twoRow.children.push({
      id: twoId.value,
      xPoNumber: twoRow?.children[twoRow.children.length - 1]?.xPoNumber
        ? twoRow?.children[twoRow.children.length - 1]?.xPoNumber
        : 0 + 1,
      qtyOne: ''
    })
    twoRow.xNumber = twoRow.children.length
  } else {
    // 直接添加箱
    oneRow.children.push({
      id: oneId.value,
      xPoNumber: oneRow.children[oneRow.children.length - 1].xPoNumber + 1,
      qtyOne: ''
    })
    oneRow.packQty1 = oneRow.children.length
  }
}
// 移除箱
const removeX = (oneRow, oneIndex, twoRow, twoIndex, threeRow, threeIndex, type) => {
  //  有父级托的时候
  if (type == 1) {
    // 在托下移除箱
    twoRow.children.splice(threeIndex, 1)
    let num = 0
    twoRow.children.forEach((item) => {
      num += parseFloat(item.qtyTwo) || 0
    })
    twoRow.qtyOne = num
    twoRow.xNumber = twoRow.children.length
  } else {
    oneRow.children.splice(twoIndex, 1)
    oneRow.packQty1 = oneRow.children.length
  }
}
// 是否显示展开图标
const getRowClass = (row) => {
  if (!row.row.children || row.row.children.length == 0) {
    return 'row-expand-cover'
  }
}
// 托失去焦点
const blurOne = (oneRow, twoRow) => {
  if (parseFloat(twoRow.xNumber) > parseFloat(oneRow.otherNumber)) {
    message.warning('每托箱个数最多' + oneRow.otherNumber + '箱')
    twoRow.xNumber = oneRow.otherNumber
    twoRow.children = []
    twoRow.qtyOne = parseFloat(twoRow.xNumber) * parseFloat(oneRow.secondPackQty)
    return
  }
  twoRow.qtyOne = parseFloat(twoRow.xNumber) * parseFloat(oneRow.secondPackQty)
  let num = 0
  oneRow.children.forEach((item) => {
    num += parseFloat(item.xNumber) || 0
  })
  if (num > oneRow.allPackQty) {
    message.warning('总箱数不可以大于' + oneRow.allPackQty)
    twoRow.xNumber = ''
    twoRow.qtyOne = ''
    return
  }
  // 托信息修改的時候箱数据自动排列
  // 判断箱信息是否存在
  if (oneRow.secondPackUnit && oneRow.secondPackQty) {
    oneRow.children.forEach((cur, key) => {
      cur.children = []
      // 数量除以托数量获取余数
      cur.xLastNumber = parseFloat(cur.xNumber) % parseFloat(oneRow.secondPackQty)
      for (let j = 0; j < cur.xNumber; j++) {
        twoId.value++
        // 如果有余数
        if (cur.xLastNumber) {
          // 最后一条信息直接展示余数的信息
          if (j == cur.xNumbery - 1) {
            cur.children.push({
              id: twoId.value,
              xPoNumber: j + 1,
              qtyTwo: cur.xLastNumber
            })
          } else {
            // 其他数据展示一托的全部箱数和全部数量
            cur.children.push({
              id: twoId.value,
              xPoNumber: j + 1,
              qtyTwo: oneRow.secondPackQty
            })
          }
        } else {
          // 如果沒有余数,直接展示一托的全部箱数和全部数量
          cur.children.push({
            id: twoId.value,
            xPoNumber: j + 1,
            qtyTwo: oneRow.secondPackQty
          })
        }
      }
    })
  }
}
//在托下方的箱数量失去焦点
const blurTwo = (oneRow, twoRow, threeRow) => {
  console.log(parseFloat(threeRow.qtyTwo))
  console.log(parseFloat(oneRow.secondPackQty))
  if (parseFloat(threeRow.qtyTwo) > parseFloat(oneRow.secondPackQty)) {
    message.warning('数量最多为' + oneRow.secondPackQty)
    threeRow.qtyTwo = oneRow.secondPackQty
    return
  }
  let num = 0
  twoRow.children.forEach((item) => {
    num += parseFloat(item.qtyTwo) || 0
  })
  twoRow.qtyOne = num
}
// 箱数量失去焦点
const blurThree = (oneRow, twoRow) => {
  if (parseFloat(twoRow.qtyOne) > parseFloat(oneRow.secondPackQty)) {
    message.warning('每箱个数最多' + oneRow.secondPackQty)
    twoRow.qtyOne = oneRow.secondPackQty
  }
}
defineExpose({ openLabel }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>
::v-deep .row-expand-cover td .el-table__expand-icon {
  visibility: hidden;
}
</style>