OpenDoorManageMini/pages/replenish/inventoryQueryExport1.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="库存查询"></u-navbar>
		<view class="content">
			<!-- <view class="radio-container">
				<u-tabs :list="typeList" @click="tabChange" lineColor="#2C6FF3" :scrollable="true"></u-tabs>
			</view> -->
			<!-- <view class="flex  justify-end radio-container">
				<view class="flex-sub"></view>
				<view class="">
					<xbutton  size="large">查询</xbutton>
				</view>
			</view> -->
			<view class="tab-list flex flex-wrap">
				<block v-for="(item,index) in typeList" :key="item.name">
					<view :class="[type==item.name?'tab-item tab-show':'tab-item']" @click="tabClick(item.name)">
						{{item.name}}
					</view>
				</block>
			</view>
			<view class="title">按<text style="color: #2C6FF3;">{{type}}</text>盘点<text style="color:red;font-size: 24rpx;">(左右滑动查看更多数据)</text></view>

			<view class="table card">
				<uni-table border stripe emptyText="暂无更多数据" v-if="type=='商品'">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">商品名称</uni-th>
						<uni-th align="center">库存数量</uni-th>
						<uni-th align="center">缺货数量</uni-th>
						<uni-th align="center">库存容量</uni-th>
						<uni-th align="center">缺货占比</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in listA" :key="item.goodsId">
						<uni-td>{{item.goodsName}}</uni-td>
						<uni-td align="center">{{item.stockSum}}</uni-td>
						<uni-td align="center">{{item.lackSum}}</uni-td>
						<uni-td align="center">{{item.capacitySum}}</uni-td>
						<uni-td align="center">{{item.percentText}}</uni-td>
					</uni-tr>
				</uni-table>

				<uni-table border stripe emptyText="暂无更多数据" v-if="type=='设备'">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">设备名称</uni-th>
						<uni-th align="center">库存数量</uni-th>
						<uni-th align="center">缺货数量</uni-th>
						<uni-th align="center">库存容量</uni-th>
						<uni-th align="center">缺货占比</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in listB" :key="item.deviceId">
						<uni-td>{{item.deviceName?item.deviceName:item.deviceId}}</uni-td>
						<uni-td align="center">{{item.stockSum}}</uni-td>
						<uni-td align="center">{{item.lackSum}}</uni-td>
						<uni-td align="center">{{item.capacitySum}}</uni-td>
						<uni-td align="center">{{item.percentText}}</uni-td>
					</uni-tr>
				</uni-table>

				<uni-table border stripe emptyText="暂无更多数据" v-if="type=='线路'">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">线路名称</uni-th>
						<uni-th align="left">库存数量</uni-th>
						<uni-th align="left">缺货数量</uni-th>
						<uni-th align="left">库存容量</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in listC" :key="item.placeLineId">
						<uni-td>{{item.placeLineName&&item.placeLineName!=null?item.placeLineName:item.placeLineId}}</uni-td>
						<uni-td>{{item.stockSum}}</uni-td>
						<uni-td>{{item.lackSum}}</uni-td>
						<uni-td>{{item.capacitySum}}</uni-td>
					</uni-tr>
				</uni-table>

				<uni-table border stripe emptyText="暂无更多数据" v-if="type=='设备+商品'">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">设备名称</uni-th>
						<uni-th align="left">商品名称</uni-th>
						<uni-th align="left">库存数量</uni-th>
						<uni-th align="left">缺货数量</uni-th>
						<uni-th align="left">库存容量</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in listD" :key="item.goodsId">
						<uni-td>{{item.deviceName?item.deviceName:item.deviceId}}</uni-td>
						<uni-td>{{item.goodsName}}</uni-td>
						<uni-td>{{item.stockSum}}</uni-td>
						<uni-td>{{item.lackSum}}</uni-td>
						<uni-td>{{item.capacitySum}}</uni-td>
					</uni-tr>
				</uni-table>

				<uni-table border stripe emptyText="暂无更多数据" v-if="type=='线路+商品'">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">线路名称</uni-th>
						<uni-th align="left">商品名称</uni-th>
						<uni-th align="left">库存数量</uni-th>
						<uni-th align="left">缺货数量</uni-th>
						<uni-th align="left">库存容量</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in listE" :key="item.goodsId">
						<uni-td>{{item.placeLineName&&item.placeLineName!=null?item.placeLineName:item.placeLineId}}</uni-td>
						<uni-td>{{item.goodsName}}</uni-td>
						<uni-td>{{item.stockSum}}</uni-td>
						<uni-td>{{item.lackSum}}</uni-td>
						<uni-td>{{item.capacitySum}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		stockByLineAndGoods, //按线路+商品分组 
		stockByDeviceAndGoods, // 按设备+商品分组 
		stockByDevice, //按设备分组
		stockByGoods, // 按商品分组
		stockByLine, //按线路分组
	} from '@/api/replenishment/replenishment.js'
	export default {
		data() {
			return {
				// 基本案列数据
				typeList: [{
						name: '商品'
					},
					{
						name: '设备'
					},
					// {
					// 	name: '线路'
					// }, {
					// 	name: '设备+商品'
					// }, {
					// 	name: '线路+商品'
					// }
				],
				type: '商品',

				listA: [],
				listB: [],
				listC: [],
				listD: [],
				listE: [],
			}
		},

		onShow() {
			this.getData()
		},

		methods: {
			tabClick(name) {
				this.type = name;
				this.getData()
			},

			getData() {
				switch (this.type) {
					case '商品':
						this.getListA()
						break;
					case '设备':
						this.getListB()
						break;
					case '线路':
						this.getListC()
						break;
					case '设备+商品':
						this.getListD()
						break;
					case '线路+商品':
						this.getListE()
						break;
					default:
						break;
				}
			},

			//按商品分组
			getListA() {
				stockByGoods({
					orderBy:'',
					orderByKey:''
				}).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.listA = res.data
						} else {
							this.listA = []
						}
					} else {
						this.listA = []
					}
				})
			},

			//按设备分组 
			getListB() {
				stockByDevice({
					orderBy:'',
					orderByKey:''
				}).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.listB = res.data
						} else {
							this.listB = []
						}
					} else {
						this.listB = []
					}
				})
			},

			//按线路分组
			getListC() {
				stockByLine().then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.listC = res.data
						} else {
							this.listC = []
						}
					} else {
						this.listC = []
					}
				})
			},

			//按设备+商品分组
			getListD() {
				stockByDeviceAndGoods().then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.listD = res.data
						} else {
							this.listD = []
						}
					} else {
						this.listD = []
					}
				})
			},

			//按线路+商品分组
			getListE() {
				stockByLineAndGoods().then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.listE = res.data
							this.isEmpty = false
						} else {
							this.listE = []
							this.isEmpty = false
						}
					} else {
						this.listE = []
						this.isEmpty = true
					}
				})
			},

		}
	}
</script>
<style scoped lang="scss">
	.container {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 24rpx;

		// padding-top: 120rpx;
		.tab-list {
			width: 100%;
			background-color: #fff;
			padding: 12rpx;

			.tab-item {
				padding: 0 64rpx;
				height: 62rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #777777;
				margin-right: 20rpx;
				line-height: 62rpx;
				margin-bottom: 14rpx;

				&.tab-show {
					background: #F4F8FF;
					color: #2C6FF3;
				}
			}
		}

		.title {
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			padding: 12rpx 24rpx 12rpx 36rpx;
			margin-top: 24rpx;
		}

		.card {
			width: 724rpx;
			margin-left: 13rpx;
			margin-top: 28rpx;
			background-color: #fff;
			margin-top: 20rpx;
			box-shadow: 0px 0px 10rpx 0px rgba(174, 201, 255, 0.2);
			border-radius: 14rpx;
		}

		/deep/.uni-table-th {
			font-size: 30rpx;
			color: #555;
		}

		/deep/.uni-table-td {
			color: #555;
		}

		/deep/.uni-table-scroll {
			border: none;
		}

		/deep/.table--border {
			border-right: none;
		}
	}
</style>