419 lines
10 KiB
Vue
419 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.materialImg?serverUrl+objtake.materialImg:'/static/index/procurement/k.png'" mode="aspectFill"/>
|
||
</view>
|
||
<view class="youcont">
|
||
<view>{{objtake.materialName}}</view>
|
||
<view>
|
||
<view>
|
||
物料编码
|
||
<text>{{objtake.materialNo}}</text>
|
||
</view>
|
||
<view>
|
||
请购单位
|
||
<text>{{objtake.materialUnits}}</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
规格型号
|
||
<text style="white-space: nowrap;">{{objtake.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" :style="sx==true?'background:#f8f8f8':''" @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, defineProps, watch, reactive } from 'vue';
|
||
const props = defineProps({
|
||
objtake: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
show: {
|
||
type: Boolean
|
||
}
|
||
})
|
||
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
||
const emit = defineEmits([ 'fill' ,'qingling'])
|
||
const showbox = ref(false)
|
||
watch(()=>props.show,
|
||
()=>{
|
||
console.log(props.objtake)
|
||
if(props.show==true){
|
||
setTimeout(()=>{
|
||
showbox.value = true
|
||
},50)
|
||
}else{
|
||
showbox.value = false
|
||
}
|
||
})
|
||
const sx = ref(false)
|
||
const cy=()=>{
|
||
let num = Number(props.caigouobj.upperLimit)-Number(props.caigouobj.kcsl);
|
||
let bl = relNumber.value*type.value.num
|
||
if(bl>num){
|
||
sx.value = true
|
||
}else{
|
||
sx.value = false
|
||
}
|
||
console.log(sx.value,num,bl)
|
||
}
|
||
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "AE"];
|
||
const stringShow = ref("0000");
|
||
const relNumber = ref(0);
|
||
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) {
|
||
|
||
} else {
|
||
if (!relNumber.value) {
|
||
relNumber.value = item
|
||
} else {
|
||
relNumber.value = relNumber.value * 10 + item;
|
||
}
|
||
cy()
|
||
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
||
}
|
||
}
|
||
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 = Number(props.caigouobj.upperLimit)-Number(props.caigouobj.kcsl);
|
||
let m = Math.floor(num/type.value.num)
|
||
if(m<=relNumber.value&&e==1){relNumber.value = m; return}
|
||
if(relNumber.value<=1&&e==-1){relNumber.value = 1; return}
|
||
relNumber.value+=e;
|
||
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
||
cy()
|
||
// emit('jjnum',e)
|
||
}
|
||
const closeIt = () => {
|
||
if(relNumber.value<1){
|
||
uni.showToast({
|
||
title:'采购数量不能为0！',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
emit('right', relNumber.value,gysarr.value[gysidnum.value],type.value)
|
||
}
|
||
const colse = ()=>{
|
||
emit('colse')
|
||
}
|
||
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;
|
||
}
|
||
.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>
|