GEKE_PHONE/pages/sign/userwork.vue

<template>
	<div>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">排班信息</block>
		</cu-custom>

		<div>
			<div class='month'>
				<ul style="list-style-type:none;">
					<li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
					<li class='year-month'>
						<span class='choose-year'>{{ currentYear }}年</span>
						<span class='choose-month'>{{ currentMonth }}月</span>
					</li>
					<li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
				</ul>
				<br>
			</div>
		</div>


		<view>
			<view class="container-list">
				<view class="common cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<label class="content">
						<view class="lable-text " style="font-size: 15px;margin-left: 10px;">班次</view>
						<view class="lable-text" style="font-size: 15px;margin-left: -20px;">上班时间</view>
						<view style="font-size: 15px;">-</view>
						<view class="lable-text" style="font-size: 15px;">下班时间</view>
						<view class="lable-text">
							<span style="font-size: 15px;">排班日期</span>
						</view>
					</label>
				</view>
				<view class="common cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]"
					v-for='(item,index) in data' :key="index">
					<label class="content">
						<view class="lable-text " style="font-size: 15px;margin-left: 10px;">{{item.name}}</view>
						<view class="lable-text" style="font-size: 15px;margin-left: -20px;">{{item.startDate}}</view>
						<view style="font-size: 15px;">-</view>
						<view class="lable-text" style="font-size: 15px;">{{item.endDate}}</view>
						<view class="lable-text">
							<span style="font-size: 15px;">{{item.shiftDate}}</span>
						</view>
					</label>
					
				</view>

			</view>
		</view>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				currentMonth: new Date().getMonth() + 1,
				currentYear: new Date().getFullYear(),
				data: [],
				userUrl: '/shift/shift/listShift'
			}
		},

		created() {
			this.initData(null)
			this.querys(this.name)
		},
		methods: {
			initData: function(cur) {
				// var leftcount = 0 // 存放剩余数量
				var date
				if (cur) {
					date = new Date(cur)
				} else {
					var now = new Date()
					
					date = now;
				}

				this.currentYear = date.getFullYear()
				this.currentMonth = date.getMonth() + 1

				var str = this.formatDate(
					this.currentYear,
					this.currentMonth,

				)

			},
			pickPre: function(year, month) {
				var d = new Date(this.formatDate(year, month, 1))
				d.setDate(0)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
				this.querys();
			},

			pickNext: function(year, month) {
				var d = new Date(this.formatDate(year, month, 1))
				var ds = this.formatDate(year, month, null);
				var nowDate = new Date();
				var dt = this.formatDate(nowDate.getFullYear(), nowDate.getMonth(), null);


				d.setDate(35)

				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
				this.querys();

			},

			// 返回 类似 2016-01-02 格式的字符串
			formatDate: function(year, month, day) {
				var y = year
				if (month > 12) {
					month = 1;
					y = year + 1;
				}
				var m = month
				if (m < 10) m = '0' + m
				var d = day
				if (day != null && day != "") {
					if (d < 10) d = '0' + d
					return y + '-' + m + '-' + d
				} else {
					return y + '-' + m
				}


			},

			querys() {
				this.data = [];
				var deptid = uni.getStorageSync('id');
				var userid = this.$store.getters.userid;
				if (deptid != null && deptid != "") {
					userid = deptid;
				}
				var date = this.formatDate(this.currentYear, this.currentMonth, 1);
				this.$http.get(this.userUrl, {
					params: {
						userid: userid,
						date: date
					}
				}).then(res => {
					this.data = res.data;

				}).catch(err => {
					console.log(err);
				});
			},



		}

	}
</script>

<style lang="scss" scoped>
	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		height: 35px;
	}

	.year-month {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 10px;
	}

	.choose-month {
		text-align: center;
		font-size: 12px;
	}

	.arrow {
		padding: 15px;
		color: #999999;
	}

	.month ul li {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}

	#calendar {
		font-size: 12px;
		width: 100%;
		margin: 0 auto;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
			0 1px 5px 0 rgba(0, 0, 0, 0.12);

	}

	.month {
		width: 100%;
		color: #333333;
		background: #ffffff;
	}


	.imgs {
		width: 40px;
		height: 40px;
		border-radius: 5px 5px 5px 5px;
		margin-left: 1%;
	}

	.filterBox {
		padding: 15rpx 32rpx;
		background-color: #fff;

		.filter-input {
			height: 80rpx;
			background-color: #eeeff0;
			border-radius: 40rpx;
			display: flex;
			align-items: center;

			padding-left: 40rpx;

			.filterImg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				margin-bottom: 5rpx;
			}

			.filterImgs {
				width: 32rpx;
				height: 32rpx;

			}

			.text {
				width: 84%;
				background-color: #eeeff0;
				font-size: 32rpx;
				color: #000;
			}
		}
	}

	.flex_between_center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.checkbox {
		position: relative;
		margin-left: 10rpx;
		margin-right: 0px;

		.color {
			color: #00aaff;
			background-color: #00aaff;
		}

		.txt {
			font-size: 44rpx;
			width: 100%;
			height: 100%;
			display: flex;
		}
	}

	.checkBorder {
		border: 1px solid #ecdee4;
	}

	.header {
		width: 100%;
		position: fixed;
		background-color: #fff;
		z-index: 9999;

		.title {
			height: 90rpx;
			padding: 0 32rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			background-color: #f5f5f5;
			color: #606064;
		}
	}

	.iconclass {
		display: inline-block;
		margin: 0 12rpx;
		color: #D0D4DB;
		font-size: 28rpx;
	}

	.container-list {
		overflow-y: scroll;
		overflow-x: hidden;
		padding-bottom: 160rpx;
		padding-top: 15rpx;

		.common {
			background-color: #fff;
			border-bottom: 1rpx solid #f4f4f4;
			padding-left: 10rpx;

			.content {
				display: flex;
				align-items: center;
				height: 70rpx;
				width: 100%;
				padding: 15rpx 0;
				position: relative;
				font-size: 32rpx;

				.lable-text {
					margin-left: 5%;
					font-size: 30rpx;
					color: #5b5757;
					width: 500rpx;
					word-break: break-all;
				}

				.right {
					position: absolute;
					right: 30rpx;
					color: #babdc3;
					font-size: 32rpx;
				}
			}
		}
	}

	.active {
		color: #4297ED !important;
	}

	.none {
		color: #666666;
	}

	.icon-selected {
		color: #0095F2 !important;
		font-size: 40rpx !important;
	}

	.icons {
		color: #0095F2 !important;
		font-size: 40rpx !important;
	}

	.inline-item {
		display: inline-block
	}

	.content-item {
		display: flex;
		position: relative;
		align-items: center;
	}

	.box_sizing {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.btn {
		position: fixed;
		bottom: 0;
		padding: 10px;
		background-color: #fff;
		width: 100%;

		.sureBtn {
			background-color: #0095F2;
			color: #fff;
		}
	}

	// @import '@/components/xiaolu-tree/css/style.scss';
	@import url("@/components/xiaolu-tree/css/icon.css");
</style>