carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-result-firstInfo.vue

<template>
	<div class="Overviewbasicr">
		<div class="first-content">
			<!-- 患者急救记录 -->
			<div class="basicr-back">
				<a-form class="detail-form" :form="firstForm">
					<a-form-item class="jmrs-form-item" v-for="(k, v) in AID_CODE" :key="v">
						<div class="jmrs-form-item-con">
							<div class="content-left ant-form-item-label">
								<label :for="`FirstInfo_${v}`" v-if="k.text">
									{{ `${k.text}` }}
									<span v-if="k.description" class="label-info">{{ k.description }}</span>
								</label>
							</div>
							<div class="content-right">
								<!-- text -->
								<a-input :disabled="writeAble" v-if="k.type === 'text'" type="text" v-decorator="[v]"
									readOnly />
								<!-- input -->
								<a-input :disabled="writeAble" v-if="k.type === 'input'" :type="k.inputType"
									v-decorator="[v]" @blur="handleChange($event.target.value, v)" placeholder="请输入" />
								<!-- datetime -->
								<a-input :disabled="writeAble" v-if="k.type === 'datetime'" readOnly
									@click="selectOption(v)" v-decorator="[v]" placeholder="请选择" />
								<a-select :disabled="writeAble" v-if="k.type === 'select'" v-decorator="[v]"
									@change="handleChange($event, v)" placeholder="请选择" style="display: block;">
									<a-select-option v-for="(item, val) in k.range" :key="val">
										{{ val }}
									</a-select-option>
								</a-select>
								<!-- radio -->
								<a-radio-group :disabled="writeAble" v-if="k.type === 'radio'" v-decorator="[v]"
									@change="
										handleChange($event.target.value, v)
									">
									<a-radio v-for="(item, index) in k.range" :key="item" :value="item">
										{{ item }}
									</a-radio>
								</a-radio-group>
								<!-- pageText -->
								<a-input :disabled="writeAble" v-if="k.type === 'pageText'"
									@blur="handleChange($event.target.value, v)" v-decorator="[v]" placeholder="请输入" />
							</div>
						</div>
					</a-form-item>
				</a-form>
			</div>
			<v-head text="主要治疗操作"></v-head>
			<div class="basicr-back">
				<a-form class="detail-form" :form="firstForm">
					<a-form-item class="jmrs-form-item" v-for="(k, v) in JMRS_CODE" :key="v"
						v-if="computeShow(v, codeForm)">
						<!-- operate === collapse -->
						<a-collapse class="jmrs-form-item-con" v-if="k.operate === 'collapse'" :bordered="false"
							expandIconPosition="right">
							<a-collapse-panel key="1" :header="k.operateData.text">
								<div class="collapse-content" v-for="item in k.operateData.code" :key="item">
									<div class="content-left ant-form-item-label">
										<label :for="`FirstInfo_${JMRS_CODE[item]}`" v-if="JMRS_CODE[item].text">
											{{ `${JMRS_CODE[item].text}` }}
											<span v-if="
													JMRS_CODE[item].description
												" class="label-info">{{
													JMRS_CODE[item].description
												}}</span>
										</label>
									</div>
									<div class="content-right">
										<!-- input -->
										<a-input :disabled="writeAble" v-if="
												JMRS_CODE[item].type === 'input'
											" :type="item.inputType" v-decorator="[item]" @blur="
												handleChange(
													$event.target.value,
													v
												)
											" placeholder="请输入" />
										<!-- pageText -->
										<a-input :disabled="writeAble" v-if="
												JMRS_CODE[item].type ===
												'pageText'
											" @blur="
												handleChange(
													$event.target.value,
													item
												)
											" :type="item.inputType" v-decorator="[item]" placeholder="请输入" />
									</div>
								</div>
							</a-collapse-panel>
						</a-collapse>
						<!-- operate === jump -->
						<div v-else-if="k.operate === 'jump'" class="jmrs-form-item-con">
							<div class="content-left ant-form-item-label" v-if="k.text">
								<label :for="`FirstInfo_${v}`">
									{{ `${k.text}` }}
									<span v-if="k.description" class="label-info">{{ k.description }}</span>
								</label>
							</div>
							<div class="content-right" @click="toMore(k.path.name)">
								<div class="operate fz24">
									{{ k.rightText }}
								</div>
							</div>
						</div>
						<div class="jmrs-form-item-con" v-else :class="k.type">
							<div class="content-left ant-form-item-label">
								<label :for="`FirstInfo_${v}`" v-if="k.text">
									{{ `${k.text}` }}
									<span v-if="k.description" class="label-info">{{ k.description }}</span>
								</label>
							</div>
							<div class="content-right">
								<!-- text -->
								<a-input :disabled="writeAble" v-if="k.type === 'text'" type="text" v-decorator="[v]"
									readOnly />
								<!-- modal -->
								<a-input :disabled="writeAble" v-if="k.type === 'modal'" :placeholder="k.rightText"
									@click="toInform" type="text" v-decorator="[v]" readOnly />
								<!-- radio -->
								<a-radio-group :disabled="writeAble" v-if="k.type === 'radio'" v-decorator="[
										v,
										{ initialValue: k.default },
									]" @change="
										handleChange($event.target.value, v)
									">
									<a-radio v-for="(item, index) in k.range" :key="item" :value="item">
										{{ item }}
									</a-radio>
								</a-radio-group>
								<!-- checkbox -->
								<a-checkbox-group :disabled="writeAble" v-if="k.type === 'checkbox'" :options="k.range"
									v-decorator="[
										v,
										{ initialValue: k.default },
									]" @change="
										handleChange($event, v, null, k.type)
									" />
								<!-- input -->
								<a-input :disabled="writeAble" v-if="k.type === 'input'" :type="k.inputType"
									v-decorator="[v]" @blur="handleChange($event.target.value, v)" placeholder="请输入" />
								<!-- datetime -->
								<a-input :disabled="writeAble" v-if="k.type === 'datetime'" readOnly
									@click="selectOption(v)" v-decorator="[
										v,
										{ initialValue: k.default },
									]" placeholder="请选择" />
								<a-select :disabled="writeAble" v-if="k.type === 'select'" v-decorator="[
										v,
										{ initialValue: k.default },
									]" @change="handleChange($event, v)" placeholder="请选择" style="display: block;">
									<a-select-option v-for="(item, v) in k.range" :key="item">
										{{ item }}
									</a-select-option>
								</a-select>
								<!-- pageText -->
								<a-input :disabled="writeAble" v-if="k.type === 'pageText'"
									@blur="handleChange($event.target.value, v)" v-decorator="[
										v,
										{ initialValue: k.default },
									]" placeholder="请输入" />
							</div>
						</div>
					</a-form-item>
					<!-- 不良反应 -->
					<div class="adverse">
						<a-collapse class="jmrs-form-item-con" :bordered="false" expandIconPosition="right">
							<a-collapse-panel key="1" header="不良反应">
								<Adverse source="first" ref="adverse" />
							</a-collapse-panel>
						</a-collapse>
					</div>
				</a-form>
			</div>
			<v-head text="血管内治疗"></v-head>
			<div class="basicr-back">
				<a-form class="detail-form" :form="firstForm">
					<a-form-item class="jmrs-form-item" v-for="(k, v) in XGZL_CODE" :key="v"
						v-if="computeShow(v, codeForm)">
						<div class="jmrs-form-item-con" :class="k.type">
							<div class="content-left ant-form-item-label">
								<label :for="`FirstInfo_${v}`" v-if="k.text">
									{{ `${k.text}` }}
									<span v-if="k.description" class="label-info">{{ k.description }}</span>
								</label>
							</div>
							<div class="content-right">
								<!-- text -->
								<a-input :disabled="writeAble" v-if="k.type === 'text'" type="text" v-decorator="[v]"
									readOnly />
								<!-- radio -->
								<a-radio-group :disabled="writeAble" v-if="k.type === 'radio'" v-decorator="[v]"
									@change="
										handleChange($event.target.value, v)
									">
									<a-radio v-for="(item, index) in k.range" :key="item" :value="item">
										{{ item }}
									</a-radio>
								</a-radio-group>
								<!-- input -->
								<a-input :disabled="writeAble" v-if="k.type === 'input'" :type="k.inputType"
									v-decorator="[v]" @blur="handleChange($event.target.value, v)" placeholder="请输入" />
								<!-- checkbox -->
								<a-checkbox-group :disabled="writeAble" v-if="k.type === 'checkbox'" :options="k.range"
									v-decorator="[v]" @change="
										handleChange($event, v, null, k.type)
									" />
								<!-- datetime -->
								<a-input :disabled="writeAble" v-if="k.type === 'datetime'" readOnly
									@click="selectOption(v)" v-decorator="[v]" placeholder="请选择" />
								<a-select :disabled="writeAble" v-if="k.type === 'select'" v-decorator="[v]"
									@change="handleChange($event, v)" placeholder="请选择">
									<a-select-option v-for="(item, v) in k.range" :key="item">
										{{ v }}
									</a-select-option>
								</a-select>
								<!-- pageText -->
								<a-input :disabled="writeAble" v-if="k.type === 'pageText'"
									@blur="handleChange($event.target.value, v)" v-decorator="[v]" placeholder="请输入" />
							</div>
						</div>
					</a-form-item>
				</a-form>
			</div>
			<div class="common-picker">
				<van-datetime-picker v-if="pickerVisable" v-model="currentDate" :formatter="formatter"
					@cancel="pickerVisable = false" @confirm="onConfirm" />
			</div>
			<a-modal class="first" :width="900" wrapClassName="first-modal" :destroyOnClose="true"
				v-model="modalVisable" @ok="modalVisable = false" :footer="null">
				<!-- <Informed ref="informed" source="first" @on-success="successInformed" /> -->
			</a-modal>
		</div>
		<div class="throm-common-button">
			<a-button :disabled="writeAble" class="" block type="primary" size="large"
				@click="onSubmit($event, patientId)">{{patientId? '保存' : '完成'}}</a-button>
			<!-- <a-button :disabled="writeAble" type="link" size="large" @click="onSubmit">
				保存<a-icon type="check" />
			</a-button> -->
		</div>
	</div>
