hldy_app_mini/pages/procurement/components/calculator.vue

717 lines
17 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:220':'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*7) || 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>{{v.name}}</text>
<!-- <image src="/static/index/procurement/d.png" mode="aspectFill"></image> -->
</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="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 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*7) || 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
);
console.log(props.caigouobj.wlUnits,type.value)
}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)
}
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,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: 24.3vw;
display: flex;
height: 3.3vw;
justify-content: space-between;
align-items: center;
margin :0.8vw auto 0;
background: #F3F5F9;
border-radius: 1.65vw;
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: 24.3vw;
// max-height: 21vh;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174,175,176,0.35);
border-radius: 1.1vw;
padding: 0 1vw;
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: 7vh;
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;
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: 24.5vw;
max-height: 35vh;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174,175,176,0.35);
border-radius: 1.1vw;
padding: 0 1.4vw;
position: absolute;
left: 3vw;
top: 6.5vw;
z-index: 211;
.gysscrol{
width: 100%;
height: 100%;
.acts{
color: #0385FA !important;
image{
display: block;
}
}
view{
display: flex;
justify-content: space-between;
align-items: center;
// justify-content: center;
font-weight: 400;
font-size: 1.5vw;
color: #666666;
height: 7vh;
// margin-bottom: 1.2vw;
// padding-right: 1.5vw;
position: relative;
&:nth-child(1){
// margin-top: 1.2vw;
}
image{
position: absolute;
right: 0.2vw;
top: 50%;
transform: translateY(-50%);
width: 1vw !important;
height: 0.7vw !important;
display: none;
}
}
}
}
.gssel{
width: 24.3vw;
display: flex;
height: 3.3vw;
justify-content: space-between;
align-items: center;
margin :0.8vw auto 0;
background: #F3F5F9;
border-radius: 1.65vw;
padding: 0 1vw;
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.6vw;
color: #555555;
line-height: 3.3vw;
}
}
.tlt{
font-weight: bold;
font-size: 1.5vw;
color: #333333;
padding-left: 3vw;
font-weight: 400;
}
}
.plsbuy-contain {
display: flex;
align-items: center;
flex-direction: column;
width: 32vw;
height: 95vh;
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: 0vw;
right: 32vw;
position: fixed;
padding:1.5vw 1vw;
}
.plsbuy-bottom {
width: 90%;
margin-top: 3vw;
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{
min-width: 8vw;
height: 3.8vw;
background: #EDEDEF;
border-radius: 1.9vw;
padding: 0 2vw;
margin-left: 1vw;
border: 1px solid #EDEDEF;
font-size: 1.8vw;
font-weight: 400;
color: #888888;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
.plsbuy-bottom-blue {
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
border: 1px solid rgba(3,133,250,0.34);
color: #0385FA;
}
}
.calculator-father {
width: 25vw;
height: 45vh;
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: 6.1vw;
height: 6.1vw;
}
.calculator-kuai:active{
background: linear-gradient(to bottom, #00C9FF, #0076FF);
color: #fff;
font-size: 45rpx;
font-weight: 500;
border-radius: 2.6vw;
}
}
.stringShow-father {
width: 100%;
height:7vw;
margin-top:0.5vw;
display: flex;
align-items: center;
justify-content: center;
.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: 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: 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;
}
</style>