410 lines
10 KiB
Vue
410 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<view class="mengban" @click="emit('fill')" v-if="show"> </view>
|
|
<view class="takitem guodu" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
|
|
<view class="tit">
|
|
退货物料
|
|
</view>
|
|
<view class="cont">
|
|
<view class="zuo">
|
|
<view class="carp">
|
|
<view class="zuoimg tp">
|
|
<image :src="objtake.materialInfo?.materialImg?serverUrl+objtake.materialInfo?.materialImg:'/static/index/procurement/k.png'" mode="aspectFill"/>
|
|
</view>
|
|
<view class="youcont">
|
|
<view>{{objtake.materialInfo.materialName}}</view>
|
|
<view>
|
|
<view>
|
|
物料编码
|
|
<text>{{objtake.materialInfo.materialNo}}</text>
|
|
</view>
|
|
<view>
|
|
请购单位
|
|
<text>{{objtake.materialInfo.materialUnits}}</text>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
规格型号
|
|
<text style="white-space: nowrap;">{{objtake.materialInfo.specificationModel}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qinggou-font">
|
|
数量 <text style="color: red;" v-if="sx==true">超过退货上限！</text>
|
|
</view>
|
|
<view class="stringShow-father">
|
|
<view class="jj" @click="jjnum(-1)" @longpress="handleTouchStart(-1)" @touchend="handleTouchEnd">
|
|
-
|
|
</view>
|
|
<view class="stringShow-kuai">
|
|
<view v-for="(item,index) in stringShow" :key="index" :style="sx==true?'color: red':''">
|
|
{{item}}
|
|
</view>
|
|
|
|
</view>
|
|
<view class="jj" @click="jjnum(1)" @longpress="handleTouchStart(1)" @touchend="handleTouchEnd">
|
|
+
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="you">
|
|
<view class="calculator-father">
|
|
<view v-for="(item,index) in calculatorArray" :key="index">
|
|
<view class="calculator-kuai"
|
|
@click="clickKuai(item,index)">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="plsbuy-bottom">
|
|
<view class="quxiao" @click="emit('fill')">
|
|
取消
|
|
</view>
|
|
<view class="plsbuy-bottom-blue" @click="closeIt">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
const props = defineProps({
|
|
objtake: {
|
|
type: Object
|
|
},
|
|
show: {
|
|
type: Boolean
|
|
}
|
|
})
|
|
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
|
const emit = defineEmits([ 'fill' ,'right'])
|
|
const showbox = ref(false)
|
|
watch(()=>props.show,
|
|
()=>{
|
|
if(props.show==true){
|
|
relNumber.value = 1;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
|
setTimeout(()=>{
|
|
showbox.value = true
|
|
},50)
|
|
}else{
|
|
showbox.value = false;
|
|
isZero.value = false;
|
|
sx.value = false;
|
|
}
|
|
})
|
|
const sx = ref(false)
|
|
|
|
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "AE"];
|
|
const stringShow = ref("0000");
|
|
const relNumber = ref(1);
|
|
const isZero = ref(false);
|
|
const clickKuai = (item : any, index : number) => {
|
|
if (item == "AC") {
|
|
relNumber.value = 0;
|
|
stringShow.value = "0000";
|
|
cy();
|
|
return
|
|
}
|
|
if (item == "AE") {
|
|
relNumber.value = Math.trunc(relNumber.value / 10)
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value);
|
|
cy();
|
|
return
|
|
}
|
|
if(isZero.value == false){
|
|
isZero.value = true;
|
|
relNumber.value = item;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value);
|
|
cy()
|
|
return
|
|
}
|
|
if (digitCountByString(relNumber.value) > 3) {
|
|
cy();
|
|
} else {
|
|
if (!relNumber.value) {
|
|
relNumber.value = item;
|
|
} else {
|
|
relNumber.value = relNumber.value * 10 + item;
|
|
}
|
|
cy()
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
|
}
|
|
}
|
|
const cy=()=>{
|
|
let num = props.objtake.wlNum;
|
|
let bl = relNumber.value;
|
|
if(bl>num){
|
|
sx.value = true
|
|
}else{
|
|
sx.value = false
|
|
}
|
|
}
|
|
const InteroutId = ref(null)
|
|
const handleTouchStart = (e:number)=> {
|
|
Interval(e)
|
|
}
|
|
const handleTouchEnd=()=> {
|
|
clearInterval(InteroutId.value);
|
|
// 清除定时器
|
|
}
|
|
const Interval = (e:number)=>{
|
|
InteroutId.value = setInterval(() => {
|
|
jjnum(e);
|
|
}, 120);
|
|
}
|
|
const jjnum = (e:number)=>{
|
|
let num = props.objtake.wlNum;
|
|
if(relNumber.value>=num&&e==1){relNumber.value = num; return}
|
|
if(relNumber.value<=1&&e==-1){relNumber.value = 1; return}
|
|
relNumber.value+=e;
|
|
cy();
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
|
// emit('jjnum',e)
|
|
}
|
|
const closeIt = () => {
|
|
emit('right', relNumber.value,props.objtake )
|
|
}
|
|
function digitCountByString(n) {
|
|
const s = Math.abs(n).toString();
|
|
return s.length;
|
|
}
|
|
function toFixed4ByPadStart(n) {
|
|
const intPart = Math.floor(Math.abs(n));
|
|
return String(intPart).padStart(4, '0');
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.takitem{
|
|
width: 53.3vw;
|
|
height: 36vw;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163,167,182,0.16);
|
|
border-radius: 1.6vw;
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 13vw;
|
|
right: 23.4vw;
|
|
padding: 2vw;
|
|
.you{
|
|
.plsbuy-bottom {
|
|
width: 100%;
|
|
margin-top: 3vw;
|
|
height: 7vw;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 35rpx;
|
|
view{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 9.1vw;
|
|
height: 3.8vw;
|
|
color: rgba(92, 121, 146, 1);
|
|
border-radius:1.9vw;
|
|
font-size: 1.8vw;
|
|
border: 1px solid #EDEDEF;
|
|
margin-left: 1vw;
|
|
}
|
|
.quxiao{
|
|
background: #EDEDEF;
|
|
}
|
|
.plsbuy-bottom-blue {
|
|
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
|
border: 1px solid rgba(3,133,250,0.34);
|
|
color: #0385FA;
|
|
}
|
|
}
|
|
.calculator-father {
|
|
width: 19vw;
|
|
height: 20vw;
|
|
margin :0 auto 0;
|
|
flex-wrap: wrap;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
.calculator-kuai {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url('/static/index/procurement/bt.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 42rpx;
|
|
font-weight: 500;
|
|
margin: 12rpx 20rpx 0 20rpx;
|
|
width: 4.4vw;
|
|
height: 4.4vw;
|
|
}
|
|
.calculator-kuai:active{
|
|
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
|
color: #fff;
|
|
font-size: 45rpx;
|
|
font-weight: 500;
|
|
border-radius: 1.6vw;
|
|
}
|
|
}
|
|
}
|
|
.stringShow-father {
|
|
width: 100%;
|
|
height:7vw;
|
|
margin-top:0.5vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.jj{
|
|
width: 5vw;
|
|
height: 5vw;
|
|
margin: 0 1vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url('/static/index/procurement/bt.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 45rpx;
|
|
font-size: 42rpx;
|
|
}
|
|
.jj:active{
|
|
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #DCDCEE;
|
|
border-radius: 45rpx;
|
|
font-size: 45rpx;
|
|
font-weight: 500;
|
|
}
|
|
.stringShow-kuai {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 11.5vw;
|
|
height: 5vw;
|
|
background: #F3F5F9;
|
|
border-radius: 1vw;
|
|
border: 1px solid #CBCFD0;
|
|
justify-content: space-around;
|
|
box-shadow: 0rpx 0.1vw 0.3vw 0rpx rgba(140,143,153,0.17) inset;
|
|
view{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 42rpx;
|
|
font-weight: 500;
|
|
width:2.5vw;
|
|
height: 5vw;
|
|
}
|
|
}
|
|
}
|
|
.qinggou-font {
|
|
font-size: 1.4vw;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
|
|
.cont{
|
|
width: 100%;
|
|
height: 26.5vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 1.7vw;
|
|
.zuo{
|
|
width: 27vw;
|
|
height: 100%;
|
|
.carp{
|
|
width: 100%;
|
|
height: 16vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 1.8vw;
|
|
.youcont{
|
|
width: 17vw;
|
|
height: 100%;
|
|
>view{
|
|
&:nth-child(2),&:nth-child(3){
|
|
width: 100%;
|
|
height: 3.6vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 1.8vw;
|
|
>view{
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #888888;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
text{
|
|
font-weight: 300;
|
|
font-size: 1.4vw;
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(1){
|
|
width: 17vw;
|
|
height: 1.8vw;
|
|
font-weight: bold;
|
|
font-size: 1.6vw;
|
|
color: #222222;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
line-height: 1.8vw;
|
|
}
|
|
}
|
|
}
|
|
.zuoimg{
|
|
width: 8vw;
|
|
height: 8vw;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.tit{
|
|
width: 100%;
|
|
height: 2.6vw;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
font-weight: 400;
|
|
font-size: 1.6vw;
|
|
color: #333333;
|
|
line-height: 2.1vw;
|
|
}
|
|
}
|
|
.mengban{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
left: 0;
|
|
background: RGBA(239, 240, 244, 0.55);
|
|
}
|
|
.hei0 {
|
|
height: 0 !important;
|
|
view{
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
.unclass {
|
|
opacity: 0 !important;
|
|
}
|
|
.guodu {
|
|
transition: .4s;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
</style>
|