301 lines
9.2 KiB
Vue
301 lines
9.2 KiB
Vue
<template>
|
||
<!-- 编码出库-->
|
||
<view class="page-container">
|
||
<view class="table-list-item">
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">领料单位：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ queryParams.leaseUnit }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">领料工程：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ queryParams.leaseProject }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">当前出库物资：</uni-col>
|
||
<uni-col :span="18"
|
||
><view class="cont">{{ queryParams.maTypeName }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">待出库数量：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ maxNum }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<view class="table-list-item">
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">出库方式：</uni-col>
|
||
<uni-col :span="6">
|
||
<view class="coding-btn">编码识别</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view class="coding-btn">编码识别</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view class="coding-btn">二维码识别</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<view class="table-list-item">
|
||
<uni-row :gutter="24" style="display: flex; align-items: center">
|
||
<uni-col :span="6">
|
||
<view> 设备编码 </view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view>
|
||
<uni-easyinput placeholder="请输入内容" />
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view
|
||
class="coding-btn"
|
||
style="
|
||
padding: 10rpx 0;
|
||
color: #fe9a09;
|
||
background-color: #fff7eb;
|
||
border: 1px solid #fe9a09;
|
||
"
|
||
@tap="onCodeSearch"
|
||
>编码检索
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<scroll-view scroll-y @scrolltolower="onScrollTolower" style="padding-bottom: 85rpx">
|
||
<view class="table-list-item" v-for="item in codeDeviceList" :key="item.maId">
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="5">物资类型：</uni-col>
|
||
<uni-col :span="15">
|
||
<view class="cont">{{ item.materialName }}</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<checkbox-group @change="onChangeChecked(item)">
|
||
<label>
|
||
<checkbox
|
||
color="#409eff"
|
||
borderColor="#409eff"
|
||
activeBorderColor="#409eff"
|
||
:checked="item.checked"
|
||
:disabled="maxNum === isSelectNum && !item.checked"
|
||
style="transform: scale(0.7)"
|
||
/>
|
||
</label>
|
||
</checkbox-group>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="5">规格型号：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ item.materialModel }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="5">设备状态：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ item.statusName }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="5">设备数量：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">1</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<view class="loading-text">
|
||
{{ finish ? '没有更多数据了~' : '正在加载...' }}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="outbound-btn" @tap="onHandleOutbound"> 出库 </view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { getCodeDeviceListAPI, setOutboundNumAPI } from '@/services/picking/outbound.js'
|
||
import { onBackPress } from '@dcloudio/uni-app'
|
||
const query = defineProps() // 获取上级页面传递的路由参数
|
||
const queryParams = JSON.parse(query.queryParams)
|
||
const codeDeviceList = ref([])
|
||
const total = ref(0)
|
||
|
||
// 编码设备列表查询参数
|
||
const queryCodeParams = ref({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
typeId: queryParams.typeId,
|
||
maStatus: 1,
|
||
})
|
||
|
||
// 计算出库最大数量
|
||
const maxNum = computed(() => {
|
||
// 1. 先通过预领数量和已领数量计算剩余待出库数量
|
||
const waitNum = queryParams.preNum - queryParams.alNum
|
||
|
||
// 2. 判断库存数量是否大于待出库数量 如大于则取待出库数量 如小于则取库存书看了
|
||
return total.value > waitNum ? waitNum : total.value
|
||
})
|
||
|
||
// 获取编码列表
|
||
const getCodeDeviceListData = async () => {
|
||
// console.log('queryCodeParams', queryCodeParams)
|
||
const res = await getCodeDeviceListAPI(queryCodeParams.value)
|
||
codeDeviceList.value.push(...res.rows)
|
||
|
||
if (codeDeviceList.value.length > 0) {
|
||
codeDeviceList.value = codeDeviceList.value.map((e) => {
|
||
return { ...e, checked: false }
|
||
})
|
||
}
|
||
total.value = res.total
|
||
}
|
||
getCodeDeviceListData()
|
||
|
||
// 编码搜索按钮
|
||
const onCodeSearch = () => {
|
||
codeDeviceList.value = []
|
||
getCodeDeviceListData()
|
||
}
|
||
|
||
// 滚动触底事件
|
||
const onScrollTolower = () => {
|
||
console.log('滚动触底--')
|
||
if (total.value > codeDeviceList.value.length) {
|
||
queryCodeParams.value.pageNum++
|
||
getCodeDeviceListData()
|
||
}
|
||
}
|
||
|
||
// 判断数据是否加载完毕
|
||
const finish = computed(() => {
|
||
if (total.value === codeDeviceList.value.length) return true
|
||
})
|
||
|
||
// 复选框事件
|
||
const onChangeChecked = (item) => {
|
||
item.checked = !item.checked
|
||
}
|
||
|
||
// 计算已选择数量
|
||
const isSelectNum = computed(() => {
|
||
const isSelectList = codeDeviceList.value.filter((e) => e.checked === true)
|
||
if (maxNum.value === isSelectList.length) {
|
||
uni.showToast({
|
||
title: '勾选设备已达到最大待出库数量！',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
return isSelectList.length
|
||
})
|
||
|
||
// 出库按钮
|
||
const onHandleOutbound = async () => {
|
||
const isSelect = codeDeviceList.value.some((e) => e.checked === true)
|
||
|
||
if (!isSelect) {
|
||
uni.showToast({
|
||
title: '请勾选需要出库的设备',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
// 解构所需要的数据
|
||
const { typeId, parentId } = queryParams
|
||
// 组装出库参数
|
||
const paramsList = []
|
||
codeDeviceList.value.map((e) => {
|
||
if (e.checked) {
|
||
paramsList.push({
|
||
leaseType: 0,
|
||
maId: e.maId,
|
||
manageType: 0,
|
||
outNum: 1,
|
||
parentId,
|
||
typeId,
|
||
})
|
||
}
|
||
})
|
||
|
||
const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList })
|
||
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '出库成功！',
|
||
icon: 'none',
|
||
})
|
||
|
||
setTimeout(() => {
|
||
// 返回上一个页面
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
success() {
|
||
uni.$emit('onUpdate')
|
||
},
|
||
})
|
||
}, 500)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
display: flex;
|
||
height: 100%;
|
||
padding: 0 15rpx;
|
||
flex-direction: column;
|
||
background-color: #e8f5fb;
|
||
|
||
.table-list-item {
|
||
margin: 5rpx 0;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.coding-btn {
|
||
padding: 5rpx 0;
|
||
background-color: #409eff;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
// 加载提示文字
|
||
.loading-text {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.outbound-btn {
|
||
position: fixed;
|
||
bottom: 15rpx;
|
||
left: 15%;
|
||
width: 70%;
|
||
height: 65rpx;
|
||
line-height: 65rpx;
|
||
text-align: center;
|
||
background-color: #19be6b;
|
||
border-radius: 12rpx;
|
||
color: #fff;
|
||
}
|
||
</style>
|