<template>
|
<view class="check-stock-main-list-component">
|
<view class="top-row">
|
<view class="top-btns">
|
<view class="search-btn" @tap.stop="onQuery"><u-icon name="search" size="30" /></view>
|
<view class="reset-btn" @tap.stop="onReset">重 置</view>
|
</view>
|
</view>
|
<scroll-view class="list-scroll-view" :scroll-y="true" @scrolltolower="onMoreList">
|
<view class="list-items-around">
|
<!-- ########### -->
|
<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
|
<view class="list-item-show" @tap.stop="onWatchDetail(item)">
|
<view class="item-header">
|
<view class="item-index">
|
<uni-badge :text="index+1" type="primary" size="normal" />
|
</view>
|
<view class="item-title-box">
|
<text>{{item.planNo}}</text>
|
</view>
|
<view class="item-tag">
|
<u-tag v-if="item.statusEnum===1" :text="item.statusEnumName" size="mini" bg-color="#808080" color="#ffffff" border-color="#808080" />
|
<u-tag v-else-if="item.statusEnum===2" :text="item.statusEnumName" size="mini" bg-color="#FEF3E6" color="#F18201" border-color="#F18201" />
|
<u-tag v-else-if="item.statusEnum===3" :text="item.statusEnumName" size="mini" bg-color="#EFFCF2" color="#5CDF7D" border-color="#5CDF7D" />
|
<u-tag v-else :text="item.statusEnumName" size="mini" bg-color="#ffc0cb" color="#ff0000" border-color="#ff0000" />
|
</view>
|
</view>
|
<view class="item-container">
|
<view class="item-desc">
|
<view class="label">时间</view>
|
<view class="content auto-wrap">{{item.startPlanTimeFormat}}~{{item.endPlanTimeFormat}}</view>
|
</view>
|
<view class="item-desc">
|
<view class="label">仓库</view>
|
<view class="content auto-wrap">{{item.areaName}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- ########### -->
|
</view>
|
<view class="no-more-text-row" v-if="!hasMore">没有更多了</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import { parseDic } from '@/static/js/utils/index.js'
|
// import dayjs from 'dayjs'
|
const pagination = {
|
PageNo:1,
|
PageSize:10
|
}
|
export default {
|
name:'checkStockMainListComponent',
|
emits:['query','update:resetflag','action'],
|
data(){
|
return {
|
hasMore:true,
|
queried:{},
|
list:[]
|
}
|
},
|
methods:{
|
onQuery(){
|
this.$emit('query')
|
},
|
onReset(){
|
this.resetQuery()
|
},
|
resetQuery(){
|
this.$emit('update:resetflag',new Date().getTime())
|
},
|
newList(params=null,callback){
|
this.queried = {...pagination}
|
if (params) {
|
this.queried = {...this.queried,...params}
|
}
|
this.getList(callback)
|
},
|
onMoreList(){
|
if (this.hasMore) {
|
this.queried.PageNo++;
|
this.getList();
|
}
|
},
|
getList(callback){
|
this.$api.get('page',this.queried,{block:'checkStock'}).then((res)=>{
|
let arr = (res.rows || []).map((obj)=>{
|
obj.statusEnumName = parseDic(this.$store,'task_status',obj.statusEnum)
|
obj.startPlanTimeFormat = obj.startPlanTime?dayjs(obj.startPlanTime).format('YYYY.MM.DD'):''
|
obj.endPlanTimeFormat = obj.endPlanTime?dayjs(obj.endPlanTime).format('YYYY.MM.DD'):''
|
return obj
|
});
|
let len = arr.length;
|
if (this.queried.PageNo>=res.totalPage) {
|
this.hasMore = false
|
} else {
|
this.hasMore = true
|
}
|
if (this.queried.PageNo===1) {
|
this.list = arr;
|
} else {
|
this.list = [...this.list,...arr];
|
}
|
callback && callback(true)
|
}).catch(err=>{
|
console.log(err)
|
callback && callback(false)
|
})
|
},
|
onWatchDetail(obj) {
|
this.$emit('action',obj)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.check-stock-main-list-component{
|
$topSize:90rpx;
|
height: 100%;
|
position: relative;
|
box-sizing: border-box;
|
padding-top: $topSize;
|
.top-row{
|
position: absolute;
|
z-index: 5;
|
top: 0;
|
left: 0;
|
height: $topSize;
|
width: 100%;
|
padding: 10rpx 12rpx;
|
box-sizing: border-box;
|
border-bottom:1px solid #F0F8FF;
|
background-color: $uni-bg-color;
|
}
|
.top-btns{
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
border: 1px solid $uni-border-color;
|
border-radius: 32rpx / 50%;
|
display: flex;
|
overflow: hidden;
|
color: $uni-text-color-grey;
|
}
|
.search-btn,.reset-btn{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
}
|
.reset-btn{
|
flex-shrink: 0;
|
width: 160rpx;
|
border-left: 1px solid $uni-border-color;
|
}
|
.search-btn{
|
flex-grow: 1;
|
background-color: #DCDCDC;
|
}
|
.list-scroll-view{
|
height: 100%;
|
}
|
.list-items-around{
|
padding-top:12rpx;
|
.list-item {
|
margin-bottom: 12rpx;
|
border-width: 2rpx 0;
|
border-style: solid;
|
border-color: $uni-border-color;
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
}
|
.list-item-show {
|
background-color: $uni-bg-color;
|
font-size: 40rpx;
|
.item-header{
|
display: flex;
|
border-bottom:2rpx solid $uni-border-color;
|
padding: 6rpx 0;
|
.item-index,.item-tag{
|
flex-shrink: 0;
|
}
|
.item-index{
|
width: 68rpx;
|
padding-left: 10rpx;
|
padding-top:11rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: flex-start;
|
}
|
.item-tag{
|
display: flex;
|
padding:6rpx 16rpx;
|
}
|
.item-title-box{
|
flex-grow: 1;
|
width: 1px;
|
padding-left: 4rpx;
|
display: flex;
|
align-items: center;
|
}
|
}
|
.item-container{
|
padding: 0 16rpx;
|
display: flex;
|
flex-wrap: wrap;
|
.item-desc{
|
flex-shrink: 0;
|
width: 100%;
|
font-size: .9em;
|
display: flex;
|
align-items: flex-start;
|
padding: 10rpx 0;
|
border-bottom: 2rpx dashed $uni-border-color;
|
&>.label {
|
font-size: .9em;
|
flex-shrink: 0;
|
color:#989898;
|
width: 100rpx;
|
}
|
&>.content{
|
width: 1px;
|
flex-grow: 1;
|
line-height: 1.2em;
|
padding: 0 4rpx;
|
}
|
&:last-child {
|
border-bottom:0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
