cleanMachineUniApp/packageA/pages/user/sign.vue

<template>
	<view>

		<uni-section title="纵向排列" type="line"></uni-section>
		<view class="" style="padding-top: 5upx;padding-bottom: 10upx;">
			<view class="" style="width: 60%;">
				<view class="tr">
					<view class="td-left">
						员工:
					</view>
					<view class="td-right">
						<!-- <select class="option" name="weixinName1" id="" v-model="weixinId1" @change='changeWeixin1'>
							<option value="0">--全部--</option>
							<option :value="weixin.id" v-for='weixin in weixinList' :key="weixin.id">{{ weixin.workName }} </option>
						</select> -->
						<picker class="option2" @change="changeWeixin" :value="index" :range="weixinList">
							<view class="wenzi">{{weixinList[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="tr">
					<view class="td-left">
						厕所:
					</view>
					<view class="td-right">
						<picker class="option2" @change="changeEquipment" :value="index2" :range="equipmentList">
							<view class="uni-input">{{equipmentList[index2]}}</view>
						</picker>
					</view>
				</view>
				<view class="tr">
					<view class="td-left">
						开始时间:
					</view>
					<view class="td-right">
						<picker class="option2" mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
							<view class="uni-input">{{date1}}</view>
						</picker>
					</view>
				</view>
				<view class="tr">
					<view class="td-left">
						结束时间:
					</view>
					<view class="td-right">
						<picker class="option2" mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
							<view class="uni-input">{{date2}}</view>
						</picker>
					</view>
				</view>
			</view>

		</view>
		<view class="example-body">
			<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
		</view>
		<!-- <view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="change"><text class="word-btn-white">改变状态</text></view> -->

	</view>
</template>

<script>
	import uniSteps from '../../resource/uni-steps/uni-steps.vue'
	import uniSection from '../../resource/uni-section/uni-section.vue'
	export default {
		components: {
			uniSection,
			uniSteps
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				index: 0,
				index2: 0,
				date1: currentDate,
				date2: currentDate,
				weixins: [],
				weixinList: [],
				equipments: [],
				equipmentList: [],
				weixinId1: null,
				equipmentId1: null,
				active: 0,
				list2: [],
				level: 3
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			this.globalUser = uni.getStorageSync("globalUser");
			var token = uni.getStorageSync("token");
			this.level = uni.getStorageSync("level");
			if (token.length > 1) {
				this.worker();
				this.equipmentes();
				if (token.length > 2) {
					this.change();
				}
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
		},
		methods: {
			change() {
				var that = this;
				var serverUrl = that.serverurl;
				var token = uni.getStorageSync("token");
				if (that.index == 0) {
					var work = 0;
				} else {
					var weixins = that.weixins;
					var index = that.index;
					for (var j = 0; j < weixins.length; j++) {
						if (j == index) {
							var work = weixins[j].workName;
						}
					}
				}
				if (that.index2 == 0) {
					var clientId = 0;
				} else {
					var clientId = that.equipments[that.index2].clientId;
				}
				var newparm = uni.getStorageSync("newparm");
				var openId = newparm.openId;
				var startDate = that.date1 + " 00:00:00";
				var endDate = that.date2 + " 23:59:59";
				var a = new Date(startDate);
				var b = new Date(endDate);
				if (a > b) {
					var temp = startDate;
					endDate = startDate;
					startDate = temp;

				}
				uni.request({
					url: serverUrl + "/TSign/getSignList",
					method: "GET",
					header: {
						'token': token
					},
					data: {
						"openId": openId,
						"workName": work,
						"clientId": clientId,
						"startDate": startDate,
						"endDate": endDate
					},
					success: (Result) => {
						var res = Result;
						if (res.data.code == true) {
							this.list2 = res.data.data;
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.message,
							});
							this.list2 = [];
						}
					}
				});
			},
			equipmentes() {
				var equipments = uni.getStorageSync("listName");
				this.equipments = equipments;
				var equipmentList = [];
				if (this.level < 2) {
					equipmentList.push("全部");
				}
				for (var i = 0; i < equipments.length; i++) {
					equipmentList.push(equipments[i].name);
				}
				this.equipmentList = equipmentList;
			},
			changeWeixin: function(e) {
				this.index = e.target.value;
				this.change();
			},
			changeEquipment: function(e) {
				this.index2 = e.target.value;
				this.change();

			},
			worker() {
				var newparm = uni.getStorageSync("newparm");
				if (newparm.toString().length > 1) {
					if (newparm.openId.length > 1) {
						var that = this;
						var serverUrl = that.serverurl;
						var token = uni.getStorageSync("token");
						var openId = newparm.openId;
						uni.request({
							url: serverUrl + "/TWeixin/getWeixinList?openId=" + openId,
							method: "GET",
							header: {
								'token': token
							},
							success: (Result) => {
								var res = Result;
								if (res.data.code == true) {
									var list = res.data.data;
									this.weixins = list;
									var weixinList = [];
									if (this.level < 2) {
										weixinList.push("全部");
									}
									for (var i = 0; i < list.length; i++) {
										weixinList.push(list[i].workName);
									}
									this.weixinList = weixinList;
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.message,
									});
								}
							}
						});
					}
				}
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value;
				this.change();
			},
			bindDateChange2: function(e) {
				this.date2 = e.target.value;
				this.change();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	.example {
		padding: 0 30rpx 30rpx;
	}

	.example-info {
		padding: 30rpx;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 30rpx;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 30rpx;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 30rpx;
	}

	.example-info-text {
		font-size: 28rpx;
		line-height: 36rpx;
	}


	.example-body {
		flex-direction: column;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.tr {
		padding-top: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}

	.td-left {
		font-family: "PingFang-SC-Bold";
		margin: auto;
		font-size: 26upx;
		width: 30%;
		text-align: right;
	}

	.td-right {
		font-family: "PingFang-SC-Bold";
		/* font-weight: bold; */
		margin: auto;
		/* font-size: 26upx; */
		width: 60%;
		text-align: left;
	}

	.option {
		height: 40upx;
		border: 1px solid blue;
	}

	.option2 {
		border: 1px solid blue;
	}

	.wenzi {
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #FFF;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;

	}
</style>