carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-before1.vue

<template>
	<div class="throm-befor1">
		<a-form class="medical-form" :form="form" layout="vertical">
			<a-form-item class="jmrs-form-item pt" v-for="(k, v) in recordDict" :key="v">
				<div class="jmrs-form-item-con" :class="k.type">
					<div class="ant-form-item-label">
						<label :for="`${v}`">
							{{ `${k.text}` }}
							<span class="label-info" v-if="k.description">
								{{ k.description }}
							</span>
							<a-tooltip placement="top">
								<template slot="title">
									<div v-for="(k, v) in k.labelList" :key="k">
										{{ `${k}` }}
									</div>
								</template>
								<a-icon v-if="k.labelList" class="item-icon" type="question-circle" />
							</a-tooltip>
						</label>
					</div>
					<div class="">
						<!-- slider -->
						<div class="common-slider" v-if="k.type === 'slider'">
							<van-stepper :disabled="writeAble" :integer="true" v-model="k.value" step="10" class="ten"
								theme="round" />
							<van-stepper :disabled="writeAble" :integer="true" v-model="k.value" step="5" class="five"
								theme="round" />
							<van-stepper :disabled="writeAble" :integer="true" v-model="k.value" step="1" class="one"
								theme="round" />
							<van-slider :disabled="writeAble" class="common-slider-slider" :min="0" :max="300" step="10"
								v-model="k.value">
								<template #button>
									<a-input-number :disabled="writeAble" type="number" id="inputNumber"
										v-model="k.value" :min="0" :max="300" />
									<a-icon class="slider-icon" type="caret-down" />
									<div class="inner-circle"></div>
								</template>
							</van-slider>
						</div>
						<!-- radio  -->
						<div class="mrsitem">
							<a-radio-group :disabled="writeAble" size="large" v-if="k.type === 'radio'"
								v-decorator="[v, { initialValue: k.default }]" button-style="solid"
								@change="changeRadio($event, v)">
								<a-radio-button :disabled="writeAble" v-for="(item, index) in k.range" :key="item"
									:value="item">
									{{ item }}
								</a-radio-button>
							</a-radio-group>
						</div>
						<div class="niss-list" v-if="k.type === 'pageText'">
							<div class="niss-list-item">
								<div class="item-name">
									<span class="item-info">得分</span>
								</div>
								<a-input-number :type="k.inputType" :min="0" style="width: 20%; margin-left: 20px"
									v-decorator="[v]" />
							</div>
							<div class="niss-list-item" v-for="(item, index) in k.range" :key="item.text">
								<div class="item-name">
									<span class="item-info">{{
										item.text
									}}</span>
									<a-tooltip placement="top">
										<template slot="title">
											{{ item.description }}
										</template>
										<a-icon v-if="item.description" class="item-icon" type="question-circle" />
									</a-tooltip>
								</div>
								<a-input-number :disabled="writeAble" ref="inputNumber" class="noControls"
									@change="handleInputChange($event, item, v)" v-if="item.hidePopover"
									style="width: 20%; margin-left: 20px" v-model="item.value" :min="item.range[0]"
									:max="item.range[1]" />
								<a-popover v-model="item.visible" placement="bottom" v-else>
									<template slot="content" v-if="item.range">
										<a-radio-group :disabled="writeAble" v-model="nissValue" button-style="solid"
											@change="changeRangeRadio(item, v)">
											<a-radio-button v-for="(
													val, index
												) in item.range" :key="val.value" :value="val.value" @click="item.visible = false">
												{{ val.value }}
											</a-radio-button>
										</a-radio-group>
									</template>
									<a-input-number :disabled="writeAble" ref="inputNumber" class="noControls"
										@focus="focusInput(index)" @click="changeInput($event, item)"
										style="width: 20%; margin-left: 20px" v-model="item.value" :min="0" :max="10" />
								</a-popover>
							</div>
						</div>
					</div>
				</div>
			</a-form-item>
		</a-form>
		<div class="throm-common-button">
			<a-button :disabled="writeAble" class="" block type="primary" size="large" @click="onSubmit">下一步</a-button>
		</div>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		EMERGENCY_CODE,
		EMERGENCY_Q_CODE,
		EMERGENCY_15_CODE,
		EMERGENCY_30_CODE,
		EMERGENCY_45_CODE,
		EMERGENCY_60_CODE,
		NIHSS_LIST,
	} from '@/config/code.js';
	export default {
		name: 'Emergency',
		data() {
			return {
				NIHSS_LIST,
				nissValue: '',
				form: this.$form.createForm(this, {
					name: 'Emergency',
				}),
				codeForm: {
					'RYPG-SYSTOLIC-PRESSURE': '',
					'RYPG-DIASTOLIC-PRESSURE': '',
					'RYPG-MRS': '',
					'RYPG-NIHSS': '',
				},
				codeFormData: {
					'JMRS-Q-NIHSS': {
						'JMRS-Q-NIHSS': '',
						'JMRS-Q-DIASTOLIC-PRESSURE': '',
						'JMRS-Q-SYSTOLIC-PRESSURE': '',
					},
					'JMRS-15-NIHSS': {
						'JMRS-15-NIHSS': '',
						'JMRS-15-SYSTOLIC-PRESSURE': '',
						'JMRS-15-DIASTOLIC-PRESSURE': '',
					},
					'JMRS-30-NIHSS': {
						'JMRS-30-NIHSS': '',
						'JMRS-30-SYSTOLIC-PRESSURE': '',
						'JMRS-30-DIASTOLIC-PRESSURE': '',
					},
					'JMRS-45-NIHSS': {
						'JMRS-45-NIHSS': '',
						'JMRS-45-SYSTOLIC-PRESSURE': '',
						'JMRS-45-DIASTOLIC-PRESSURE': '',
					},
					'JMRS-60-NIHSS': {
						'JMRS-60-NIHSS': '',
						'JMRS-60-SYSTOLIC-PRESSURE': '',
						'JMRS-60-DIASTOLIC-PRESSURE': '',
					},
				},
				EMERGENCY_CODE,
				recordDict: EMERGENCY_CODE,
				dataForm: {
					'JMRS-Q-NIHSS': EMERGENCY_Q_CODE,
					'JMRS-15-NIHSS': EMERGENCY_15_CODE,
					'JMRS-30-NIHSS': EMERGENCY_30_CODE,
					'JMRS-45-NIHSS': EMERGENCY_45_CODE,
					'JMRS-60-NIHSS': EMERGENCY_60_CODE,
				},
			};
		},
		components: {},
		computed: {
			...mapState('patient', ['patientData', 'timerData', 'writeAble']),
		},
		mounted() {
			const {
				code
			} = this.timerData;
			if (code) {
				this.recordDict = this.dataForm[`${code}`];
			} else {
				this.recordDict = EMERGENCY_CODE;
			}

			const {
				recordValDict
			} = this.patientData;
			if (recordValDict) {
				this.$nextTick(() => {
					// console.log('recordValDict', recordValDict)
					this.echo(recordValDict);
				});
			}
		},
		methods: {
			...mapMutations('patient', ['setPatientData']),
			echo(data) {
				const {
					code
				} = this.timerData;
				// console.log('code', code)
				const wangbadan = code ?
					this.codeFormData[`${code}`] :
					this.codeForm;
				for (let k in wangbadan) {
					if (data[k]) {
						const {
							answer
						} = data[k][0];
						this.form.getFieldDecorator([`${k}`], {
							preserve: true, //即便字段不再使用，也保留该字段的值
						});

						this.form.setFieldsValue({
							[`${k}`]: answer.toString(),
						});
						let value = this.recordDict[k];

						if (value && value.value && k !== 'RYPG-MRS') {
							value.value = Number(answer.toString());
						} else if (value && value.value) {
							value.value = answer.toString();
						}

					}
				}
				for (let k in this.NIHSS_LIST) {
					if (data['RYPG-NIHSS' + this.NIHSS_LIST[k].key]) {
						this.NIHSS_LIST[k].value = Number(data['RYPG-NIHSS' + this.NIHSS_LIST[k].key][0]?.answer[0])
					}
				}
			},
			focusInput(index) {
				this.$refs.inputNumber[index].readOnly = true;
				this.$refs.inputNumber[index].blur();
			},
			changeInput(value, item) {
				item.visible = false;
				item.value = value;
				this.nissValue = '';
			},
			changeRangeRadio(row, code) {
				const text = row.text;
				let score = 0;
				let NIHSS_LIST = [].concat(this.NIHSS_LIST);
				NIHSS_LIST.forEach((item, index) => {
					if (item.text === text) {
						item.value = this.nissValue;
					}
					if (item.value) {
						score += item.value;
					}
				});
				this.form.getFieldDecorator([`${code}`], {
					preserve: true, //即便字段不再使用，也保留该字段的值
				});
				this.form.setFieldsValue({
					[`${code}`]: score,
				});
				row.visible = false;
			},
			handleInputChange(val, row, code) {
				const text = row.text;
				let score = 0;
				let NIHSS_LIST = [].concat(this.NIHSS_LIST);
				NIHSS_LIST.forEach((item, index) => {
					console.log(typeof val)
					if (item.text === text) {
						item.value = val;
					}
					if (item.value) {
						score += item.value;
					}
				});
				this.form.getFieldDecorator([`${code}`], {
					preserve: true, //即便字段不再使用，也保留该字段的值
				});
				this.form.setFieldsValue({
					[`${code}`]: score
				});
			},
			changeRadio(e, v) {
				this.codeForm[v] = e.target.value;
			},
			computeShow(code, codeForm) {
				return this.utils.computeShow(code, codeForm);
			},
			async onSubmit(e) {
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					// if (err) return
					const {
						firstAidId
					} = this.patientData;
					let codeAndAnswerList = [];
					const {
						recordDict
					} = this;
					const codes = [
						'RYPG-MRS',
						'RYPG-NIHSS',
						'JMRS-Q-NIHSS',
						'JMRS-15-NIHSS',
						'JMRS-30-NIHSS',
						'JMRS-45-NIHSS',
						'JMRS-60-NIHSS',
					];
					const codesEm = ['RYPG-MRS', 'RYPG-NIHSS'];
					const codesQ = [
						'JMRS-Q-NIHSS',
						'JMRS-15-NIHSS',
						'JMRS-30-NIHSS',
						'JMRS-45-NIHSS',
						'JMRS-60-NIHSS',
					];

					for (let k in recordDict) {
						if (
							recordDict[k].value &&
							recordDict[k].value !== 'undefined' &&
							recordDict[k].value !== 'null'
						) {
							if (!codes.includes(k)) {
								codeAndAnswerList.push({
									questionCode: k,
									answer: [recordDict[k].value],
									time: '',
								});
							}
						}
					}

					for (let k in values) {
						if (
							// this.$route.name === 'Emergency' &&
							this.$route.name === 'Thrombolysis' &&
							codesEm.includes(k) &&
							values[k] !== 'undefined' &&
							values[k] !== 'null'
						) {
							codeAndAnswerList.push({
								questionCode: k,
								answer: [values[k]],
								time: '',
							});
						} else if (
							this.$route.name === 'Min' &&
							codesQ.includes(k) &&
							values[k] !== 'undefined' &&
							values[k] !== 'null'
						) {
							codeAndAnswerList.push({
								questionCode: k,
								answer: [values[k]],
								time: '',
							});
						}
					}
					for (let k in this.NIHSS_LIST) {
						if (this.NIHSS_LIST[k].value) {
							codeAndAnswerList.push({
								questionCode: 'RYPG-NIHSS' + this.NIHSS_LIST[k].key,
								answer: [this.NIHSS_LIST[k].value || 0],
								time: '',
							});
						}

					}

					console.log('codeAndAnswerList', codeAndAnswerList)

					this.home.updateAidCode({
						codeAndAnswerList,
					}, false);

					this.$emit('next')
				});
			},
		},
		beforeDestroy() {
			console.log('beforeDestroy')
			NIHSS_LIST.forEach((item, index) => {
				item.value = null;
			});
			this.NIHSS_LIST = NIHSS_LIST;
		},
	};
