hldy_app_mini/pages/procure/component/calculator.vue

810 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="plsbuy-contain guodu" :class="show?'':'unclass'" :style="showbox?'z-index:999':'z-index:-2'">
<view class="gys">
<view class="tlt">供应商</view>
<view class="gssel" @click="gysflag = true">
<view>
{{gysarr[gysidnum]?.name}}
</view>
<text @click.stop="gysflag = !gysflag">
<image class="guodu" :style="gysflag?'transform: rotate(180deg);':''"
:src=" '/static/index/procurement/sj.png' " mode="aspectFill"></image>
</text>
</view>
<view class="tanchu guodu" :class="gysflag?'':'hei0'"
:style="`height: ${(gysarr && gysarr.length*8) || 0}vh`">
<scroll-view scroll-y="true" class="gysscrol" v-if="gysflag">
<view v-for="(v,i) in gysarr" :key='i' :class="gysidnum==i?'acts':''" @click="gysid(i)">
<text class="tab-view">{{ v.name }}</text>
</view>
</scroll-view>
</view>
</view>
<view class="calculator-father">
<view v-for="(item,index) in calculatorArray" :key="index">
<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai"
style="font-size: 33rpx;" v-if="item==`AC`" @click="clickKuai(item,index)">
清零
</view>
<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai"
v-else-if="item==`AE`" @click="clickKuai(item,index)">
<image src="/static/cleanone.png" mode="aspectFill"
style="width: 50%;height: 50%;margin-left: -5rpx;"></image>
</view>
<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai" v-else
@click="clickKuai(item,index)">
{{item}}
</view>
</view>
</view>
<view class="tlt" style="width: 96%;margin-top: 30rpx;margin-bottom: 10rpx;">采购数量 <text style="color: red;"
v-if="sx==true">超过库存上限!</text></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)" @touchstart="clickstart(-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)" @touchstart="clickstart(1)"
@touchend="handleTouchEnd">
+
</view>
</view>
<view class="cgdw">
<view class="leftr" @click.stop="cgdwflag = !cgdwflag,cgdwec = false">
<view>{{type.unit}}</view>
<text>
<image class="guodu" :style="!cgdwflag?'transform: rotate(180deg);':''"
:src=" '/static/index/procurement/sj.png' " mode="aspectFill"></image>
</text>
</view>
<!-- <view class="tz" @click="cgdwflag=!cgdwflag">调整</view> -->
<view class="dwdw guodu" :class="cgdwflag?'':'hei0'"
:style="`height: ${(cgdwarr && cgdwarr.length*8) || 0}vh`">
<view class="gysscrol guodu" v-if="cgdwec" :class="cgdwflag?'':'hei0'">
<view v-for="(v,i) in cgdwarr" :key='i' :class="type.multiUnitType==v.multiUnitType?'acts':''"
@click="cd(v,i)" :style="v.unit&&v.num?'':'height:0 !important;margin-top:-0.5vw'">
<text v-if="v.unit&&v.num">{{v.unit}}</text><text
v-if="v.unit&&v.num">{{v.num}}{{caigouobj.materialUnits}}</text>
<!-- <image src="/static/index/procurement/d.png" mode="aspectFill"></image> -->
</view>
</view>
</view>
</view>
<view class="plsbuy-bottom">
<view class="quxiao" @click="colse">
取消
</view>
<view class="plsbuy-bottom-blue" @click="closeIt">
确定
</view>
</view>
<view class="mengban" v-if="cgdwflag||gysflag" @click="gysflag = false;cgdwflag = false;cgdwec = false;"></view>
</view>
</template>
<script setup lang="ts">
import {
ref,
onMounted,
onBeforeUnmount,
computed,
nextTick,
watch
} from 'vue';
const emit = defineEmits(['right', 'colse', 'jjnum'])
const blueNumber = ref(-1);
const gysflag = ref(false)
const cgdwflag = ref(false)
const sx = ref(false)
const type = ref({})
const downslength = ref(0);
const gysarr = ref([])
const cgdwarr = ref([])
const gysidnum = ref(0)
const props = defineProps({
show: {
type: Boolean,
default: false
},
caigouobj: {
type: Object,
required: true,
}
});
// watch(
// () => type.value,
// (news,old) => {
// console.log(old,news)
// if(!old.num){return}
// if(old.num==1){
// let num = Number(props.caigouobj.upperLimit)-Number(props.caigouobj.kcsl);
// let m = Math.floor(relNumber.value/news.num);
// huansuan(m)
// }
// if(old.num!=1){
// let f = relNumber.value*old.num;
// let num = Number(props.caigouobj.upperLimit)-Number(props.caigouobj.kcsl);
// f = f>num?num:f;
// // let m = Math.floor(num/type.value.num)
// let m = Math.floor(f/news.num);
// huansuan(m)
// }
// }
// )
const cgdwec = ref(false)
const showbox = ref(false)
watch(() => cgdwflag.value,
() => {
if (cgdwflag.value == true) {
setTimeout(() => {
cgdwec.value = true
}, 200)
}
})
// watch(
// () => props.show,
// () => {
// if (props.show) {
// let a = [
// {
// multiUnitType: 1,
// price: props.caigouobj.oneUnitPrice,
// unit: props.caigouobj.oneUnit,
// num: props.caigouobj.oneUnitProportion
// },
// {
// multiUnitType: 2,
// price: props.caigouobj.twoUnitPrice,
// unit: props.caigouobj.twoUnit,
// num: props.caigouobj.twoUnitProportion
// },
// {
// multiUnitType: 3,
// price: props.caigouobj.unitPrice ? props.caigouobj.unitPrice : props.caigouobj.referenceUnitPrice,
// unit: props.caigouobj.materialUnits,
// num: 1
// }
// ];
// if (props.caigouobj.wlUnits) {
// type.value = a.find(item =>
// item.unit == props.caigouobj.wlUnits
// );
// } else {
// type.value = a.find(item =>
// item.multiUnitType == props.caigouobj.multiUnitType
// );
// }
// cgdwarr.value = []
// downslength.value = 0;
// a.forEach((element : any) => {
// if (element.unit && element.num) {
// cgdwarr.value.push(element)
// }
// })
// let n = [];
// let id = [];
// gysarr.value = [];
// n = props.caigouobj.suppliers_dictText?.split(/[, ]+/);
// id = props.caigouobj.suppliers?.split(/[, ]+/);
// n.forEach((item, i) => {
// gysarr.value.push({ 'name': item, 'id': id[i] })
// if (item == props.caigouobj.suppliersName) {
// gysid(i)
// }
// })
// if (props.caigouobj.purchaseQuantity) {
// props.caigouobj.upperLimit = props.caigouobj.wlUpperLimit
// huansuan(props.caigouobj.purchaseQuantity)
// } else {
// jssl()
// }
// setTimeout(() => {
// showbox.value = true;
// }, 50)
// } else {
// gysflag.value = false;
// cgdwflag.value = false;
// cgdwec.value = false;
// type.value = {};
// sx.value = false;
// gysidnum.value = 0;
// isZero.value = false;
// setTimeout(() => {
// showbox.value = false;
// }, 400)
// }
// })
const jssl = () => {
let num = Number(props.caigouobj.upperLimit) - Number(props.caigouobj.kcsl);
let m = Math.floor(num / type.value.num)
huansuan(m);
cy()
}
const huansuan = (m : number) => {
relNumber.value = m;
stringShow.value = toFixed4ByPadStart(relNumber.value);
}
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
}
}
const cd = (v, i) => {
type.value = v;
cgdwflag.value = false;
cgdwec.value = false;
jssl()
}
const gysid = (e : number) => {
gysidnum.value = e;
gysflag.value = false;
}
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) => {
blueNumber.value = index;
setTimeout(() => {
blueNumber.value = -1
}, 300)
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)
}
let longPressTimer = null;
let longPressed = false;
const clickstart = (e : number) => {
// console.log("开始长按")
longPressed = false;
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
longPressTimer = setTimeout(() => {
longPressTimer = null;
longPressed = true;
Interval(e)
}, 800); // 1000ms = 1s
}
const handleTouchEnd = () => {
// console.log("取消了吗???")
// 如果定时器还在,说明没到 1 秒,取消长按
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
// console.log('未达到 1 秒:取消长按');
return;
}
// 如果已经触发过长按
if (longPressed) {
// console.log('长按已触发,用户放手');
clearInterval(InteroutId.value);
longPressed = false; // 重置状态(按需)
} else {
console.log('无效状态(通常不会到这)');
}
}
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, props.caigouobj)
}
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 lang="less" scoped>
.hei0 {
height: 0 !important;
view {
height: 0 !important;
}
}
.unclass {
opacity: 0 !important;
}
.cgdw {
width: 26vw;
display: flex;
height: 3.3vw;
justify-content: space-between;
align-items: center;
margin: 1.2vw 0;
margin-left: 1.1vw;
background: #F3F5F9;
border-radius: 1.1vw;
padding: 0 1vw;
position: relative;
text {
width: 3.3vw;
height: 3.3vw;
display: flex;
justify-content: center;
align-items: center;
image {
width: 1.6vw;
height: 1.6vw;
}
}
.dwdw {
width: 26vw;
// max-height: 21vh;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174, 175, 176, 0.35);
border-radius: 1.1vw;
padding: 0 2vw;
// background-color: red;
position: absolute;
left: 0vw;
bottom: 3.5vw;
z-index: 211;
.gysscrol {
width: 100%;
height: 100%;
// max-height: 21vw;
>.acts {
color: #0385FA !important;
image {
display: block;
}
}
view {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 400;
font-size: 1.5vw;
color: #666666;
// margin-bottom: 1.2vw;
// padding-right: 1.5vw;
height: 8vh;
position: relative;
white-space: nowrap;
text {
white-space: nowrap;
padding-right: 1vw;
}
&:nth-child(1) {
// margin-top: 1vw;
}
>image {
position: absolute;
right: -0.2vw;
top: 50%;
transform: translateY(-50%);
width: 1vw !important;
height: 0.7vw !important;
display: none;
}
}
}
}
.tz {
width: 7vw;
height: 3.3vw;
background: rgba(255, 255, 255, 0.6);
border-radius: 1.6vw;
border: 1px solid #D9DADC;
box-shadow: 0.05vw 0.5vw 0.5vw #dadee1;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1.5vw;
color: #555555;
}
.leftr {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
height: 3.3vw;
padding: 0 1vw;
view {
width: 8.6vw;
font-weight: 400;
font-size: 1.6vw;
color: #555555;
}
text {
font-weight: 400;
font-size: 1.4vw;
color: #888888;
}
}
}
.gys {
width: 100%;
height: 7vw;
position: relative;
margin-top: 0.5vw;
>.tanchu {
width: 26vw;
// max-height: 35vh;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174, 175, 176, 0.35);
border-radius: 1.1vw;
padding: 0 1vw;
position: absolute;
left: 4vw;
top: 6.5vw;
z-index: 211;
background-color: #fff;
.gysscrol {
width: 100%;
height: 100%;
.acts {
color: #0385FA !important;
image {
display: block;
}
}
view {
display: flex;
align-items: center;
font-weight: 400;
font-size: 1.5vw;
color: #666666;
// height: 8vh;
position: relative;
// padding: 0 30rpx;
margin: 20rpx 0;
image {
position: absolute;
right: 0.2vw;
top: 50%;
transform: translateY(-50%);
width: 1vw !important;
height: 0.7vw !important;
display: none;
}
}
}
}
.gssel {
width: 27vw;
display: flex;
height: 3.3vw;
justify-content: space-between;
align-items: center;
margin: 0.8vw auto 0;
background: #F3F5F9;
border-radius: 1.1vw;
padding: 0 1vw;
margin-bottom: 10rpx;
text {
width: 3.3vw;
height: 3.3vw;
display: flex;
justify-content: center;
align-items: center;
image {
width: 1.6vw;
height: 1.6vw;
}
}
view {
width: 22vw;
height: 3.3vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
font-size: 1.5vw;
color: #555555;
line-height: 3.3vw;
}
}
}
.plsbuy-contain {
display: flex;
align-items: center;
flex-direction: column;
width: 33vw;
height: 91vh;
background: rgba(250, 251, 252, 1);
overflow: hidden;
box-shadow: 0rpx 0rpx 1.6vw 0rpx rgba(136, 141, 153, 0.28);
border-radius: 2.2vw;
top: 50%;
transform: translateY(-50%);
right: 32vw;
position: fixed;
padding: 1.5vw 0vw;
}
.plsbuy-bottom {
width: 90%;
margin-top: 0.5vw;
height: 7vw;
display: flex;
justify-content: flex-end;
font-size: 35rpx;
view {
display: flex;
justify-content: center;
align-items: center;
width: 9vw;
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 {
width: 160rpx;
height: 75rpx;
background-color: #ebeced;
color: #888888;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
border-radius: 40rpx;
}
.plsbuy-bottom-blue {
width: 160rpx;
height: 75rpx;
color: #0385FA;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
border-radius: 40rpx;
border: 1rpx solid #0385FA;
background: linear-gradient(to bottom, #E9F4FF, #CAE0F9);
margin: 0 40rpx;
}
}
.calculator-father {
width: 25vw;
height: 45vh;
margin-left: -20rpx;
// margin: 0 auto 0;
flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding-left: 29rpx;
.calculator-kuai {
display: flex;
justify-content: center;
align-items: center;
background-size: 100% 100%;
font-size: 42rpx;
font-weight: 500;
margin: 25rpx 25rpx 0 0;
width: 7vw;
height: 5.5vw;
background-color: #F3F5F9;
border-radius: 40rpx;
}
.calculator-kuai:active {
background: linear-gradient(to bottom, #019cef, #0084fa);
color: #fff;
font-size: 42rpx;
font-weight: 500;
border-radius: 40rpx;
}
}
.stringShow-father {
width: 100%;
height: 7vw;
margin-top: 0.5vw;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.8vw;
.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: 25rpx;
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: 25rpx;
font-size: 45rpx;
font-weight: 500;
}
.stringShow-kuai {
display: flex;
align-items: center;
width: 14vw;
height: 5vw;
background: #F3F5F9;
border-radius: 1vw;
border: 1px solid #CBCFD0;
justify-content: space-around;
padding: 0 1vw;
// 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: 27rpx;
font-weight: 500;
margin: 0.8vw auto 0;
}
.mengban {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 210;
background: RGBA(239, 240, 244, 0);
}
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
.tab-view {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
}
.tlt {
font-weight: bold;
font-size: 34rpx;
color: #333333;
padding-left: 3vw;
font-weight: 400;
margin-bottom: 30rpx;
}
</style>