mabaoDoctor/pages/scheduling/week_Scheduling.vue

<template>
	<view style="width: 100%;height: 100%;">
		<!--医院列表 -->
		<u-select v-model="hospitalListShow" :list="hospitalList" @confirm="setSelectHospital" :default-value="defaultList"></u-select>

		<!-- 顶部标题和按钮 -->
		<view class="flex justify-between align-center" style="margin: 40rpx 28rpx;">
			<view style="font-size: 50rpx;flex-grow: 2;">排班医院:</view>
			<view class="flex justify-around align-center" style="flex-grow: 3;">
				<view class="drop-down" @click="hospitalListShow=!hospitalListShow">
					<text>{{hospital}}</text>
					<u-icon name="arrow-down-fill" size="32" color="#848484" v-show="!hospitalListShow"></u-icon>
					<u-icon name="arrow-up-fill" size="32" color="#848484" v-show="hospitalListShow"></u-icon>
				</view>
			</view>
		</view>

		<!-- 温馨提示 -->
		<view style="margin: 10rpx 28rpx;">温馨提示:排班默认按周循环，特殊安排请在月视图调整</view>

		<!-- 周 -->
		<view class="flex justify-center align-center" style="height: 500rpx;width: 100%;" v-show="loading">
			<u-loading mode="circle" size="50"></u-loading>
		</view>
		<view v-for="item,index in weekList" class="week" :key="index" v-show="!loading">
			<view style="flex-grow: 1;text-align: center;border-right: 2rpx solid #808080;font-size: 36rpx;margin-right: 30rpx;">{{weekTitlelist[index].text}}</view>
			<view style="flex-grow: 2;">
				<view :class="item.mon == hospitalID ? 'monStyle' : item.mon == 0 ? 'nullStyle' :'otherStyle'" @click="modify(1,index)">上午</view>
			</view>
			<view style="flex-grow: 2;">
				<view :class="item.aft == hospitalID ? 'aftStyle' : item.aft == 0 ? 'nullStyle' :'otherStyle'" @click="modify(2,index)">下午</view>
			</view>
			<view style="flex-grow: 2;">
				<view :class="item.nig == hospitalID ? 'nigStyle' : item.nig == 0 ? 'nullStyle' :'otherStyle'" @click="modify(3,index)">晚上</view>
			</view>
		</view>

		<!-- 提交 -->
		<view class="flex justify-center" style="margin-top: 40rpx;" v-show="!loading">
			<u-button size="medium" shape="circle" @click="submit">确认提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.$nextTick(function() {
				this.getHostail()
				this.getWeek();
			})

		},
		data() {
			return {
				hospital: "", //现在选中的医院
				hospitalID: "1", //选中的医院ID
				hospitalListShow: false, //控制医院选择器
				// 医院列表
				hospitalList: [],

				weekTitlelist: [{
					text: '周一'
				}, {
					text: '周二'
				}, {
					text: '周三'
				}, {
					text: '周四'
				}, {
					text: '周五'
				}, {
					text: '周六'
				}, {
					text: '周日'
				}, ],
				weekList: [{
						mon: 0,
						aft: 0,
						nig: 0
					},
					{
						mon: 0,
						aft: 0,
						nig: 0
					},
					{
						mon: 0,
						aft: 0,
						nig: 0
					},
					{
						mon: 0,
						aft: 0,
						nig: 0
					},
					{
						mon: 0,
						aft: 0,
						nig: 0
					},
					{
						mon: 0,
						aft: 0,
						nig: 0
					},
					{
						mon: 0,
						aft: 0,
						nig: 0
					},
				],
				//loading
				loading:false,
				defaultList:[0]
			}
		},
		methods: {

			getHostail: async function() {
				let res = await this.$request.post("doctor/organizationList");
				if (res.status == 0) {
					let data = res.data;
					let newList = [];
					if (data.length == 0) {
						uni.showModal({
							title: '请先认证医院'
						})
					} else {
						for (let i = 0; i < data.length; i++) {
							newList.push({
								value: data[i].value,
								label: data[i].label,
								extra:i
							})
						}
					}
					this.hospitalList = newList;
					this.hospital = this.hospitalList[0].label
					this.hospitalID = this.hospitalList[0].value + ""
				}
			},

			getWeek: async function() {
				let res = await this.$request.post("doctor/getLinsDetailnew");
				console.log('res', res);
				let weekList = this.weekTitlelist;
				if (res.status == 0) {
					let newList = [];
					let data = res.data.list;
					if (data.length == 0) {
						for (let y = 0; y < 7; y++) {
							newList.push({
								mon: 0,
								aft: 0,
								nig: 0
							})
						}
					} else {
						for (let y = 0; y < 7; y++) {
							for (let i = 0; i < data.length; i++) {
								if (weekList[y].text == data[i].week) {
									this.weekList[y].mon = data[i].ident.zao_id
									this.weekList[y].aft = data[i].ident.xia_id
									this.weekList[y].nig = data[i].ident.wan_id
									// mon:data[i].ident.zao_id,
									// aft:data[i].ident.xia_id,
									// nig:data[i].ident.wan_id,
								}
							}
						}
					}
					// this.weekList = newList;

				}
			},
			/**
			 * 切换医院
			 * */
			setSelectHospital(e) {
				let t = this
				t.hospitalID = e[0].value + ""
				this.loading = true
				setTimeout(function() {
					t.defaultList[0] = e[0].extra
					t.hospital = e[0].label
					
					t.loading = false
				}, 1000)
				console.log(e)
				
			},
			/**
			 * 点击排班
			 * */
			modifys(id, index) {
				switch (id) {
					case 1:
						if (this.weekList[index].mon == this.hospitalID) {
							this.weekList[index].mon = 0;
						} else if (this.weekList[index].mon == 0) {
							this.weekList[index].mon = this.hospitalID
						}
						break;
					case 2:
						if (this.weekList[index].aft == this.hospitalID) {
							this.weekList[index].aft = 0;
						} else if (this.weekList[index].aft == 0) {
							this.weekList[index].aft = this.hospitalID
						}
						break;
					case 3:
						if (this.weekList[index].nig == this.hospitalID) {
							this.weekList[index].nig = 0;
						} else if (this.weekList[index].nig == 0) {
							this.weekList[index].nig = this.hospitalID
						}
						break;
				}
			},
			modify(id, index) {
				this.$nextTick(function() {
					this.modifys(id, index)
				})

				this.$forceUpdate();
				// switch (id) {
				// 	case 1:
				// 		if (this.weekList[index].mon == this.hospitalID) {
				// 			this.weekList[index].mon = 0;
				// 		} else if (this.weekList[index].mon == 0) {
				// 			this.weekList[index].mon = this.hospitalID
				// 		}
				// 		break;
				// 	case 2:
				// 		if (this.weekList[index].aft == this.hospitalID) {
				// 			this.weekList[index].aft = 0;
				// 		} else if (this.weekList[index].aft == 0) {
				// 			this.weekList[index].aft = this.hospitalID
				// 		}
				// 		break;
				// 	case 3:
				// 		if (this.weekList[index].nig == this.hospitalID) {
				// 			this.weekList[index].nig = 0;
				// 		} else if (this.weekList[index].nig == 0) {
				// 			this.weekList[index].nig = this.hospitalID
				// 		}
				// 		break;
				// }
			},
			submit: async function() {
				let newData = [];
				let list = this.weekList;
				for (let i = 0; i < list.length; i++) {
					newData.push({
						week: i + 1,
						identifi: {
							zao: list[i].mon,
							zhong: list[i].aft,
							wan: list[i].nig,
						}
					})
				}
				console.log("newData", newData)
				if (typeof newData == 'object') {
					newData = JSON.stringify(newData);
				}
				let res = await this.$request.post("doctor/week_scheduling", {
					'data': newData
				});

				console.log("res", res)
				if (res.status == 0) {
					uni.showToast({
						duration: 2000,
						title: '排班成功',
						success() {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.refresh = true;
							uni.navigateBack({
								delta: 1
							})
						}
					})
				} else {
					console.log(res.message)
					uni.showModal({
						duration: 2000,
						title: res.message,
					})
				}
			}
		}
	}
