You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

465 lines
12 KiB

<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
v-decorator="[v, { initialValue: k.default }]"-->
<div class="mrsitem">
<a-radio-group :disabled="writeAble" size="large" v-if="k.type === 'radio'"
v-model="k.value" 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' && false">
<div class="niss-list-item">
<div class="item-name">
<span class="item-info">得分</span>
</div>
<a-input-number :type="k.inputType" :min="0" :max="100"
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-popover v-model="item.visible" placement="bottom">
<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() {
console.log(this.timerData)
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();
}
}
}
},
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(item, code) {
const text = item.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,
});
item.visible = false;
},
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 !== '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' &&
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: '',
});
}
}
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;
.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>