zy-wechat/components/inspectRemoveModel/inspectRemoveModel.vue

<template>
	<view class="changeHospital" v-show="disjunctor">
		<view class="changeHospital__wrap">
			<view class="changeHospital__header" v-if="title">
				<text v-if="icon" class="changeHospital__icon newicon" :class="[
				    'changeHospital__icon--' + icon,
				    { 'newicon-duigou': icon === 'success' },
				    { 'newicon-shibai': icon === 'error' },
				    { 'newicon-wenhao': icon === 'warn' },
				  ]"></text>{{ title }}
			</view>
			<view class="changeHospital__article">
				<view v-if="content" class="changeHospital__content" v-html="content"></view>
				<view class="uni-list-cell" v-show="remove">
					<view class="uni-list-cell-left">
						移除原因：
					</view>
					<view class="uni-list-cell-db-text">
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in removeReasons"
								:key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="uni-list-cell" v-show="current === 1 || !remove">
					<view class="uni-list-cell-left">
						预约时间：
					</view>
					<view class="uni-list-cell-db-text">
						<uni-datetime-picker v-model="yyTime" returnType="date" :start="startTimestamp" @change="dateChange($event)"/>
					</view>
				</view>
				<view class="uni-list-cell" v-show="current === 1 || !remove">
					<view class="uni-list-cell-left">
						结束时间：
					</view>
					<view class="uni-list-cell-db-text">
						{{yyEndTime}}
					</view>
				</view>
			</view>
			<view class="changeHospital__footer">
				<view v-if="operate.ok" class="changeHospital__ok" @click="ok" hover-class="seimin-btn-hover">
					{{ operate.ok || "" }}
				</view>
				<view v-if="operate.cancel" class="changeHospital__cancel" @click="cancel"
					hover-class="seimin-btn-hover">
					{{ operate.cancel || "" }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "../../http/http.js";
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				startTimestamp: Date.now(),
				removeReasons: [{
						value: '1',
						name: '检查已做',
					},
					{
						value: '2',
						name: '修改检查时间',
					},
					{
						value: '3',
						name: '错误建单申请',
					},
				],
				current: -1,
				userData: null,
				hosId: null,
				timer: null,
				yyTime: '', //预约时间
				yyEndTime:'', //预约结束时间
			};
		},
		watch: {
			disjunctor(newValue) {
				if(newValue){
					this.startTimestamp = Date.now();
					this.current = -1;
					this.yyTime = this.yy ? new Date(this.yy) : dayjs().format('YYYY-MM-DD HH:mm:ss');
					this.setDate(this.yyTime)
				}
				if (newValue && this.operate.know == "返回") {
					this.time = 5;
					this.timer = setInterval(() => {
						this.time--;
						if (this.time <= 0) {
							clearInterval(this.timer);
							this.know();
						}
					}, 1000);
				}
			},
		},
		props: {
      // 预约时间
      yy: {
      	type: String,
      	default: '',
      },
			// 当前项
			currentInspect:{
				type: Object,
				default: {},
			},
			// 系统配置间隔时长
			yytimeGapMinute:{
				type: Number,
				default: 0,
			},
			// 是否移除检查
			remove: {
				type: Boolean,
				default: false,
			},
			// 显示隐藏
			disjunctor: {
				type: Boolean,
				default: false,
			},
			// 标题
			title: {
				type: String,
				default: "提示",
			},
			// 图标
			icon: {
				type: String,
				default: "success",
			},
			// 内容
			content: {
				type: String,
				default: "",
			},
			// 操作按钮文字
			operate: {
				type: Object,
				default: () => {
					return {
						ok: "确认",
						cancel: "取消",
					};
				},
			},
			name: {
				type: String,
				default: '交接人'
			}
		},
		methods: {
			dateChange(e){
				if(e){
					this.setDate(e)
				}else{
					this.yyEndTime = null
				}
			},
			// 设置预约结束时间
			setDate(yyTime){
				let date = dayjs(new Date(yyTime));
				let num = this.currentInspect.inspectCheckType.extra1?this.currentInspect.inspectCheckType.extra1:undefined
				let newDate = date.add(num ? num : this.yytimeGapMinute, 'minute'); 
				let endTime = new Date(newDate);
				this.yyEndTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
			},
			radioChange: function(evt) {
				this.yyTime = '';
				this.startTimestamp = Date.now();
				for (let i = 0; i < this.removeReasons.length; i++) {
					if (this.removeReasons[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			// 确定
			ok() {
				let date = dayjs(new Date(this.yyTime));
				let num = this.currentInspect.inspectCheckType.extra1?this.currentInspect.inspectCheckType.extra1:undefined
				let newDate = date.add(num ? num : this.yytimeGapMinute, 'minute'); 
				let endTime = new Date(newDate);
				let e = {
					yyEndTime: endTime.getTime()
				};
				if (this.current > -1) {
					e.value = this.removeReasons[this.current].value;
				}
				if (this.yyTime) {
					e.yyTime = this.yyTime.Format("yyyy-MM-dd hh:mm:ss");
				}
				this.$emit("ok", e);
			},
			// 取消
			cancel() {
				this.$emit("cancel");
			},
		},
		created() {
			this.hosId = uni.getStorageSync('userData').user.currentHospital.id;
		}
	};
</script>

<style lang="less" scoped>
  .changeHospital__icon {
  	font-size: 40rpx;
    margin-right: 8rpx;
  	&.changeHospital__icon--success {
  		color: rgb(52, 179, 73);
  	}
  
  	&.changeHospital__icon--warn {
  		color: rgb(245, 165, 35);
  	}
  
  	&.changeHospital__icon--error {
  		color: rgb(255, 58, 82);
  	}
  }
	.changeHospital {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 999;

		.uni-list-cell {
			width: 95%;
			display: flex;
			flex-direction: row;
			// justify-content: space-evenly;
			align-items: center;
			text-align: center;
			margin-top: 32rpx;

			.uni-list-cell-left {
				flex: 2;
				font-size: 32rpx;
				color: #666;
			}

			.uni-list-cell-db {
				border: 1px solid #e5e9ed;
				background-color: #fff;
				padding: 16rpx 0;
				flex: 5;
			}

			.uni-list-cell-db-text {
				flex: 5;
				text-align: left;
			}
		}

		.changeHospital__wrap {
			width: 90vw;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			border-radius: 12rpx;
			color: #666;

			.changeHospital__header {
				font-size: 36rpx;
				color: #000;
				height: 84rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.changeHospital__article {
				width: 90%;
				margin: 0 auto 25rpx;
				padding: 48rpx 0;
				background-color: rgb(249, 250, 251);
				border: 2rpx solid rgb(229, 233, 237);
				border-radius: 12rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&.p0 {
					padding: 0;
				}

				.changeHospital__content {
					font-size: 32rpx;
				}

				.changeHospital__info {
					font-size: 32rpx;
					color: rgb(102, 102, 102);
				}

				.specialCloseFlag {
					width: 90%;
					height: 100%;
					padding: 16rpx;
				}

				.radio-wrap {
					.radio-item {
						margin-top: 16rpx;

						/deep/ .uni-radio-input-checked {
							background-color: #49b856 !important;
							border-color: #49b856 !important;
						}
					}
				}
			}

			.changeHospital__footer {
				box-sizing: border-box;
				height: 100rpx;
				border-top: 2rpx solid rgb(229, 233, 237);
				display: flex;
				align-items: center;

				view {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
					color: rgb(102, 102, 102);
					position: relative;

					&:nth-of-type(2)::before {
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						width: 2rpx;
						height: 87rpx;
						background-color: rgb(229, 233, 237);
					}
				}

				.changeHospital__ok {
					flex: 1;
					color: rgb(73, 184, 86);
				}

				.changeHospital__cancel {
					flex: 1;
				}

				.changeHospital__know {
					flex: 1;
					color: rgb(73, 184, 86);
				}
			}
		}
	}
</style>