You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
529 lines
12 KiB
Vue
529 lines
12 KiB
Vue
<template>
|
|
<view class="main-box">
|
|
<u-navbar
|
|
:placeholder="true"
|
|
title="库存管理"
|
|
:leftIcon="null"
|
|
bgColor="#000000">
|
|
<view
|
|
class="u-nav-slot"
|
|
slot="right"
|
|
@click="goMine">
|
|
<image
|
|
class="mine"
|
|
src="../../static/mine.png"></image>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="search-box">
|
|
<image
|
|
class="search"
|
|
src="../../static/search.png"></image>
|
|
<u--input
|
|
placeholder="在此处搜索"
|
|
border="none"
|
|
class="search-input"
|
|
clearable
|
|
v-model="title"></u--input>
|
|
<u-button
|
|
class="search-btn"
|
|
text="搜索"
|
|
@click="goSearch"></u-button>
|
|
</view>
|
|
<view class="content-top">
|
|
<view style="color: #9fafff; font-size: 24rpx">全部</view>
|
|
<view
|
|
@click="showPicker"
|
|
style="color: #4f598b; font-size: 16rpx"
|
|
>{{ sortByName }}</view
|
|
>
|
|
</view>
|
|
<u-picker
|
|
:show="pcikerShow"
|
|
@confirm="pickerConfirm"
|
|
@cancel="pickerCancel"
|
|
:columns="columns"></u-picker>
|
|
<view
|
|
class="management-list"
|
|
style="margin-bottom: 20rpx">
|
|
<scroll-view
|
|
style="width: 100%; height: calc(100vh - 500rpx)"
|
|
scroll-y="true"
|
|
@scrolltolower="handleScroll">
|
|
<view
|
|
class="item"
|
|
v-for="(item, index) in managementList"
|
|
@click="goDetail(item)"
|
|
:key="index">
|
|
<view>
|
|
<image
|
|
class="left-img"
|
|
:src="item.image"></image>
|
|
</view>
|
|
<view class="item-content">
|
|
<u-row
|
|
justify="space-between"
|
|
gutter="5">
|
|
<u-col
|
|
span="3"
|
|
class="title-item">
|
|
<view>商品名称</view>
|
|
</u-col>
|
|
<u-col
|
|
span="3"
|
|
class="title-item">
|
|
<view>库存数量</view>
|
|
</u-col>
|
|
<u-col
|
|
span="3"
|
|
class="title-item">
|
|
<view>入库时间</view>
|
|
</u-col>
|
|
<u-col
|
|
span="3"
|
|
class="title-item">
|
|
<view>更新日期</view>
|
|
</u-col>
|
|
</u-row>
|
|
<u-line></u-line>
|
|
<u-row
|
|
justify="space-between"
|
|
gutter="5">
|
|
<u-col
|
|
span="3"
|
|
class="title-item no-border">
|
|
<view>{{ item.title }}</view>
|
|
</u-col>
|
|
<u-col
|
|
span="3"
|
|
class="title-item no-border">
|
|
<view>{{ item.stockSize }}</view>
|
|
</u-col>
|
|
<u-col
|
|
span="3"
|
|
class="title-item no-border">
|
|
<view>{{ item.createdAt }}</view>
|
|
</u-col>
|
|
<u-col
|
|
span="3"
|
|
class="title-item no-border">
|
|
<view>{{ item.updatedAt }}</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<u-line></u-line>
|
|
<view class="bottom-btn-box">
|
|
<u-button
|
|
class="bottom-btn"
|
|
text="入库"
|
|
@click="goIn"></u-button>
|
|
<u-button
|
|
class="bottom-btn"
|
|
style="background-color: #fff; color: #1936c9"
|
|
text="出库"
|
|
@click="goOut"></u-button>
|
|
</view>
|
|
<u-modal
|
|
:show="showCreate"
|
|
:title="'未检测出该条码信息'"
|
|
:closeOnClickOverlay="true"
|
|
@close="showCreate = false"
|
|
:showConfirmButton="false">
|
|
<u-button
|
|
class="ok-btn"
|
|
@click="goCreateNew"
|
|
size="small">
|
|
生成新商品</u-button
|
|
>
|
|
</u-modal>
|
|
<u-modal
|
|
:show="showOut"
|
|
:title="'商品出库'"
|
|
:closeOnClickOverlay="true"
|
|
@close="showOut = false"
|
|
:showConfirmButton="false">
|
|
<u--image
|
|
class="goods-img"
|
|
width="250rpx"
|
|
height="250rpx"
|
|
:src="goodsInfo.image"></u--image>
|
|
<u--form
|
|
labelPosition="left"
|
|
:model="goodsInfo"
|
|
labelWidth="115"
|
|
ref="childForm">
|
|
<u-form-item
|
|
label="商品名称"
|
|
prop="goodsInfo.title"
|
|
borderBottom
|
|
ref="title">
|
|
<u--input
|
|
:disabled="true"
|
|
v-model="goodsInfo.title"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="目前库存数量"
|
|
prop="goodsInfo.stockSize"
|
|
borderBottom
|
|
ref="stockSize">
|
|
<u--input
|
|
type="number"
|
|
:disabled="true"
|
|
v-model="goodsInfo.stockSize"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="出库数量"
|
|
prop="goodsInfo.changeStock"
|
|
borderBottom
|
|
ref="changeStock">
|
|
<u--input
|
|
type="number"
|
|
v-model="goodsInfo.changeStock"></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
<u-button
|
|
class="ok-btn"
|
|
@click="goOutNum"
|
|
size="small">
|
|
确认出库</u-button
|
|
>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "",
|
|
page: 1,
|
|
PageSize: 10,
|
|
total: 0,
|
|
managementList: [],
|
|
showCreate: false,
|
|
barcode: "",
|
|
showOut: false,
|
|
goodsInfo: {
|
|
title: "",
|
|
stockSize: "",
|
|
changeStock: "",
|
|
image: "",
|
|
},
|
|
columns: [["按库存更新排序", "入库时间倒序", "库存倒序"]],
|
|
pcikerShow: false,
|
|
sortByName: "按库存更新排序",
|
|
sortBy: "stockChangeDesc",
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getManagementList();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.managementList = [];
|
|
this.page = 1;
|
|
this.getManagementList();
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
methods: {
|
|
handleScroll() {
|
|
if (this.total > this.managementList.length) {
|
|
this.page++;
|
|
this.getManagementList();
|
|
}
|
|
},
|
|
// 搜索
|
|
goSearch() {
|
|
this.managementList = [];
|
|
this.page = 1;
|
|
this.getManagementList();
|
|
},
|
|
async getManagementList() {
|
|
await this.$api.management
|
|
.manageList({
|
|
title: this.title,
|
|
sortBy: this.sortBy,
|
|
page: this.page,
|
|
PageSize: this.PageSize,
|
|
})
|
|
.then((res) => {
|
|
this.total = res.data.count;
|
|
this.managementList = this.managementList.concat(res.data.data || []);
|
|
});
|
|
},
|
|
// 去我的
|
|
goMine() {
|
|
uni.navigateTo({
|
|
url: "/pages/mine/mine",
|
|
});
|
|
},
|
|
// 去入库
|
|
goIn() {
|
|
// 调用扫码
|
|
uni.scanCode({
|
|
success: async (code) => {
|
|
this.barcode = code.result;
|
|
let res = await this.$api.management.manageCode({
|
|
barcode: code.result,
|
|
});
|
|
if (res.status == 0) {
|
|
console.log(res);
|
|
if (!res.data.exist) {
|
|
this.showCreate = true;
|
|
} else {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/goodDetail/goodDetail?actionType=detail&barcode=" +
|
|
code.result +
|
|
"&goodsInfo=" +
|
|
JSON.stringify(res.data.product),
|
|
});
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// 去出库
|
|
goOut() {
|
|
// 调用扫码
|
|
uni.scanCode({
|
|
success: async (code) => {
|
|
this.barcode = code.result;
|
|
let res = await this.$api.management.manageCode({
|
|
barcode: code.result,
|
|
});
|
|
if (res.status == 0) {
|
|
console.log(res);
|
|
if (!res.data.exist) {
|
|
this.showCreate = true;
|
|
} else {
|
|
this.goodsInfo = res.data.product;
|
|
this.showOut = true;
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
showPicker() {
|
|
this.pcikerShow = true;
|
|
},
|
|
pickerConfirm(e) {
|
|
console.log(e);
|
|
this.sortByName = e.value[0];
|
|
this.sortBy = e.indexs[0] == 0 ? "stockChangeDesc" :e.indexs[0] == 1 ? "createdDesc" : "stockSizeDesc";
|
|
this.pcikerShow = false;
|
|
this.managementList = [];
|
|
this.page = 1;
|
|
this.getManagementList();
|
|
},
|
|
pickerCancel(e) {
|
|
this.pcikerShow = false;
|
|
},
|
|
// 生成新商品
|
|
goCreateNew() {
|
|
this.showCreate = false;
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/goodDetail/goodDetail?actionType=add&barcode=" + this.barcode,
|
|
});
|
|
},
|
|
// 去详情
|
|
goDetail(item) {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/goodDetail/goodDetail?actionType=detail&barcode=" +
|
|
item.barcode +
|
|
"&goodsInfo=" +
|
|
JSON.stringify(item),
|
|
});
|
|
},
|
|
async goOutNum() {
|
|
// 不可以小于0
|
|
if (parseInt(this.goodsInfo.changeStock) <= 0) {
|
|
uni.$u.toast("出库数量不可小于0");
|
|
return;
|
|
}
|
|
let data = {
|
|
ID: this.goodsInfo.ID,
|
|
changeStock: 0 - parseInt(this.goodsInfo.changeStock),
|
|
};
|
|
let res = await this.$api.management.addNum(data);
|
|
if (res.status == 0) {
|
|
uni.$u.toast("出库成功");
|
|
this.showOut = false;
|
|
setTimeout(() => {
|
|
this.managementList = [];
|
|
this.page = 1;
|
|
this.getManagementList();
|
|
}, 1000);
|
|
} else {
|
|
uni.$u.toast("出库失败");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #0e1746;
|
|
background-size: auto 100%;
|
|
background-attachment: fixed;
|
|
height: 100vh;
|
|
// overflow: hidden;
|
|
}
|
|
.main-box {
|
|
padding: 36rpx;
|
|
/deep/ .u-navbar__content__title {
|
|
color: #fff;
|
|
}
|
|
.ok-btn {
|
|
width: 240rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
background: #1936c9;
|
|
color: #ffffff;
|
|
margin: 20rpx 20rpx 0 20rpx;
|
|
font-size: 30rpx;
|
|
border: 0;
|
|
}
|
|
/deep/ .u-form {
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
/deep/ .u-input {
|
|
background-color: #dcdee8;
|
|
height: 24rpx;
|
|
}
|
|
/deep/ .u-form-item__body__left__content {
|
|
border-right: 1px solid #ebebeb;
|
|
padding-right: 40rpx;
|
|
}
|
|
/deep/ .u-form-item__body__right {
|
|
padding-left: 30rpx;
|
|
}
|
|
/deep/ .u-form-item__body__left__content__required {
|
|
color: #1936c9;
|
|
}
|
|
|
|
/deep/ .u-modal__title {
|
|
color: #1936c9;
|
|
}
|
|
/deep/ .u-modal__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.mine {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.search-box {
|
|
padding-bottom: 36rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #8b8b8b;
|
|
|
|
.search {
|
|
width: 32rpx;
|
|
height: 52rpx;
|
|
}
|
|
.search-btn {
|
|
width: 120rpx;
|
|
height: 52rpx;
|
|
border-radius: 26rpx;
|
|
background-color: #1936c9;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
/deep/ .uni-input-placeholder,
|
|
/deep/ .input-placeholder {
|
|
font-size: 20rpx;
|
|
color: #acacac !important;
|
|
}
|
|
|
|
/deep/ .u-input__content__field-wrapper__field {
|
|
height: 0 !important;
|
|
}
|
|
|
|
/deep/ .u-input {
|
|
padding: 0 0 0 20rpx !important;
|
|
background: #fff;
|
|
height: 56rpx;
|
|
border-radius: 30rpx;
|
|
width: 200rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
.content-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
height: 130rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 25rpx 10rpx;
|
|
box-sizing: border-box;
|
|
.left-img {
|
|
margin-top: 10rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.item-content {
|
|
padding-left: 20rpx;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
.title-item {
|
|
font-size: 22rpx;
|
|
border-left: 1px solid #e5e5e5;
|
|
view {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.no-border {
|
|
border-left: none;
|
|
max-width: 190rpx;
|
|
view {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom-btn-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 36rpx 10rpx;
|
|
.bottom-btn {
|
|
width: 300rpx;
|
|
height: 60rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #1936c9;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|