This commit is contained in:
Agent
41
src/api/stock.js
Normal file
41
src/api/stock.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import api from './index'
|
||||
|
||||
/**
|
||||
* 库存相关API
|
||||
*/
|
||||
export default {
|
||||
/**
|
||||
* 获取库存列表
|
||||
*/
|
||||
getStockList(params) {
|
||||
return api.request('/stock', 'GET', params)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取单商品库存
|
||||
*/
|
||||
getStock(productId) {
|
||||
return api.request(`/stock/${productId}`, 'GET')
|
||||
},
|
||||
|
||||
/**
|
||||
* 入库
|
||||
*/
|
||||
stockIn(data) {
|
||||
return api.request('/stock/in', 'POST', null, data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 库存调整
|
||||
*/
|
||||
adjustStock(data) {
|
||||
return api.request('/stock/adjust', 'POST', null, data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取库存流水
|
||||
*/
|
||||
getStockFlow(params) {
|
||||
return api.request('/stock/flow', 'GET', params)
|
||||
}
|
||||
}
|
||||
@@ -35,6 +35,24 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/stock/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "库存管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/stock/in",
|
||||
"style": {
|
||||
"navigationBarTitleText": "入库"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/stock/flow",
|
||||
"style": {
|
||||
"navigationBarTitleText": "库存流水"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
@@ -57,6 +75,10 @@
|
||||
"pagePath": "pages/product/list",
|
||||
"text": "商品"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/stock/list",
|
||||
"text": "库存"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/order/list",
|
||||
"text": "订单"
|
||||
|
||||
252
src/pages/stock/flow.vue
Normal file
252
src/pages/stock/flow.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view class="stock-flow">
|
||||
<!-- 筛选 -->
|
||||
<view class="filter-bar">
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="typeOptions"
|
||||
range-key="label"
|
||||
@change="onTypeChange"
|
||||
>
|
||||
<view class="filter-picker">
|
||||
{{ selectedTypeLabel }}
|
||||
</view>
|
||||
</picker>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="productList"
|
||||
range-key="name"
|
||||
@change="onProductChange"
|
||||
>
|
||||
<view class="filter-picker">
|
||||
{{ selectedProduct ? selectedProduct.name : '全部商品' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 流水列表 -->
|
||||
<scroll-view scroll-y class="flow-scroll">
|
||||
<view
|
||||
v-for="item in flowList"
|
||||
:key="item.flowId"
|
||||
class="flow-item"
|
||||
>
|
||||
<view class="flow-left">
|
||||
<text class="flow-type" :class="item.type === 1 ? 'in' : 'out'">
|
||||
{{ item.type === 1 ? '入库' : item.type === 2 ? '出库' : '调整' }}
|
||||
</text>
|
||||
<text class="flow-product">{{ item.productName || '商品' + item.productId }}</text>
|
||||
<text class="flow-time">{{ formatTime(item.createdAt) }}</text>
|
||||
</view>
|
||||
<view class="flow-right">
|
||||
<text class="flow-quantity" :class="item.type === 1 ? 'in' : 'out'">
|
||||
{{ item.type === 1 ? '+' : '-' }}{{ item.quantity }}
|
||||
</text>
|
||||
<text class="flow-remark" v-if="item.remark">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="flowList.length === 0" class="empty">
|
||||
<text>暂无流水记录</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import stockApi from '@/api/stock'
|
||||
import productApi from '@/api/product'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
typeOptions: [
|
||||
{ label: '全部类型', value: null },
|
||||
{ label: '入库', value: 1 },
|
||||
{ label: '出库', value: 2 },
|
||||
{ label: '调整', value: 3 }
|
||||
],
|
||||
selectedType: null,
|
||||
selectedTypeLabel: '全部类型',
|
||||
productList: [],
|
||||
selectedProduct: null,
|
||||
flowList: [],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getProducts()
|
||||
this.getFlowList()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1
|
||||
Promise.all([this.getProducts(), this.getFlowList()]).then(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.loading) {
|
||||
this.page++
|
||||
this.getFlowList(true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getProducts() {
|
||||
try {
|
||||
const res = await productApi.getProducts({ page: 1, pageSize: 100 })
|
||||
if (res.code === 0) {
|
||||
this.productList = [{ productId: '', name: '全部商品' }, ...(res.data.records || [])]
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载商品失败', e)
|
||||
}
|
||||
},
|
||||
async getFlowList(append = false) {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
page: this.page,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
if (this.selectedType) {
|
||||
params.type = this.selectedType
|
||||
}
|
||||
if (this.selectedProduct && this.selectedProduct.productId) {
|
||||
params.productId = this.selectedProduct.productId
|
||||
}
|
||||
|
||||
const res = await stockApi.getStockFlow(params)
|
||||
if (res.code === 0) {
|
||||
this.flowList = append ? [...this.flowList, ...res.data.records] : res.data.records
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
onTypeChange(e) {
|
||||
const item = this.typeOptions[e.detail.value]
|
||||
this.selectedType = item.value
|
||||
this.selectedTypeLabel = item.label
|
||||
this.page = 1
|
||||
this.getFlowList()
|
||||
},
|
||||
onProductChange(e) {
|
||||
this.selectedProduct = this.productList[e.detail.value]
|
||||
this.page = 1
|
||||
this.getFlowList()
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return ''
|
||||
const date = new Date(time)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stock-flow {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.filter-picker {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
margin: 0 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.flow-scroll {
|
||||
height: calc(100vh - 180rpx);
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.flow-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flow-type {
|
||||
display: inline-block;
|
||||
padding: 4rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.flow-type.in {
|
||||
background: #e6f7e6;
|
||||
color: #3cc51f;
|
||||
}
|
||||
|
||||
.flow-type.out {
|
||||
background: #fff0e6;
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.flow-product {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.flow-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.flow-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flow-quantity {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flow-quantity.in {
|
||||
color: #3cc51f;
|
||||
}
|
||||
|
||||
.flow-quantity.out {
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.flow-remark {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 100rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
162
src/pages/stock/in.vue
Normal file
162
src/pages/stock/in.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="stock-in">
|
||||
<view class="form">
|
||||
<view class="form-item">
|
||||
<text class="label">商品</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="productList"
|
||||
range-key="name"
|
||||
@change="onProductChange"
|
||||
>
|
||||
<view class="picker">
|
||||
{{ selectedProduct ? selectedProduct.name : '请选择商品' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">入库数量</text>
|
||||
<input
|
||||
class="input"
|
||||
v-model="quantity"
|
||||
type="number"
|
||||
placeholder="请输入数量"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">备注</text>
|
||||
<input
|
||||
class="input"
|
||||
v-model="remark"
|
||||
placeholder="可选填写"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area">
|
||||
<button class="submit-btn" @click="submit" :disabled="submitting">
|
||||
{{ submitting ? '提交中...' : '确认入库' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import stockApi from '@/api/stock'
|
||||
import productApi from '@/api/product'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
productList: [],
|
||||
selectedProduct: null,
|
||||
quantity: '',
|
||||
remark: '',
|
||||
submitting: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getProducts()
|
||||
},
|
||||
methods: {
|
||||
async getProducts() {
|
||||
try {
|
||||
const res = await productApi.getProducts({ page: 1, pageSize: 100 })
|
||||
if (res.code === 0) {
|
||||
this.productList = res.data.records || []
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载商品失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
onProductChange(e) {
|
||||
this.selectedProduct = this.productList[e.detail.value]
|
||||
},
|
||||
async submit() {
|
||||
if (!this.selectedProduct) {
|
||||
uni.showToast({ title: '请选择商品', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!this.quantity || this.quantity <= 0) {
|
||||
uni.showToast({ title: '请输入有效数量', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
this.submitting = true
|
||||
try {
|
||||
const res = await stockApi.stockIn({
|
||||
productId: this.selectedProduct.productId,
|
||||
quantity: parseInt(this.quantity),
|
||||
remark: this.remark
|
||||
})
|
||||
if (res.code === 0) {
|
||||
uni.showToast({ title: '入库成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({ title: res.message || '入库失败', icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '入库失败', icon: 'none' })
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stock-in {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.form {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 160rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.picker, .input {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #3cc51f;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
background: #ccc;
|
||||
}
|
||||
</style>
|
||||
229
src/pages/stock/list.vue
Normal file
229
src/pages/stock/list.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="stock-list">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
placeholder="搜索商品名称"
|
||||
@confirm="search"
|
||||
/>
|
||||
<button class="search-btn" @click="search">搜索</button>
|
||||
</view>
|
||||
|
||||
<!-- 库存列表 -->
|
||||
<scroll-view scroll-y class="stock-scroll">
|
||||
<view
|
||||
v-for="item in stockList"
|
||||
:key="item.stockId"
|
||||
class="stock-item"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<view class="stock-info">
|
||||
<text class="product-name">{{ item.productName || '商品' + item.productId }}</text>
|
||||
<text class="warehouse">仓库: {{ item.warehouseId || '默认' }}</text>
|
||||
</view>
|
||||
<view class="stock-num">
|
||||
<text class="quantity">{{ item.quantity || 0 }}</text>
|
||||
<text class="label">库存</text>
|
||||
<text class="locked" v-if="item.lockedQuantity > 0">锁定: {{ item.lockedQuantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="stockList.length === 0" class="empty">
|
||||
<text>暂无库存数据</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<view class="bottom-action">
|
||||
<button class="action-btn primary" @click="goToIn">入库</button>
|
||||
<button class="action-btn" @click="goToFlow">流水</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import stockApi from '@/api/stock'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
stockList: [],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getStockList()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1
|
||||
this.getStockList().then(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.loading) {
|
||||
this.page++
|
||||
this.getStockList(true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getStockList(append = false) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await stockApi.getStockList({
|
||||
keyword: this.keyword,
|
||||
page: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (res.code === 0) {
|
||||
this.stockList = append ? [...this.stockList, ...res.data.records] : res.data.records
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
search() {
|
||||
this.page = 1
|
||||
this.getStockList()
|
||||
},
|
||||
goToDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/stock/detail?productId=${item.productId}`
|
||||
})
|
||||
},
|
||||
goToIn() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/stock/in'
|
||||
})
|
||||
},
|
||||
goToFlow() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/stock/flow'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stock-list {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin-left: 20rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
background: #3cc51f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stock-scroll {
|
||||
height: calc(100vh - 280rpx);
|
||||
}
|
||||
|
||||
.stock-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.stock-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.warehouse {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stock-num {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #3cc51f;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.locked {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #ff9900;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 100rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
margin: 0 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: #3cc51f;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user