zy-wechat/components/inspectExecDeptModel/inspectExecDeptModel.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">
					<view class="uni-list-cell-left">
						检查科室：
					</view>
					<view class="uni-list-cell-db-text">
            <picker style="height: 100%;" @change="bindPickerChange" :value="index" :range="execDeptList" range-key="dept">
              <view class="uni-input ellipsis-oneline" :style="{ color: execDeptList[index] ? '' : '#CFCFCF'}">{{execDeptList[index]?execDeptList[index].dept:'请选择检查科室'}}</view>
            </picker>
					</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";
	export default {
		data() {
			return {
				userData: null,
				hosId: null,
				timer: null,
        index: -1,
			};
		},
		watch: {
			disjunctor(newValue) {
				console.log(newValue)
				if(newValue){
          this.index = this.execDeptList.findIndex(v => v.id == this.execDeptId)
				}
				if (newValue && this.operate.know == "返回") {
					this.time = 5;
					this.timer = setInterval(() => {
						this.time--;
						if (this.time <= 0) {
							clearInterval(this.timer);
							this.know();
						}
					}, 1000);
				}
			},
		},
		props: {
			// 显示隐藏
			disjunctor: {
				type: Boolean,
				default: false,
			},
      // 检查科室列表
			execDeptList: {
				type: Array,
				default: () => [],
			},
			// 检查科室
			execDeptId: {
				type: Number,
			},
      // 标题
			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: {
      bindPickerChange: function(e) {
        this.index = e.detail.value
      },
			// 确定
			ok() {
        if (this.index < 0) {
          uni.showToast({
            icon: 'none',
            title: '请选择检查科室！'
          })
          return;
        }
				let e = {};
				if (this.index > -1) {
					e.execDeptId = this.execDeptList[this.index].id;
				}
				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 {
				font-size: 32rpx;
				color: #666;
        flex-shrink: 0;
			}

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

			.uni-list-cell-db-text {
				flex: 1;
				text-align: left;
        border: 1px solid #DBDBDB;
        padding: 0 8rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 4rpx;
			}
		}

		.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>