</script>

<style scoped lang="less">
	.throm-befor1 {
		// padding: 1rem;
		flex: 1;
		display: flex;
		flex-direction: column;

		// .noControls {
		// 	/deep/ .ant-input-number-handler-wrap {
		// 		display: none;
		// 	}
		// }

		// 	.patient-form {
		// 		flex: 1;
		// 		overflow-y: auto;

		// 		.pt {
		// 			padding-top: 36px;
		// 		}

		// 		.content-left {
		// 			width: 30%;

		// 			label {
		// 				display: flex;
		// 				align-items: center;
		// 			}
		// 		}

		// 		.content-right {
		// 			flex: 1;
		// 		}
		// 	}

		// 	.xy-wrapper {
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 		padding-bottom: 20px;

		// 		.xy-label {
		// 			font-size: 26px;
		// 			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		// 			font-weight: 500;
		// 			text-align: left;
		// 			color: #565e6f;
		// 		}
		// 	}

		.niss-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.niss-list-item {
				width: 45%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;

				.item-name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
				}

				.item-info {
					flex: 1;
					font-size: 1rem;
					font-family: Source Han Sans CN, Source Han Sans CN-Bold;
					font-weight: 600;
					text-align: left;
					color: #565e6f;
				}
			}
		}

		.item-icon {
			width: 25px;
			font-size: 22px;
			color: #007AFF;
		}

	}

	// .common-slider-slider{
	// 	background: linear-gradient(#007AFF, #52A5FF);
	// }
	// .common-slider .common-slider-slider .slider-icon{
	// 	color: #007AFF;
	// 	// position: relative;
	// 	// left: -0.64vw;
	// 	// top: -3.6vw;

	// }
</style>

<style lang="less">
	.throm-befor1 {
		.ant-form .ant-form-item {
			margin-bottom: 1.5rem;
		}

		.ant-form .ant-form-item {
			border: none;
		}
	}

	.mrsitem {
		text-align: center;
	}

	// .common-slider .common-slider-slider .ant-input-number .ant-input-number-input {
	// 	text-align: center;
	// 	font-size: 2vw;
	// }
	// .common-slider .common-slider-slider .van-slider__button-wrapper {
	// 	background: #fff;
	// 	// border: 0.6vw solid #007AFF;
	// 	// width: 2.5vw;
	// 	// height: 2.5vw;
	// }
</style>