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

<template>
	<view class="content">
		<view class="cost-list" v-for="(item,index) in costList">
			<view style="display: flex;justify-content: space-between;">
				<view class="title">{{item.warehouseName}}</view>
				<view class="button" @click="toDetail(item.warehouseName)">详细记录</view>
			</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" :class="item.goodList.length>1&&index1==item.goodList.length-1?'active':''">
						{{item1.goodsName}}
					</view>
					<view class="font" :class="item.goodList.length>1&&index1==item.goodList.length-1?'active':''">
						{{item1.storage}}
					</view>
					<view class="font">{{item1.cost}}</view>
				</view>
			</view>
		</view>
		<u-modal class="record" v-model="isShowDetailBtn" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='导出记录'
			showCancelButton='false' @confirm="alertBtn" @cancel="cancelClick">
			<view>
				<u-radio-group v-model="value">
					<u-radio active-color="#22C572" @change="radioChange" v-for="(item, index) in list" :key="index"
						:name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<view class="modal-row">
					<view class="">查询日期</view>
					<view class="" @click="selectDate">
						{{parameter.endDate?parameter.startDate+' - '+parameter.endDate:'请选择查询日期'}}
					</view>
				</view>
				<view class="modal-row">
					<view class="">仓库名称</view>
					<view>{{parameter.warehouseName}}</view>
				</view>

			</view>
		</u-modal>
		<u-calendar v-model="show" :mode="mode" @change="change" range-color='#22C572' btn-type='success'
			range-bg-color='rgba(25, 190, 107, 0.13)' active-bg-color='#22C572'></u-calendar>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import helper from '@/common/helper.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isShowAlert: false,
				content: '当前登录身份已失效，请重新登录！',
				parameter: {
					startDate: "",
					endDate: '',
					warehouseName: ''
				},
				show: false,
				mode: 'range',
				list: [{
						name: '入库记录',
						disabled: false
					},
					{
						name: '出库记录',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '入库记录',
				costList: [],
				isShowDetailBtn: false
			}
		},
		onLoad: function(option) {
			this.init()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			selectDate() {
				this.show = true
			},
			change(e) {
				this.parameter.startDate = e.startDate
				this.parameter.endDate = e.endDate
			},
			radioChange(e) {
				console.log(e);
			},
			alertBtn() {
				let _url = ''
				if (this.value == '入库记录') {
					_url = '/warehouseBaseInfo/exportphone'
				} else {
					_url = "/warehouseBaseInfo/exportPhoneOut"
				}
				uni.showLoading({
					title: '正在加载'
				})
				this.$api.doRequest('post', _url, {
					startDate: this.parameter.startDate,
					endDate: this.parameter.endDate,
					warehouseName: this.parameter.warehouseName
				}).then(res => {
					uni.hideLoading()
					console.log('-----------')
					console.log(res.data.data)
					uni.downloadFile({
						url: res.data.data,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						}
					});

				})
			},
			cancelClick() {
				this.isShowDetailBtn = false
			},
			toDetail(warehouseName) {
				this.parameter.warehouseName = warehouseName
				this.parameter.startDate = helper.getNowFormatDate()
				this.parameter.endDate = helper.getNowFormatDate()
				this.isShowDetailBtn = true
			},
			init() {
				if (!this.hasLogin) {
					this.isShowAlert = true;
				} else {
					uni.showLoading({
						title: '正在加载'
					})
					this.$api.doRequest('get', '/costManagementInfo/selectCostManagementInfo', {
						compId: uni.getStorageSync('pcUserInfo').compId,
						warehouseType: 1
					}).then(res => {
						uni.hideLoading()
						if (res.data.data) {
							const results = this.makeGroupData(res.data.data, function(item) {
								return [item.warehouseName];
							});
							console.log('this.costList')
							console.log(this.costList)
							let _data = []
							for (let i = 0; i < results.length; i++) {
								let _obj = {}
								_obj.warehouseName = results[i][0].warehouseName
								// 大于两条添加合计行
								if (results[i].length > 1) {
									let _price = 0
									for (let k = 0; k < results[i].length; k++) {
										_price += results[i][k].storage
									}
									_price = _price.toFixed(2)
									results[i].push({
										'goodsName': '合计',
										'storage': _price
									})
								}
								_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">
	.active {
		font-size: 32rpx;
		font-weight: 700;
	}

	.modal-row {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 60rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.u-radio-group {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.u-radio {
		width: 50% !important;
		display: flex;
		justify-content: center;
	}

	.record {
		background: red;
		display: flex;
		justify-content: center;
	}

	.button {
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		border-radius: 15px;
		background: #22C572;
		color: white;
		// margin: 0 10px;
	}

	.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>