620 lines
20 KiB
Vue
620 lines
20 KiB
Vue
<template>
|
|
<!-- 领料出库详情 -->
|
|
<view class="page-container">
|
|
<uni-row :gutter="24" class="search-form">
|
|
<uni-col :span="18">
|
|
<view>
|
|
<uni-easyinput placeholder="请输入内容" v-model="keyWord" maxlength="10"/>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="search" @click="search">查询</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
|
|
<scroll-view scroll-y class="scroll-container">
|
|
<view
|
|
v-for="(item, index) in detailsList"
|
|
:key="index"
|
|
class="table-list-item"
|
|
>
|
|
<uni-swipe-action class="swipe-action">
|
|
<uni-swipe-action-item :right-options="item.status==2 ? options2 : options"
|
|
@click="onClick($event, item)">
|
|
<div class="title">
|
|
<span class="main-title">领料出库</span>
|
|
<div class="status-tag">
|
|
<uni-tag :text="item.status == 2 ? '已完成' : '未完成'"
|
|
:type="item.status == 2 ? 'success' : 'warning'"
|
|
:custom-style="item.status == 2 ? successStyle : warningStyle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<view class="line"></view>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">物资名称：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">{{ item.maTypeName }}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">规格型号：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">{{ item.typeName }}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">预领数量：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">{{ item.preNum }}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">已领数量：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">{{ item.alNum }}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">待领数量：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">{{ item.preNum - item.alNum }}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">单位：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">{{ item.unitName }}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">管理模式：</uni-col>
|
|
<uni-col :span="16">
|
|
<view class="cont">
|
|
<uni-tag
|
|
text="编码"
|
|
type="warning"
|
|
v-if="item.manageType === 0"
|
|
:custom-style="codeStyle"
|
|
/>
|
|
<uni-tag
|
|
text="数量"
|
|
type="success"
|
|
v-if="item.manageType === 1"
|
|
:custom-style="numStyle"
|
|
/>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-swipe-action-item>
|
|
</uni-swipe-action>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onUnmounted } from 'vue'
|
|
import { getOutboundDetailsAPI,getOutboundDetailsAPITwo,leaseOutBackApi } from '@/services/picking/outbound.js'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
const taskStatus = ref(3)//进行中
|
|
const detailsList = ref([])
|
|
const keyWord = ref('')
|
|
const search = () => {
|
|
console.log('🚀 ~ search ~ keyWord:', keyWord.value)
|
|
getOutboundDetailsData()
|
|
}
|
|
// 领料单位，参数等信息
|
|
const leaseApplyInfo = ref({
|
|
leaseUnitId: '', // 领料单位
|
|
leaseUnit: '', // 领料单位
|
|
leaseProjectId: '', // 领料工程
|
|
leaseProject: '', // 领料工程
|
|
maTypeName: '', // 物资类型
|
|
typeName: '', // 规格型号
|
|
unitName: '', // 单位
|
|
storageNum: '', // 库存数量
|
|
preNum: '', // 预领数量
|
|
parentId: '', // 出库时所需参数 取列表 id
|
|
id: '', // 出库时所需参数 取详情接口 id
|
|
typeId: '', // 出库时所需参数 取详情接口 typeId
|
|
manageType: '', // 出库时所需参数 取详情接口 manageType
|
|
publishTask: '', // 出库时所需参数 取详情接口 publishTask
|
|
})
|
|
|
|
onLoad((options) => {
|
|
leaseApplyInfo.value.parentId = options.id
|
|
if(options.publishTask == "null"){
|
|
leaseApplyInfo.value.publishTask = ""
|
|
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
|
|
}else{
|
|
leaseApplyInfo.value.publishTask = options.publishTask
|
|
}
|
|
// leaseApplyInfo.value.publishTask = options.publishTask
|
|
console.log('🚀 ~ onLoad ~ options:', options)
|
|
// getOutboundDetailsData()
|
|
})
|
|
onShow(() => {
|
|
getOutboundDetailsData()
|
|
})
|
|
// 获取列表详情
|
|
const getOutboundDetailsData = async () => {
|
|
console.log('Full leaseApplyInfo:', leaseApplyInfo.value);
|
|
console.log('parentId:', leaseApplyInfo.value.parentId);
|
|
console.log('keyWord:', keyWord.value);
|
|
console.log('publishTask:', leaseApplyInfo.value.publishTask);
|
|
console.log('publishTask type:', typeof leaseApplyInfo.value.publishTask);
|
|
|
|
try {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
let res;
|
|
if (leaseApplyInfo.value.publishTask === null || leaseApplyInfo.value.publishTask == "") {
|
|
console.log("Condition: publishTask is null or empty string");
|
|
// 如果 publishTask 为空，则只传递两个参数
|
|
console.log("yyyyyyyyyyyyyyyyyyyy");
|
|
const { data } = await getOutboundDetailsAPI(
|
|
leaseApplyInfo.value.parentId,
|
|
keyWord.value
|
|
);
|
|
res = data;
|
|
console.log('🚀 ~ getOutboundDetailsData ~ res:', res);
|
|
} else {
|
|
console.log("Condition: publishTask is not null and not empty string");
|
|
// 如果 publishTask 不为空，则传递三个参数
|
|
const { data } = await getOutboundDetailsAPITwo(
|
|
leaseApplyInfo.value.parentId,
|
|
keyWord.value,
|
|
leaseApplyInfo.value.publishTask
|
|
);
|
|
res = data;
|
|
console.log("xxxxxxxxxxx", res);
|
|
}
|
|
|
|
detailsList.value = res.leaseApplyDetailsList;
|
|
leaseApplyInfo.value.taskId = res.leaseApplyInfo.taskId;
|
|
leaseApplyInfo.value.typeId = res.leaseApplyInfo.typeId;
|
|
leaseApplyInfo.value.leaseUnitId = res.leaseApplyInfo.leaseUnitId;
|
|
leaseApplyInfo.value.leaseUnit = res.leaseApplyInfo.leaseUnit;
|
|
leaseApplyInfo.value.leaseProjectId = res.leaseApplyInfo.leaseProjectId;
|
|
leaseApplyInfo.value.leaseProject = res.leaseApplyInfo.leaseProject;
|
|
taskStatus.value = res.leaseApplyInfo.taskStatus;
|
|
if(taskStatus.value==3){
|
|
options.value = [
|
|
{ text: '出库',style: {backgroundColor: '#84c649',color: '#fff',fontSize: '28rpx'} },
|
|
// { text: '退回',style: {backgroundColor: '#ed6042',color: '#fff',fontSize: '28rpx'} },
|
|
{ text: '查看',style: {backgroundColor: '#3784fb',color: '#fff',fontSize: '28rpx'} }
|
|
];
|
|
options2.value = [
|
|
// { text: '退回',style: {backgroundColor: '#ed6042',color: '#fff',fontSize: '28rpx'}},
|
|
{ text: '查看',style: {backgroundColor: '#3784fb',color: '#fff',fontSize: '28rpx'}}
|
|
]
|
|
}else if(taskStatus.value==4){
|
|
options.value = [
|
|
{ text: '出库',style: {backgroundColor: '#84c649',color: '#fff',fontSize: '28rpx'} },
|
|
{ text: '查看',style: {backgroundColor: '#3784fb',color: '#fff',fontSize: '28rpx'} }
|
|
];
|
|
options2.value = [
|
|
{ text: '查看',style: {backgroundColor: '#3784fb',color: '#fff',fontSize: '28rpx'}}
|
|
]
|
|
}
|
|
} catch (error) {
|
|
console.log('🚀 ~ getOutboundDetailsData ~ error:', error)
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
|
|
// 数量退回
|
|
const leaseOutBack = async (item) => {
|
|
console.log(item)
|
|
if(item.alNum==0){
|
|
uni.showToast({
|
|
title: '暂无物资可退！',
|
|
icon: 'none',
|
|
})
|
|
}else{
|
|
if(item.manageType==0){//编码
|
|
console.log('编码xxxxxxxxx', item)
|
|
// const { status,manageType,maTypeName,typeName,storageNum,preNum,alNum,unitName,id,typeId, unitValue} = item
|
|
// leaseApplyInfo.value.maTypeName = maTypeName
|
|
// leaseApplyInfo.value.typeName = typeName
|
|
// leaseApplyInfo.value.unitName = unitName
|
|
// leaseApplyInfo.value.storageNum = storageNum
|
|
// leaseApplyInfo.value.preNum = preNum
|
|
// leaseApplyInfo.value.alNum = alNum
|
|
// leaseApplyInfo.value.id = id
|
|
// leaseApplyInfo.value.typeId = typeId
|
|
// leaseApplyInfo.value.manageType = manageType
|
|
// leaseApplyInfo.value.unitValue = unitValue
|
|
leaseApplyInfo.value = item
|
|
console.log(leaseApplyInfo.value)
|
|
let codingUrl = '/pages/picking/outbound/inner-detail'
|
|
// 把 leaseApplyInfo 领料信息转成 json 传递到下个页面
|
|
uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(leaseApplyInfo.value)}&isBack=1` })
|
|
}else{
|
|
let param = {
|
|
outNum:item.alNum,
|
|
taskId:leaseApplyInfo.value.taskId,
|
|
typeId:item.typeId,
|
|
parentId:item.parentId,
|
|
publishTask:leaseApplyInfo.value.publishTask
|
|
}
|
|
console.log(param)
|
|
uni.showModal({
|
|
title: '退回',
|
|
content: `是否确定退回该类型的出库?`,
|
|
confirmText: '确定',
|
|
cancelText: '取消',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
const res = await leaseOutBackApi(param)
|
|
console.log(res)
|
|
if(res.code==200){
|
|
uni.showToast({
|
|
title: '退回成功！',
|
|
icon: 'none',
|
|
})
|
|
getOutboundDetailsData()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
// 状态标签样式
|
|
const successStyle = {
|
|
color: '#52c41a',
|
|
backgroundColor: 'rgba(82, 196, 26, 0.1)',
|
|
border: '2rpx solid rgba(82, 196, 26, 0.2)',
|
|
fontWeight: '600'
|
|
}
|
|
|
|
const warningStyle = {
|
|
color: '#fa8c16',
|
|
backgroundColor: 'rgba(250, 140, 22, 0.1)',
|
|
border: '2rpx solid rgba(250, 140, 22, 0.2)',
|
|
fontWeight: '600'
|
|
}
|
|
|
|
// 管理方式标签样式
|
|
const codeStyle = {
|
|
color: '#ff9800',
|
|
backgroundColor: 'rgba(255, 152, 0, 0.1)',
|
|
border: '2rpx solid rgba(255, 152, 0, 0.2)',
|
|
padding: '4rpx 16rpx',
|
|
fontSize: '26rpx',
|
|
fontWeight: '600'
|
|
}
|
|
|
|
const numStyle = {
|
|
color: '#13c2c2',
|
|
backgroundColor: 'rgba(19, 194, 194, 0.1)',
|
|
border: '2rpx solid rgba(19, 194, 194, 0.2)',
|
|
padding: '4rpx 16rpx',
|
|
fontSize: '26rpx',
|
|
fontWeight: '600'
|
|
}
|
|
|
|
// 右滑按钮组
|
|
const options = ref([
|
|
{
|
|
text: '出库',
|
|
style: {
|
|
backgroundColor: '#84c649',
|
|
// color: '#fff',
|
|
fontSize: '28rpx',
|
|
},
|
|
},
|
|
{
|
|
text: '查看',
|
|
style: {
|
|
backgroundColor: '#3784fb',
|
|
// color: '#fff',
|
|
fontSize: '28rpx',
|
|
},
|
|
}
|
|
])
|
|
const options2 = ref([
|
|
{
|
|
text: '查看',
|
|
style: {
|
|
backgroundColor: '#3784fb',
|
|
// color: '#fff',
|
|
fontSize: '28rpx',
|
|
},
|
|
},
|
|
])
|
|
|
|
// 点击滑动按钮
|
|
const onClick = (e, item) => {
|
|
console.log("tttttttttt",e,item)
|
|
if(taskStatus.value==3){//出库进行中
|
|
console.log("333333333333333333333333333")
|
|
if (e.content.text == '出库') {
|
|
if (item.status == 2) {//已完成
|
|
leaseOutBack(item)
|
|
}else{
|
|
console.log("rrrrrrrrrrrrr",30)
|
|
onCodingItem(item)//出库
|
|
}
|
|
}
|
|
if (e.content.text == '查看') {
|
|
checkViewDetail(item)//查看
|
|
}
|
|
}
|
|
if(taskStatus.value==4){//出库已完成
|
|
checkViewDetail(item)//查看
|
|
}
|
|
// onCodingItem(item)//出库
|
|
// checkViewDetail(item)//查看
|
|
// onCodingItem(item)//出库
|
|
}
|
|
// 点击跳转出库页面
|
|
const onCodingItem = (item) => {
|
|
console.log("uuuuuuuuuuuuuuu",item)
|
|
// 解构所需要的数据
|
|
const {
|
|
status,
|
|
manageType,
|
|
maTypeName,
|
|
typeName,
|
|
storageNum,
|
|
preNum,
|
|
alNum,
|
|
unitName,
|
|
id,
|
|
typeId,
|
|
unitValue,
|
|
} = item
|
|
leaseApplyInfo.value.maTypeName = maTypeName
|
|
leaseApplyInfo.value.typeName = typeName
|
|
leaseApplyInfo.value.unitName = unitName
|
|
leaseApplyInfo.value.storageNum = storageNum
|
|
leaseApplyInfo.value.preNum = preNum
|
|
leaseApplyInfo.value.alNum = alNum
|
|
leaseApplyInfo.value.id = id
|
|
leaseApplyInfo.value.typeId = typeId
|
|
leaseApplyInfo.value.manageType = manageType
|
|
leaseApplyInfo.value.unitValue = unitValue
|
|
console.log(leaseApplyInfo.value)
|
|
let codingUrl = ''
|
|
if (manageType === 0) {
|
|
codingUrl = '/pages/picking/outbound/code-outbound' // 编码出库
|
|
}
|
|
if (manageType == 1) {
|
|
codingUrl = '/pages/picking/outbound/num-outbound' // 数量出库
|
|
}
|
|
// 把 leaseApplyInfo 领料信息转成 json 传递到下个页面
|
|
uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(leaseApplyInfo.value)}` })
|
|
}
|
|
|
|
const checkViewDetail = (item) => {
|
|
// 解构所需要的数据
|
|
const {
|
|
status,
|
|
manageType,
|
|
maTypeName,
|
|
typeName,
|
|
storageNum,
|
|
preNum,
|
|
alNum,
|
|
unitName,
|
|
id,
|
|
typeId,
|
|
unitValue,
|
|
publishTask,
|
|
} = item
|
|
leaseApplyInfo.value.maTypeName = maTypeName
|
|
leaseApplyInfo.value.typeName = typeName
|
|
leaseApplyInfo.value.unitName = unitName
|
|
leaseApplyInfo.value.storageNum = storageNum
|
|
leaseApplyInfo.value.preNum = preNum
|
|
leaseApplyInfo.value.alNum = alNum
|
|
leaseApplyInfo.value.id = id
|
|
leaseApplyInfo.value.typeId = typeId
|
|
leaseApplyInfo.value.manageType = manageType
|
|
leaseApplyInfo.value.unitValue = unitValue
|
|
leaseApplyInfo.value.publishTask = publishTask
|
|
console.log(leaseApplyInfo.value)
|
|
let codingUrl = '/pages/picking/outbound/inner-detail'
|
|
// 把 leaseApplyInfo 领料信息转成 json 传递到下个页面
|
|
uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(leaseApplyInfo.value)}&isBack=0` })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
background-color: #f7f8fa;
|
|
padding: 24rpx;
|
|
|
|
// 搜索表单
|
|
.search-form {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
padding: 14rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
|
|
:deep(.uni-easyinput__content) {
|
|
background-color: #f7f8fa;
|
|
border: 2rpx solid #e8e8e8;
|
|
border-radius: 12rpx;
|
|
height: 75rpx;
|
|
padding: 0 24rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:focus-within {
|
|
border-color: #3784fb;
|
|
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
|
}
|
|
|
|
.uni-easyinput__content-input {
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
height: 75rpx;
|
|
line-height: 75rpx;
|
|
}
|
|
}
|
|
|
|
// 搜索按钮
|
|
.search {
|
|
height: 60rpx;
|
|
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
color: #fff;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 列表项样式
|
|
.table-list-item {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.99);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
// 标题栏
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.main-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
|
|
// 状态标签
|
|
.status-tag {
|
|
:deep(.uni-tag) {
|
|
padding: 8rpx 24rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
|
|
&[type="warning"] {
|
|
color: #fa8c16;
|
|
background: rgba(250, 140, 22, 0.1);
|
|
}
|
|
|
|
&[type="success"] {
|
|
color: #52c41a;
|
|
background: rgba(82, 196, 26, 0.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 分隔线
|
|
.line {
|
|
height: 2rpx;
|
|
background: linear-gradient(90deg,
|
|
rgba(232, 232, 232, 0) 0%,
|
|
rgba(232, 232, 232, 1) 50%,
|
|
rgba(232, 232, 232, 0) 100%
|
|
);
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
// 内容行
|
|
.uni-row {
|
|
/* margin-bottom: 20rpx; */
|
|
font-size: 28rpx;
|
|
|
|
.uni-col-6 {
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.cont {
|
|
color: #262626;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 加载提示文字
|
|
.loading-text {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #8c8c8c;
|
|
padding: 32rpx 0;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
|
|
// 优化滑动区域样式
|
|
:deep(.uni-swipe_action) {
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.uni-swipe_content {
|
|
margin: 0 !important;
|
|
padding: 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.uni-swipe_button-group {
|
|
height: 100%;
|
|
|
|
.uni-swipe_button {
|
|
height: 100%;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
border: none;
|
|
writing-mode: vertical-rl;
|
|
|
|
// 查看按钮
|
|
&:nth-child(1) {
|
|
background: linear-gradient(to bottom, #3ad980, #34C759) !important;
|
|
}
|
|
|
|
// 出库按钮
|
|
&:nth-child(2) {
|
|
background: linear-gradient(to bottom, #3b95ff, #007AFF) !important;
|
|
}
|
|
|
|
&:active {
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|