|
|
<template>
|
|
|
<z-paging ref="paging" v-model="stockItems" @query="queryList">
|
|
|
<template #top>
|
|
|
<view class="search-section">
|
|
|
<view class="search-box">
|
|
|
<input type="text" v-model="queryParams.gdsSeqno" placeholder="搜索商品名称、编码、供应商" />
|
|
|
<view class="search-btn" @click="searchStock">搜索</view>
|
|
|
</view>
|
|
|
<view class="filter-box">
|
|
|
<view class="filter-item" @click="toggleSortMenu">
|
|
|
<text>{{ sortText }}</text>
|
|
|
<text class="iconfont" :class="sortIcon"></text>
|
|
|
</view>
|
|
|
<view class="filter-item">
|
|
|
<view class="date-picker-container">
|
|
|
<view v-if="selectedDate" class="clear-btn" @click.stop="clearDate">
|
|
|
<text class="iconfont icon-cha"></text>
|
|
|
</view>
|
|
|
<view class="date-text" @click="openCalendar">
|
|
|
<text>{{ selectedDate || '入库日期' }}</text>
|
|
|
<text class="iconfont icon-xiangxia"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 排序菜单 -->
|
|
|
<view class="sort-menu" v-if="showSortMenu">
|
|
|
<view class="sort-item" @click="setSort('')">默认排序</view>
|
|
|
<view class="sort-item" @click="setSort('asc')">库存数量升序</view>
|
|
|
<view class="sort-item" @click="setSort('desc')">库存数量降序</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<!-- 库存列表 -->
|
|
|
<view class="stock-section">
|
|
|
<view class="stock-title">库存列表</view>
|
|
|
<view class="stock-list" v-if="stockItems.length > 0">
|
|
|
<view class="stock-item" v-for="(item, index) in stockItems" :key="index">
|
|
|
<view class="item-header">
|
|
|
<text class="item-name">{{ item.cargoName }}</text>
|
|
|
</view>
|
|
|
<view class="item-body">
|
|
|
<view class="info-item">
|
|
|
<text class="label">商品编码：</text>
|
|
|
<text class="value">{{ item.hsCode }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">供应商：</text>
|
|
|
<text class="value">{{ item.custName }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">库存数量：</text>
|
|
|
<text class="value">{{ item.cargoWt }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">入库日期：</text>
|
|
|
<text class="value">{{ formatDate(item.stockDate) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item-footer">
|
|
|
<view class="detail-btn" @click="viewStockDetail(item)">查看详情</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 日历组件 -->
|
|
|
<uni-calendar
|
|
|
ref="calendar"
|
|
|
:insert="false"
|
|
|
:range="false"
|
|
|
:start-date="'2026-01-01'"
|
|
|
:end-date="'2099-12-31'"
|
|
|
@confirm="confirm"
|
|
|
></uni-calendar>
|
|
|
</z-paging>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getStockList } from '@/api/stock';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
sortOrder: '', // 排序顺序：''（默认不排序）、'asc'、'desc'
|
|
|
sortField: 'cargoWt', // 排序字段
|
|
|
sortText: '排序',
|
|
|
sortIcon: 'icon-xiangxia',
|
|
|
showSortMenu: false,
|
|
|
selectedDate: '',
|
|
|
stockItems: [],
|
|
|
queryParams: {
|
|
|
gdsSeqno: null,
|
|
|
stockDateStr: null,
|
|
|
sortField: null,
|
|
|
sortOrder: null
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
// 格式化日期
|
|
|
formatDate(dateStr) {
|
|
|
if (!dateStr) return '';
|
|
|
// 直接取字符串前10位作为日期
|
|
|
return dateStr.toString().substring(0, 10);
|
|
|
},
|
|
|
// 获取库存列表
|
|
|
queryList(pageNo, pageSize) {
|
|
|
// 调用API
|
|
|
getStockList({
|
|
|
...this.queryParams,
|
|
|
pageNum: pageNo,
|
|
|
pageSize: pageSize
|
|
|
}).then((res) => {
|
|
|
// 将请求结果通过complete传给z-paging处理
|
|
|
this.$refs.paging.complete(res.data.list);
|
|
|
}).catch((err) => {
|
|
|
console.error('获取库存列表失败:', err);
|
|
|
// 如果请求失败，调用complete(false)
|
|
|
this.$refs.paging.complete(false);
|
|
|
});
|
|
|
},
|
|
|
// 搜索库存
|
|
|
searchStock() {
|
|
|
// 刷新整个列表
|
|
|
this.$refs.paging.reload();
|
|
|
},
|
|
|
// 切换排序菜单
|
|
|
toggleSortMenu() {
|
|
|
this.showSortMenu = !this.showSortMenu;
|
|
|
if (this.showSortMenu) {
|
|
|
this.showDatePicker = false;
|
|
|
}
|
|
|
},
|
|
|
// 设置排序
|
|
|
setSort(order) {
|
|
|
this.sortOrder = order;
|
|
|
if (order === '') {
|
|
|
this.sortText = '排序';
|
|
|
this.sortIcon = 'icon-xiangxia';
|
|
|
this.queryParams.sortField = null;
|
|
|
this.queryParams.sortOrder = null;
|
|
|
} else {
|
|
|
this.sortText = `库存数量${order === 'asc' ? '升序' : '降序'}`;
|
|
|
this.sortIcon = order === 'asc' ? 'icon-xiangshang' : 'icon-xiangxia';
|
|
|
this.queryParams.sortField = this.sortField;
|
|
|
this.queryParams.sortOrder = order;
|
|
|
}
|
|
|
this.showSortMenu = false;
|
|
|
// 刷新整个列表
|
|
|
this.$refs.paging.reload();
|
|
|
},
|
|
|
// 打开日历
|
|
|
openCalendar() {
|
|
|
this.$refs.calendar.open();
|
|
|
},
|
|
|
// 确认日期
|
|
|
confirm(e) {
|
|
|
this.selectedDate = e.fulldate;
|
|
|
this.queryParams.stockDateStr = e.fulldate;
|
|
|
// 刷新整个列表
|
|
|
this.$refs.paging.reload();
|
|
|
},
|
|
|
// 清空日期
|
|
|
clearDate() {
|
|
|
this.selectedDate = '';
|
|
|
this.queryParams.stockDateStr = null;
|
|
|
// 刷新整个列表
|
|
|
this.$refs.paging.reload();
|
|
|
},
|
|
|
// 查看库存详情
|
|
|
viewStockDetail(item) {
|
|
|
uni.navigateTo({
|
|
|
url: `./detail?id=${item.id}&cargoId=${item.cargoId}&custId=${item.custId}`
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.search-section {
|
|
|
padding: 30rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.search-box {
|
|
|
display: flex;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
input {
|
|
|
flex: 1;
|
|
|
height: 60rpx;
|
|
|
border: 1rpx solid #ddd;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 0 30rpx;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.search-btn {
|
|
|
width: 120rpx;
|
|
|
height: 60rpx;
|
|
|
background-color: #409EFF;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-left: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.filter-box {
|
|
|
display: flex;
|
|
|
|
|
|
.filter-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 10rpx 20rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
margin-right: 20rpx;
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
cursor: pointer;
|
|
|
|
|
|
.date-picker-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.date-text {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
text {
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 20rpx;
|
|
|
color: #666;
|
|
|
transition: transform 0.3s;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.clear-btn {
|
|
|
margin-right: 10rpx;
|
|
|
padding: 5rpx;
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
|
|
|
&:hover {
|
|
|
color: #ff4d4f;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
text {
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 20rpx;
|
|
|
color: #666;
|
|
|
transition: transform 0.3s;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 排序菜单
|
|
|
.sort-menu {
|
|
|
position: absolute;
|
|
|
top: 100%;
|
|
|
left: 30rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
|
|
|
z-index: 100;
|
|
|
margin-top: 10rpx;
|
|
|
width: 200rpx;
|
|
|
|
|
|
.sort-item {
|
|
|
padding: 15rpx 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.stock-section {
|
|
|
padding: 0 30rpx 30rpx;
|
|
|
|
|
|
.stock-title {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.stock-list {
|
|
|
.stock-item {
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.item-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 15rpx;
|
|
|
|
|
|
.item-name {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-body {
|
|
|
margin-bottom: 15rpx;
|
|
|
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
.label {
|
|
|
width: 140rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
flex: 1;
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-footer {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
.detail-btn {
|
|
|
padding: 8rpx 16rpx;
|
|
|
background-color: #409EFF;
|
|
|
color: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
font-size: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
