填在预览excel

pages/user/contractLook/inventoryCost.vue

@@ -1,9 +1,11 @@
 <template>
 	<view class="content">
 		<view class="cost-list" v-for="(item,index) in costList">
-			<view class="title">
-				{{item.warehouseName}}
+			<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>
@@ -17,7 +19,31 @@
 				</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>
 	</view>
 </template>
 
@@ -25,32 +51,106 @@
 	export default {
 		data() {
 			return {
-				costList:[]
+				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) {
-			uni.showLoading({
-				title: "加载中",
-				mask: true
-			})
 			this.init()
 		},
 		methods: {
+			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"
+				}
+				this.$api.doRequest('post', _url, {
+					startDate: this.parameter.startDate,
+					endDate: this.parameter.endDate,
+					warehouseName: this.parameter.warehouseName
+				}).then(res => {
+					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.isShowDetailBtn = true
+			},
 			init() {
 				this.$api.doRequest('get', '/costManagementInfo/selectCostManagementInfo', {
-				compId: uni.getStorageSync('pcUserInfo').compId,
-				warehouseType: 1
+					compId: uni.getStorageSync('pcUserInfo').compId,
+					warehouseType: 1
 				}).then(res => {
 					uni.hideLoading()
-					const results = this.makeGroupData(res.data.data,function (item) {
-					return [item.warehouseName];
+					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++){
+					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)
 					}
@@ -58,16 +158,16 @@
 					this.costList = _data
 				})
 			},
-			makeGroupData(array,fn){
+			makeGroupData(array, fn) {
 				const groups = {};
-				array.forEach(function (item) {
-				     const group = JSON.stringify(fn(item));
-				     groups[group] = groups[group] || [];
-				     groups[group].push(item);
+				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];
+				return Object.keys(groups).map(function(group) {
+
+					return groups[group];
 				})
 			}
 		}
@@ -75,59 +175,103 @@
 </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;
+	.modal-row {
+		display: flex;
+		justify-content: space-between;
+		padding: 10rpx 60rpx;
 	}
-	.goods-table{
-		margin-top: 22rpx;
+
+	.u-radio-group {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
 	}
-	.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;
-		}
+
+	.u-radio {
+		width: 50% !important;
+		display: flex;
+		justify-content: center;
 	}
-	.goods-table-content{
+
+	.record {
+		background: red;
 		display: flex;
-		margin: 22rpx;
-		font-size: 28rpx;
-		font-weight: 400;
-		color: #333333;
-		.font:nth-of-type(1){
-			width: 40%;
+		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;
 		}
-		.font:nth-of-type(2){
-			width: 30%;
+
+		.goods-table {
+			margin-top: 22rpx;
 		}
-		.font:nth-of-type(3){
-			width: 30%;
-			text-align: right;
+
+		.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>

pages/user/report.vue

@@ -762,7 +762,7 @@
 						}
 					}
 					this.chartlist = _list
-					this.scroll()
+					// this.scroll()
 					uni.hideLoading()
 				})
 			},