hldy_app_mini/pages/procurement/components/calculator.vue

730 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,
required: true,
},
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){
console.log(props.caigouobj)
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.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)
}
})
console.log("a",a)
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
}
console.log(sx.value,num,bl)
}
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)
}
const colse = ()=>{
emit('colse')
}
// 这个方法是查看数字有多少位
function digitCountByString(n) {
// 先处理负数
const s = Math.abs(n).toString();
// 若不想统计小数点,可去掉小数点后再取长度:
// return s.replace('.', '').length;
return s.length;
}
// 这个方法是将Number转为String
function toFixed4ByPadStart(n) {
// 1. 取绝对值并向下取整,防止小数和负号影响
const intPart = Math.floor(Math.abs(n));
// 2. 转字符串并 padStart 到长度 4不足时前面补 '0'
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: 2.5vw;
left: 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>