408 lines
8.9 KiB
Vue
408 lines
8.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="crkcard guodu" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
|
||
<view class="titletop">
|
||
出入库
|
||
</view>
|
||
<view class="select">
|
||
<view>
|
||
<text>总计:{{wlobjs.crkzl}}笔</text>
|
||
<text>出库：{{wlobjs.cksl}}</text>
|
||
<text>入库：{{wlobjs.rksl}}</text>
|
||
</view>
|
||
<view>
|
||
<view @click="crflag = !crflag">
|
||
{{crkarr[cr].name}}
|
||
<image src="/static/index/hulilist/xia.png" class="guodu" :style="crflag?'transform: rotate(180deg);':''" mode="aspectFill"></image>
|
||
<view class="mengban" v-if="crflag" @click.stop="crflag = false"></view>
|
||
<view class="tanchu guodu" :style="crflag?'height:15vw ':'height:0vw;'" >
|
||
<view class="gysscrol" v-if="crflag">
|
||
<view v-for="(v,i) in crkarr" :key='i' :class="cr==i?'acts':''" @click.stop="gysid(v,i)">
|
||
<text>{{v.name}}</text>
|
||
<image src="/static/index/procurement/d.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="tive()">
|
||
{{actv?'日期从近到远':'日期从远到近'}}
|
||
<image src="/static/index/hulilist/xia.png" class="guodu" :style="!actv?'transform: rotate(180deg);':''" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="crkscroll" scroll-with-animation @scrolltolower="scrolltolower()">
|
||
<view class="cgrk" v-for="(v,i) in list" :key='i'>
|
||
<view>
|
||
<text>{{v.crkType_dictText}}-{{v.crkStatus_dictText}}</text>
|
||
<text>{{v.content}}</text>
|
||
<text>{{v.createTime}}</text>
|
||
</view>
|
||
<view>
|
||
<text :class="v.crkStatus!=1?'c':'l'">{{v.crkStatus==1?'+':'-'}}{{v.crkNum}}</text>
|
||
<text>库存：{{v.dqkcl}}</text>
|
||
<text> </text>
|
||
</view>
|
||
</view>
|
||
<defaults cont="暂无内容" v-if="list.length == 0 && status == 'nomore'"></defaults>
|
||
<view style="height:2vw;width: 100%;display: flex;align-items: center;justify-content: center;">
|
||
<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="list.length>3" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick ,defineComponent,watch} from 'vue';
|
||
import { queryCrkInfoNumList ,queryCrkInfoList } from '../api/lunpan.js'
|
||
import defaults from './default.vue';
|
||
const props = defineProps({
|
||
wl:{
|
||
type:Object
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default:false,
|
||
required: true,
|
||
},
|
||
})
|
||
const actv = ref(true);
|
||
const tive = ()=>{
|
||
actv.value = !actv.value;
|
||
pageNo.value = 1;
|
||
list.value = [];
|
||
InfoList()
|
||
}
|
||
const showbox = ref(false)
|
||
watch(()=>props.show,
|
||
()=>{
|
||
if(props.show==true){
|
||
InfoNum();
|
||
InfoList();
|
||
setTimeout(()=>{
|
||
showbox.value = true;
|
||
},10)
|
||
}else{
|
||
pageNo.value = 1;
|
||
setTimeout(() => {
|
||
showbox.value = false;
|
||
list.value = [];
|
||
crflag.value = false;
|
||
}, 400)
|
||
}
|
||
})
|
||
const crkarr = ref([
|
||
{name:'全部',value:''},
|
||
{name:'入库',value:'1'},
|
||
{name:'出库',value:'3'}
|
||
])
|
||
|
||
const gysid = (v,i) =>{
|
||
cr.value = i;
|
||
crflag.value = false;
|
||
pageNo.value = 1;
|
||
list.value = [];
|
||
InfoList();
|
||
}
|
||
const crflag = ref(false);
|
||
const pageNo = ref(1);
|
||
const cr = ref(0);
|
||
|
||
const list = ref([])
|
||
const InfoList = () =>{
|
||
let obj = {
|
||
crkStatus:crkarr.value[cr.value].value,
|
||
wlId:props.wl.wlId,
|
||
nuId:props.wl.nuId,
|
||
colomnDesc:actv.value?'desc':'asc',//asc正序，desc倒叙
|
||
pageNo:pageNo.value,
|
||
pageSize:10
|
||
}
|
||
queryCrkInfoList(obj).then(res=>{
|
||
console.log(res.result.records)
|
||
list.value.push(...res.result.records);
|
||
status.value = (res.result.total == list.value.length ? 'nomore' : 'loadmore')
|
||
})
|
||
}
|
||
const status = ref('loadmore')
|
||
const scrolltolower = () =>{
|
||
if (status.value == 'loading' || status.value == 'nomore') { return }
|
||
status.value = 'loading';
|
||
pageNo.value++;
|
||
InfoList()
|
||
}
|
||
const wlobjs = ref({})
|
||
const InfoNum = () =>{
|
||
queryCrkInfoNumList({wlId:props.wl.wlId,nuId:props.wl.nuId}).then(res=>{
|
||
wlobjs.value = res.result;
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
// 出入库
|
||
.unclass {
|
||
opacity: 0 !important;
|
||
}
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.uncrkcard {
|
||
top: -86vw !important;
|
||
}
|
||
|
||
.crkcard {
|
||
width: 36vw;
|
||
height: 85vh;
|
||
background: rgba(255, 255, 255, 1);
|
||
box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
|
||
border-radius: 1.6vw;
|
||
position: fixed;
|
||
right: 32vw;
|
||
top: 7vw;
|
||
padding: 1.7vw;
|
||
z-index: 112;
|
||
.titletop{
|
||
width: 100%;
|
||
height: 3.5vw;
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #333333;
|
||
line-height: 2.5vw;
|
||
}
|
||
|
||
.crkscroll {
|
||
width: 100%;
|
||
height: calc(85vh - 15vw);
|
||
margin-top: 1vw;
|
||
.cgrk {
|
||
width: 100%;
|
||
height: 11vw;
|
||
background: rgba(236, 237, 239, 0.4);
|
||
border-radius: 1.6vw;
|
||
margin: 0.8vw auto 0;
|
||
padding: 1.8vw 1.6vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
>view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
&:nth-child(1) {
|
||
text {
|
||
|
||
&:nth-child(2),
|
||
&:nth-child(3) {
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #888888;
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
font-weight: bold;
|
||
font-size: 1.5vw;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
.c {
|
||
color: #FF6600 !important;
|
||
}
|
||
|
||
.l {
|
||
color: #0076D6 !important;
|
||
}
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #888888;
|
||
text-align: right;
|
||
|
||
&:nth-child(2) {
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.select {
|
||
width: 100%;
|
||
height: 7vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 1vw 0 0 1.5vw;
|
||
|
||
>view {
|
||
display: flex;
|
||
margin-left: 1.5vw;
|
||
&:nth-child(1) {
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 1.5vw;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
justify-content: flex-end;
|
||
|
||
>view {
|
||
min-width: 5vw;
|
||
height: 2.6vw;
|
||
border-radius: 1.3vw;
|
||
border: 1px solid #DCDCDC;
|
||
align-items: center;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0 0.5vw;
|
||
position: relative;
|
||
padding: 0 1vw;
|
||
>.tanchu{
|
||
width: 10vw;
|
||
max-height: 23vh;
|
||
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: -2vw;
|
||
top: 3vw;
|
||
z-index: 211;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.gysscrol{
|
||
width: 100%;
|
||
height: 100%;
|
||
.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;
|
||
height: 7vh;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
image {
|
||
width: 0.7vw;
|
||
height: 0.5vw;
|
||
margin-left: 0.4vw;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.act{
|
||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.mengban{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 210;
|
||
}
|
||
.shopcont {
|
||
width: 100%;
|
||
height: 10vw;
|
||
background: rgba(236, 237, 239, 0.3);
|
||
border-bottom: 1px solid #DCDCDC;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.cont {
|
||
width: 26vw;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
position: relative;
|
||
padding: 2vw 0;
|
||
|
||
view {
|
||
&:nth-child(4) {
|
||
width: 5vw;
|
||
height: 5vw;
|
||
background: rgba(236, 237, 239, 1);
|
||
border-radius: 1.4vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 1vw;
|
||
position: absolute;
|
||
color: #888888;
|
||
top: 2.5vw;
|
||
right: 1.8vw;
|
||
padding: 0.5vw 0;
|
||
|
||
text {
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
&:nth-child(2),
|
||
&:nth-child(3) {
|
||
font-weight: 400;
|
||
font-size: 1.1vw;
|
||
color: #888888;
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
font-weight: bold;
|
||
font-size: 1.4vw;
|
||
color: #212327;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 10vw;
|
||
height: 9vw;
|
||
}
|
||
}
|
||
}
|
||
</style>
|