</template>

<script>
	import Adverse from '@/views/ing/Adverse.vue';
	import Informed from '@/views/before/Informed.vue';
	import head from '@/views/Patient/components/title.vue';
	// import headTitle from '@/Patient/components/title'
	import {
		idcardInfo,
		queryAidRecord
	} from 'api';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		AID_CODE,
		JMRS_CODE,
		XGZL_CODE
	} from '@/config/code.js';
	export default {
		name: 'FirstInfo',
		data() {
			return {
				// 知情同意书弹窗
				modalVisable: false,
				AID_CODE,
				JMRS_CODE,
				XGZL_CODE,
				// 当前选中日期
				currentDate: new Date(),
				//日期选择器是否展示
				pickerVisable: false,
				radioStyle: {
					display: 'block',
					height: '30px',
					lineHeight: '30px',
				},
				firstForm: this.$form.createForm(this, {
					name: 'FirstInfo',
				}),
				//页面中使用code
				codeForm: {
					'RYPG-HEIGHT': '',
					'RYPG-WEIGHT': '',
					'RYPG-SYSTOLIC-PRESSURE': '',
					'RYPG-DIASTOLIC-PRESSURE': '',
					'RYPG-PULSE': '',
					'RYPG-MRS': '',
					'RYPG-NIHSS': '',
					'RYPG-BLOOD-TIME': '',
					'RYPG-BLOOD-SUGAR': '',
					'RYPG-ECG-TIME': '',
					'RYPG-CT-DD-TIME': '',
					'RYPG-CT-OUTSIZE': '',
					'JMRS-Y': '',
					'JMRS-WRSYY': '',
					'JMRS-WRSYY-ELSE': '',
					'JMRS-TH-TIME': '',
					'JMRS-SIGN': '',
					'JMRS-Q-NIHSS': '',
					'JMRS-Q-SYSTOLIC-PRESSURE': '',
					'JMRS-Q-DIASTOLIC-PRESSURE': '',
					'JMRS-RSCS': '',
					'JMRS-TIME': '',
					'JMRS-RSYW': '',
					'JMRS-RSYW-ZL': '',
					'JMRS-TZJL': '',
					'JMRS-JDJL': '',
					'JMRS-15-NIHSS': '',
					'JMRS-15-SYSTOLIC-PRESSURE': '',
					'JMRS-15-DIASTOLIC-PRESSURE': '',
					'JMRS-30-NIHSS': '',
					'JMRS-30-SYSTOLIC-PRESSURE': '',
					'JMRS-30-DIASTOLIC-PRESSURE': '',
					'JMRS-45-NIHSS': '',
					'JMRS-45-SYSTOLIC-PRESSURE': '',
					'JMRS-45-DIASTOLIC-PRESSURE': '',
					'JMRS-60-NIHSS': '',
					'JMRS-60-SYSTOLIC-PRESSURE': '',
					'JMRS-60-DIASTOLIC-PRESSURE': '',
					'JMRS-BFZ': '',
					'XGZL-Y': '',
					'XGZL-WZLYY': '',
					'XGZL-WZLYY-ELSE': '',
					'XGZL-ZQTH-TIME': '',
					'XGZL-ZQTH-QZ': '',
					'XGZL-SQ-NIHSS': '',
					'XGZL-SQ-ASPECT-CT': '',
					'XGZL-SQ-ASPECT-MRI': '',
					'XGZL-SQ-TICI': '',
					'XGZL-CCWC-TIME': '',
					'XGZL-XGKT': '',
					'XGZL-SH-SCXGZTSJ': '',
					'XGZL-BFZ': '',
					'XGZL-BFZ-ELSE': '',
				},
				selectCode: '', // 当前选中code
			};
		},
		props: ['patientId'],
		components: {
			'v-head': head,
			Adverse,
			Informed,
		},
		computed: {
			...mapState('patient', ['patientData', 'writeAble']),
			...mapState('storm', ['nationList']),
		},
		// mounted() {
		// 	this.$nextTick(() => {
		// 		if (this.patientData) {
		// 			this.echo(this.patientData);
		// 		}
		// 	});
		// },
		async mounted() {
			console.log('patientId', this.patientId)
			if (this.patientId) {
				const res = await queryAidRecord(this.patientId)

				this.$nextTick(() => {
					this.echo(res.data)
				})
			} else {
				this.$nextTick(() => {
					if (this.patientData) {
						this.echo(this.patientData)
					}
				})
			}

		},
		methods: {
			...mapMutations('patient', ['setPatientData']),
			successInformed() {
				this.modalVisable = false;
			},
			// 去签署
			toInform() {
				this.modalVisable = true;
				this.$nextTick(() => {
					this.$refs.informed.open();
				});
			},
			echo(data) {
				const {
					recordValDict,
					patientGender
				} = data;
				this.firstForm.getFieldDecorator(['RYPG-GENDER'], {
					preserve: true, //即便字段不再使用，也保留该字段的值
				});
				this.firstForm.setFieldsValue({
					['RYPG-GENDER']: patientGender === 1 ? '女' : '男',
				});
				for (let k in recordValDict) {
					if (recordValDict[k]) {
						let answer = recordValDict[k][0].answer;
						this.firstForm.getFieldDecorator([`${k}`], {
							preserve: true, //即便字段不再使用，也保留该字段的值
						});
						if (k === 'RYPG-WEIGHT' || k === 'RYPG-HEIGHT') {
							let weight =
								recordValDict['RYPG-WEIGHT'] &&
								recordValDict['RYPG-WEIGHT'][0].answer.toString();
							let height =
								recordValDict['RYPG-HEIGHT'] &&
								recordValDict['RYPG-HEIGHT'][0].answer.toString();
							this.firstForm.setFieldsValue({
								'RYPG-BMI': this.utils.computeBMI(weight, height),
							});
						}
						if (Object.keys(this.codeForm).includes(k)) {
							this.codeForm[k] = answer.toString() || '';
							//多选
							if (
								k !== 'JMRS-WRSYY' &&
								k !== 'JMRS-BFZ' &&
								k !== 'XGZL-WZLYY' &&
								k !== 'XGZL-BFZ' &&
								k !== 'XGZL-XGKT'
							) {
								answer = answer.toString() || '';
							}
							this.firstForm.setFieldsValue({
								[`${k}`]: answer,
							});
						}
					}
				}
			},
			toMore(name) {
				if (!name) return;
				this.$router.push({
					name,
				});
			},
			computeShow(code, codeForm) {
				return this.utils.computeShow(code, codeForm);
			},
			selectOption(v) {
				this.selectCode = v;
				this.pickerVisable = true;
			},
			//
			onConfirm(date) {
				this.firstForm.setFieldsValue({
					[`${this.selectCode}`]: this.utils.format(date),
				});
				this.pickerVisable = false;
				// this.updateAidBase(this.selectCode, this.utils.format(date))
			},
			//格式化日期
			formatter(type, val) {
				if (type === 'year') {
					return val + '年';
				}
				if (type === 'month') {
					return val + '月';
				}
				if (type === 'day') {
					return val + '日';
				}
				if (type === 'hour') {
					return val + '时';
				}
				if (type === 'minute') {
					return val + '分';
				}
				return val;
			},
			handleChange(value, code, type, show) {
				this.codeForm[code] = value;
				if (show === 'checkbox') {
					this.utils.computeShow(code, this.codeForm);
				}
				if (code === 'RYPG-WEIGHT' || code === 'RYPG-HEIGHT') {
					this.codeForm['RYPG-BMI'] = this.utils.computeBMI(
						this.codeForm['RYPG-WEIGHT'],
						this.codeForm['RYPG-HEIGHT']
					);
					this.firstForm.setFieldsValue({
						['RYPG-BMI']: this.codeForm['RYPG-BMI'],
					});
				}
				// this.updateAidBase(code, value, type)
			},
			async onSubmit(e, patientId) {
				e.preventDefault();
				const _this = this;
				if(!patientId){
					this.$confirm({
						title: '提示',
						okText: '确认',
						cancelText: '取消',
						content: '是否确定生成报告单，生成报告单后无法修改内容',
						onOk() {
							_this.handleSubmit(1)
						},
						onCancel() {
							_this.handleSubmit(0)
						},
					});
				}else{
					this.handleSubmit()
				}
			},
			handleSubmit(finishStatus){
				this.$nextTick(async () => {
					this.firstForm.validateFields(async (err, values) => {
						let codeAndAnswerList = [],
							params = {};
						const { firstAidId } = this.patientData
						console.log('firstinfo handleSubmit', firstAidId)
						let adverseSubmit = this.$refs.adverse;
						if (adverseSubmit) {
							let res = await adverseSubmit.onAdverseSubmit(e, 'first');
							if (res.length > 0) {
								codeAndAnswerList = codeAndAnswerList.concat(res);
							}
						}
						for (var k in values) {
							if (Object.keys(this.codeForm).includes(k)) {
								let answer = [values[k]];
								if (typeof values[k] !== 'string') {
									answer = values[k];
								}
								if (values[k]) {
									codeAndAnswerList.push({
										questionCode: k,
										answer,
										time: '',
									});
								}
							} else if (
								values[k] &&
								k !== 'RYPG-BMI' &&
								k !== 'RYPG-GENDER'
							) {
								params[`${k}`] = values[k];
							}
						}
						await this.home.updateAidCode({
								...params,
								codeAndAnswerList,
								finishStatus
							},
							false
						);
						this.$message.success("操作成功")
						if(finishStatus === 1) {
							console.log('firstinfo', firstAidId)
							this.$emit('next', {firstAidId})
							// this.setPatientData({})
						}
					});
					
				});
			},
			//更新基本信息
			async updateAidBase(code, value, type) {
				let params;
				let codeAndAnswerList = [];
				if (type) {
					params = {
						[`${code}`]: value,
					};
				} else {
					let answer = [value];
					if (typeof value !== 'string') {
						answer = value;
					}
					codeAndAnswerList.push({
						questionCode: code,
						answer,
						time: '',
					});
				}
				await this.home.updateAidCode({
						...params,
						codeAndAnswerList,
					},
					false
				);
			},
		},
	};