</script>

<style>
	/* 下拉按钮 */
	.drop-down {
		border: 1rpx solid #AAAAAA;
		font-size: 32rpx;
		flex-grow: 1;
		margin-right: 30rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 15rpx;
	}

	/* 周 */
	.week {
		margin: 30rpx 28rpx;
		border-radius: 20rpx;
		box-shadow: 12rpx 12rpx 8rpx #c8c8c8;
		padding: 20rpx;
		background-color: #FFF;
		display: flex;
		align-items: center;
	}




	/* //空按钮样式 */
	.nullStyle {
		text-align: center;
		padding: 10rpx 0;
		border: 0.3rpx solid #909399;
		background-color: #FFF;
		border-radius: 30rpx;
		color: #000;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
		width: 80%;
	}

	,
	/* //上午按钮样式 */
	.monStyle {
		text-align: center;
		padding: 10rpx 0;
		background-color: #5667c8;
		border-radius: 30rpx;
		color: #fff;
		fontWeight: bold;
		margin: 20rpx 0 10rpx 0;
		width: 80%;
	}

	,
	/* //下午按钮样式 */
	.aftStyle {
		text-align: center;
		padding: 10rpx 0;
		color: #FFF;
		border-radius: 30rpx;
		background-color: #ec9d75;
		color: #fff;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
		width: 80%
	}

	,
	/* //晚上按钮样式 */
	.nigStyle {
		text-align: center;
		padding: 10rpx 0;
		border: 0.3rpx solid #909399;
		background-color: #55aa7f;
		color: #fff;
		border-radius: 30rpx;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
		width: 80%;
	}

	,
	/* //其他医院按钮样式 */
	.otherStyle {
		text-align: center;
		padding: 10rpx 0;
		background-color: #989898;
		border-radius: 30rpx;
		color: #fff;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
		width: 80%;

	}
</style>