mabaoDoctor/pages/scheduling/Scheduling.vue

<template>
	<view style="width: 100%;height: 100%;">
		<!-- 选择周 -->
		<u-select v-model="show" :list="list" @confirm="choiceNew"></u-select>
		<!-- 选择医院 -->
		<u-select v-model="hospitalshow" mode="single-column" :list="hospitalList" @confirm="confirmhospital"></u-select>
		<!-- 新增-->
		<view>
			<view style="padding: 30rpx 35rpx;color: #666666;" class="flex justify-between ">
				<view @click="show = true">
					<text style="margin-right: 20rpx;">选择排班周</text>
					<u-icon name="arrow-down" color="#666666" size="28" v-if="!show"></u-icon>
					<u-icon name="arrow-up" color="#666666" size="28" v-else></u-icon>
				</view>
				<view @click="hospitalshow = true">
					<text style="margin-right: 20rpx;">选择排班医院</text>
					<u-icon name="arrow-down" color="#666666" size="28" v-if="!hospitalshow"></u-icon>
					<u-icon name="arrow-up" color="#666666" size="28" v-else></u-icon>
				</view>
			</view>
			<view class="flex justify-around align-center" style="height: 100rpx;width: 100%;background-color: #fff;font-size: 28rpx;font-weight: bold;border-bottom: 1rpx solid #cecece;">
				<text>{{time==''?'请选择排班时间':time}}\n</text>
				<text>{{hospital==''?'请选择排班医院':hospital}}</text>
			</view>
			<!-- 标题 -->
			<view class="flex" style="background-color: #FFFFFF;">
				<!-- 时间 -->
				<view class="title" style="width: 20%;">时间</view>
				<u-line color="#cecece" direction="col" />
				<!-- 上午 -->
				<view class="title" style="width: 26%;">上午</view>
				<u-line color="#cecece" direction="col" />
				<!-- 下午 -->
				<view class="title" style="width: 26%;">下午</view>
				<u-line color="#cecece" direction="col" />
				<!-- 晚上 -->
				<view class="title" style="width: 26%;">晚上</view>
			</view>

			<!-- 表格一条内容  循环七遍-->
			<view v-for="(item,index) in hospitalWeek" :key='index'>
				<u-line color="#cecece" />
				<!-- 星期一 -->
				<view class="flex" style="background-color: #FFFFFF;">
					<view class="content" style="width: 20%;font-weight: bold;">
						<view>
							<view style="text-align: center;">{{item.value}}</view>
							<view style="text-align: center;">{{item.title}}</view>
						</view>
					</view>
					<u-checkbox-group style="width: 80%;height: 100%;">
						<view class="flex justify-around align-center" style="padding: 40rpx 0;">
							<u-checkbox v-model="hitem.checked" v-for="(hitem, hindex) in item.hospital" :key="hindex" :disabled="hitem.disabled"
							 @change="horg(index,hindex)"></u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<!-- 保存 -->
		<view class="bottomButton" @click="modalShow=!modalShow">
			保存
		</view>
		<u-modal v-model="modalShow" content="确定要保存？" @confirm="bc" :show-cancel-button="true"></u-modal>
		<u-modal v-model="remindshow" content="这天是法定节假日，确定要排班吗？" @confirm="remindshow=remind=false" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//标题上显示的医院。也就是当前选中医院
				hospital: '',
				hosptialId: '',
				//标题上显示的
				time:'',
				//弹窗
				modalShow: false,
				//切换历史和新增
				old: false,
				//新增的排班选择   最多排四周
				show: false,
				list: [{
					value: '0',
					label: '2020.10.26 - 2020-11-1'
				}, {
					value: '1',
					label: '2020.11.2 - 2020-11-8'
				}, {
					value: '2',
					label: '2020.11.9 - 2020-11-15'
				}, {
					value: '3',
					label: '2020.11.16 - 2020-11-22'
				}],
				//新增一周的数据   title不可更改  value日期   其余 上 下 晚
				hospitalWeek: [{
					title: '周一',
					value: '10-26',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						organization_id: 0,
						name: '下午',
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}, {
					title: '周二',
					value: '10-27',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}, {
					title: '周三',
					value: '10-28',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}, {
					title: '周四',
					value: '10-29',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}, {
					title: '周五',
					value: '10-30',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}, {
					title: '周六',
					value: '10-31',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}, {
					title: '周日',
					value: '11-01',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false,
						disabled: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false,
						disabled: false
					}],
				}],

				saveList: [{
					title: '周一',
					value: '10-26',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: true,
						disabled: true
					}, {
						organization_id: 0,
						name: '下午',
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}, {
					title: '周二',
					value: '10-27',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}, {
					title: '周三',
					value: '10-28',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}, {
					title: '周四',
					value: '10-29',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}, {
					title: '周五',
					value: '10-30',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}, {
					title: '周六',
					value: '10-31',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}, {
					title: '周日',
					value: '11-01',
					hospital: [{
						name: '早上',
						organization_id: 0,
						checked: false
					}, {
						name: '下午',
						organization_id: 0,
						checked: false
					}, {
						name: '晚上',
						organization_id: 0,
						checked: false
					}],
				}],

				//选择医院
				hospitalList: [],
				hospitalshow: false,
				//当前点击的位置
				position: {
					day: '',
					time: '' //1早2下3晚
				},
				//选择排班提醒
				remind: true,
				remindshow: false
			}
		},
		methods: {

			cliold: async function(e) {

				let times = e[0].label;
				times = times.split(" 至 ");
				let startime = times[0];
				let endtime = times[1];
				let weekArr = this.getDateStr(startime, endtime, 0);

				let res = await this.$request.post("doctor/getLinsDetail", {
					'start_date': startime,
					'end_date': endtime
				});
				console.log('老得：', this.oldWeek);
				console.log('新的', res.data);
				if (res.status == 0) {
					if (typeof res.data.list[0] != undefined && typeof res.data[0] != 'undefined') {
						let data = res.data.list;
						let arr = [];
						for (let i = 0; i < this.oldWeek.length; i++) {
							for (let p = 0; p < data.length; p++) {
								if (this.oldWeek[i].value == data[p].schedule_date) {
									this.oldWeek[i].morning = data[p].type.zao ? data[p].type.zao : '暂无';
									this.oldWeek[i].afternoon = data[p].type.xia ? data[p].type.xia : '暂无';
									this.oldWeek[i].night = data[p].type.wan ? data[p].type.wan : '暂无';
								}
							}
						}

					} else {
						for (let i = 0; i < this.oldWeek.length; i++) {
							this.oldWeek[i].morning = '暂无';
							this.oldWeek[i].afternoon = '暂无';
							this.oldWeek[i].night = '暂无';
						}
					}


				}

			},

			getDateStr(startDate, endDate, dayLength) {
				var str = startDate;
				for (var i = 0;; i++) {
					var getDate = this.getTargetDate(startDate, dayLength);
					startDate = getDate;
					if (getDate <= endDate) {
						str += ',' + getDate;
					} else {
						break;
					}
				}
				let dates = str.split(',');
				let arr = [];
				let obj;
				for (let i = 0; i < 7; i++) {
					obj = {
						title: this.getweeks(dates[i]),
						value: dates[i].substring(5),
						morning: '暂无',
						afternoon: '暂无',
						night: '暂无',
					}
					arr.push(obj)
				}
				this.oldWeek = arr
			},
			getweeks(date) {
				var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var dateStr = date;
				var myDate = new Date(Date.parse(dateStr.replace(/-/g, "/")));
				return weekDay[myDate.getDay()]

			},

			// startDate: 开始时间；dayLength：每隔几天，0-代表获取每天，1-代表日期间隔一天
			getTargetDate(date, dayLength) {
				dayLength = dayLength + 1;
				var tempDate = new Date(date);
				tempDate.setDate(tempDate.getDate() + dayLength);
				var year = tempDate.getFullYear();
				var month = tempDate.getMonth() + 1 < 10 ? "0" + (tempDate.getMonth() + 1) : tempDate.getMonth() + 1;
				var day = tempDate.getDate() < 10 ? "0" + tempDate.getDate() : tempDate.getDate();

				return year + "-" + month + "-" + day;
			},

			//点击新增周
			choiceNew(e) {
				this.hospitalWeek.map(val => {
					val.hospital[0].disabled = false;
					val.hospital[1].disabled = false;
					val.hospital[2].disabled = false;
				})
				console.log(e)
				this.time = e[0].label
				var bData = new Date();
				bData.setTime(bData.getTime() + 24 * 60 * 60 * 1000 * (8 - bData.getDay() + (7 * e[0].value)))
				for (let i = 0; i < 7; i++) {
					var week = (bData.getMonth() + 1) + "-" + this.Appendzero(bData.getDate());
					bData.setTime(bData.getTime() + 24 * 60 * 60 * 1000 * 1);
					this.hospitalWeek[i].value = week
					this.saveList[i].schedule_date = '2020-' + week
				}
				this.getTemplate()
				
			},



			//提示是节假日，每次进入页面只会提示一次
			festival(day, time) {
				if (day > 4 && this.remind) {
					this.remindshow = true
				}
				this.position.day = day
				this.position.time = time
				this.hospitalshow = true
			},

			/**
			 * 选择医院逻辑
			 * @author 刘远航
			 * @param {Object} e
			 */
			confirmhospital: async function(e) {
				
				if(this.hospital == ''){
					this.hospital = e[0].label
					this.confirmhospital(e)
					this.hosptialId = e[0].value;
					this.getTemplate()
					 
				}
				console.log('选择医院：',e[0])
				console.log('zhi：',this.hospital)
				//保存上一次操作并更换操作的医院
				this.hosptialId = e[0].value;
				this.hospital = e[0].label
				
				for (let i = 0; i < this.hospitalWeek.length; i++) {
					for (let k = 0; k < this.hospitalWeek[i].hospital.length; k++) {
						if (this.hospitalWeek[i].hospital[k].organization_id != 0 && this.hospitalWeek[i].hospital[k].organization_id !=
							this.hosptialId) {
							this.hospitalWeek[i].hospital[k]['disabled'] = true;
						} else {
							if (this.hospitalWeek[i].hospital[k].flag == undefined || this.hospitalWeek[i].hospital[k].flag == 'undefined' ||
								this.hospitalWeek[i].hospital[k].flag == false) {
								this.hospitalWeek[i].hospital[k]['disabled'] = false;
							}
						}
					}
				}
			},


			/**
			 * 提交方法
			 * @author Liu Yh
			 * @param {Object} e
			 */
			bc: async function(e) {
				console.log('hospitalWeek', this.hospitalWeek)
				let that = this;
				let forms = JSON.stringify(that.saveList);
				console.log("forms", that.saveList)
				let res = await that.$request.post("doctor/scheduling", {
					data: forms
				});
				if (res.status == 0) {
					uni.showToast({
						duration: 2000,
						title: '排班成功'
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.showModal({
						duration: 2000,
						title: res.message,
					})
				}
			},
			//获取时间
			getTime() {
				var week = [{
					value: 1,
					label: ''
				}, {
					value: 2,
					label: ''
				}, {
					value: 3,
					label: ''
				}, {
					value: 4,
					label: ''
				}]

				//直接获取这周五的时间，然后遍历 给选择器
				var aData = new Date();
				aData.setTime(aData.getTime() + 24 * 60 * 60 * 1000 * (7 - aData.getDay()))
				for (let i = 0; i < 4; i++) {
					aData.setTime(aData.getTime() + 24 * 60 * 60 * 1000 * 1)
					var week1 = aData.getFullYear() + "." + (aData.getMonth() + 1) + "." + this.Appendzero(aData.getDate());
					console.log('第', i + 1, '个周一的时间', week1) //周一的时间
					//周日
					aData.setTime(aData.getTime() + 24 * 60 * 60 * 1000 * (aData.getDay() + 5))
					var week2 = aData.getFullYear() + "." + (aData.getMonth() + 1) + "." + this.Appendzero(aData.getDate());
					console.log('第', i + 1, '个周日的时间', week2) //周日的时间
					this.list[i].label = week1 + ' - ' + week2 //给选择器数组
				}
				//直接获取下周一时间，给表格
				var bData = new Date();
				bData.setTime(bData.getTime() + 24 * 60 * 60 * 1000 * (8 - bData.getDay()))
				for (let i = 0; i < 7; i++) {
					var week = (bData.getMonth() + 1) + "-" + this.Appendzero(bData.getDate());
					console.log('号：', week)
					bData.setTime(bData.getTime() + 24 * 60 * 60 * 1000 * 1);
					this.hospitalWeek[i].value = week
					this.saveList[i].schedule_date = '2020-' + week
				}


				// this.getTemplate()

				//    var date = new Date();
				//    var seperator1 = "-";
				//    var seperator2 = ":";
				//    //以下代码依次是获取当前时间的年月日时分秒
				//    var year = date.getFullYear();
				//    var month = date.getMonth() + 1;
				//    var strDate = date.getDate();
				//    var minute = date.getMinutes();
				//    var hour = date.getHours();
				//    var second = date.getSeconds();
				//    //固定时间格式
				//    if (month >= 1 && month <= 9) {
				//      month = "0" + month;
				//    }
				//    if (strDate >= 0 && strDate <= 9) {
				//      strDate = "0" + strDate;
				//    }
				//    var currentdate =  year + seperator1 + month + seperator1 + strDate 


				// var dateArray = nowTime.split("-");
				// var date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
				// var week = "星期" + "日一二三四五六".charAt(date.getDay());
				// this.nowWeek = week // 赋值本地数据
				// alert(week)
				// return currentdate;
			},

			/**
			 * @author Liu Yh
			 * 时间补0
			 * @param {Object} obj
			 */
			Appendzero(obj) {
				if (obj < 10) return "0" + "" + obj;
				else return obj;
			},

			/**
			 * @author Liu Yh
			 * 获取信息模板
			 */
			getTemplate: async function() {
				
				for (let i = 0; i < this.hospitalWeek.length; i++) {
					for (let k = 0; k < this.hospitalWeek[i].hospital.length; k++) {
						this.hospitalWeek[i].hospital[0]['disabled'] = false;
						this.hospitalWeek[i].hospital[1]['disabled'] = false;
						this.hospitalWeek[i].hospital[2]['disabled'] = false;
						
						this.hospitalWeek[i].hospital[0].organization_id = 0;
						this.hospitalWeek[i].hospital[1].organization_id = 0;
						this.hospitalWeek[i].hospital[2].organization_id = 0;
						
						this.hospitalWeek[i].hospital[0].checked = false;
						this.hospitalWeek[i].hospital[1].checked = false;
						this.hospitalWeek[i].hospital[2].checked = false;
					}
				}
				
				
				
				// let that = this;
				let startTime = '2020-' + this.hospitalWeek[0].value;
				let endTime = '2020-' + this.hospitalWeek[6].value;
				let res = await this.$request.post("doctor/getLinsDetail", {
					'start_date': startTime,
					'end_date': endTime
				});
				console.log(res.data);
				if (res.status == 0) {
					if (typeof res.data.list[0] != undefined && typeof res.data.list[0] != 'undefined') {
						let data = res.data.list;
						let arr = [];
						for (let i = 0; i < this.hospitalWeek.length; i++) {
							for (let p = 0; p < data.length; p++) {
								if (this.hospitalWeek[i].value == data[p].schedule_date) {
									this.saveList[i].hospital[0].organization_id = data[p].type.zao_id;
									this.saveList[i].hospital[1].organization_id = data[p].type.xia_id;
									this.saveList[i].hospital[2].organization_id = data[p].type.wan_id;

									this.hospitalWeek[i].hospital[0].organization_id = data[p].type.zao_id;
									this.hospitalWeek[i].hospital[1].organization_id = data[p].type.xia_id;
									this.hospitalWeek[i].hospital[2].organization_id = data[p].type.wan_id;
									this.hospitalWeek[i].hospital[0].checked = data[p].type.zao_id == 0 ? false : true;
									this.hospitalWeek[i].hospital[1].checked = data[p].type.xia_id == 0 ? false : true;
									this.hospitalWeek[i].hospital[2].checked = data[p].type.wan_id == 0 ? false : true;

									// this.hospitalWeek[i].hospital[0]['flag'] = data[p].type.zao_flag;
									// this.hospitalWeek[i].hospital[1]['flag'] = data[p].type.xia_flag;
									// this.hospitalWeek[i].hospital[2]['flag'] = data[p].type.wan_flag;
								}
							}
						}
						
						
						for (let i = 0; i < this.hospitalWeek.length; i++) {
							for (let k = 0; k < this.hospitalWeek[i].hospital.length; k++) {
								if (this.hospitalWeek[i].hospital[k].organization_id != 0 && this.hospitalWeek[i].hospital[k].organization_id !=
									this.hosptialId) {
									this.hospitalWeek[i].hospital[k]['disabled'] = true;
								}
							}
						}

					} else {			
						for (let i = 0; i < this.hospitalWeek.length; i++) {
							this.saveList[i].hospital[0].organization_id = 0;
							this.saveList[i].hospital[1].organization_id = 0;
							this.saveList[i].hospital[2].organization_id = 0;
							this.hospitalWeek[i].hospital[0].checked = false;
							this.hospitalWeek[i].hospital[1].checked = false;
							this.hospitalWeek[i].hospital[2].checked = false;
						}
					}
					
				}
				
				
				


			},

			/**
			 * change事件
			 * @author Liu Yh
			 * @param {Object} index
			 * @param {Object} hindex
			 */
			horg(index, hindex) {
				if (this.hosptialId == '' || this.time == '') {
					uni.showModal({
						title: '先选择医院否则无法提交',
					})
					return false;
				}
				
				if (this.hospitalWeek[index].hospital[hindex].organization_id != 0 && this.hospitalWeek[index].hospital[hindex].organization_id !=
					this.hosptialId) {
					this.hospitalWeek[index].hospital[hindex]['disabled'] = true;
				} else {
					this.hospitalWeek[index].hospital[hindex]['disabled'] = false;
				}

				if (!this.hospitalWeek[index].hospital[hindex]['checked'] == false) {
					this.hospitalWeek[index].hospital[hindex].organization_id = 0
				} else {
					this.hospitalWeek[index].hospital[hindex].organization_id = this.hosptialId;
				}
				var saveList = this.saveList
				var lists;
				let yeares = new Date().toISOString().slice(0, 4);
				// 医院的id
				saveList[index].hospital[hindex].organization_id = this.hospitalWeek[index].hospital[hindex].organization_id;
				// 是否选中 因为是change不同步所以区反
				saveList[index].hospital[hindex].checked = !this.hospitalWeek[index].hospital[hindex].checked;
				// 日期
				saveList[index].value = yeares + '-' + this.hospitalWeek[index].value
			},
			/**
			 * 获取医院
			 */
			gethospitalList: async function() {
				let that = this;
				let res = await that.$request.post("doctor/organizationList");
				if (res.status == 0) {
					that.hospitalList = res.data
				}
				console.log('医院', res);
			}
		},
		onLoad() {
			this.gethospitalList();
			this.getTime();
			// this.getOldList();
			// this.cliold()
			console.log(this.time)
			
			this.time = this.list[0].label
		},
	}
</script>

<style>
	page {
		background-color: #f0f0f0
	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		font-weight: bold;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;

	}

	/* 底部按钮 */
	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0000ff;
		color: #FFFFFF;
		z-index: 1;

	}
</style>