aiot-app/pages/put_storage/order/index.vue

<template>
	<view class="">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="入库台账" @clickLeft="back"></uni-nav-bar>
		<view class="fixed screen">
			<span @click="show=true">筛选</span>
			<uni-icons custom-prefix="iconfont"  @click="show=true" type="icon-shaixuan" size="16" color="#000"></uni-icons>
			<!-- <u-icon name="list" size="40rpx" click="pr10" @click="show=true"></u-icon> -->
		</view>
		<view class="content">
			<OrderTask :list="worksheetList"></OrderTask>
		</view>
		<view class="fixed add">
			<u-button type="primary" @click="add">新增</u-button>
		</view>
		<u-popup :show="show" mode="right" @close="show=false">
			<view class="p10">
				<u--form :model="form" labelPosition="left" label-width="140rpx" ref="formName">
					<u-form-item prop="code" label="入库单号" borderBottom>
						<u--input placeholder="请输入入库单号" v-model="form.code"></u--input>
					</u-form-item>
					<u-form-item prop="entryType" label="入库类型" borderBottom>
						<u--input placeholder="请输入入库类型" v-model="form.entryType"></u--input>
					</u-form-item>
					<u-form-item prop="registrant" label="登记人" borderBottom>
						<u--input placeholder="请输入登记人" v-model="form.registrant"></u--input>
					</u-form-item>
					<u-form-item prop="entryTime" label="入库时间" borderBottom>
						<u--input placeholder="请选择入库时间" v-model="entryTime" readonly @click.native="showentryTime=true">
						</u--input>
					</u-form-item>
					<u-form-item prop="registTime" label="等级时间" borderBottom>
						<u--input placeholder="请选择等级时间" v-model="registTime" readonly
							@click.native="showRegistTime=true">
						</u--input>
					</u-form-item>
				</u--form>
				<view class="btn">
					<u-button type="primary" @click="onSubmit">确定</u-button>
					<u-button @click="resetForm">重置</u-button>
				</view>
			</view>
			<u-calendar :show="showentryTime" class="customCalendar" mode="range" @close="showentryTime=false"
				@confirm="onConfirm($event,'entryTime','showentryTime')">
			</u-calendar>
			<u-calendar :show="showRegistTime" class="customCalendar" mode="range" @close="showRegistTime=false"
				@confirm="onConfirm($event,'registTime','showRegistTime')">
			</u-calendar>
		</u-popup>
	</view>
</template>

<script>
	import OrderTask from "./OrderTask.vue"
	import {
		post
	} from "@/utils/api.js"
	export default {
		components: {
			OrderTask
		},
		data() {
			return {
				form: {
					code: "", //入库单号
					entryType: "", //入库类型
					registrant: "", // 登记人
					entryBeginTime: "", //入库开始时间
					entryEndTime: "", //入库结束时间
					registBeginTime: "", //等级开始时间
					registEndTime: "", //等级结束时间
					page: 1,
					siez: 10
				},
				showentryTime: false,
				showRegistTime: false,
				entryTime: "",
				registTime: "",
				isEnd: true,
				worksheetList: [],
				show: false
			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if (this.isEnd) return
			this.form.page++
			this.getList()
		},
		methods: {
			add(){
				uni.redirectTo({
					url: "/pages/put_storage/add/index"
				})
			},
			onSubmit() {
				this.form.page = 1
				// console.log(this.form)
				if (this.entryTime) {
					let arr = this.entryTime.split("至"),
						str = "";
					[this.form.entryBeginTime, this.form.entryEndTime] = arr.map((item, idx) => {
						str = idx === 0 ? `${item} 00:00:00` : `${item} 23:59:59`
						return str
					})
				}
				if (this.registTime) {
					let arr = this.registTime.split("至"),
						str = "";
					[this.form.registBeginTime, this.form.registEndTime] = arr.map((item, idx) => {
						str = idx === 0 ? `${item} 00:00:00` : `${item} 23:59:59`
						return str
					})
				}
				this.getList()
				this.show = false
			},
			resetForm() {
				this.$refs.formName.resetFields()
				this.registTime = ""
				this.entryTime = ""
				this.form.entryBeginTime = ""
				this.form.entryEndTime = ""
				this.form.registBeginTime = ""
				this.form.registEndTime = ""
				this.form.page = 1
				this.getList()
				this.show = false
			},
			onConfirm(val, name, show) {
				let str = ""
				val.forEach((item, idx) => {
					if (idx === 0) {
						str = item
					} else if (idx === val.length - 1) {
						str += "至" + item
					}
				})
				this[name] = str
				this[show] = false
			},
			getList() {
				uni.showLoading({
					title: "加载中"
				})
				post(this.apiUrl + "/feature/book/sparepartsEntry/putWareHouseList", this.form).then(res => {
					// console.log(res)
					if (this.form.page === 1) {
						this.worksheetList = res.data.items
					} else {
						res.data.items.forEach(item => {
							this.worksheetList.push(item)
						})
					}
					this.form.page < res.data.pageTotal ? (this.isEnd = false) : (this.isEnd = true);
				}).then(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		width: 100%;
		left: 0
	}

	.screen {
		height: $tab-height;
		line-height: $tab-height;
		background-color: #FFFFFF;
		border-bottom: 1px solid #f2f2f2;
		z-index: 99;
		text-align: right;
		display: flex;
		justify-content: flex-end;
	}

	.content {
		margin-top: $tab-height;
		// margin-bottom: ;
	}

	.add {
		bottom: 0;
	}

	.pr10 {
		padding-right: 20rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.p10 {
		padding: 20rpx;
	}

	.customCalendar {
		/deep/.u-button {
			width: 100% !important;
		}

		/deep/ .u-calendar-month__days__day {
			height: 112rpx !important;
		}
	}

	.btn {
		margin-top: 20rpx;
		display: flex;

		/deep/ .u-button {
			width: 48% !important;
		}
	}
</style>