RedDragonfly/pages/statistics/particulars.vue

<template>
	<view class="particulars">
		<view class="top">
			<text class="text" @click="showDrawer()">
				筛选
			</text>
			<uni-drawer ref="showRight" mode="right" :width="340">
				<view class="close">
					<view class="par">
						<text class="tad">
							仓库
						</text>
						<view class="th">
							<view class="td" :class="warehouseIndex == i ? 'active' : ''" v-for="(v,i) in warehouse"
								:key="i" @click="change(v,i,0)">
								{{v.name}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							品牌
						</text>
						<view class="th">
							<view class="td" :class="brandIndex == i ? 'active' : ''" v-for="(v,i) in brand" :key="i"
								@click="change(v,i,1)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							是否转基因
						</text>
						<view class="th">
							<view class="td" :class="geneIndex == i ? 'active' : ''" v-for="(v,i) in gene" :key="i"
								@click="change(v,i,2)">
								{{v == -1 ? '全部' : v == 0 ? '转基因' : v== 1 ? '非转基因' : '其他'}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							等级
						</text>
						<view class="th">
							<view class="td" :class="levelIndex == i ? 'active' : ''" v-for="(v,i) in level" :key="i"
								@click="change(v,i,3)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							容量
						</text>
						<view class="th">
							<view class="td" :class="capacityIndex == i ? 'active' : ''" v-for="(v,i) in capacity"
								:key="i" @click="change(v,i,4)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="" @click="reset()">
							重置
						</view>
						<view class="" @click="confirm()">
							确定
						</view>
					</view>
				</view>
			</uni-drawer>
		</view>
		<scroll-view scroll-y="true" class="main" @scrolltolower="more()">
			<view class="hint" v-if="wu">
				暂无数据
			</view>
			<view class="tab" v-for="(v, i) in chartData" :key="i">
				<view class="th">
					<view class="">
						{{v.fullName}}
					</view>
					<view class="">
						操作人: {{v.name}}
					</view>
				</view>
				<view class="th">
					<view class="">
						{{v.comeGo}}
					</view>
					<view class="">
						{{v.Num}}箱
					</view>
				</view>
				<view class="td">
					{{getTime(v.opTime)}}
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</scroll-view>
		<view class="bom">
			合计: {{num}}箱
		</view>
	</view>
</template>

<script>
	import {
		recordDetail,
		stockSearch
	} from '../../api/statistics.js'
	export default {
		data() {
			return {
				status: 'more',
				wu: false,
				showRight: false,
				showLeft: false,
				list: '',
				id: '',
				num: 0,
				BeginSingle: '',
				FinishSingle: '',
				chartData: '',
				brandIndex: 0,
				capacityIndex: 0,
				geneIndex: 0,
				levelIndex: 0,
				warehouseIndex: 0,
				brand: [],
				capacity: [],
				gene: [],
				level: [],
				warehouse: [],
				brandName: '',
				capacityName: '',
				geneName: '',
				levelName: '',
				warehouseName: '',
				page: 1,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
		onLoad(options) {
			this.id = options.id
			this.name = options.name
			this.BeginSingle = options.startTime
			this.FinishSingle = options.endTime
			this.num = options.sum
			if (this.name) {
				uni.setNavigationBarTitle({
					title: this.name
				});
			}
			this.getData()
		},
		created() {},
		mounted() {
			this.getScreen()
		},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
				const res = await recordDetail({
					startTime: this.BeginSingle, // 开始时间
					endTime: this.FinishSingle, // 结束时间
					type: this.id,
					typeName: this.name,
					brand: this.brandName, // 品牌
					gene: this.geneName, // 转基因
					level: this.levelName, // 等级
					capacity: this.capacityName, // 容量
					warehouse: this.warehouseName, //仓库
					accessToken: uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.list = res.data.list
				if(this.list.length === 0){
					this.wu = true
				}
				this.chartData = this.pagination(1, 20, this.list);
			},
			// 上拉加载更多
			more() {
					this.status = 'loading'
					this.page++;
					this.chartData =[...this.chartData, ...this.pagination(this.page, 20, this.list)]
					if (this.chartData.length===this.list.length){
						this.status = "noMore"
					}
			},
			// 数组分页
			pagination(pageNo, pageSize, array) {
				let offset = (pageNo - 1) * pageSize;
				return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset,
					offset + pageSize);
			},
			async getScreen() {
				const res = await stockSearch({})
				this.warehouse = res.data.data.warehouse
				this.warehouse.unshift({
					name: "全部仓库",
					code: 'ck00'
				})
				this.brand = res.data.data.brand
				this.brand.unshift("全部品牌")
				this.level = res.data.data.level
				this.level.unshift("全部等级")
				this.capacity = res.data.data.capacity
				this.capacity.unshift("全部容量")
				this.gene = res.data.data.gene
				this.gene.unshift(-1)
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs.showRight.open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs.showRight.close()
			},
			// 点击
			change(v, i, num) {
				if (num === 0) {
					this.warehouseIndex = i
					if (i == 0) {
						this.warehouseName = ''
					} else {
						this.warehouseName = v.name
					}
				} else if (num === 1) {
					this.brandIndex = i
					if (i == 0) {
						this.brandName = ''
					} else {
						this.brandName = v
					}
				} else if (num === 2) {
					this.geneIndex = i
					if (i == 0) {
						this.geneName = ''
					} else {
						this.geneName = v
					}
				} else if (num === 3) {
					this.levelIndex = i
					if (i == 0) {
						this.levelName = ''
					} else {
						this.levelName = v
					}
				} else if (num === 4) {
					this.capacityIndex = i
					if (i == 0) {
						this.capacityName = ''
					} else {
						this.capacityName = v
					}
				}
			},
			// 筛选重置
			reset() {
				this.brandIndex = 0
				this.capacityIndex = 0
				this.geneIndex = 0
				this.levelIndex = 0
				this.warehouseIndex = 0
				this.brandName = ''
				this.capacityName = ''
				this.geneName = ''
				this.levelName = ''
				this.warehouseName = ''
			},
			// 筛选确定
			confirm() {
				this.getData()
				this.closeDrawer()
			},
			// 获取时间
			getTime(time = new Date()) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
				let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
				return timer;
			},
		}
	}
</script>

<style lang="scss">
	.particulars {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top {
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
			background-color: #e40315;

			.text {
				padding: 30rpx;
				color: #fff;
			}

			.close {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.par {
					text-align: left;
					padding: 20rpx;

					.th {
						display: flex;
						flex-wrap: wrap;

						.td {
							background-color: #eff3f6;
							height: 50rpx;
							line-height: 50rpx;
							padding: 0 20rpx;
							border-radius: 4px;
							margin: 0 10rpx 10rpx 0;
						}

						.active {
							background-color: #e40315;
							color: #fff;
						}
					}
				}

				.btn {
					height: 80rpx;
					padding: 10rpx;
					display: flex;
					margin-bottom: 20rpx;

					view {
						height: 100%;
						flex: 1;
						background-color: #e40315;
						border-right: 2rpx solid #fff;
						text-align: center;
						color: #fff;
						line-height: 80rpx;
					}
				}
			}
		}

		.main {
			height: calc(100% - 230rpx);
			padding: 0 20rpx;
			box-sizing: border-box;
			.hint {
				text-align: center;
			}

			.tab {
				padding: 15rpx 0;
				border-bottom: 1rpx solid #e3e3e3;

				&>view:nth-child(2) {
					margin: 10rpx 0;
				}

				.th {
					display: flex;
					justify-content: space-between;
				}

				.td {
					color: #818181;
				}
			}
		}

		.bom {
			height: 120rpx;
			border-top: 10rpx solid #f1f1f1;
			text-align: center;
			line-height: 120rpx;
			color: #e40315;
			font-size: 26rpx;
		}
	}
</style>