353 lines
7.5 KiB
Vue
353 lines
7.5 KiB
Vue
<template>
|
|
<view class="common-nav-container">
|
|
<!-- 原生搜索框 -->
|
|
<view class="search-container">
|
|
<view class="search-input-wrapper">
|
|
<uni-icons type="search" size="24" color="#999"></uni-icons>
|
|
<input type="text" placeholder="标签/零件号/批次号/库位号" class="search-input" :value="formData.query"
|
|
@input="queryChange" @confirm="getList()" />
|
|
<uni-icons v-if="formData.query" type="clear" size="24" color="#999" @click="clearInput"
|
|
class="clear-icon"></uni-icons>
|
|
</view>
|
|
<button class="search-button" :disabled="loading" @click="getList()">搜索</button>
|
|
</view>
|
|
|
|
<!-- 原生列表 -->
|
|
<scroll-view class="list-container" scroll-y height="580px" @scrolltolower="scrolltolower">
|
|
<view v-for="(item, index) in dataList" :key="index" class="list-item">
|
|
<view class="cell" @click="handlercClickItem(item)">
|
|
<view class="cell-content">
|
|
<view class="cell-title">批次号:{{ item.shortPackageCode }}</view>
|
|
<view class="cell-label">零件号:{{ item.partnumber }}</view>
|
|
</view>
|
|
<view class="cell-value">
|
|
<text>箱数:{{ item.packageNumber }}</text>
|
|
<text class="value-line">零件数:{{ item.partnumberNumber }}</text>
|
|
<uni-icons type="arrow-right" size="24" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 原生加载更多 -->
|
|
<view class="load-more" v-if="loadingStatus !== 'nomore'" @click="getList(true)">
|
|
<text v-if="loadingStatus === 'loading'" class="loading-text">加载中...</text>
|
|
<text v-else class="loadmore-text">点击加载更多</text>
|
|
</view>
|
|
<view class="load-more" v-else>
|
|
<text class="nomore-text">没有更多数据了</text>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- <view v-for="(item, index) in dataList" :key="index">
|
|
<view class="card" @click="searchItem(item.packageCodeClient_son)">
|
|
<u-row>
|
|
<u-col span="9">
|
|
<view class="bigtitle">批次号{{ item.packageCodeClient_son }}</view>
|
|
</u-col>
|
|
<u-col span="3" style="float: right">
|
|
<view style="float: right; width: 29px"><u-icon name="arrow-right-double" color="#2979ff"
|
|
size="58"></u-icon></view>
|
|
</u-col>
|
|
</u-row>
|
|
<view>
|
|
<div class="container">
|
|
<div class="column">
|
|
<view class="text">零件号:</view>
|
|
<view>
|
|
<text class="num">{{ item.partnumber }}</text>
|
|
</view>
|
|
</div>
|
|
<div class="column">
|
|
<view class="text">箱数:</view>
|
|
<view>
|
|
<text class="num">{{ item.pack_num }}</text>
|
|
</view>
|
|
</div>
|
|
<div class="column">
|
|
<view class="text">总数量:</view>
|
|
<view>
|
|
<text class="num">{{ item.goodsNumLogic }}</text>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as watchGoodsApi from '@/api/watchGoods/watchGoods.js';
|
|
import * as WarehoseApi from '@/api/warehouse/warehose.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
throttleTimer: null,
|
|
formData: {
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
query: ''
|
|
},
|
|
PackageCodeClient: '',
|
|
dataList: [],
|
|
total: 0
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getList();
|
|
},
|
|
computed: {
|
|
loadingStatus() {
|
|
let page = this.formData.pageNum;
|
|
let size = this.formData.pageSize;
|
|
let total = this.total;
|
|
if (this.loading) {
|
|
return 'loading';
|
|
}
|
|
if (page * size >= total) {
|
|
return 'nomore';
|
|
} else {
|
|
return 'loadmore';
|
|
}
|
|
}
|
|
},
|
|
// mounted() {
|
|
// console.log('屏幕宽度', uni.getWindowInfo().screenWidth)
|
|
// console.log('可用高度', uni.getWindowInfo().windowHeight)
|
|
// },
|
|
methods: {
|
|
// 清空输入框
|
|
clearInput() {
|
|
this.formData.query = '';
|
|
},
|
|
// 搜索
|
|
getList(isMore = false) {
|
|
this.loading = true;
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
}, 5000);
|
|
if (isMore) {
|
|
this.formData.pageNum += 1;
|
|
} else {
|
|
this.formData.pageNum = 1;
|
|
}
|
|
const query = this.formData;
|
|
// 替换uni.$u.throttle为简单的防抖
|
|
clearTimeout(this.throttleTimer);
|
|
this.throttleTimer = setTimeout(() => {
|
|
watchGoodsApi.GetGoodsNowProduction_List(query).then((res) => {
|
|
if (res.code === 200) {
|
|
if (isMore) {
|
|
this.dataList.push(...res.data.list);
|
|
} else {
|
|
this.dataList = res.data.list;
|
|
}
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
}
|
|
});
|
|
}, 500);
|
|
},
|
|
scrolltolower() {
|
|
let page = this.formData.pageNum;
|
|
let size = this.formData.pageSize;
|
|
let total = this.total;
|
|
if (page * size < total) {
|
|
this.getList(true);
|
|
}
|
|
},
|
|
handlercClickItem(item) {
|
|
let _url = '/pages/watchGoods/goodsdetail/goodsdetail';
|
|
_url += `?shortpatchcode=${item.shortPackageCode}&locationCode=${item.locationCode}`
|
|
uni.navigateTo({
|
|
url: _url
|
|
});
|
|
},
|
|
// 扫标签码时，自动进行翻译
|
|
async queryChange(event) {
|
|
const _value = event.target.value;
|
|
if (_value === null || _value === '') {
|
|
return;
|
|
}
|
|
if (_value.length < 40) {
|
|
this.formData.query = _value;
|
|
return;
|
|
}
|
|
let package_code = _value;
|
|
let resolutionData = {
|
|
code: package_code
|
|
};
|
|
const emitRes = await WarehoseApi.resolutionPackage(resolutionData);
|
|
if (emitRes.code !== 200 || emitRes.data === null) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '该箱号数据解析异常！',
|
|
showCancel: false,
|
|
confirmText: '确定'
|
|
});
|
|
return;
|
|
}
|
|
setTimeout(() => {
|
|
this.formData.query = emitRes.data.patchCode;
|
|
this.getList();
|
|
}, 100);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.common-nav-container {
|
|
padding: 16rpx;
|
|
background-color: #f4f4f5;
|
|
}
|
|
|
|
/* 搜索框样式 */
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
background-color: #fff;
|
|
padding: 12rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.search-input-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f4f4f5;
|
|
border-radius: 8rpx;
|
|
padding: 0 20rpx;
|
|
margin-right: 16rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
height: 80rpx;
|
|
padding-left: 12rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
|
|
.clear-icon {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-button {
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
background-color: #2979ff;
|
|
color: #fff;
|
|
border-radius: 8rpx;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
/* 列表样式 */
|
|
.list-container {
|
|
background-color: #fff;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-item {
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.cell-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.cell-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.cell-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.cell-value {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.cell-value text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.value-line {
|
|
display: block;
|
|
}
|
|
|
|
/* 加载更多样式 */
|
|
.load-more {
|
|
text-align: center;
|
|
padding: 32rpx;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.loading-text {
|
|
color: #2979ff;
|
|
}
|
|
|
|
.nomore-text {
|
|
color: #ccc;
|
|
}
|
|
|
|
/* 以下是原有样式，暂时保留 */
|
|
.card {
|
|
background-color: white;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 10px;
|
|
}
|
|
|
|
.column {
|
|
padding: 20px;
|
|
}
|
|
|
|
.num {
|
|
font-weight: 100rpx;
|
|
font-size: 1.5rem;
|
|
color: #19be6b;
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bigtitle {
|
|
color: #2979ff;
|
|
font-size: 50rpx;
|
|
font-weight: 50;
|
|
}
|
|
</style>
|