7 changed files with 485 additions and 3 deletions
@ -0,0 +1,444 @@ |
|||
<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> |
|||
Loading…
Reference in new issue