666 lines
15 KiB
Vue
666 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<view class="warhouse-warning" @click="backmoreopen=false">
|
|
<view class="warning-title">
|
|
<view class="title-left">
|
|
<view class="blue-shu"></view>
|
|
<view class="blue-font">
|
|
请领物料
|
|
</view>
|
|
</view>
|
|
<view class="more-view">
|
|
<image src="/static/backmore.png" mode="aspectFill" class="more" v-if="Material.length"
|
|
@click.stop="backmoreopen=!backmoreopen"></image>
|
|
<image src="/static/nobackmore.png" mode="aspectFill" v-else class="more" ></image>
|
|
<view class="more-view-button" @click.stop v-show="backmoreopen">
|
|
|
|
<view class="more-whitebutton" @click="moredex = moredex==1?0:1;backmoreopen=false ">
|
|
批量移除
|
|
</view>
|
|
<view class="more-whitebutton" @click="moredex=2;backmoreopen=false ">
|
|
清空列表
|
|
</view>
|
|
<view class="more-whitebutton" @click="moredex=3;emit('submit');backmoreopen=false">
|
|
提交请领单
|
|
</view>
|
|
|
|
<view class="triangle">
|
|
<view class="triangle-small"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="warning-other">
|
|
<scroll-view scroll-x="true" class="kcscrol guodu" scroll-with-animation>
|
|
<view class="yjbox" v-for="(v,i) in Material" :key="i">
|
|
<image :src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
|
mode="aspectFill"></image>
|
|
<view>{{v.materialInfo?.materialName}}</view>
|
|
<view class="zhanwei" v-if="moredex==1" @click.stop="del(v)">
|
|
<view>-</view>
|
|
</view>
|
|
</view>
|
|
<defaultr cont="暂无数据" v-if="Material.length==0&&timeout"
|
|
style="position: absolute;width: 10vw;height: 10vw;left: 0%;"></defaultr>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="kcyj">
|
|
<view class="kjlt">
|
|
请领物料
|
|
<view class="mhao" v-if="Material.length>0">
|
|
<view class="mhao-font">
|
|
{{Material.length}}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="kcscrol guodu" @scroll="onScroll" scroll-with-animation
|
|
:scroll-left="scrollleft" :style="qb?'width:calc(100% - 21.8vw)':'width:calc(100% - 10vw)' ">
|
|
<view class="yjbox" v-for="(v,i) in Material" :key="i">
|
|
<image
|
|
:src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
|
|
mode="aspectFill"></image>
|
|
<view>{{v.materialInfo?.materialName}}</view>
|
|
<text class="ytj" v-if="v.qlNum>=0">{{v.qlNum}}</text>
|
|
<view class="zhanwei" v-if="moredex==1" @click.stop="del(v)">
|
|
<view>-</view>
|
|
</view>
|
|
</view>
|
|
<view class="que guodu" v-if="Material.length==0&&timeout" :style="qb?'width:65.8vw':'' " >
|
|
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="kjlt more guodu" :style="qb?'width:15vw':'' " @touchstart="ts" @touchmove="canmove"
|
|
>
|
|
<view @click="zksq" class="righ0">
|
|
{{!qb?'更多':'收起'}}
|
|
<image class="guodu" :style="qb?'transform: rotate(180deg);':''"
|
|
src="/static/index/procurement/zjt.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="guodu" v-if="Material.length" :class="qb?(moredex==1?'avt':''):'righ0'" @click="moredex = moredex==1?0:1; ">
|
|
批量移除
|
|
</view>
|
|
<view class="guodu" v-if="Material.length" :class="qb?(moredex==2?'avt':''):'righ0'" @click="moredex=2; ">
|
|
清空列表
|
|
</view>
|
|
<view class="guodu" v-if="Material.length" :class="qb?(moredex==3?'avt':''):'righ0'" @click="moredex=3;emit('submit')">
|
|
提交请领单
|
|
</view>
|
|
<view class="guodu" v-if="!Material.length" style="background-color: #e8e8e8;" :class="qb?(moredex==1?'avt':''):'righ0'">
|
|
批量移除
|
|
</view>
|
|
<view class="guodu" v-if="!Material.length" style="background-color: #e8e8e8;" :class="qb?(moredex==2?'avt':''):'righ0'">
|
|
清空列表
|
|
</view>
|
|
<view class="guodu" v-if="!Material.length" style="background-color: #e8e8e8;" :class="qb?(moredex==3?'avt':''):'righ0'">
|
|
提交请领单
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<tanchuang @back="moredex = 0" :show="moredex==2" font="确定将本次请领清单中的所有物料都移除吗？" @right="delall"></tanchuang>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
import defaultr from './default.vue'
|
|
import tanchuang from '../common/tanchuang.vue';
|
|
const props = defineProps({
|
|
Material: {
|
|
type: Array,
|
|
required: true,
|
|
}
|
|
});
|
|
const emit = defineEmits(['delall', 'del', 'submit'])
|
|
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
|
const qb = ref(true)
|
|
const moredex = ref(0)
|
|
|
|
const backmoreopen = ref(false)
|
|
|
|
watch(() => props.Material,
|
|
() => {
|
|
if (props.Material.length == 0) {
|
|
qb.value = false;
|
|
moredex.value = 0;
|
|
}
|
|
if (props.Material.length == 1) {
|
|
if (!qb.value) {
|
|
qb.value = true;
|
|
}
|
|
}
|
|
})
|
|
const delall = () => {
|
|
emit('delall');
|
|
setTimeout(() => {
|
|
moredex.value = 0;
|
|
qb.value = false;
|
|
}, 100)
|
|
}
|
|
const del = (v) => {
|
|
emit('del', v)
|
|
}
|
|
const zksq = () => {
|
|
// if (props.Material.length == 0) {
|
|
// uni.showToast({
|
|
// icon: 'none',
|
|
// title: '请添加请领物料！'
|
|
// })
|
|
// return
|
|
// }
|
|
qb.value = !qb.value;
|
|
moredex.value = 0;
|
|
moveleft();
|
|
}
|
|
const startX = ref(0)
|
|
const ts = (e) => {
|
|
startX.value = e.touches[0].clientX
|
|
}
|
|
const savescrollleft = ref(0)
|
|
// 监听用户滚动
|
|
function onScroll(e : any) {
|
|
savescrollleft.value = e?.detail?.scrollLeft ?? 0
|
|
}
|
|
const scrollleft = ref(0)
|
|
const canmove = (e : any) => {
|
|
if (props.Material.length == 0) { return }
|
|
const moveX = e.touches[0].clientX
|
|
const diff = moveX - startX.value
|
|
// diff 为负值就是向左滑
|
|
if (diff < -60 && !qb.value) { // 👉 60px 阈值，随便改
|
|
qb.value = !qb.value;
|
|
moredex.value = 0;
|
|
// 这么写是解决这个组件的响应丢失的bug
|
|
scrollleft.value = savescrollleft.value + 125.99
|
|
setTimeout(() => {
|
|
scrollleft.value = savescrollleft.value + 126
|
|
}, 50)
|
|
}
|
|
if (diff > 60 && qb.value) { // 👉 60px 阈值，随便改
|
|
qb.value = !qb.value;
|
|
moredex.value = 0;
|
|
scrollleft.value = savescrollleft.value - 125.99
|
|
setTimeout(() => {
|
|
scrollleft.value = savescrollleft.value - 126
|
|
}, 50)
|
|
}
|
|
}
|
|
const moveleft = () => {
|
|
if (qb.value) {
|
|
scrollleft.value = savescrollleft.value + 125.99
|
|
setTimeout(() => {
|
|
scrollleft.value = savescrollleft.value + 126
|
|
}, 50)
|
|
} else {
|
|
scrollleft.value = savescrollleft.value - 125.99
|
|
setTimeout(() => {
|
|
scrollleft.value = savescrollleft.value - 126
|
|
}, 50)
|
|
}
|
|
}
|
|
const timeout = ref(false)
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
timeout.value = true
|
|
}, 500)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
// .kcyj {
|
|
// width: 100%;
|
|
// height: 10vw;
|
|
// display: flex;
|
|
// margin-top: 1vw;
|
|
// position: relative;
|
|
|
|
// .kjlt {
|
|
// width: 3.2vw;
|
|
// height: 10vw;
|
|
// background: rgba(255, 255, 255, 0.5);
|
|
// border-radius: 1.1vw;
|
|
// writing-mode: vertical-rl;
|
|
// align-items: center;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// letter-spacing: 3px;
|
|
// font-size: 1.5vw;
|
|
// position: relative;
|
|
// z-index: 10;
|
|
|
|
// .mhao {
|
|
// position: absolute;
|
|
// top: -0.2vw;
|
|
// /* 根据视觉需要微调 */
|
|
// right: -0.2vw;
|
|
// box-sizing: border-box;
|
|
// width: 1.8vw;
|
|
// height: 1.8vw;
|
|
// border-radius: 50%;
|
|
// border: 1px solid #FF4E4E;
|
|
// color: #FF4E4E;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// background: transparent;
|
|
// writing-mode: horizontal-tb;
|
|
// overflow: hidden;
|
|
// .mhao-font{
|
|
// font-size: 25rpx;
|
|
// letter-spacing: -0.05em; /* 负值 = 字符之间更近 */
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .more {
|
|
// margin-left: 0.6vw;
|
|
// position: relative;
|
|
// background: RGBA(239, 240, 244, 0);
|
|
|
|
|
|
// .righ0 {
|
|
// right: 0 !important;
|
|
|
|
// }
|
|
|
|
// view {
|
|
// writing-mode: vertical-rl;
|
|
// align-items: center;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// letter-spacing: 3px;
|
|
// width: 3.2vw;
|
|
// height: 10vw;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// border-radius: 1.1vw;
|
|
// font-size: 1.4vw;
|
|
// color: #888888;
|
|
// background: #fff;
|
|
|
|
// &:nth-child(1) {
|
|
// letter-spacing: 6px;
|
|
// padding-top: 2vw;
|
|
// z-index: 5;
|
|
|
|
// image {
|
|
// width: 1.6vw;
|
|
// height: 1.6vw;
|
|
// margin-top: 10px;
|
|
// }
|
|
// }
|
|
|
|
// &:nth-child(2) {
|
|
// right: 3.9vw;
|
|
// z-index: 3;
|
|
// }
|
|
|
|
// &:nth-child(3) {
|
|
// right: 7.7vw;
|
|
// z-index: 2;
|
|
// }
|
|
|
|
// &:nth-child(4) {
|
|
// right: 11.6vw;
|
|
// z-index: 2;
|
|
// }
|
|
// }
|
|
|
|
// .avt {
|
|
// background: rgba(85, 166, 249, 1);
|
|
// color: #FFFFFF;
|
|
// }
|
|
|
|
// }
|
|
|
|
// .kcscrol {
|
|
// width: calc(100% - 10vw);
|
|
// height: 10vw;
|
|
// white-space: nowrap;
|
|
// margin-left: 0.6vw;
|
|
// position: relative;
|
|
// z-index: 9;
|
|
|
|
// .yjbox {
|
|
// display: inline-block;
|
|
// width: 12vw;
|
|
// height: 10vw;
|
|
// background: rgba(255, 255, 255, 0.5);
|
|
// border-radius: 1.1vw;
|
|
// margin-right: 0.8vw;
|
|
// position: relative;
|
|
|
|
// .zhanwei {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// z-index: 200;
|
|
|
|
// view {
|
|
// position: absolute;
|
|
// width: 2.2vw;
|
|
// height: 2.2vw;
|
|
// display: flex;
|
|
// top: 0;
|
|
// left: 0;
|
|
// right: 0;
|
|
// bottom: 0;
|
|
// margin: auto;
|
|
// border-radius: 50%;
|
|
// border: 2px solid rgba(255, 78, 78, 1);
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// font-size: 3vw;
|
|
// color: rgba(255, 78, 78, 1);
|
|
// }
|
|
// }
|
|
|
|
// .ytj {
|
|
// min-width: 1.5vw;
|
|
// height: 1.8vw;
|
|
// background: #E3EEF7;
|
|
// border-radius: 0.9vw;
|
|
// border: 1px solid rgba(3, 133, 250, 0.34);
|
|
// font-weight: 400;
|
|
// font-size: 1.1vw;
|
|
// color: #1083F8;
|
|
// text-align: center;
|
|
// line-height: 1.75vw;
|
|
// position: absolute;
|
|
// padding: 0 0.8vw;
|
|
// top: 0.8vw;
|
|
// right: 0.8vw;
|
|
// }
|
|
|
|
// image {
|
|
// width: 7vw;
|
|
// height: 7vw;
|
|
// margin: 0.5vw auto 0.5vw;
|
|
// display: block;
|
|
// border-radius: 1vw;
|
|
// }
|
|
|
|
// >view {
|
|
// width: 100%;
|
|
// height: 1.4vw;
|
|
// font-weight: 400;
|
|
// font-size: 1.3vw;
|
|
// color: #212327;
|
|
// white-space: nowrap;
|
|
// text-overflow: ellipsis;
|
|
// overflow: hidden;
|
|
// padding: 0 1vw;
|
|
// text-align: center;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .guodu {
|
|
// transition: .4s;
|
|
// -webkit-transform-style: preserve-3d;
|
|
// -webkit-overflow-scrolling: touch;
|
|
// }
|
|
// .que{
|
|
// width: 16vw;
|
|
// height: 16vw;
|
|
// position: fixed;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 77.5vw;
|
|
// height: 10vw;
|
|
// background: rgba(245, 246, 248, 1);
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// border-radius: 20rpx;
|
|
|
|
// image{
|
|
// width: 12vw;
|
|
// height: 12vw;
|
|
// }
|
|
// view{
|
|
// width: 12vw;
|
|
// text-align: center;
|
|
// position: absolute;
|
|
// bottom: 0.5vw;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// font-weight: 300;
|
|
// font-size: 1.4vw;
|
|
// color: #555555;
|
|
// }
|
|
// }
|
|
.warhouse-warning {
|
|
margin-top: 12rpx;
|
|
margin-left: 5rpx;
|
|
width: 98%;
|
|
height: 330rpx;
|
|
background-color: #fff;
|
|
border-radius: 35rpx;
|
|
|
|
.warning-title {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.blue-shu {
|
|
background-color: #0089FE;
|
|
width: 8.5rpx;
|
|
height: 25rpx;
|
|
border-radius: 8rpx;
|
|
margin-left: 32rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.blue-font {
|
|
font-size: 30.2rpx;
|
|
}
|
|
}
|
|
|
|
.more-view {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-right: 60rpx;
|
|
position: relative;
|
|
|
|
.more {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.more-view-button {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
left: -125rpx;
|
|
width: 200rpx;
|
|
height: 240rpx;
|
|
background-color: #fff;
|
|
border-radius: 30rpx;
|
|
z-index: 100;
|
|
border: 2rpx #E5E5E5 solid;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.more-whitebutton {
|
|
width: 74%;
|
|
height: 50rpx;
|
|
border-radius: 10rpx;
|
|
color: #ababab;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
border: 2rpx solid #BFBFBF;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.more-whitebutton:active {
|
|
width: 74%;
|
|
height: 50rpx;
|
|
border-radius: 10rpx;
|
|
color: #fff;
|
|
background-color: #57A8FA;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
border: 2rpx solid #57A8FA;
|
|
}
|
|
|
|
.triangle {
|
|
position: absolute;
|
|
top: -8.34rpx;
|
|
right: 43rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 14.44rpx solid transparent;
|
|
border-right: 14.44rpx solid transparent;
|
|
border-bottom: 8.34rpx solid #E5E5E5;
|
|
|
|
.triangle-small {
|
|
position: absolute;
|
|
top: 1.2rpx;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 14.44rpx solid transparent;
|
|
border-right: 14.44rpx solid transparent;
|
|
border-bottom: 8.34rpx solid #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.warning-other {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
// background-color: red;
|
|
}
|
|
}
|
|
|
|
.kcscrol {
|
|
width: 87.5vw;
|
|
height: 10.9vw;
|
|
white-space: nowrap;
|
|
margin-left: 18rpx;
|
|
position: relative;
|
|
z-index: 99;
|
|
|
|
.yjbox {
|
|
display: inline-block;
|
|
width: 296rpx;
|
|
height: 10.7vw;
|
|
background: #F9F9F9;
|
|
border-radius: 1.3vw;
|
|
margin-right: 18rpx;
|
|
|
|
position: relative;
|
|
|
|
.sl {
|
|
min-width: 1.2vw;
|
|
height: 1.8vw;
|
|
background: #E3EEF7;
|
|
border-radius: 0.9vw;
|
|
border: 1px solid rgba(3, 133, 250, 0.34);
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #1083F8;
|
|
text-align: center;
|
|
line-height: 1.75vw;
|
|
position: absolute;
|
|
padding: 0 1.6vw;
|
|
top: 0.8vw;
|
|
left: 0.8vw;
|
|
}
|
|
|
|
.ytj {
|
|
width: 4.5vw;
|
|
height: 1.8vw;
|
|
background: #E3EEF7;
|
|
border-radius: 0.9vw;
|
|
border: 1px solid rgba(3, 133, 250, 0.34);
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #1083F8;
|
|
text-align: center;
|
|
line-height: 1.75vw;
|
|
position: absolute;
|
|
top: 0.8vw;
|
|
right: 0.8vw;
|
|
}
|
|
|
|
image {
|
|
width: 7vw;
|
|
height: 7vw;
|
|
margin: 0.5vw auto 0.5vw;
|
|
display: block;
|
|
border-radius: 0.7vw;
|
|
}
|
|
|
|
>view {
|
|
width: 100%;
|
|
// height: 1.4vw;
|
|
// line-height: 1.4vw;
|
|
font-weight: 400;
|
|
font-size: 1.3vw;
|
|
color: #212327;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
padding: 0 1vw;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.guodu {
|
|
transition: .4s;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.zhanwei {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 200;
|
|
|
|
view {
|
|
position: absolute;
|
|
width: 2.2vw;
|
|
height: 2.2vw;
|
|
display: flex;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 78, 78, 1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 3vw;
|
|
color: rgba(255, 78, 78, 1);
|
|
}
|
|
}
|
|
</style> |