You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
16 KiB
444 lines
16 KiB
8 months ago
|
<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"
|
||
|
v-if="tableData.length>0"
|
||
|
>
|
||
|
<el-table-column type="expand" width="50">
|
||
|
<template #default="scope">
|
||
|
<div
|
||
|
style="margin-left: 400px; margin-top: -8px; margin-bottom: -8px"
|
||
|
v-if="scope.row.packUnit && scope.row.packQty"
|
||
|
>
|
||
|
<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="qty1" align="center">
|
||
|
<template #default="scope2">
|
||
|
<el-input
|
||
|
v-model="scope2.row.qty1"
|
||
|
@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="qty1" 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="qty1" align="center">
|
||
|
<template #default="scope1">
|
||
|
<el-input v-model="scope1.row.qty1" @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)
|
||
|
const twoId = ref(0)
|
||
|
const intData = () => {
|
||
|
// 目前托信息等于包装规格1
|
||
|
tableData.value.forEach((item) => {
|
||
|
item.packQty1 = 3
|
||
|
|
||
|
// 判断托信息是否存在
|
||
|
console.log(44,item.packUnit);
|
||
|
console.log(item.packQty);
|
||
|
|
||
|
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.children = []
|
||
|
for (let i = 0; i < item.packQty1; i++) {
|
||
|
oneId.value++
|
||
|
// 如果有余数
|
||
|
if (item.lastNumber) {
|
||
|
// 最后一条信息直接展示余数的信息
|
||
|
if (i == item.packQty1 - 1) {
|
||
|
item.children.push({
|
||
|
id: oneId.value,
|
||
|
tPoNumber: i + 1,
|
||
|
xNumber: Math.ceil(item.lastNumber / parseFloat(item.secondPackQty)),
|
||
|
qty1: item.lastNumber
|
||
|
})
|
||
|
} else {
|
||
|
// 其他数据展示一托的全部箱数和全部数量
|
||
|
item.children.push({
|
||
|
id: oneId.value,
|
||
|
tPoNumber: i + 1,
|
||
|
xNumber: item.otherNumber,
|
||
|
qty1: item.packQty
|
||
|
})
|
||
|
}
|
||
|
} else {
|
||
|
// 如果沒有余数,直接展示一托的全部箱数和全部数量
|
||
|
item.children.push({
|
||
|
id: oneId.value,
|
||
|
tPoNumber: i + 1,
|
||
|
xNumber: item.otherNumber,
|
||
|
qty1: item.packQty
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
// 判断箱信息是否存在
|
||
|
if (item.secondPackUnit && item.secondPackQty) {
|
||
|
item.children.forEach((cur, key) => {
|
||
|
cur.children = []
|
||
|
// 数量除以托数量获取余数
|
||
|
cur.xLastNumber = parseFloat(cur.xNumber) % parseFloat(item.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,
|
||
|
qty1: cur.xLastNumber
|
||
|
})
|
||
|
} else {
|
||
|
// 其他数据展示一托的全部箱数和全部数量
|
||
|
cur.children.push({
|
||
|
id: twoId.value,
|
||
|
xPoNumber: j + 1,
|
||
|
qty1: item.secondPackQty
|
||
|
})
|
||
|
}
|
||
|
} else {
|
||
|
// 如果沒有余数,直接展示一托的全部箱数和全部数量
|
||
|
cur.children.push({
|
||
|
id: twoId.value,
|
||
|
xPoNumber: j + 1,
|
||
|
qty1: item.secondPackQty
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}else{
|
||
|
// 数量除以箱数量获取余数
|
||
|
item.lastNumber = parseFloat(item.orderQty) % parseFloat(item.secondPackQty)
|
||
|
item.children=[]
|
||
|
console.log(item.packQty1)
|
||
|
for (let i = 0; i < item.packQty1; i++) {
|
||
|
oneId.value++
|
||
|
if (item.lastNumber) {
|
||
|
// 最后一条信息直接展示余数的信息
|
||
|
if (i == item.packQty - 1) {
|
||
|
item.children.push({
|
||
|
id: oneId.value,
|
||
|
xPoNumber : i + 1,
|
||
|
qty1: item.lastNumber
|
||
|
})
|
||
|
} else {
|
||
|
// 其他数据展示一托的全部箱数和全部数量
|
||
|
item.children.push({
|
||
|
id: oneId.value,
|
||
|
xPoNumber: i + 1,
|
||
|
qty1: item.secondPackQty
|
||
|
})
|
||
|
}
|
||
|
}else{
|
||
|
item.children.push({
|
||
|
id: oneId.value,
|
||
|
xPoNumber: i + 1,
|
||
|
qty1: item.secondPackQty
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
console.log(item.children)
|
||
|
}
|
||
|
})
|
||
|
console.log(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 addT = (oneRow) => {
|
||
|
console.log(oneRow)
|
||
|
oneId.value++
|
||
|
oneRow.children.push({
|
||
|
id: oneId.value,
|
||
|
tPoNumber: oneRow.children[oneRow.children.length - 1].tPoNumber + 1,
|
||
|
xNumber: '',
|
||
|
qty1: ''
|
||
|
})
|
||
|
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){
|
||
|
console.log(444,twoRow.children)
|
||
|
twoRow.children.push({
|
||
|
id:twoId.value,
|
||
|
xPoNumber: twoRow?.children[twoRow.children.length - 1]?.xPoNumber? twoRow?.children[twoRow.children.length - 1]?.xPoNumber:0 + 1,
|
||
|
qty1: ''
|
||
|
})
|
||
|
twoRow.xNumber = twoRow.children.length
|
||
|
}else{
|
||
|
oneRow.children.push({
|
||
|
id:oneId.value,
|
||
|
xPoNumber: oneRow.children[oneRow.children.length - 1].xPoNumber + 1,
|
||
|
qty1: ''
|
||
|
})
|
||
|
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.qty1) || 0
|
||
|
})
|
||
|
twoRow.qty1 = 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.qty1 = parseFloat(twoRow.xNumber) * parseFloat(oneRow.secondPackQty)
|
||
|
}
|
||
|
twoRow.qty1 = 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 = ''
|
||
|
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,
|
||
|
qty1: cur.xLastNumber
|
||
|
})
|
||
|
} else {
|
||
|
// 其他数据展示一托的全部箱数和全部数量
|
||
|
cur.children.push({
|
||
|
id: twoId.value,
|
||
|
xPoNumber: j + 1,
|
||
|
qty1: oneRow.secondPackQty
|
||
|
})
|
||
|
}
|
||
|
} else {
|
||
|
// 如果沒有余数,直接展示一托的全部箱数和全部数量
|
||
|
cur.children.push({
|
||
|
id: twoId.value,
|
||
|
xPoNumber: j + 1,
|
||
|
qty1: oneRow.secondPackQty
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const blurTwo = (oneRow, twoRow, threeRow) => {
|
||
|
if (parseFloat(threeRow.xNumber) > parseFloat(oneRow.secondPackQty)) {
|
||
|
message.warning('数量不可以大于箱数量')
|
||
|
threeRow.qty1 = ''
|
||
|
return
|
||
|
}
|
||
|
let num = 0
|
||
|
twoRow.children.forEach((item) => {
|
||
|
num += parseFloat(item.qty1) || 0
|
||
|
})
|
||
|
twoRow.qty1 = num
|
||
|
}
|
||
|
const blurThree = (oneRow,twoRow)=>{
|
||
|
if(parseFloat(twoRow.qty1)>parseFloat(oneRow.secondPackQty)){
|
||
|
message.warning('每箱个数最多' + oneRow.secondPackQty )
|
||
|
twoRow.qty1 =oneRow.secondPackQty
|
||
|
}
|
||
|
}
|
||
|
defineExpose({ openLabel }) // 提供 open 方法,用于打开弹窗
|
||
|
</script>
|
||
|
<style lang="scss" scoped>
|
||
|
::v-deep .row-expand-cover td .el-table__expand-icon {
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
</style>
|