init
This commit is contained in:
quantulr
7
miniprogram/pages/stock/stock.json
Normal file
7
miniprogram/pages/stock/stock.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-fab": "tdesign-miniprogram/fab/fab",
|
||||
"statistics-card": "/components/statistics-card"
|
||||
},
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
92
miniprogram/pages/stock/stock.scss
Normal file
92
miniprogram/pages/stock/stock.scss
Normal file
@ -0,0 +1,92 @@
|
||||
/* pages/stock/stock.wxss */
|
||||
.t-fab {
|
||||
z-index: 99;
|
||||
}
|
||||
page{
|
||||
padding-top: 32rpx;
|
||||
}
|
||||
.stock-tabs {
|
||||
margin: 16rpx 32rpx 0;
|
||||
}
|
||||
.stock-list {
|
||||
padding: 16rpx 0 32rpx;
|
||||
.scroll-container {
|
||||
// height: calc(100vh - 96rpx - 64rpx - 64rpx);
|
||||
.grid {
|
||||
margin: 0 32rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 32rpx;
|
||||
.card {
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
|
||||
0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
// position: relative;
|
||||
min-height: 300rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 18rpx;
|
||||
padding: 18rpx;
|
||||
.prove-pic {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
right: -24rpx;
|
||||
}
|
||||
.fields {
|
||||
margin-top: 12rpx;
|
||||
.field {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
.indicator {
|
||||
margin-top: 12rpx;
|
||||
height: 24rpx;
|
||||
width: 8rpx;
|
||||
background-color: #ea7e41;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-size: large;
|
||||
}
|
||||
.value {
|
||||
margin-top: 6rpx;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
.indicator {
|
||||
background-color: #ea7e41;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
.indicator {
|
||||
background-color: #12b3a8;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
.indicator {
|
||||
background-color: #dc7d85;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
.indicator {
|
||||
background-color: #e0d2fd;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
.indicator {
|
||||
background-color: #dc7d85;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
339
miniprogram/pages/stock/stock.ts
Normal file
339
miniprogram/pages/stock/stock.ts
Normal file
@ -0,0 +1,339 @@
|
||||
import { stockLogList, stockStatistics, storageList } from "../../api/stock";
|
||||
import httpClient from "../../utils/request";
|
||||
|
||||
// pages/stock/stock.ts
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
authToken: undefined,
|
||||
stockType: 0, // 库存类型
|
||||
// 统计数据
|
||||
statisticsData: {
|
||||
total: {
|
||||
label: "产品总数",
|
||||
value: 0,
|
||||
},
|
||||
in: {
|
||||
label: "当月入库",
|
||||
value: 0,
|
||||
},
|
||||
out: {
|
||||
label: "当月出库",
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
inStockQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
outStockQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
storageQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
storageList: [], // 库存列表
|
||||
inStockList: [], // 入库列表
|
||||
outStockList: [], // 出库列表
|
||||
storageLoading: false,
|
||||
inStockLoading: false,
|
||||
outStockLoading: false,
|
||||
storageCompleted: false,
|
||||
inStockCompleted: false,
|
||||
outStockCompleted: false,
|
||||
},
|
||||
onTabsChange(e: any) {
|
||||
const { value: stockType } = e.detail;
|
||||
this.setData({
|
||||
stockType,
|
||||
});
|
||||
if (stockType > 0) {
|
||||
if (
|
||||
(stockType == 1 && this.data.inStockList.length == 0) ||
|
||||
(stockType == 2 && this.data.outStockList.length == 0)
|
||||
) {
|
||||
this.getStockIOList();
|
||||
}
|
||||
} else {
|
||||
if (this.data.storageList.length === 0) {
|
||||
this.getStorageList();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async loadData() {
|
||||
const authToken = getApp().globalData.authToken;
|
||||
this.setData({
|
||||
authToken,
|
||||
});
|
||||
if (!authToken) return;
|
||||
const { stockType } = this.data;
|
||||
if (stockType == 0) {
|
||||
await this.getStorageList();
|
||||
} else {
|
||||
await this.getStockIOList();
|
||||
}
|
||||
await this.loadStatisticData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载出入库日志列表
|
||||
*/
|
||||
async getStockIOList() {
|
||||
const { inStockQuery, outStockQuery, stockType } = this.data;
|
||||
let query;
|
||||
if (stockType == 1) {
|
||||
this.setData({
|
||||
inStockLoading: true,
|
||||
});
|
||||
query = inStockQuery;
|
||||
} else if (stockType == 2) {
|
||||
this.setData({
|
||||
outStockLoading: true,
|
||||
});
|
||||
query = outStockQuery;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const resp: any = await stockLogList({
|
||||
type: stockType,
|
||||
pageNum: query.pageNum,
|
||||
pageSize: query.pageSize,
|
||||
});
|
||||
let completed = false;
|
||||
if (stockType == 1) {
|
||||
if (
|
||||
Math.ceil(resp.total / inStockQuery.pageSize) == inStockQuery.pageNum
|
||||
) {
|
||||
completed = true;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
inStockCompleted: completed,
|
||||
// @ts-ignore
|
||||
inStockList: [
|
||||
...this.data.inStockList,
|
||||
...resp.rows.map((el: any) => ({
|
||||
...el,
|
||||
provePic:
|
||||
el.provePic?.split(",").map((img: string) => {
|
||||
if (img.startsWith("http://") || img.startsWith("https://")) {
|
||||
return img;
|
||||
} else {
|
||||
return `${httpClient.baseUrl}${img}`;
|
||||
}
|
||||
}) ?? [],
|
||||
})),
|
||||
],
|
||||
});
|
||||
if (!completed) {
|
||||
this.setData({
|
||||
["inStockQuery.pageNum"]: inStockQuery.pageNum + 1,
|
||||
});
|
||||
}
|
||||
} else if (stockType == 2) {
|
||||
if (
|
||||
Math.ceil(resp.total / outStockQuery.pageSize) ==
|
||||
outStockQuery.pageNum
|
||||
) {
|
||||
completed = true;
|
||||
}
|
||||
this.setData({
|
||||
outStockCompleted: completed,
|
||||
// @ts-ignore
|
||||
outStockList: [
|
||||
...this.data.outStockList,
|
||||
...resp.rows.map((el: any) => ({
|
||||
...el,
|
||||
provePic:
|
||||
el.provePic?.split(",").map((img: string) => {
|
||||
if (img.startsWith("http://") || img.startsWith("https://")) {
|
||||
return img;
|
||||
} else {
|
||||
return `${httpClient.baseUrl}${img}`;
|
||||
}
|
||||
}) ?? [],
|
||||
})),
|
||||
],
|
||||
});
|
||||
if (!completed) {
|
||||
this.setData({
|
||||
["outStockQuery.pageNum"]: outStockQuery.pageNum + 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
if (this.data.stockType == 1) {
|
||||
this.setData({
|
||||
inStockLoading: false,
|
||||
});
|
||||
} else if (this.data.stockType == 2) {
|
||||
this.setData({
|
||||
outStockLoading: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取库存列表
|
||||
*/
|
||||
async getStorageList() {
|
||||
this.setData({
|
||||
storageLoading: false,
|
||||
});
|
||||
const { storageQuery } = this.data;
|
||||
try {
|
||||
const resp: any = await storageList(storageQuery);
|
||||
|
||||
let completed = false;
|
||||
if (
|
||||
Math.ceil(resp.total / storageQuery.pageSize) == storageQuery.pageNum
|
||||
) {
|
||||
completed = true;
|
||||
}
|
||||
this.setData({
|
||||
// @ts-ignore
|
||||
storageList: [...this.data.storageList, ...resp.rows],
|
||||
storageCompleted: completed,
|
||||
});
|
||||
if (!completed) {
|
||||
this.setData({
|
||||
[`storageQuery.pageNum`]: storageQuery.pageNum + 1,
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
this.setData({
|
||||
storageLoading: false,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取统计数据列表
|
||||
*/
|
||||
async loadStatisticData() {
|
||||
const resp: any = await stockStatistics();
|
||||
this.setData({
|
||||
["statisticsData.in.value"]: resp.data.in,
|
||||
["statisticsData.out.value"]: resp.data.out,
|
||||
["statisticsData.total.value"]: resp.data.total,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 触底时，加载更多库存列表
|
||||
*/
|
||||
loadMoreStorage() {
|
||||
console.log("库存到底了");
|
||||
const { storageLoading, storageCompleted } = this.data;
|
||||
if (storageLoading || storageCompleted) {
|
||||
return;
|
||||
}
|
||||
this.getStorageList();
|
||||
},
|
||||
/**
|
||||
* 触底时，加载更多入库列表
|
||||
*/
|
||||
loadMoreInStock() {
|
||||
const { inStockLoading, inStockCompleted } = this.data;
|
||||
console.log(inStockLoading, inStockCompleted);
|
||||
|
||||
if (inStockLoading || inStockCompleted) {
|
||||
return;
|
||||
}
|
||||
this.getStockIOList();
|
||||
},
|
||||
/**
|
||||
* 触底时，加载更多出库列表
|
||||
*/
|
||||
loadMoreOutStock() {
|
||||
const { outStockLoading, outStockCompleted } = this.data;
|
||||
if (outStockLoading || outStockCompleted) {
|
||||
return;
|
||||
}
|
||||
this.getStockIOList();
|
||||
},
|
||||
handleAddStock() {
|
||||
const { stockType } = this.data;
|
||||
wx.navigateTo({
|
||||
url: `/pages/add-stock/add-stock?type=${stockType}`,
|
||||
});
|
||||
},
|
||||
handleUpdateStock() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
/**
|
||||
* 刷新此页面
|
||||
*/
|
||||
async handleRefresh() {
|
||||
this.setData({
|
||||
["inStockQuery.pageNum"]: 1,
|
||||
["outStockQuery.pageNum"]: 1,
|
||||
["storageQuery.pageNum"]: 1,
|
||||
storageLoading: false,
|
||||
inStockLoading: false,
|
||||
outStockLoading: false,
|
||||
storageCompleted: false,
|
||||
inStockCompleted: false,
|
||||
outStockCompleted: false,
|
||||
inStockList: [],
|
||||
outStockList: [],
|
||||
storageList: [],
|
||||
});
|
||||
await this.loadData();
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
this.handleRefresh();
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
const { stockType } = this.data;
|
||||
if (stockType == 0) {
|
||||
this.loadMoreStorage();
|
||||
} else if (stockType == 1) {
|
||||
this.loadMoreInStock();
|
||||
} else if (stockType == 2) {
|
||||
this.loadMoreOutStock();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
});
|
||||
140
miniprogram/pages/stock/stock.wxml
Normal file
140
miniprogram/pages/stock/stock.wxml
Normal file
@ -0,0 +1,140 @@
|
||||
<!--pages/stock/stock.wxml-->
|
||||
<!-- 产品库存管理 -->
|
||||
<wxs module="times" src="../../utils/time.wxs" />
|
||||
<statistics-card statistics-data="{{statisticsData}}" />
|
||||
<t-tabs class="stock-tabs" defaultValue="{{0}}" value="{{stockType}}" bind:change="onTabsChange" theme="tag">
|
||||
<t-tab-panel label="库存" value="{{0}}" />
|
||||
<t-tab-panel label="入库" value="{{1}}" />
|
||||
<t-tab-panel label="出库" value="{{2}}" />
|
||||
</t-tabs>
|
||||
<view class="stock-list">
|
||||
<t-fab wx:if="{{stockType > 0}}" class="float-button" icon="add" aria-label="增加" bind:click="handleAddStock"></t-fab>
|
||||
<view hidden="{{stockType!=0}}" class="scroll-container">
|
||||
<view class="grid">
|
||||
<view wx:for="{{storageList}}" wx:key="specId" class="card">
|
||||
<view class="fields">
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">产品</text>
|
||||
<text class="value">{{item.productName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">型号</text>
|
||||
<text class="value">{{item.modelName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">规格</text>
|
||||
<text class="value">{{item.specName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">库存</text>
|
||||
<text class="value">{{item.stock}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view hidden="{{stockType!=1}}" class="scroll-container">
|
||||
<view class="grid">
|
||||
<view wx:for="{{inStockList}}" wx:key="logId" class="card">
|
||||
<t-image class="prove-pic" mode="aspectFill" error="slot" src="{{item.provePic[0]}}">
|
||||
<t-icon name="image-error" slot="error" />
|
||||
</t-image>
|
||||
<view class="fields">
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">产品</text>
|
||||
<text class="value">{{item.productName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">型号</text>
|
||||
<text class="value">{{item.modelName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">规格</text>
|
||||
<text class="value">{{item.specName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">数量</text>
|
||||
<text class="value">{{item.total}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">日期</text>
|
||||
<text class="value">{{times.formatDate(item.date) || "-"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view hidden="{{stockType!=2}}" class="scroll-container">
|
||||
<view class="grid">
|
||||
<view wx:for="{{outStockList}}" wx:key="logId" class="card">
|
||||
<t-image class="prove-pic" mode="aspectFill" error="slot" src="{{item.provePic[0]}}">
|
||||
<t-icon name="image-error" slot="error" width="100rpx" height="100rpx" />
|
||||
</t-image>
|
||||
<view class="fields">
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">产品</text>
|
||||
<text class="value">{{item.productName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">型号</text>
|
||||
<text class="value">{{item.modelName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">规格</text>
|
||||
<text class="value">{{item.specName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">数量</text>
|
||||
<text class="value">{{item.total}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">日期</text>
|
||||
<text class="value">{{times.formatDate(item.date) || "-"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user