hldy_app_mini/pages/procurement/components/purorder.vue

677 lines
15 KiB
Vue

<template>
<view>
<view class="purbox guodu" :style="show?'top:6vh':'top:-99vh'">
<view class="lfitem">
<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop">
<view class="pls-card" v-for="(v,i) in generatedOrder" :key='i' @click="clickLeftMenu(i)"
:style="{borderColor: i==lefttarget? ``:`#fff`,marginTop:i==0?'2vw':'' }">
<view class="pls-card-title">
<view class="title-left">
{{v.cgdNo}}
</view>
<view class="title-right">
<text style="position: absolute;bottom: 4rpx;left: -30rpx;">
</text>
<view class="title-right-big">
{{Number(v.totalPrice).toFixed(2)}}
</view>
<!-- <image class="title-right-img" src="/static/more.png" @click="openmore(i)" /> -->
</view>
</view>
<view class="pls-card-middle">
<view class="middle-heng"></view>
<view class="pls-card-middle-one">
<view class="middle-title">
{{v.qgDate}}
</view>
<view class="middle-heng-father">
<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view>
采购
</view>
<view style="font-size: 25rpx;">
[ {{v.qgBy}} ]
</view>
</view>
</view>
<view class="pls-card-middle-one">
<view class="middle-title">
{{ Number(v.status)==1 ?``:v.jhTime }}
</view>
<view class="middle-heng-father">
<view class="middle-ball" style="background-color: #1083F8;"></view>
</view>
<view class="end-font">
<!-- <view class=""
:style="Number(v.status)<3 && Number(v.status)>0?{color: `#1083F8`}:{} ">
拣货
</view> -->
<view>
拣货
</view>
<view style="font-size: 25rpx;" v-if="Number(v.status)==1 ">
[ {{v.jhBy}} ]
</view>
</view>
</view>
<view class="pls-card-middle-one">
<view class="middle-title">
{{v.wjTime}}
</view>
<view class="middle-heng-father">
<view class="middle-ball"></view>
</view>
<view class="end-font">
<view>
完结
</view>
<!-- <view style="font-size: 25rpx;" v-if="Number(v.status)==2 ">
[ {{v.wjTime}} ]
</view> -->
</view>
</view>
</view>
<view class="pls-card-end">
<view class="end-left">
<image class="end-left-img" src="/static/shili.png" />
<view class="end-left-font">
{{v.gysName}}
</view>
</view>
<!-- <view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">
{{ tagesstatues[Number(v.status)] }}
</view> -->
<view class="tag-success">
<text v-if="v.cgdType==0">待入库 </text>
<text v-if="v.cgdType==1">待完结 </text>
<text v-if="v.cgdType==2">巳完结 </text>
<text v-if="v.cgdType==9">作废 </text>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="rigitem">
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation enable-back-to-top @scroll="scroll"
:scroll-top="scrolltoplist">
<view style="height:2vw;"></view>
<view class="fler" v-for="(v,index) in generatedOrder[lefttarget]?.cgdInfoList" :key="index">
<view class="speitem guodu">
<image :src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
mode="aspectFill">
</image>
<view class="cardp">
<view v-if="v.categoryName">{{v.categoryName}}</view>
<view v-if="v.typeName">{{v.typeName}}</view>
<view v-if="v.medicationName">{{v.medicationName}}</view>
</view>
</view>
<view class="msitem guodu">
<view>
<view>{{v.wlName}}</view>
<text>{{v.wlMaterialNo}}</text>
<text> <text class="q">{{Number(v.totalPrice).toFixed(2) }}</text></text>
</view>
<view style="white-space: nowrap;">
<text style="white-space: nowrap;"> 规格型号: {{v.wlSpecificationModel}}</text>
</view>
<view>
<text>采购单价:
{{v.arrivalPrice?Number(v.arrivalPrice).toFixed(2) : Number(v.procurementPrice).toFixed(2) }}</text>
<text>采购单位: {{v.wlUnits}}</text>
</view>
<view></view>
<view>
<view style="align-items: flex-start;">
<text style="color: #1083F8;">{{v.purchaseQuantity}}</text>
<text style="color: #1083F8;">采购数量</text>
</view>
<view>
<text>{{v.kcsl?v.kcsl:'0'}}</text>
<text>库存数量</text>
</view>
<view>
<text>{{v.wlUpperLimit}}</text>
<text>物料上限 </text>
</view>
<view>
<text>{{v.wlLowerLimit}}</text>
<text> 物料下限</text>
</view>
</view>
</view>
</view>
<view style="height: 1.5vw;" v-if="generatedOrder[lefttarget]?.cgdInfoList.length>2"></view>
</scroll-view>
<view class="anniubtn">
<view class="gb" @click="emit('cloe')">取消</view>
<view class="scsgd" @click="connfig">生成采购单</view>
</view>
<!-- -->
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps, defineComponent, watch } from 'vue';
import { generatedPurchaseViewOrder, generatedPurchaseOrder } from '../api/lunpan.js'
const emit = defineEmits(['cloe', 'config'])
const leftscrolltop = ref(0);
const scrolltoplist = ref(0);
const lefttarget = ref(0);
const form = reactive({
nuId: '',
pageNo: 1,
pageSize: 9,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: '',
cgdId: "",
isWaring: 0,
canpull: true
})
const props = defineProps({
arrlist: {
type: Array,
default: []
},
show: {
type: Boolean,
default: false
}
})
const generatedOrder = ref([])
const serverUrl = ref('')
onMounted(() => {
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
})
watch(
() => props.show,
() => {
if (props.show == true) {
console.log(props.arrlist)
generatedPurchaseViewOrder(props.arrlist).then(res => {
console.log(res.result)
generatedOrder.value = res.result;
})
}
}
)
const oldscl = ref(0)
const scroll = (e) => {
oldscl.value = e.detail.scrollTop
}
const clickLeftMenu = (index : any) => {
let num = Math.ceil((index + 1))
leftscrolltop.value = (num - 2) * 186;
lefttarget.value = index;
scrolltoplist.value = 0;
form.cgdId = generatedOrder.value[index].id
form.pageNo = 1
form.canpull = true;
scrolltoplist.value = oldscl.value;
nextTick(() => {
scrolltoplist.value = 0
});
// console.log("!!!!",form)
}
const timerflag = ref(true);
const connfig = () => {
if (timerflag.value == false) { return }
timerflag.value = false;
generatedPurchaseOrder(generatedOrder.value).then(res => {
uni.showToast({
icon: res.success ? 'success' : 'error',
title: res.message
})
setTimeout(() => {
if (res.success) {
emit('config')
timerflag.value = true;
}
}, 700)
})
}
</script>
<style scoped lang="less">
.anniubtn {
width: 100%;
height: 7vw;
display: flex;
justify-content: flex-end;
align-items: center;
.gb {
width: 10vw;
background: #EDEDEF;
color: #888888;
}
.scsgd {
width: 12vw;
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
border: 1px solid rgba(3, 133, 250, 0.34);
color: #0385FA;
}
view {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1.5vw;
border-radius: 1.6vw;
font-weight: 400;
font-size: 1.6vw;
height: 3.8vw;
}
}
.purbox {
width: 83vw;
height: 90vh;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(136, 141, 153, 0.26);
border-radius: 1.6vw;
position: fixed;
top: 6vh;
left: 8.5vw;
z-index: 133;
display: flex;
overflow: hidden;
.lfitem {
width: 33vw;
height: 100%;
background: #EFF0F4;
}
.rigitem {
width: 50vw;
height: 100%;
background: #fff;
.crdcroll {
width: 100%;
height: calc(90vh - 7vw);
}
.actve {
border: 2px solid #1083F8 !important;
}
.fler {
width: 47vw;
height: 15.5vw;
border-radius: 1.6vw;
border: 2px solid #F9F9F9;
background: #F9F9F9;
position: relative;
margin: 0 auto 1.2vw;
display: flex;
overflow: hidden;
justify-content: flex-start;
white-space: nowrap;
.zkf {
width: 7vw;
right: -7vw;
}
.msitem {
width: 25vw;
height: 100%;
padding: 0.5vw 1vw 1vw;
display: inline-block;
>view {
margin-top: 0.8vw;
&:nth-child(5) {
width: 28vw;
height: 3.4vw;
display: flex;
justify-content: space-between;
position: relative;
left: 0;
>view {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
&:nth-child(1) {
text-align: left;
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
text-align: center;
}
text {
&:nth-child(1) {
font-weight: bold;
font-size: 1.7vw;
color: #555555;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.1vw;
color: #999999;
}
}
}
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
display: flex;
justify-content: space-between;
text {
font-weight: 400;
font-size: 1.4vw;
color: #777777;
}
}
&:nth-child(1) {
width: 28vw;
display: flex;
justify-content: space-between;
align-items: center;
height: 2vw;
margin-top: 1vw;
white-space: nowrap;
flex: auto;
>view {
width: 13vw;
height: 2vw;
font-weight: bold;
font-size: 1.6vw;
color: #222222;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
text {
min-width: 3vw;
font-weight: 400;
font-size: 1.4vw;
color: #222222;
white-space: nowrap;
text-align: right;
.q {
color: #555555;
font-size: 1.6vw;
font-weight: 800;
width: 100%;
text-align: right;
}
}
}
}
}
// .spleft{
// margin-left: -15vw !important;
// }
.speitem {
width: 15vw;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.cardp {
width: 12.5vw;
height: 4vw;
display: flex;
flex-wrap: wrap;
margin: 0vw auto 0;
align-items: center;
view {
width: 5.5vw;
height: 1.8vw;
border-radius: 0.9vw;
border: 1px solid #D2D2D2;
margin: 0.5vw 0 0 0.5vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1vw;
color: #555555;
}
}
>image {
width: 10vw;
height: 9vw;
margin: 0.5vw auto 0;
}
}
}
}
}
.left-menu-scroll {
height: 100%;
width: 100%;
.pls-card {
width: 30vw;
height: 16.5vw;
border: #0f9fff 3rpx solid;
background-color: #fff;
border-radius: 40rpx;
margin: 0 auto 1.2vw;
padding: 0 30rpx;
position: relative;
.pls-card-title {
height: 5.5vh;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
.title-left {
font-weight: 600;
font-size: 32rpx;
}
.title-right {
display: flex;
align-items: flex-end;
font-size: 30rpx;
position: relative;
.title-right-big {
font-weight: 600;
font-size: 40rpx;
}
.title-right-img {
position: absolute;
right: -10rpx;
bottom: 6rpx;
width: 40rpx;
height: 40rpx;
}
}
}
.pls-card-middle {
width: 100%;
height: 11vh;
margin-top: 1vw;
position: relative;
display: flex;
.middle-heng {
position: absolute;
left: 4%;
top: 35%;
transform: translateY(-35%);
width: 92%;
height: 2px;
/* 虚线粗细 */
background-image: repeating-linear-gradient(to right,
#E5E5E5 0,
#E5E5E5 6px,
transparent 6px,
transparent 10px);
}
.pls-card-middle-one {
width: 33.3%;
height: 100%;
// background-color: yellow;
.middle-title {
width: 100%;
height: 2vh;
// background-color: #007CFF;
color: #888888;
text-align: center;
font-size: 25rpx;
}
.middle-heng-father {
width: 100%;
height: 4vh;
position: relative;
.middle-ball-img {
width: 35rpx;
height: 35rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-ball {
width: 30rpx;
height: 30rpx;
background-color: #EEEEEE;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
}
.end-font {
width: 100%;
height: 6vh;
text-align: center;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.pls-card-end {
width: 100%;
height: 7vh;
margin-top: 0.5vw;
display: flex;
justify-content: space-between;
position: relative;
.end-left {
height: 100%;
display: flex;
align-items: center;
.end-left-img {
width: 30rpx;
height: 30rpx;
}
.end-left-font {
margin-top: 3rpx;
width: 400rpx;
// background-color: #007CFF;
// font-size: 26rpx;
color: #666666;
margin-left: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.tag-fail {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FDEBEC;
color: #FF5757;
position: absolute;
right: -5rpx;
bottom: 20rpx;
}
.tag-success {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #ECF6FF;
color: #1083F8;
position: absolute;
right: -5rpx;
bottom: 20rpx;
}
}
}
}
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
</style>