carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-ing-date.vue

<template>
	<div class="Overviewbasicr">
		<div class="first-content">
			<!-- <v-head text="主要治疗操作"></v-head> -->
			<div class="basicr-back" style="background-color: transparent;">
				<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>
					
				</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">下一步</a-button>
		</div>
		<!-- <div class="first-footer">
			<a-button
				:disabled="writeAble"
				type="link"
				size="large"
				@click="onSubmit"
			>
				保存<a-icon type="check" />
			</a-button>
		</div> -->
	</div>
</template>

<script>
// import Adverse from '../ing/Adverse.vue';
// import Informed from '../before/Informed.vue';
// import head from './components/title';
import { idcardInfo } 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
		};
	},
	components: {
		// 'v-head': head,
		// Adverse,
		// Informed,
	},
	computed: {
		...mapState('patient', ['patientData', 'writeAble']),
		...mapState('storm', ['nationList']),
	},
	mounted() {
		this.$nextTick(() => {
			if (this.patientData) {
				this.echo(this.patientData);
			}
		});
	},
	methods: {
		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) {
			e.preventDefault();
			let codeAndAnswerList = [],
				params = {};
			this.$nextTick(async () => {
				let adverseSubmit = this.$refs.adverse;
				if (adverseSubmit) {
					let res = await adverseSubmit.onAdverseSubmit(e, 'first');
					if (res.length > 0) {
						codeAndAnswerList = codeAndAnswerList.concat(res);
					}
				}
				this.firstForm.validateFields(async (err, values) => {
					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,
						},
						false
					);
					this.firstForm.resetFields()
					this.$emit('next')
				});
			});
		},
		//更新基本信息
		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;
		background-color: #f9f9f9;
	}

	.first-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}
}

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