You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
611 lines
16 KiB
611 lines
16 KiB
<template>
|
|
<view>
|
|
<view class="lf-p-l-30 lf-p-r-30 lf-m-t-30 lf-w-100" style="position: fixed;top: 80rpx;overflow: hidden;z-index: 111;">
|
|
<view class="lf-flex search-self lf-w-100">
|
|
<u-icon name="search" class="search-icon"></u-icon>
|
|
<input placeholder="搜索物资" confirm-type="search" class="lf-m-l-10 lf-font-28" :value="searchValue" @input="inputChange" @confirm="inputConfirm" />
|
|
</view>
|
|
</view>
|
|
<view class="search-employ"></view>
|
|
|
|
<view class="content" style="margin-top: 80rpx;">
|
|
<view class="card" v-for="(item, index) in list" :key="index" :class="item.searchStyle?'search-color':''">
|
|
<view class="lf-row-between">
|
|
<view class="flex lf-row-center justify-center text-center">
|
|
<view class="lf-color-black lf-font-bold" v-if="item.material && item.material.m_name">{{ item.material.m_name }}</view>
|
|
<view class="lf-m-l-10">{{item.spec.name}}</view>
|
|
</view>
|
|
<view>单位: {{item.material.unit.unit_name}}</view>
|
|
<!-- 修改功能先隐藏 -->
|
|
<!-- <view style="color: #11D189;" @click="showEdit">修改</view> -->
|
|
</view>
|
|
<view class="lf-row-between lf-m-t-30">
|
|
<view>订购数</view>
|
|
<view class="lf-flex">
|
|
<input class="input" placeholder="0" type="number" :disabled="true" v-if="item.material && item.purchase_number" v-model="item.purchase_number"/>
|
|
<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="lf-row-between lf-m-t-30">
|
|
<view>实到数</view>
|
|
<view class="lf-flex">
|
|
<input class="input" placeholder="0" type="number" v-model="item.reachNum" @blur="inputBlur(index, 'real_reach_number', $event)" />
|
|
<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="lf-row-between lf-m-t-30">
|
|
<view>实收数</view>
|
|
<view class="lf-flex">
|
|
<input class="input" placeholder="0" type="number" v-model="item.receiveNum" @blur="inputBlur(index, 'real_receive_number', $event)" />
|
|
<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 修饰底部 -->
|
|
<view :style="upload_list.length ? 'height: 260rpx' : 'height: 140rpx'"></view>
|
|
<!-- 凭证图 -->
|
|
<view class="fixed-images" v-if="upload_list.length">
|
|
<image class="ms-img" :src="item" @click="lookImage(index)" v-for="(item, index) in upload_list" :key="index" v-if="index < 6"></image>
|
|
</view>
|
|
<view class="fixed-bottom" v-if="list.length">
|
|
<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
|
|
<button class="btn" @click="comfirm">确认收货</button>
|
|
</view>
|
|
<!-- 弹出层-确认收货修改 TODO每个都应该是动态 -->
|
|
<u-popup v-model="is_show_edit" mode="bottom" border-radius="20">
|
|
<view class="edit-popup-box">
|
|
<view class="popup-content">
|
|
<view>
|
|
<view class="popup-item" hover-class="lf-opacity" :style="currentObj(1)?'border-bottom:none':''" @click="switchItem(1)">
|
|
<text class="lf-font-bold">选择供应商</text>
|
|
<u-icon name="arrow-up" color="#777777" v-if="currentObj(1)"></u-icon>
|
|
<u-icon name="arrow-down" color="#777777" v-else></u-icon>
|
|
</view>
|
|
<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(1)?'max-height:360rpx':'max-height:0rpx'">
|
|
<view class="lf-row-between scroll-item" v-for="(item, index) in supplier_list" :key="index" @click="checkItem(index, 'supplier_list')">
|
|
<view>{{ item.name }}</view>
|
|
<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="popup-item" hover-class="lf-opacity" :style="currentObj(2)?'border-bottom:none':''" @click="switchItem(2)">
|
|
<text class="lf-font-bold">选择物资</text>
|
|
<u-icon name="arrow-up" color="#777777" v-if="currentObj(2)"></u-icon>
|
|
<u-icon name="arrow-down" color="#777777" v-else></u-icon>
|
|
</view>
|
|
<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(2)?'max-height:360rpx':'max-height:0rpx'">
|
|
<view class="lf-row-between scroll-item" v-for="(item, index) in material_list" :key="index" @click="checkItem(index, 'material_list')">
|
|
<view>{{ item.name }}</view>
|
|
<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<u-button class="popup-btn" @click="comfirmEdit">确认修改</u-button>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 弹出层-上传凭证 -->
|
|
<u-popup v-model="is_show_voucher" mode="center" border-radius="20">
|
|
<view class="voucher-popup-box">
|
|
<view class="popup-content">
|
|
<view class="popup-title">上传凭证信息</view>
|
|
<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view>
|
|
<view class="popup-images">
|
|
<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index, 'voucher_list')">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<view class="remove-image" @click.stop="removeInage(index)">
|
|
<u-icon name="close-circle"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view>
|
|
</view>
|
|
</view>
|
|
<view class="foot-btn">
|
|
<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button>
|
|
<u-button class="popup-btn" @click="submitImage">确定</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 预览图片组件 -->
|
|
<lf-previewimage ref="previewimage" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { uploadFile } from '@/common/uploadFile.js';
|
|
let timer = null;
|
|
export default {
|
|
data(){
|
|
return {
|
|
show_icon: true,
|
|
searchValue: '',
|
|
list: [],
|
|
is_show_edit: false,
|
|
current_show: {
|
|
type: 1,
|
|
open: false
|
|
},
|
|
supplier_list: [{
|
|
name: '南开大学',
|
|
checked: false
|
|
},{
|
|
name: '华侨大学',
|
|
checked: false
|
|
}],
|
|
material_list: [{
|
|
name: '哈哈哈哈',
|
|
checked: false
|
|
},{
|
|
name: '嘿嘿嘿',
|
|
checked: false
|
|
}],
|
|
p_sn: '',
|
|
contents: [],
|
|
order: {},
|
|
type: 4,
|
|
reachNum: 0,
|
|
receiveNum: 0,
|
|
is_show_voucher: false,
|
|
voucher_count: 6,
|
|
voucher_list: [],
|
|
is_upload: false, // 是否上传了凭证
|
|
upload_list: []
|
|
}
|
|
},
|
|
computed: {
|
|
currentObj(){
|
|
let current_show = this.current_show;
|
|
return function(num){
|
|
return current_show.type == num && current_show.open
|
|
}
|
|
}
|
|
},
|
|
onLoad(options){
|
|
// http://localhost:8081/pages/purchase/receipt?p_sn=P16281395178122
|
|
this.p_sn = options.p_sn || '';
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
// 搜索input值被改变
|
|
inputChange(event){
|
|
if(timer){
|
|
clearTimeout(timer);
|
|
timer = null;
|
|
}
|
|
timer = setTimeout(() => {
|
|
this.searchValue = event.detail.value;
|
|
let positionIndex = null;
|
|
this.list.forEach((item,index) => {
|
|
if(this.searchValue && item.material.m_name.indexOf(this.searchValue) >= 0){
|
|
if(positionIndex == null){
|
|
positionIndex = index; // 拿到第一个被匹配的table item
|
|
}
|
|
this.$set(item,'searchStyle',true)
|
|
}else {
|
|
this.$set(item,'searchStyle',false)
|
|
}
|
|
})
|
|
if(positionIndex != null) {
|
|
let tabView = document.querySelector('.content'); // 获取第一层大对象，table
|
|
let tabContent = tabView.querySelector('.card'); // 获取第二层
|
|
let offsetHeight = tabContent.offsetHeight; // table行高度
|
|
let heightself = offsetHeight*positionIndex
|
|
uni.pageScrollTo({
|
|
scrollTop: heightself
|
|
});
|
|
}else if(this.searchValue){
|
|
this.$msg('该关键字没有搜索到物资哦')
|
|
}
|
|
}, 1000);
|
|
},
|
|
// 搜索按下回车
|
|
inputConfirm(event){
|
|
this.searchValue = event.detail.value;
|
|
},
|
|
// 预览图片
|
|
lookImage(current){
|
|
this.$u.throttle(() => {
|
|
this.$refs.previewimage.show({
|
|
images: this.upload_list,
|
|
current: current
|
|
});
|
|
}, 500);
|
|
},
|
|
// 移除图片
|
|
removeInage(current){
|
|
this.voucher_list.splice(current, 1);
|
|
},
|
|
// 上传凭证图片
|
|
uploadImage(){
|
|
let current_count = this.voucher_count - this.voucher_list.length;
|
|
if(current_count == 0) return;
|
|
uni.chooseImage({
|
|
count: current_count,
|
|
complete: result => {
|
|
this.voucher_list.push(...result.tempFilePaths);
|
|
console.log(this.voucher_list)
|
|
}
|
|
})
|
|
},
|
|
// 用户点击确定，将图片上传至oss，并将url发送给后端
|
|
submitImage(){
|
|
let that = this;
|
|
let voucher_list = that.voucher_list;
|
|
if(voucher_list.length <= 0){
|
|
return that.$msg('您未上传图片哦');
|
|
};
|
|
that.is_show_voucher = false;
|
|
uni.showLoading({
|
|
title: '正在上传中...'
|
|
})
|
|
let http_list = [];
|
|
voucher_list.map(item => {
|
|
let itemP = new Promise((resolve, reject) => {
|
|
uploadFile(item, (res) => {
|
|
resolve(res);
|
|
}, (err) => {
|
|
reject(err);
|
|
}, this);
|
|
})
|
|
http_list.push(itemP);
|
|
})
|
|
|
|
Promise.all(http_list).then(res => {
|
|
let images = [];
|
|
let show_images = [];
|
|
res.map(item => {
|
|
if(item.path){
|
|
images.push(item.path);
|
|
}
|
|
if(item.url){
|
|
show_images.push(item.url);
|
|
}
|
|
});
|
|
that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, {
|
|
p_sn: that.p_sn,
|
|
images: images,
|
|
}).then(result => {
|
|
uni.hideLoading();
|
|
that.voucher_list = [];
|
|
that.is_upload = true;
|
|
that.upload_list.push(...show_images);
|
|
that.$msg('凭证已上传成功!')
|
|
}).catch(err => uni.hideLoading());
|
|
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
uni.showModal({
|
|
title: '',
|
|
content: JSON.stringify(err),
|
|
showCancel: false,
|
|
confirmColor: '#1833F2'
|
|
})
|
|
})
|
|
},
|
|
getData(){
|
|
this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
|
|
p_sn: this.p_sn
|
|
}).then(res => {
|
|
this.order = res.data.order;
|
|
this.list = res.data.order.items || [];
|
|
this.list.forEach(item => {
|
|
item.reachNum = item.purchase_number
|
|
item.receiveNum = item.purchase_number
|
|
})
|
|
let voucher = res.data?.order?.voucher || [];
|
|
voucher = voucher.filter(item => item.client_type == '食堂');
|
|
this.is_upload = voucher.length > 0;
|
|
this.upload_list = voucher.map(item => item.voucher_pic);
|
|
})
|
|
},
|
|
inputBlur(current, key, event){
|
|
this.list[current][key] = event.detail.value;
|
|
},
|
|
comfirm(){
|
|
let is_empty = false;
|
|
let real_count_item = []
|
|
this.list.forEach(item => {
|
|
if(!item.receiveNum || !item.reachNum){
|
|
is_empty = true;
|
|
}
|
|
real_count_item.push({
|
|
id:item.id,
|
|
real_receive_number: item.receiveNum,
|
|
real_reach_number: item.reachNum
|
|
})
|
|
})
|
|
if(is_empty){
|
|
return this.$msg('请将收货数量填写完整');
|
|
}
|
|
if(!this.is_upload){
|
|
return this.$msg('请上传凭证后再确认收货');
|
|
}
|
|
this.$http(this.API.API_CONFIRM, {
|
|
p_sn: this.p_sn,
|
|
state: '已入库',
|
|
real_count_item
|
|
}).then(res => {
|
|
this.$msg('确认收货成功').then(()=>{this.$toBack()});
|
|
})
|
|
},
|
|
switchItem(current){
|
|
let current_show = this.current_show;
|
|
if(current_show.type != current){
|
|
current_show.open = false;
|
|
}
|
|
current_show.type = current;
|
|
current_show.open = !current_show.open;
|
|
this.current_show = current_show;
|
|
},
|
|
checkItem(index, name){
|
|
this[name].forEach(item => item.checked = false);
|
|
this[name][index].checked = true;
|
|
},
|
|
// 确认修改
|
|
comfirmEdit(){
|
|
this.$msg('修改成功！');
|
|
this.is_show_edit = false;
|
|
},
|
|
// 显示修改弹出层
|
|
showEdit(){
|
|
this.current_show = {
|
|
type: 1,
|
|
open: false
|
|
};
|
|
this.is_show_edit = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F6F6F6;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.search-employ {
|
|
height: 162rpx;
|
|
background-color: rgb(246, 246, 246);
|
|
overflow: hidden;
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 28rpx;
|
|
}
|
|
.search-color {
|
|
background-color: #ffdede!important;
|
|
}
|
|
.search-icon {
|
|
color: #777;
|
|
}
|
|
.search-self {
|
|
background: rgb(228,228,228);
|
|
padding: 10rpx 0 10rpx 20rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.search-self .uni-input-placeholder {
|
|
margin-right: 500px;
|
|
color: #777;
|
|
font-size: 28rpx;
|
|
}
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
overflow: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.card{
|
|
width: 686rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-top: 30rpx;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
color: #777777;
|
|
.input{
|
|
width: 112rpx;
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
margin-right: 14rpx;
|
|
text-align: center;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.fixed-images{
|
|
position: fixed;
|
|
bottom: 98rpx;
|
|
left: 0rpx;
|
|
z-index: 99;
|
|
width: 750rpx;
|
|
height: 126rpx;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.ms-img{
|
|
// 六张一行
|
|
width: 102rpx;
|
|
height: 102rpx;
|
|
// width: 146rpx;
|
|
// height: 146rpx;
|
|
margin-right: 14rpx;
|
|
background-color: #EEEEEE;
|
|
&:nth-of-type(6n){
|
|
margin-right: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
.fixed-bottom{
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
z-index: 99;
|
|
width: 750rpx;
|
|
height: 98rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
background-color: #FFFFFF;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
.btn{
|
|
width: 212rpx;
|
|
background-color: #11D189;
|
|
font-size: 32rpx;
|
|
line-height: 82rpx;
|
|
margin: 0;
|
|
height: 82rpx;
|
|
border-radius: 40rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.btn1{
|
|
border: 2rpx solid #555555;
|
|
background-color: #FFFFFF;
|
|
color: #555555;
|
|
line-height: 80rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
/deep/.placeholder-class{
|
|
color: #777777;
|
|
}
|
|
// 去掉u-button 外边框线
|
|
/deep/.u-hairline-border::after{
|
|
border: none;
|
|
}
|
|
// 修改收货信息弹出层
|
|
.edit-popup-box{
|
|
width: 100%;
|
|
min-height: 484rpx;
|
|
max-height: 64vh;
|
|
padding: 10rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.popup-content{
|
|
min-height: 332rpx;
|
|
// max-height: 54vh;
|
|
margin-bottom: 40rpx;
|
|
.popup-item{
|
|
padding: 30rpx 0;
|
|
box-sizing: border-box;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
.scroll-box{
|
|
transition: all .5s;
|
|
.scroll-item{
|
|
padding: 30rpx 0;
|
|
}
|
|
}
|
|
}
|
|
.popup-btn{
|
|
width: 100%;
|
|
height: 82rpx;
|
|
background: #11D189;
|
|
border-radius: 10rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
|
|
// 上传凭证弹出层
|
|
.voucher-popup-box{
|
|
width: 686rpx;
|
|
height: max-content;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
.popup-content{
|
|
.popup-title{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
}
|
|
.popup-desc{
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.popup-images{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 22rpx;
|
|
margin-bottom: 18rpx;
|
|
.popup-image-item{
|
|
width: 198rpx;
|
|
height: 198rpx;
|
|
margin: 8rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.remove-image{
|
|
position: absolute;
|
|
right: -8rpx;
|
|
top: -16rpx;
|
|
color: #e74c3c;
|
|
font-size: 40rpx;
|
|
padding: 8rpx;
|
|
}
|
|
}
|
|
.popup-image-item-after::after{
|
|
content: '+';
|
|
position: absolute;
|
|
left: 30%;
|
|
top: 14%;
|
|
font-size: 100rpx;
|
|
color: #777777;
|
|
}
|
|
}
|
|
.popup-input{
|
|
padding: 0 60rpx;
|
|
box-sizing: border-box;
|
|
height: 90rpx;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
input{
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
.foot-btn{
|
|
height: 90rpx;
|
|
width: 100%;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
.popup-btn{
|
|
width: 50%;
|
|
height: 100%;
|
|
border: none;
|
|
border-radius: initial;
|
|
&:last-child{
|
|
border-left: 1rpx solid #E5E5E5;
|
|
color: #1833F2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|