bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新购编码入库限制一次最多入50条

This commit is contained in:
hayu 2026-01-20 18:51:03 +08:00
parent 1d9fb26306
commit 5c5b7457cf
1 changed files with 282 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

486
src/pages/new-purchase/entry/code-inbound.vue
View File

@ -51,13 +51,14 @@
<uni-col :span="4">
<checkbox-group @change="onChangeChecked(item)">
<label>
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="item.checked"
style="transform: scale(0.7)"
/>
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="item.checked"
:disabled="!item.checked && total >= 50"
style="transform: scale(0.7)"
/>
</label>
</checkbox-group>
</uni-col>
@ -76,10 +77,17 @@
</uni-row>
</view>
</scroll-view>
<view class="outbound-btn" @tap="onHandleOutbound"> 入库 </view>
<!-- 将原来的两个独立按钮替换为以下代码 -->
<view class="bottom-buttons">
<view class="outbound-btn" @tap="onHandleOutbound">入库</view>
<view class="checked-btn" @tap="checkedAll">
<span>全选</span><span>({{ total }})</span>
<view class="btn-content">
<span>全选</span>
<span>({{ total }})</span>
</view>
<view class="limit-text">(最多勾选50个)</view>
</view>
</view>
</view>
</template>
@ -107,6 +115,9 @@ const scanQrCodeRefBox = ref(null)
// const taskId = ref('')
// const maTypeName = ref('')
// const typeName = ref('')
const MAX_CHECKED = 50
const submitting = ref(false)
// 编码识别按钮
const onCodeIdentify = () => {
@ -329,237 +340,304 @@ const onScrollTolower = () => {
// 复选框事件
const onChangeChecked = (item) => {
item.checked = !item.checked
let arr = []
codeDeviceList.value.forEach((e) => {
if (e.checked == true) {
return arr.push(e)
}
})
console.log(arr)
total.value = arr.length
if (item.checked) {
item.checked = false
total.value--
} else {
item.checked = true
total.value++
}
}
// 复选框事件
const checkedAll = () => {
if (total.value < codeDeviceList.value.length) {
total.value = codeDeviceList.value.length
codeDeviceList.value.forEach((e) => {
e.checked = true
})
} else if (total.value == codeDeviceList.value.length) {
total.value = 0
codeDeviceList.value.forEach((e) => {
e.checked = false
})
// 当前未全选 → 执行“最多50个”的全选
if (total.value < Math.min(codeDeviceList.value.length, MAX_CHECKED)) {
let count = 0
codeDeviceList.value.forEach((e) => {
if (count < MAX_CHECKED) {
if (!e.checked) {
e.checked = true
count++
}
} else {
e.checked = false
}
})
total.value = Math.min(codeDeviceList.value.length, MAX_CHECKED)
if (codeDeviceList.value.length > MAX_CHECKED) {
uni.showToast({
title: `全选最多只能勾选${MAX_CHECKED}个`,
icon: 'none'
})
}
}
// 已经是“50个全选状态” → 取消全选
else {
codeDeviceList.value.forEach((e) => {
e.checked = false
})
total.value = 0
}
}
// 入库按钮
const onHandleOutbound = async () => {
const isSelect = codeDeviceList.value.some((e) => e.checked === true)
if (!isSelect) {
if (submitting.value) return
const isSelect = codeDeviceList.value.some((e) => e.checked === true)
if (!isSelect) {
uni.showToast({
title: '请勾选需要入库的设备',
icon: 'none',
})
return
}
let maxNum = Number(queryParams.value.purchaseNum) - Number(queryParams.value.inputNum)
console.log(maxNum)
if (total.value > maxNum) {
uni.showToast({
title: '勾选设备超过待入库数量！',
icon: 'none',
})
return
}
// 组装入库参数
const paramsList = []
codeDeviceList.value.map((e) => {
if (e.checked) {
paramsList.push({
maCode: e.maCode,
})
}
})
uni.showModal({
title: '提示',
content: '是否确定入库？',
success: async (req) => {
if (!req.confirm) return
const paramsList = codeDeviceList.value
.filter(e => e.checked)
.map(e => ({ maCode: e.maCode }))
if (paramsList.length === 0) {
uni.showToast({
title: '请勾选需要入库的设备',
icon: 'none',
title: '请选择需要入库的设备',
icon: 'none',
})
return
}
let maxNum = Number(queryParams.value.purchaseNum) - Number(queryParams.value.inputNum)
console.log(maxNum)
if (total.value > maxNum) {
uni.showToast({
title: '勾选设备超过待入库数量！',
}
submitting.value = true
uni.showLoading({
title: '提交中...',
mask: true
})
try {
const param = {
...queryParams.value,
purchaseId: queryParams.value.id,
inPutList: paramsList,
}
const res = await setInboundCodeAPI(param)
if (res.code === 200) {
uni.showToast({
title: '入库成功！',
icon: 'none',
})
return
})
await getCodeDeviceListData()
queryParams.value.inputNum =
Number(queryParams.value.inputNum) + paramsList.length
} else {
uni.showToast({
title: res.msg || '入库失败',
icon: 'none',
})
}
} catch (error) {
console.log('🚀 ~ onHandleOutbound ~ error:', error)
} finally {
submitting.value = false
uni.hideLoading()
}
}
// 组装入库参数
const paramsList = []
codeDeviceList.value.map((e) => {
if (e.checked) {
paramsList.push({
maCode: e.maCode,
})
}
})
uni.showModal({
title: '提示',
content: '是否确定入库？',
success: async (req) => {
if (req.confirm) {
try {
let param = {
...queryParams.value,
// taskId: queryParams.value.taskId,
// typeId: queryParams.value.typeId,
purchaseId: queryParams.value.id,
inPutList: paramsList,
}
const res = await setInboundCodeAPI(param)
console.log(res, '入库')
if (res.code === 200) {
uni.showToast({
title: '入库成功！',
icon: 'none',
})
getCodeDeviceListData()
setTimeout(() => {
queryParams.value.inputNum = Number(queryParams.value.inputNum) + paramsList.length
}, 800)
}
} catch (error) {
console.log('🚀 ~ onHandleOutbound ~ error:', error)
}
}
}
})
})
}
</script>
<style lang="scss" scoped>
.page-container {
display: flex;
display: flex;
height: 100%;
flex-direction: column;
background-color: #f7f8fa;
padding: 24rpx;
padding-bottom: 140rpx; // 为底部按钮留出更多空间
.card {
padding: 5px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
}
.form-view {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #f7f8fa;
padding: 24rpx;
padding-bottom: 120rpx; // 为底部按钮留出空间
.card {
padding: 5px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.table-list-item {
margin: 20rpx 0;
padding: 20rpx;
background-color: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
&:active {
transform: scale(0.985);
background-color: #fafbfc;
}
.form-view {
width: 100%;
height: 100%;
:deep(.uni-row) {
/* margin-bottom: 20rpx; */
.uni-col-7 {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
}
.cont {
display: flex;
justify-content: flex-end;
line-height: 1.8;
color: #262626;
font-size: 28rpx;
font-weight: 500;
}
// 复选框样式优化
checkbox-group {
display: flex;
justify-content: flex-end;
align-items: center;
}
.table-list-item {
margin: 20rpx 0;
padding: 20rpx;
background-color: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
&:active {
transform: scale(0.985);
background-color: #fafbfc;
label {
padding: 8rpx;
}
:deep(.uni-row) {
/* margin-bottom: 20rpx; */
.uni-col-7 {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
}
.cont {
display: flex;
justify-content: flex-end;
line-height: 1.8;
color: #262626;
font-size: 28rpx;
font-weight: 500;
}
// 复选框样式优化
checkbox-group {
display: flex;
justify-content: flex-end;
align-items: center;
label {
padding: 8rpx;
}
:deep(checkbox) {
margin-right: 0;
transform: scale(0.8);
}
}
}
.line {
margin: 24rpx 0;
height: 2rpx;
background: linear-gradient(
90deg,
rgba(232, 232, 232, 0) 0%,
rgba(232, 232, 232, 1) 50%,
rgba(232, 232, 232, 0) 100%
);
}
.coding-btn {
padding: 5rpx 0;
background-color: #409eff;
border-radius: 6rpx;
text-align: center;
color: #fff;
font-size: 12px;
:deep(checkbox) {
margin-right: 0;
transform: scale(0.8);
}
}
}
// 底部入库按钮
.outbound-btn {
position: fixed;
bottom: 40rpx;
left: 50%;
transform: translateX(-75%);
width: 60%;
height: 88rpx;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
text-align: center;
line-height: 88rpx;
color: #fff;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
// transition: all 0.3s ease;
// &:active {
// transform: translateX(-50%) scale(0.98);
// opacity: 0.9;
// }
.line {
margin: 24rpx 0;
height: 2rpx;
background: linear-gradient(
90deg,
rgba(232, 232, 232, 0) 0%,
rgba(232, 232, 232, 1) 50%,
rgba(232, 232, 232, 0) 100%
);
}
// 底部全选按钮
.checked-btn {
position: fixed;
bottom: 40rpx;
left: 70%;
// transform: translateX(-1%);
width: 25%;
height: 88rpx;
background: #fff;
text-align: center;
line-height: 88rpx;
color: #000;
border-radius: 12rpx;
.coding-btn {
padding: 5rpx 0;
background-color: #409eff;
border-radius: 6rpx;
text-align: center;
color: #fff;
font-size: 12px;
}
}
// 底部按钮容器
.bottom-buttons {
position: fixed;
bottom: 40rpx;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 24rpx;
gap: 20rpx;
}
// 入库按钮
.outbound-btn {
flex: 1;
min-width: 0; // 防止flex项溢出
height: 88rpx;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
text-align: center;
line-height: 88rpx;
color: #fff;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
white-space: nowrap;
&:active {
opacity: 0.9;
}
}
// 全选按钮
.checked-btn {
flex: 0 0 180rpx; // 固定宽度
height: 88rpx;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #000;
border-radius: 12rpx;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
padding: 10rpx 0;
.btn-content {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
line-height: 1.2;
span {
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
// transition: all 0.3s ease;
// &:active {
// transform: translateX(-50%) scale(0.98);
// opacity: 0.9;
// }
white-space: nowrap;
}
}
.limit-text {
font-size: 20rpx;
color: #ff0000;
line-height: 1.2;
margin-top: 4rpx;
white-space: nowrap;
}
&:active {
background-color: #f5f5f5;
}
}
}
// 加载提示文字
.loading-text {
text-align: center;
font-size: 26rpx;
color: #8c8c8c;
padding: 32rpx 0;
letter-spacing: 1rpx;
text-align: center;
font-size: 26rpx;
color: #8c8c8c;
padding: 32rpx 0;
letter-spacing: 1rpx;
}
</style>