yiliangyiyun-app/pages/user/contractLook/inventoryCost.vue

<template>
	<view class="content">
		<view class="cost-list" v-for="(item,index) in costList">
			<view class="title">
				{{item.warehouseName}}
			</view>
			<view class="goods-table">
				<view class="goods-table-title">
					<view class="font">货名</view>
					<view class="font">储量（吨）</view>
					<view class="font">价值（元）</view>
				</view>
				<view class="goods-table-content" v-for="(item1,index1) in item.goodList">
					<view class="font">{{item1.goodsName}}</view>
					<view class="font">{{item1.storage}}</view>
					<view class="font">{{item1.cost}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				costList:[]
			}
		},
		onLoad: function(option) {
			uni.showLoading({
				title: "加载中",
				mask: true
			})
			this.init()
		},
		methods: {
			init() {
				this.$api.doRequest('get', '/costManagementInfo/selectCostManagementInfo', {
				compId: uni.getStorageSync('pcUserInfo').compId,
				warehouseType: 1
				}).then(res => {
					uni.hideLoading()
					const results = this.makeGroupData(res.data.data,function (item) {
					return [item.warehouseName];
					});
					
					console.log(this.costList)
					let _data = []
					for(let i=0;i<results.length;i++){
						let _obj = {}
						_obj.warehouseName = results[i][0].warehouseName
						_obj.goodList = results[i]
						_data.push(_obj)
					}
					console.log(_data)
					this.costList = _data
				})
			},
			makeGroupData(array,fn){
				const groups = {};
				array.forEach(function (item) {
				     const group = JSON.stringify(fn(item));
				     groups[group] = groups[group] || [];
				     groups[group].push(item);
				});
				return Object.keys(groups).map(function (group) {
					
				     return groups[group];
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.cost-list{
	margin: 20rpx;
	background: white;
	border-radius: 20rpx;
	padding: 20rpx;
	.title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.goods-table{
		margin-top: 22rpx;
	}
	.goods-table-title{
			display: flex;
			border-bottom: 1px solid #EEEEEE;
			padding-bottom:16rpx;
			// margin-bottom: ;
		.font{
			
			font-size: 27rpx;
			font-weight: 400;
			color: #B2B3BB;
			
		}
		.font:nth-of-type(1){
			width: 40%;
		}
		.font:nth-of-type(2){
			width: 30%;
		}
		.font:nth-of-type(3){
			width: 30%;
			text-align: right;
		}
	}
	.goods-table-content{
		display: flex;
		margin: 22rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		.font:nth-of-type(1){
			width: 40%;
		}
		.font:nth-of-type(2){
			width: 30%;
		}
		.font:nth-of-type(3){
			width: 30%;
			text-align: right;
		}
		
	}
}
</style>