295 lines
6.3 KiB
Vue
295 lines
6.3 KiB
Vue
<template>
|
||
<view class="all-bgc">
|
||
<view class="topcard">
|
||
<!-- <text>盘点单号：101P20251012001</text> -->
|
||
</view>
|
||
<view class="tablist">
|
||
<view class="lefts">
|
||
<view class="pddl">盘点单</view>
|
||
<view class="pdh">{{pddobj.pddNo}}</view>
|
||
<view class="nms">{{pddobj.pddStartBy}} | {{pddobj.pddStartTime.substring(0,10)}}</view>
|
||
<view class="shypk">
|
||
{{pddobj.nuName}}
|
||
</view>
|
||
</view>
|
||
<view class="rith">
|
||
<view class="left-selecttype">
|
||
<view :class="selectType===index?`selecttype-target`: `selecttype`"
|
||
v-for="(item,index) in ['全部','盘盈','盘亏','已盘点','未盘点']" @click="changetype(index)">
|
||
{{ item }}
|
||
</view>
|
||
<view class="heng-blue" :style="{ left: `${selectType === 0 ? 11.5 : 10.6 + selectType * 19}%` }">
|
||
</view>
|
||
</view>
|
||
<view class="pdbt">{{pddobj.pddType_dictText}}</view>
|
||
<!-- <view class="pdbt">{{已完成}}</view> -->
|
||
</view>
|
||
|
||
</view>
|
||
<view class="list">
|
||
<toryitem :pddlist="pddlist" @scrolltolower="scrolltolower" :status="status"></toryitem>
|
||
</view>
|
||
<view class="submit">
|
||
<view>取消盘点</view>
|
||
<view>提交盘点单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
||
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
|
||
import { queryPddInfoList } from './api/lunpan.js'
|
||
import toryitem from './common/toryitem.vue'
|
||
const leftscrolltop = ref(0)
|
||
const pddobj = ref({})
|
||
// "pddType": "1" 可以操作
|
||
const selectType = ref(0)
|
||
const changetype = (index : number) => {
|
||
if ((selectType.value == index) && index) {
|
||
return
|
||
}
|
||
leftscrolltop.value = 1
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 50)
|
||
selectType.value = index
|
||
}
|
||
onLoad((e)=>{
|
||
console.log(JSON.parse(e.pddobj))
|
||
pddobj.value = JSON.parse(e.pddobj)
|
||
pandian()
|
||
})
|
||
const pageNo = ref(1);
|
||
const status = ref('loadmore');
|
||
const pddlist = ref([]);
|
||
const pandian = ()=>{
|
||
let obj = {
|
||
pddId:pddobj.value.id,
|
||
paramType:selectType.value==0?'':selectType.value,
|
||
pageNo:pageNo.value,
|
||
pageSize:10
|
||
}
|
||
queryPddInfoList(obj).then(res=>{
|
||
console.log(res)
|
||
pddlist.value.push(...res.result.records);
|
||
status.value = (res.result.total == pddlist.value.length ? 'nomore' : 'loadmore')
|
||
})
|
||
}
|
||
const scrolltolower = () =>{
|
||
if(status.value == 'loading' || status.value == 'nomore'){return}
|
||
status.value = 'loading'
|
||
pageNo.value++;
|
||
pandian()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.pdbt{
|
||
width: 7.1vw;
|
||
height: 3.2vw;
|
||
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
||
border-radius: 1.6vw;
|
||
border: 1px solid rgba(3,133,250,0.34);
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #1083F8;
|
||
margin-left: 0.7vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.submit{
|
||
width: 100%;
|
||
height: 3.2vw;
|
||
margin-top: 0.4vw;
|
||
padding-right: 2vw;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
view{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&:nth-child(1){
|
||
width: 8.7vw;
|
||
height: 3.2vw;
|
||
background: #F8F8F8;
|
||
border-radius: 1.6vw;
|
||
border: 1px solid #E5E5E5;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
}
|
||
&:nth-child(2){
|
||
width: 10.2vw;
|
||
height: 3.2vw;
|
||
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
||
border-radius: 1.6vw;
|
||
border: 1px solid rgba(3,133,250,0.34);
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #1083F8;
|
||
margin-left: 0.7vw;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
width: 100vw;
|
||
height: 50vw;
|
||
margin: 0.8vw auto 0;
|
||
padding:0 0 0 2vw;
|
||
overflow: hidden;
|
||
}
|
||
.tablist{
|
||
width: 100vw;
|
||
height: 3.3vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding:0 2vw;
|
||
margin-top: -3.3vw;
|
||
.rith{
|
||
.left-selecttype {
|
||
width: 30vw;
|
||
height: 70rpx;
|
||
border-radius: 40rpx;
|
||
// background-color: #FFFFFF;
|
||
display: flex;
|
||
padding-right: 30rpx;
|
||
padding-left: 15rpx;
|
||
position: relative;
|
||
|
||
|
||
.heng-blue {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 25rpx;
|
||
height: 8rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #1083F8;
|
||
transition: 0.3s all ease;
|
||
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.lefts{
|
||
height: 100%;
|
||
align-items: center;
|
||
.shypk{
|
||
width: 7.5vw;
|
||
height: 2.3vw;
|
||
background: #DFEFFF;
|
||
border-radius: 0.5vw;
|
||
border: 1px solid #C7D2E4;
|
||
font-weight: 400;
|
||
font-size: 1.2vw;
|
||
color: #1083F8;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 0.9vw;
|
||
}
|
||
.nms{
|
||
font-weight: 400;
|
||
font-size: 1.3vw;
|
||
color: #222222;
|
||
margin-left: 1.3vw;
|
||
|
||
}
|
||
.pdh{
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #222222;
|
||
margin-left: 0.7vw;
|
||
}
|
||
.pddl{
|
||
width: 5.7vw;
|
||
height: 2.2vw;
|
||
background: #DADADA;
|
||
border-radius: 0.5vw;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
>view{
|
||
width: 50%;
|
||
display: flex;
|
||
&:nth-child(2){
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
.topcard{
|
||
width: 100vw;
|
||
height: 3.3vw;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding:0 2vw;
|
||
text{
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #222222;
|
||
}
|
||
view{
|
||
width: 7.3vw;
|
||
height: 3.3vw;
|
||
background: #FFFFFF;
|
||
position: absolute;
|
||
right: 2vw;
|
||
top: 0;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #222;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 0 0 0.7vw;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0 0.2vw 0 0;
|
||
}
|
||
}
|
||
}
|
||
.all-bgc {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgb(239, 240, 244);
|
||
padding-top: 4.5vh;
|
||
}
|
||
</style> |