You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
8.5 KiB
390 lines
8.5 KiB
<!-- 库存列表页 -->
|
|
<template>
|
|
<view style="display: flex;flex-direction: column;height: 1280rpx;">
|
|
<view class="" style="display: flex;border-top: 1px solid #eee;border-bottom: 1px solid #eee;">
|
|
<view class="title-left">
|
|
<view class="title-left-box">
|
|
<text>100</text>
|
|
<text>库存预警</text>
|
|
</view>
|
|
<view class="title-left-box">
|
|
<text>100</text>
|
|
<text>尾货预警</text>
|
|
</view>
|
|
<view class="title-left-box" style="flex-direction: inherit;">
|
|
<view class="shop-box">
|
|
<view>2</view>
|
|
<view>商品数</view>
|
|
</view>
|
|
<view class="shop-box">
|
|
<view>2</view>
|
|
<view>库存数</view>
|
|
</view>
|
|
</view>
|
|
<view class="title-left-box">
|
|
<text>￥1000000.00</text>
|
|
<text>库存成本</text>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="title-right" @click="onGridClick('0')">
|
|
<view class="title-right-top title-btn">
|
|
分类管理
|
|
</view>
|
|
<view class="title-right-bottom title-btn" @click="onGridClick('1')">
|
|
新增入库
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="search">
|
|
<uni-search-bar class="uni-mt-10" radius="5" placeholder="商品名称/编号" cancelButton="none" @confirm="search" />
|
|
<view class="title-right-bottom title-btn"
|
|
style="width:22%;float: left;height:75rpx;line-height: 75rpx;margin-top:20rpx;"
|
|
@click="onGridClick('2')">
|
|
新增商品
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-left">
|
|
<view class="left-box" v-for="(item, index) in indexList" :key="item"
|
|
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
|
|
<text style="padding: 0 40rpx;" :class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content-right">
|
|
<view class="right-box" v-for="item in shopList" :key="item">
|
|
<view class="box-left">
|
|
<img :src="item.productPicture" alt="">
|
|
</view>
|
|
<view class="box-right">
|
|
<view class="box-right-name">{{item.productName}}</view>
|
|
<view class="box-right-num">{{item.productSn}}</view>
|
|
<view class="box-right-price">
|
|
<view class="price-box">
|
|
<text v-if="item.purchasePrice==null" style="color: red;">未入库</text>
|
|
<text v-else>{{item.purchasePrice}}</text>
|
|
<text>采购价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.wholesalePrice}}</text>
|
|
<text>批发价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.price}}</text>
|
|
<text>零售价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.stockCount}}</text>
|
|
<text>库存</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="list">
|
|
<ul>
|
|
<li v-for="item in list" :key="item.id">
|
|
<image src="../../static/images/logo.png" mode=""></image>
|
|
<view class="content">
|
|
<view class="title">
|
|
{{item.productName}}
|
|
</view>
|
|
<view class="">
|
|
{{item.barcode}}
|
|
</view>
|
|
<view class="flexBox">
|
|
<view class="">
|
|
<view class="">
|
|
{{item.purchasePrice}}
|
|
</view>
|
|
<text> 采购价</text>
|
|
</view>
|
|
<view class="">
|
|
<view class="">
|
|
{{item.wholesalePrice}}
|
|
</view>
|
|
<text> 批发价</text>
|
|
</view>
|
|
<view class="">
|
|
<view class="">
|
|
{{item.price}}
|
|
</view>
|
|
<text> 零售价</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="rightBox">
|
|
× {{item.stockCount}}
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from 'vuex';
|
|
export default {
|
|
computed: mapState(['shopIndex', 'region']),
|
|
data() {
|
|
return {
|
|
size: 30,
|
|
keyword: '',
|
|
indexList: [],
|
|
pageNum: 1, //分页的页码
|
|
shopList: [],
|
|
categoryId: '', //分类id
|
|
shopId: '', //店铺id,
|
|
}
|
|
},
|
|
onShow() {
|
|
console.log('onshow');
|
|
this.getGategoryList()
|
|
},
|
|
methods: {
|
|
//初始化获取分类列表
|
|
getGategoryList() {
|
|
this.tui.request("/app/productCategory/list", "get", {
|
|
// shopId: 1,
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.indexList = res.result;
|
|
for (var i = 0; i < this.indexList.length; i++) {
|
|
if (i == 0) {
|
|
this.indexList[i].parentId = true
|
|
} else {
|
|
this.indexList[i].parentId = false
|
|
}
|
|
}
|
|
this.getShareList(this.indexList[0].id);
|
|
} else{
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
//点击左侧菜单切换
|
|
clickLeftBtn(index) {
|
|
for (var i = 0; i < this.indexList.length; i++) {
|
|
if (i == index) {
|
|
this.indexList[i].parentId = true
|
|
} else {
|
|
this.indexList[i].parentId = false
|
|
}
|
|
}
|
|
this.getShareList(this.indexList[index].id)
|
|
},
|
|
//点击分类获取商品列表
|
|
getShareList(id) {
|
|
this.tui.request("/app/product/getShareList", "POST", {
|
|
categoryId:id,
|
|
supplierName:this.keyword,
|
|
pageNum: this.pageNum,
|
|
pageSize: '10'
|
|
}, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
console.log(res.result.records)
|
|
this.shopList = res.result.records
|
|
} else{
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
//点击头部 分类管理 和 新增入库 按钮
|
|
onGridClick(target) {
|
|
if (target == '0') {
|
|
uni.navigateTo({
|
|
url: '/pages/inventory/gategory'
|
|
})
|
|
} else if (target == '1') {
|
|
uni.navigateTo({
|
|
url: '/pages/inventory/addinventory'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/inventory/addGoods"
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onReachBottom: function() {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search {
|
|
// padding: 20upx;
|
|
background-color: #fff;
|
|
// position: fixed;
|
|
// top: 0;
|
|
// z-index: 100;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.title-left {
|
|
width: 70%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
float: left;
|
|
}
|
|
|
|
.title-right {
|
|
width: 30%;
|
|
/* margin-top: 110rpx; */
|
|
border-left: 1px solid #eee;
|
|
background: #fff;
|
|
}
|
|
|
|
.title-left-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
width: 50%;
|
|
height: 100rpx;
|
|
padding-top: 20rpx;
|
|
|
|
.shop-box {}
|
|
}
|
|
|
|
// 偶数行
|
|
.title-left-box:nth-child(even) {
|
|
border-left: 1px solid #fff;
|
|
background: #fff;
|
|
}
|
|
|
|
//奇数行
|
|
.title-left-box:nth-child(odd) {
|
|
border-right: 1px solid #fff;
|
|
background: #fff;
|
|
}
|
|
|
|
.title-btn {
|
|
width: 70%;
|
|
height: 80rpx;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
margin: 10rpx auto 10rpx;
|
|
|
|
}
|
|
|
|
.shop-box {
|
|
width: 50%;
|
|
}
|
|
|
|
.title-right-top {
|
|
background: linear-gradient(90deg, #FF9797, #FFC1E0);
|
|
}
|
|
|
|
.title-right-bottom {
|
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
|
}
|
|
|
|
.content-box {
|
|
background: #fff;
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.content-left {
|
|
width: 170rpx;
|
|
background: #eee;
|
|
height: 100%;
|
|
}
|
|
|
|
.left-box {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.left-box-hover {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-bottom: 1px solid #fff;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.red {
|
|
border-right: 3px solid red;
|
|
}
|
|
|
|
.content-right {
|
|
width: 550rpx;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.right-box {
|
|
width: 100%;
|
|
height: 190rpx;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
position: relative;
|
|
}
|
|
|
|
.box-left {
|
|
width: 130rpx;
|
|
height: 131rpx;
|
|
background-size: 100%;
|
|
margin: 25rpx 30rpx 35rpx 10rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.box-left img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.box-right {
|
|
margin-top: 17rpx;
|
|
}
|
|
|
|
.box-right-name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.box-right-num {
|
|
padding: 5rpx 0;
|
|
color: #777;
|
|
}
|
|
|
|
.box-right-price {
|
|
display: flex;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.price-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.price-box text:first-child {
|
|
color: #ffa200
|
|
}
|
|
|
|
.uni-mt-10 {
|
|
position: relative;
|
|
width: 74% !important;
|
|
float: left !important;
|
|
}
|
|
|
|
.uni-searchbar,
|
|
.uni-searchbar__box {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|