优化
This commit is contained in:
491
pagesStorage/addOutStorage.vue
Normal file
491
pagesStorage/addOutStorage.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 项目描述,物料号,物料描述,供应商编码,供应商名称,SAP订单编号,入库单据号,出库单据号，入库类型，库位码 -->
|
||||
<uv-search v-model="searchValue" placeholder="请输入" searchIcon="scan" :showAction="true" actionText="搜索"
|
||||
@search="searchList" @custom="searchList" @clickIcon="getScanCode()" style="margin-bottom: 20rpx;"></uv-search>
|
||||
|
||||
<view class="section" v-if="list.length">
|
||||
<view class="section-title">货物信息：共{{ list.length }}条</view>
|
||||
<view class="info-box" v-for="(item, index) in list" :key="index">
|
||||
<view
|
||||
style="display: flex;align-items: center;justify-content: space-between;width: 100%;margin-bottom: 16rpx;">
|
||||
<!-- <view style="font-weight: bold;">总数量: {{ item.htQty }}</view> -->
|
||||
<view></view>
|
||||
<uv-button type="error" v-show="item.outboundStatus" text="已预出库" plain size="mini"></uv-button>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">物料号：</text>
|
||||
<text class="info-value">{{ item.wlNo }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">物料描述：</text>
|
||||
<text class="info-value">{{ item.wlMs }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">存放位置：</text>
|
||||
<text class="info-value">{{ item.pcode }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单号：</text>
|
||||
<text class="info-value">{{ item.sapNo }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">项目编号：</text>
|
||||
<text class="info-value">{{ item.xmNo }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">项目名称：</text>
|
||||
<text class="info-value">{{ item.xmMs }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">供应商：</text>
|
||||
<text class="info-value">{{ item.gysMc }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">身份码：</text>
|
||||
<text class="info-value">{{ item.entityId || "-" }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">库存数量：</text>
|
||||
<text class="info-value">{{ item.realQty }}({{ item.dw }})</text>
|
||||
</view>
|
||||
<!-- <view>
|
||||
<text class="info-label">出库数量({{ item.dw }})：</text>
|
||||
<view class="info-row" style="margin-top: 10rpx;">
|
||||
<uv-input placeholder="出库数量" class="form-control" border="surround" clearable v-model="item.htDj"></uv-input>
|
||||
</view>
|
||||
</view> -->
|
||||
<view>
|
||||
<text class="info-label">现场照片：</text>
|
||||
<!-- name="3" multiple -->
|
||||
<uv-upload style="margin-top: 10rpx;" :fileList="item.fileList" :maxCount="1" @afterRead="afterRead($event, item)" :previewFullImage="true" @delete="deletePic($event, item)"></uv-upload>
|
||||
</view>
|
||||
<view>
|
||||
<text class="info-label">备注：</text>
|
||||
<uv-textarea v-model="item.remark" placeholder="备注" style="margin-top: 10rpx;"></uv-textarea>
|
||||
</view>
|
||||
<view style="display: flex;width: 100%;align-items: center;justify-content: flex-end;margin-top: 20rpx;">
|
||||
<uv-button type="primary" style="height: 50rpx" text="预出库" @tap="item.outboundStatus = true"
|
||||
:disabled="item.outboundStatus"></uv-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<uv-modal ref="stockModalRef" :rules="stockRules" title="出库信息" class="stockModalForm" :showCancelButton="true"
|
||||
:closeOnClickOverlay="false" @confirm="stockSubmit" asyncClose>
|
||||
<view class="slot-content" style="width: 100%;">
|
||||
<uv-form labelPosition="left" labelWidth="80" :model="formModel" :rules="stockRules" ref="stockFormRef">
|
||||
<uv-form-item label="出库类型" prop="operationType" borderBottom>
|
||||
<uni-data-select v-model="formModel.operationType" :localdata="storageTypeData"
|
||||
placeholder="请选择出类型"></uni-data-select>
|
||||
</uv-form-item>
|
||||
<uv-form-item label="领料人" prop="teamCode" borderBottom>
|
||||
<uni-data-select v-model="formModel.teamCode" :localdata="constructionData"
|
||||
placeholder="请选择领料人"></uni-data-select>
|
||||
</uv-form-item>
|
||||
<uv-form-item label="理货员" prop="operator" borderBottom>
|
||||
<uni-data-select v-model="formModel.operator" :localdata="userData" placeholder="请选择理货员"></uni-data-select>
|
||||
</uv-form-item>
|
||||
<uv-form-item label="预出库" prop="execStatus" borderBottom>
|
||||
<uni-data-select v-model="formModel.execStatus" :localdata="execStatusList" placeholder="请选择是否预出库"></uni-data-select>
|
||||
</uv-form-item>
|
||||
<uv-form-item label="是否配送" prop="isDelivery" borderBottom>
|
||||
<uni-data-select v-model="formModel.isDelivery" :localdata="deliveryData" placeholder="请选择配送"></uni-data-select>
|
||||
</uv-form-item>
|
||||
<!-- <uv-form-item label="出库时间" prop="lyTime" borderBottom>
|
||||
<uv-input placeholder="请选择出库时间" border="surround" v-model="formModel.lyTime" class="disabledInput"
|
||||
@tap="openCalendar" disabled>
|
||||
<template v-slot:suffix>
|
||||
<uv-icon name="arrow-right" color="#999" size="14"></uv-icon>
|
||||
</template>
|
||||
</uv-input>
|
||||
</uv-form-item> -->
|
||||
</uv-form>
|
||||
</view>
|
||||
</uv-modal>
|
||||
|
||||
<!-- <uv-calendar ref="calendarRef" mode="single" class="calendar" @confirm="confirmCalendar"></uv-calendar> -->
|
||||
<view class="btn">
|
||||
<uv-button type="primary" text="确定" size="large" style="width: 48%;" v-if="list.length" @tap="openScan">扫 码 出
|
||||
库</uv-button>
|
||||
<uv-button type="primary" text="确定" size="large" style="width: 48%;" class="mainBtn" v-if="list.length"
|
||||
@tap="openInfo">确 定 出 库</uv-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { outStockList, constructionList, outStorageTypeList, userList, addOutStock } from "@/api/storage"
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { uploadImg } from "@/api/upload"
|
||||
|
||||
|
||||
const searchValue = ref("")
|
||||
const getScanCode = () => {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
// console.log('条码内容：' + res.result);
|
||||
searchValue.value = res.result
|
||||
searchList()
|
||||
}
|
||||
});
|
||||
}
|
||||
const list = ref([])
|
||||
// 搜索列表
|
||||
const searchList = () => {
|
||||
let obj = {
|
||||
keyword: searchValue.value,
|
||||
pageNum: 1,
|
||||
pageSize: 200,
|
||||
isChuku: 0,
|
||||
}
|
||||
outStockList(obj).then(res => {
|
||||
// console.log("搜索", res)
|
||||
res.rows.forEach(e => {
|
||||
e.fileList = []
|
||||
e.outboundStatus = false
|
||||
});
|
||||
list.value = res.rows
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 出库类型
|
||||
const storageTypeData = ref([])
|
||||
const getStoragTypeList = () => {
|
||||
outStorageTypeList({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
// console.log("入库类型", res)
|
||||
res.rows.forEach(item => {
|
||||
item.value = item.typeCode
|
||||
item.text = item.typeName
|
||||
});
|
||||
storageTypeData.value = res.rows
|
||||
})
|
||||
}
|
||||
// 施工队
|
||||
const constructionData = ref([])
|
||||
const getConstructionList = () => {
|
||||
constructionList({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
console.log("施工队", res)
|
||||
res.rows.forEach(item => {
|
||||
item.value = item.teamCode
|
||||
item.text = item.teamName
|
||||
});
|
||||
constructionData.value = res.rows
|
||||
})
|
||||
}
|
||||
// 用户
|
||||
const userData = ref([])
|
||||
const deliveryData = ref([
|
||||
{ value: 1, text: '是' },
|
||||
{ value: 0, text: '否' },
|
||||
])
|
||||
const approverData = ref([])
|
||||
const getUserList = () => {
|
||||
userList().then(res => {
|
||||
// console.log("入库类型", res)
|
||||
res.data.forEach(item => {
|
||||
item.value = item.userId
|
||||
item.text = item.userName
|
||||
});
|
||||
userData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 上传
|
||||
const afterRead = (event, item) => {
|
||||
uploadImg(event.file.url, {}).then(res=>{
|
||||
item.fileList.push({ url: res.url })
|
||||
})
|
||||
}
|
||||
|
||||
const deletePic = (event, item) => {
|
||||
item.fileList.splice(event.index, 1)
|
||||
}
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
getConstructionList()
|
||||
getStoragTypeList()
|
||||
getUserList()
|
||||
})
|
||||
|
||||
|
||||
const openScan = () => {
|
||||
uni.scanCode({
|
||||
scanType: ['qrCode'],
|
||||
success: function (res) {
|
||||
console.log('条码内容：' + res.result);
|
||||
let scanIndex = list.value.findIndex(e => e.pcode == res.result)
|
||||
if (scanIndex == -1) {
|
||||
uni.showToast({
|
||||
title: '未找到该货物',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
} else {
|
||||
if (list.value[scanIndex].outboundStatus) {
|
||||
uni.showToast({
|
||||
title: '该货物已预出库',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
}
|
||||
list.value[scanIndex].outboundStatus = true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let ids = ref([])
|
||||
const openInfo = () => {
|
||||
formModel.value.operationType = ""
|
||||
formModel.value.teamCode = ""
|
||||
formModel.value.operator = ""
|
||||
formModel.value.isDelivery = null
|
||||
// formModel.value.lyTime = ""
|
||||
ids.value = list.value.filter(item => item.outboundStatus)
|
||||
console.log("ids", ids.value)
|
||||
if (ids.value.length > 0) {
|
||||
// const allFileLists = list.value.filter(item => {
|
||||
// return item.outboundStatus && item.fileList.length > 0
|
||||
// })
|
||||
// if (!allFileLists.length) {
|
||||
// uni.showToast({
|
||||
// title: "请上传所有出库的货物图片",
|
||||
// icon: "none"
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
stockModalRef.value.open()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请选择出库信息',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
const execStatusList = ref([
|
||||
{ value: "0", text: "预出库" },
|
||||
{ value: "1", text: "已出库" },
|
||||
]);
|
||||
const stockModalRef = ref(null)
|
||||
const stockFormRef = ref()
|
||||
const formModel = ref({
|
||||
operationType: '',
|
||||
teamCode: '',
|
||||
operator: '',
|
||||
approverId: '',
|
||||
execStatus: null,
|
||||
isDelivery: null,
|
||||
bizType: 1,
|
||||
// lyTime: '',
|
||||
})
|
||||
const stockRules = ref({
|
||||
'operationType': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择出库类型',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'teamCode': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择领料人',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'operator': {
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: '请选择理货员',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'execStatus': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择是否预出库',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'isDelivery': {
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: '请选择是否配送',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'approverId': {
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: '请选择审核员',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
// 'lyTime': {
|
||||
// type: 'string',
|
||||
// required: true,
|
||||
// message: '请选择出库时间',
|
||||
// trigger: ['blur', 'change']
|
||||
// },
|
||||
})
|
||||
|
||||
// const calendarRef = ref(null)
|
||||
// const openCalendar = () => {
|
||||
// calendarRef.value.open()
|
||||
// }
|
||||
|
||||
// const confirmCalendar = (res) => {
|
||||
// formModel.value.lyTime = res[0]
|
||||
// }
|
||||
|
||||
const stockSubmit = () => {
|
||||
stockFormRef.value.validate().then(res => {
|
||||
let form = JSON.parse(JSON.stringify(formModel.value))
|
||||
let obj = {
|
||||
rkBill: {
|
||||
...form,
|
||||
},
|
||||
}
|
||||
const arr = JSON.parse(JSON.stringify(list.value))
|
||||
obj.rkInfoList = arr.filter(item => item.outboundStatus)
|
||||
|
||||
obj.rkInfoList.forEach(item => {
|
||||
item.photoUrl = item.fileList.length ? item.fileList[0].url : ''
|
||||
});
|
||||
console.log("obj", obj)
|
||||
addOutStock(obj).then(res => {
|
||||
stockModalRef.value.close()
|
||||
uni.showToast({
|
||||
title: '出库成功',
|
||||
icon: 'success',
|
||||
mask: true
|
||||
})
|
||||
uni.navigateBack({})
|
||||
})
|
||||
}).catch(errors => {
|
||||
stockModalRef.value.closeLoading()
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
padding-bottom: 120rpx;
|
||||
background-color: #f7f7f7;
|
||||
min-height: calc(100vh - 60rpx);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
padding: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.form-control {
|
||||
flex: 1;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 40rpx;
|
||||
color: #333;
|
||||
border-left: 8rpx solid #2196F3;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #f8f9fa;
|
||||
padding: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
width: 200rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
width: calc(100vw - 60rpx);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.stockModalForm {
|
||||
::v-deep .uni-select {
|
||||
border-color: #FFFFFF;
|
||||
border-bottom: unset;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.uv-popup__content) {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
::v-deep .uv-modal {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
// ::v-deep .uv-input__content {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
::v-deep .uv-input__content__prefix-icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .uv-input {
|
||||
padding: 0 !important;
|
||||
border: unset;
|
||||
border-color: unset;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-select__input-placeholder {
|
||||
font-size: unset;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
::v-deep .uni-select__selector-item {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep uni-toast {
|
||||
z-index: 30000 !important;
|
||||
}
|
||||
|
||||
::v-deep .calendar {
|
||||
z-index: 30000 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user