uniapp-dp/dp-workshop-manage/pages/report/index.vue

<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<!-- <uni-section :title="'日期范围用法：' + '[' + range    + ']'" type="line"></uni-section> -->
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
				</view>
		<scroll-view :scroll-y="true" class="page">
			<view class="cu-list menu card-menu margin-top">
				<view class="cu-item" style="margin-top: 10rpx;" v-for="(item, index) in reportData" v-if="TabCur == 0">
					<view class="content" @click="showReport(item)">
						<!-- <view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">制衣生产车间</view>
							<text class="text-grey" style="flex: 1;">{{ item.workshopName }}</text>
						</view>
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">制衣班组</view>
							<text class="text-grey" style="flex: 1;">{{ item.teamName }}</text>
						</view>
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">订单号</view>
							<text class="text-grey" style="flex: 1;">{{ item.orderNo }}</text>
						</view> -->
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);" v-if="TabCur == 0">时间</view>
							<!-- <view class="title" style="min-width: calc(6em + 15px);" v-if="TabCur == 1">送活日期</view> -->
							<text class="text-grey" style="flex: 1;" v-if="TabCur == 0">{{ item.rcvDate }}</text>
							<!-- <text class="text-grey" style="flex: 1;" v-if="TabCur == 1">{{ item.backDate }}</text> -->
						</view>
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);" v-if="TabCur == 0">总计</view>
							<!-- <view class="title" style="min-width: calc(6em + 15px);" v-if="TabCur == 1">送活总计</view> -->
							<!-- <text class="text-grey" style="flex: 1;" v-if="TabCur==0">{{item.rcvQty}}</text> -->
							<text class="text-grey" style="flex: 1;" v-if="TabCur == 0">{{ item.rcvCount }}</text>
							<!-- <text class="text-grey" style="flex: 1;" v-if="TabCur == 1">{{ item.backCount }}</text> -->
						</view>
					</view>
				</view>
				
				<view class="cu-item" style="margin-top: 10rpx;" v-for="(item, index) in reportData" v-if="TabCur == 1">
					<view class="content" @click="showBackReport(item)">
						<!-- <view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">制衣生产车间</view>
							<text class="text-grey" style="flex: 1;">{{ item.workshopName }}</text>
						</view>
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">制衣班组</view>
							<text class="text-grey" style="flex: 1;">{{ item.teamName }}</text>
						</view>
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">订单号</view>
							<text class="text-grey" style="flex: 1;">{{ item.orderNo }}</text>
						</view> -->
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">时间</view>
							<text class="text-grey" style="flex: 1;">{{ item.backDate }}</text>
						</view>
						<view class="cu-form-group">
							<view class="title" style="min-width: calc(6em + 15px);">总计</view>
							<!-- <text class="text-grey" style="flex: 1;" v-if="TabCur==0">{{item.rcvQty}}</text> -->
							<text class="text-grey" style="flex: 1;">{{ item.backCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getRcvReport, getBackReport } from '@/api/biz/report.js';
export default {
	data() {
		return {
			tabs: [
						{
			key: 0,
					name: '领活'
				},
				{
					key: 1,
					name: '送活'
				}
			],
			TabCur: 0,
			reportData: [],
			range: [],
		};
	},
	watch: {
		
				range(newval) {
					console.log('范围选:', this.range);
					console.log('长度:', this.range.length);
					if (this.TabCur == 0) {
						getRcvReport(this.range.length==0?null:this.range).then(res => {
							if (res.success) {
								this.reportData = res.data;
								// this.reportData.rcvDate = this.dateFormat(res.data.rcvDate);
							}
						});
					} else if (this.TabCur == 1) {
						getBackReport(this.range.length==0?null:this.range).then(res => {
							this.reportData = res.data;
						});
					}
					
				},
				
			},
	methods: {
		// dateFormat(time) {
		// 	let date = new Date(time);
		// 	let year = date.getFullYear();
		// 	// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
		// 	let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
		// 	let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
		// 	let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
		// 	let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
		// 	let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
		// 	// 拼接
		// 	// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
		// 	return year + '-' + month + '-' + day;
		// },

		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.loadData(this.TabCur);
		},
		loadData(tabIndex) {
			if (tabIndex == 0) {
				getRcvReport(this.range.length==0?null:this.range).then(res => {
					if (res.success) {
						this.reportData = res.data;
						// this.reportData.rcvDate = this.dateFormat(res.data.rcvDate);
					}
				});
			} else if (tabIndex == 1) {
				getBackReport(this.range.length==0?null:this.range).then(res => {
					this.reportData = res.data;
				});
			} else {
			}
		},
		showReport(item) {
			uni.navigateTo({
				url: '/pages/report/show?reportInfo=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		showBackReport(item) {
			uni.navigateTo({
				url: '/pages/report/backshow?reportInfo=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		maskClick(e){
						console.log('maskClick事件:', e);
					}
	},
	onLoad() {
		this.loadData(this.TabCur);
	}
};
</script>

<style>
/* .cu-form-group {
	min-height: 0;
	border: none;
} */
</style>