</script>

<style scoped lang="less">
	p {
		margin: 0;
	}

	.Overviewbasicr {
		display: flex;
		margin-bottom: 0;
		
		.first-content {
			flex: 1;
			overflow-y: auto;
		}

		.first-footer {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			padding: 0 10%;
		}
		
		.jmrs-form-item-con{
			display: flex;
			.content-left,
			.content-right{
				flex: 1;
			}
		}
	}

	.first {
		/deep/ .ant-modal {
			max-height: 500px;
			overflow-y: auto;
		}
	}

	.adverse {
		padding: 15px 0;
	}
</style>
<style scoped>
	>>>.adverse .ant-form-item {
		display: flex;
		justify-content: space-between;
	}

	>>>.adverse .ant-form-item-label {
		width: 25%;
	}

	>>>.adverse .ant-form-item-control-wrapper {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	>>>.adverse .ant-form-item-label label {
		font-size: 22px !important;
	}

	>>>.adverse .ant-input {
		width: 100% !important;
		background: none;
	}

	>>>.adverse .ant-form-item-control {
		margin-left: 0;
	}

	>>>.ant-btn-link {
		color: #7690e5;
		font-size: 24px;
		font-weight: bold;
	}

	>>>.ant-radio-wrapper {
		text-align: left;
		font-size: 24px;
		height: 58px !important;
		line-height: 58px !important;
		box-sizing: border-box;
		border-bottom: 1px solid #f0f0f0 !important;
	}

	>>>.ant-collapse {
		border: none;
		background: none;
	}

	>>>.ant-collapse-header {
		font-size: 24px;
		padding: 10px 0 !important;
		font-weight: bold;
		text-align: left;
	}

	>>>.ant-collapse-item {
		flex: 1;
		border-bottom: 0px;
	}

	>>>.ant-collapse-content-box {
		padding: 0 10px;
	}

	>>>.detail-form .jmrs-form-item .ant-form-item-control-wrapper {
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	>>>.detail-form .jmrs-form-item .ant-form-item-control {
		flex: 1;
		margin-left: 0;
	}

	>>>.ant-radio-wrapper:last-child {
		border-bottom: none !important;
	}

	>>>.ant-radio {
		font-size: 24px;
	}

	>>>.ant-radio-inner::after {
		width: 16px;
		height: 16px;
	}

	>>>.ant-radio-inner {
		width: 24px;
		height: 24px;
	}

	.back-ff {
		box-shadow: 0 2px 12px 0 rgba(52, 52, 52, 0.1);
		background: #fff;
		padding: 10px 20px;
		border-radius: 12px;
	}
</style>