697 lines
16 KiB
Vue
697 lines
16 KiB
Vue
<template>
|
||
<view class="index-content-other" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
||
<view class="right-container-title-nav">
|
||
<text style="margin-left: 30rpx;">
|
||
NUID：{{ uni.getStorageSync('nuId')}}
|
||
</text>
|
||
<text class="new-weight">
|
||
{{ uni.getStorageSync('nuName')}}
|
||
</text>
|
||
<view class="right-icons">
|
||
<image class="right-icons-img" src="/static/index/requestform/touxiang.png" />
|
||
<view>{{name}}</view>
|
||
<image class="right-icons-img-back" src="/static/index/requestform/back.png" />
|
||
<view>返回</view>
|
||
</view>
|
||
</view>
|
||
<view class="buttons-father">
|
||
<view class="ipt">
|
||
<input type="text" placeholder="物料名称/物料简拼" />
|
||
</view>
|
||
<view class="scr">
|
||
检索
|
||
</view>
|
||
<view class="shx">
|
||
<image src="/static/index/requestform/shaixuan.png" mode="aspectFill"></image>
|
||
<view class="shx-font">
|
||
筛选
|
||
</view>
|
||
|
||
</view>
|
||
<view class="shx">
|
||
<image src="/static/index/requestform/chongzhi.png" mode="aspectFill"></image>
|
||
<view class="shx-font">
|
||
重置
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="other-contain">
|
||
<view class="other-contain-left">
|
||
<view class="left-selecttype">
|
||
<view :class="selectType===index?`selecttype-target`: `selecttype`"
|
||
v-for="(item,index) in tagsarray" @click="changetype(index)">
|
||
{{ item }}
|
||
<view class="heng-blue" v-if="selectType===index"></view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
|
||
@scrolltolower="plsbuytolower" :lower-threshold="400">
|
||
<view style="height: 1%;"></view>
|
||
<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)" :style="{
|
||
borderColor: i === lefttarget ? '' : 'transparent',
|
||
background: i === lefttarget ? '#fff' : 'rgba(255,255,255,0.6)'
|
||
}">
|
||
<view style="background: #ff5757;position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: -0.5vw;top: -0.2vw;" v-if="v.izNew=='Y'">
|
||
</view>
|
||
<view class="pls-card-title">
|
||
<view class="middle-title">
|
||
请领单号
|
||
</view>
|
||
<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>
|
||
|
||
</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">
|
||
{{ v.jhTime?.slice(0,10) }}
|
||
</view>
|
||
<view class="middle-heng-father">
|
||
|
||
<view class="middle-ball" style="background-color: #1083F8;"
|
||
:style=" v?.cgdType=='9' ?{backgroundColor:`#FF5757`}:{}"
|
||
v-if="Number(v.status)<1"></view>
|
||
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
|
||
</view>
|
||
<view class="end-font">
|
||
|
||
<view :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
|
||
{{ v?.cgdType=='9' ?`已作废`:`拣货` }}
|
||
|
||
</view>
|
||
<view style="font-size: 25rpx;" v-if="Number(v.status)>0 && v.jhBy ">
|
||
{{ "[ " + v.jhBy + " ]" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card-middle-one">
|
||
<view class="middle-title">
|
||
{{ Number(v.status)>=2 ? v.wjTime?.slice(0,10) :""}}
|
||
</view>
|
||
|
||
<view class="middle-heng-father">
|
||
|
||
<!-- <view class="middle-ball" :style="{backgroundColor: `#1083F8`}"></view> -->
|
||
<view class="middle-ball"
|
||
:style="{backgroundColor: Number(v.status)==1? ``:`#E5E5E5`}"
|
||
v-if="Number(v.status)!=2"></view>
|
||
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
|
||
</view>
|
||
<view class="end-font">
|
||
<view>
|
||
完结
|
||
</view>
|
||
<view style="font-size: 25rpx;" v-if=" v.wjBy">
|
||
{{ "[ " + v.wjBy + " ]" }}
|
||
</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.gysId_dictText }}
|
||
</view>
|
||
</view>
|
||
<view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">
|
||
|
||
{{ v?.cgdType=='9' ?`已作废`:tagesstatues[Number(v.status)] }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="other-contain-right">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch, reactive } from 'vue';
|
||
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
|
||
import { queryCgdList } from '@/pages/Warehouse/api/lunpan.js'
|
||
|
||
const transition = ref(false);
|
||
const tagsarray = ref(["全部", "待出库", "已出库", "已收货 ", "已作废"])
|
||
|
||
const props = defineProps({
|
||
isShow: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
watch(
|
||
() => props.isShow,
|
||
(newVal, oldVal) => {
|
||
// 当旧值为false，新值为true时延迟0.2秒调用方法
|
||
if (!oldVal && newVal) {
|
||
transition.value = false;
|
||
setTimeout(() => {
|
||
transition.value = true;
|
||
}, 50)
|
||
} else {
|
||
transition.value = false;
|
||
}
|
||
|
||
}
|
||
)
|
||
const name = ref("");
|
||
onMounted(() => {
|
||
name.value = uni.getStorageSync('realname')
|
||
})
|
||
const lanjie = ref(false);
|
||
|
||
const selectType = ref(0)
|
||
const changetype = (index : number) => {
|
||
selectType.value = index
|
||
}
|
||
const tagesstatues = ["待入库", "待完结", '已完结'];
|
||
const plsbuy = ref([])
|
||
const alltotal = ref(0);
|
||
const lefttarget = ref(0)
|
||
const plzinfo = reactive({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
canpull: true,
|
||
cgdParamInfo: "",
|
||
suppliers: "",
|
||
// cgdType: "0,1",
|
||
startTime: "",
|
||
endTime: "",
|
||
cgBy: "",
|
||
// nuId: uni.getStorageSync('nuId')
|
||
})
|
||
const mobanplzinfo = {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
canpull: true,
|
||
cgdParamInfo: "",
|
||
suppliers: "",
|
||
// cgdType: "0,1",
|
||
startTime: "",
|
||
endTime: "",
|
||
cgBy: "",
|
||
// nuId: uni.getStorageSync('nuId')
|
||
}
|
||
const nomessageshow = ref(false);
|
||
const leftscrolltop = ref(0)
|
||
const firstgetqueryCgdList = () => {
|
||
queryCgdList(plzinfo).then((res : any) => {
|
||
console.log("加载", res.result.records)
|
||
plsbuy.value.push(...res.result.records)
|
||
alltotal.value = res.result.total
|
||
if (!res.result.total) {
|
||
// console.log("没数据了!!!")
|
||
nomessageshow.value = true;
|
||
}
|
||
// console.log("请购单数据呢???", res)
|
||
// if (res.result.records.length) {
|
||
// form.cgdId = plsbuy.value[0].id
|
||
// queryInvo(0);
|
||
// }
|
||
|
||
if (res.result.records.length < plzinfo.pageSize) {
|
||
plzinfo.canpull = false;
|
||
}
|
||
|
||
})
|
||
}
|
||
const setout = ref(true)
|
||
let times = null
|
||
const plsbuytolower = () => {
|
||
if (!setout.value) { return }
|
||
plzinfo.pageNo++;
|
||
getqueryCgdList()
|
||
setout.value = false
|
||
times = setTimeout(() => {
|
||
setout.value = true
|
||
}, 500)
|
||
}
|
||
//获得采购单列表
|
||
const getqueryCgdList = () => {
|
||
if (!plzinfo.canpull) return
|
||
queryCgdList(plzinfo).then((res : any) => {
|
||
plsbuy.value.push(...res.result.records)
|
||
alltotal.value = res.result.total
|
||
if (res.result.records.length < plzinfo.pageSize) {
|
||
plzinfo.canpull = false;
|
||
}
|
||
})
|
||
}
|
||
const clickLeftMenu = (index : any, item : any) => {
|
||
let num = Math.ceil((index + 1))
|
||
leftscrolltop.value = (num - 2) * 180;
|
||
lefttarget.value = index;
|
||
// form.cgdId = plsbuy.value[index].id
|
||
// form.pageNo = 1
|
||
// form.canpull = true;
|
||
// // console.log("!!!!",form)
|
||
// queryCgdInfoList(form).then(res => {
|
||
// InvoicingList.value = []
|
||
// // console.log("数据呢", res.result.records)
|
||
// InvoicingList.value.push(...res.result.records);
|
||
// if (form.pageNo) {
|
||
// clickmiddle(0);
|
||
// }
|
||
// })
|
||
// if (item.izNew == 'Y') {
|
||
// item.izNew = 'N'
|
||
// editIzNew({ id: item.id })
|
||
// }
|
||
|
||
}
|
||
onLoad(() => {
|
||
firstgetqueryCgdList();
|
||
// serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
|
||
// getSelectList();
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.index-content-other {
|
||
width: calc(100% - 260rpx);
|
||
// background-color: red;
|
||
height: 100%;
|
||
transition: opacity 1s ease;
|
||
position: relative;
|
||
|
||
|
||
}
|
||
|
||
.right-container-title-nav {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
|
||
.new-weight {
|
||
margin-left: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.right-icons {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.right-icons-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.right-icons-img-back {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-left: 60rpx;
|
||
margin-right: 3rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-tem {
|
||
display: flex;
|
||
|
||
.right-container-tem-text {
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
|
||
.right-container-tem-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
|
||
.buttons-father {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
// background-color: red;
|
||
display: flex;
|
||
|
||
.ipt {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 18vw;
|
||
background: #E2E4E9;
|
||
border-radius: 1.65vw;
|
||
height: 3.3vw;
|
||
|
||
image {
|
||
width: 2.2vw;
|
||
height: 2.2vw;
|
||
margin: 0 0.5vw;
|
||
}
|
||
|
||
input {
|
||
width: 18vw;
|
||
height: 3.5vw;
|
||
font-size: 1.4vw;
|
||
padding-left: 1.6vw;
|
||
|
||
}
|
||
}
|
||
|
||
.scr {
|
||
border-radius: 1.65vw;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 6.5vw;
|
||
height: 3.3vw;
|
||
margin: 0 0 0 0.7vw;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border: 1px solid #D9DADC;
|
||
color: #555555;
|
||
box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
|
||
}
|
||
|
||
.shx {
|
||
width: 6.5vw;
|
||
height: 3.3vw;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 1.65vw;
|
||
border: 1rpx solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.2vw;
|
||
color: #222;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
|
||
margin: 0 0 0 0.5vw;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.8vw;
|
||
height: 1.8vw;
|
||
margin: 0 0.2vw 0 0;
|
||
}
|
||
|
||
.shx-font {
|
||
margin-top: 3rpx;
|
||
// margin-left: -5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-contain {
|
||
width: 100%;
|
||
height: 1050rpx;
|
||
display: flex;
|
||
|
||
.other-contain-left {
|
||
width: 35%;
|
||
height: 100%;
|
||
|
||
.left-menu-scroll {
|
||
margin-top: 3%;
|
||
height: 94%;
|
||
width: 100%;
|
||
// position: relative;
|
||
// overflow: auto;
|
||
|
||
// background-color: red;
|
||
.pls-card {
|
||
width: 98%;
|
||
height: 25.3vh;
|
||
border: #0f9fff 3rpx solid;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
margin-bottom: 2vh;
|
||
// margin: 1vh 0;
|
||
padding: 0 30rpx;
|
||
position: relative;
|
||
|
||
.pls-card-title {
|
||
height: 5.5vh;
|
||
width: 105%;
|
||
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;
|
||
margin-right: 35rpx;
|
||
color: #555555;
|
||
}
|
||
|
||
.title-right-img {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
bottom: 6rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pls-card-middle {
|
||
width: 100%;
|
||
height: 11vh;
|
||
margin-top: 1vh;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.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;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.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: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #1083F8;
|
||
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;
|
||
|
||
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;
|
||
border: 1rpx solid #1083F8;
|
||
position: absolute;
|
||
right: -5rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-selecttype {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
padding-right: 30rpx;
|
||
padding-left: 15rpx;
|
||
|
||
.heng-blue {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 25rpx;
|
||
height: 8rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #1083F8;
|
||
|
||
}
|
||
|
||
.selecttype {
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #999999;
|
||
font-size: 31rpx;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.selecttype-target {
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #222222;
|
||
font-size: 31rpx;
|
||
font-weight: 600;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-contain-right {
|
||
width: 65%;
|
||
height: 100%;
|
||
// background-color: red;
|
||
}
|
||
}
|
||
</style> |