Skip to content

F
frontend-h5
Commit d4a1b02e authored by songrui's avatar songrui
Browse files
Options

筛查表单；筛查结果

parent 18989109
Show whitespace changes
Inline Side-by-side
Showing with 476 additions and 21 deletions
src/assets/css/atomic.less
View file @ d4a1b02e
......@@ -81,6 +81,7 @@
.text-12 { font-size: 12px; }
.text-center { text-align: center; }
.text-black { color: #000; }
.text-red { color: #FF4D4F; }
.text-primary { color: var(--van-primary-color); }
.font-semibold { font-weight: 600; }
// 文字省略
......
src/assets/css/base.less
View file @ d4a1b02e
......@@ -41,6 +41,7 @@ body {
.van-cell:after {
transform: scaleY(1);
}
// 为表单最后一个控件添加底部边框
>.van-field:last-child {
&::before {
position: absolute;
......@@ -53,11 +54,21 @@ body {
border-bottom: 1px solid var(--van-cell-border-color);
}
}
// 在table表格中的控件
.table-field {
padding: 0;
input::placeholder {
float: none;
}
&:after {
display: none;
}
}
}
// 按键形式的单选框
.doc-radio-button {
height: 26px;
height: 27px;
.radio-item {
border: 1px solid #BFBFBF;
border-radius: 4px;
......@@ -73,4 +84,8 @@ body {
border: 1px solid var(--van-primary-color);
color: #fff;
}
.van-radio--horizontal {
margin-right: 0;
margin-left: var(--van-padding-sm);
}
}
\ No newline at end of file
src/assets/icons/resident/doc-close.svg 0 → 100644
View file @ d4a1b02e
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.268654 13.0683C0.625636 13.4253 1.21575 13.418 1.56545 13.0683L6.27906 8.35466L10.9927 13.0683C11.3424 13.418 11.9325 13.4253 12.2895 13.0683C12.6465 12.7113 12.6465 12.1139 12.2968 11.7642L7.58314 7.05058L12.2895 2.34425C12.6392 1.99456 12.6465 1.40444 12.2895 1.04746C11.9325 0.690481 11.3351 0.690481 10.9854 1.04018L6.27906 5.74651L1.57273 1.04018C1.22303 0.690481 0.625636 0.690481 0.268654 1.04746C-0.0883277 1.40444 -0.0810424 1.99456 0.268654 2.34425L4.97499 7.05058L0.261369 11.7642C-0.0883277 12.1139 -0.0883277 12.7113 0.268654 13.0683Z" fill="black"/>
</svg>
src/resident/screening/first/form/BaseInfo.vue
View file @ d4a1b02e
......@@ -48,6 +48,7 @@
<van-field v-model="form.currentAge"
name="currentAge" required
readonly
label="年龄"
type="digit"
placeholder="请输入年龄"
......
src/resident/screening/first/form/CheckTip.vue
View file @ d4a1b02e
......@@ -48,12 +48,7 @@ export default {
inject: ['checkInfo'],
methods: {
onClose() {
if (isWeiXin()) {
// 微信中关闭页面
WeixinJSBridge.call('closeWindow')
} else {
window.close()
}
this.$parent.onClose()
}
}
}
......
src/resident/screening/first/form/Index.vue
View file @ d4a1b02e
<template>
<div class="h-full pb-5 flex flex-col ">
<div class="p-3 text-16 text-black text-center shrink-0 top-bar">
<span class="back-bt" @click="onBack" v-if="step >= 2">
<span class="back-bt" v-if="step >= 2">
<span @click="onClose" v-if="[5].includes(step)">
<doc-icon type="doc-close" />
</span>
<span @click="onBack" v-else>
<doc-icon type="doc-left" />
</span>
</span>
<span>慢病自我初筛</span>
</div>
<div class="grow overflow-y-auto">
......@@ -13,24 +18,28 @@
<BaseInfo v-else-if="step === 3"/>
<!-- 筛查表单 -->
<ScreenInfo v-else-if="step === 4"/>
<!-- 筛查结果 -->
<Result v-else-if="step === 5"/>
</div>
</div>
</template>
<script>
import { showNotify } from 'vant'
import { isWeiXin } from '@/utils/common.js'
import IdCheck from './IdCheck.vue'
import CheckTip from './CheckTip.vue'
import BaseInfo from './BaseInfo.vue'
import ScreenInfo from './ScreenInfo.vue'
import Result from './Result.vue'
export default {
components: {
IdCheck,
CheckTip,
BaseInfo,
ScreenInfo
ScreenInfo,
Result
},
data() {
return {
......@@ -64,6 +73,9 @@ export default {
},
methods: {
onNext(step) {
if (this.step === 1) {
this.recordForm = {}
}
this.step = step ? step : this.step + 1
this.setpHistory.push(this.step)
},
......@@ -71,6 +83,14 @@ export default {
if (this.step === 1) return
this.setpHistory.pop()
this.step = this.setpHistory[this.setpHistory.length - 1]
},
onClose() {
if (isWeiXin()) {
// 微信中关闭页面
WeixinJSBridge.call('closeWindow')
} else {
window.close()
}
}
}
}
......
src/resident/screening/first/form/Result.vue
View file @ d4a1b02e
<template>
<div class="submit-result">
筛查提交成功！
<div class="pt-5 text-center">
<doc-icon type="doc-check-circle"
style="color: #faad14;font-size: .46rem;"/>
</div>
<div class="text-center mt-4">筛查提交成功</div>
<p class="tip" v-if="screenInfo.screenResult == 2">
<!-- v-if="screenInfo.screenResult === 2" -->
通过筛查，您的慢病高危评估结果为：<span class="text-red">高危风险人群</span><br />
存在慢性病患病风险，可前往医院进一步检查。
</p>
<p class="tip" v-else>
通过筛查，您的慢病高危评估结果为：一般人群。目前不存在慢性病患病风险，若有疑问，可前往医院进一步检查。
</p>
<div class="result text-12" v-if="screenInfo.screenResult === 2">
<div>风险主要体现在以下3个方面：</div>
<div class="mt-2"></div>
<div v-for="(item, index) in resultInfo" :key="index">
<span>{{index + 1}}、</span>
<span>{{item}}；</span>
</div>
</div>
<van-button round block class="button"
@click="toRecord">查看慢病筛查记录</van-button>
</div>
</template>
<script>
import { useStore } from '@/resident/store/index.js'
export default {
inject: ['recordForm'],
setup() {
const store = useStore()
return { store }
},
computed: {
screenInfo() {
return this.recordForm.screen || {}
},
resultInfo() {
// return this.store.getDict('CP00113').map(e => e.name)
const highItem = this.screenInfo.highItem
return highItem && highItem.length ?
this.store.getDict('CP00113').filter(e => highItem.includes(e.value)).map(e => e.name) : []
}
},
methods:{
toRecord() {
}
}
}
</script>
<style lang="less" scoped>
.submit-result {
padding: 0 30px;
}
.tip {
color: #595959;
line-height: 1.5;
font-size: 12px;
}
.result {
background-color: #F8FAFC;
padding: 12px;
line-height: 1.5;
}
.button {
color: #8C8C8C;
border-color: #BFBFBF;
margin-top: 30px;
}
</style>
src/resident/screening/first/form/ScreenInfo.vue
View file @ d4a1b02e
......@@ -6,7 +6,7 @@
<div class="text-12">请根据您身体实际情况填写以下内容</div>
</div>
<van-form label-width="5em" ref="form" class="screen-form"
<van-form label-width="10em" ref="form" class="screen-form"
error-message-align="right">
<van-field v-model="form.currentAge"
name="currentAge"
......@@ -50,7 +50,7 @@
name="height"
label="身高"
type="number"
placeholder="请输入"
placeholder="输入值10~300，1位小数"
maxlength="10"
:rules="rules.height"
>
......@@ -64,7 +64,7 @@
name="weight"
label="体重"
type="number"
placeholder="请输入"
placeholder="输入值20~500，2位小数"
maxlength="10"
:rules="rules.weight"
>
......@@ -90,7 +90,7 @@
name="waistline"
label="腰围"
type="number"
placeholder="请输入"
placeholder="输入值10~150，1位小数"
maxlength="10"
:rules="rules.waistline"
>
......@@ -119,6 +119,204 @@
</van-radio-group>
</template>
</van-field>
<van-field required
v-model="form.familyHistoryName"
is-link
readonly
name="familyHistory"
label="家族史"
placeholder="请选择"
:rules="rules.familyHistory"
@click="showFamily = true"/>
<van-popup v-model:show="showFamily" position="bottom">
<div class="pt-4 popup-checkbox">
<div class="flex justify-between">
<button class="van-picker__cancel van-haptics-feedback" @click="showFamily = false">取消</button>
<button class="van-picker__confirm van-haptics-feedback" @click="familyConfirm">确认</button>
</div>
<van-checkbox-group v-model="form.familyHistory" class="p-4">
<van-checkbox v-for="(item, index) in store.getDict('CP00167').filter(e => e.value != 7)" :key="index"
@click="familyChange"
:name="item.value"
class="mb-3">{{ item.name }}</van-checkbox>
</van-checkbox-group>
</div>
</van-popup>
<div class="px-4 pt-3">
<table class="w-full">
<tr>
<td style="width: 7.1em">血压值(mmHg)</td>
<td>低压值(左侧)</td>
<td>高压值(右侧)</td>
</tr>
<tr>
<td>
第1次测量
</td>
<td class="flex">
<van-field v-model="form.pressureOneDbp"
name="pressureOneDbp"
label=""
type="number"
placeholder="60~300，整数"
maxlength="10"
:rules="rules.pressureDbp"
error-message-align="left"
class="table-field"
/>
<span class="divide">/</span>
</td>
<td>
<van-field v-model="form.pressureOneSbp"
name="pressureOneSbp"
label=""
type="number"
placeholder="30~300，整数"
maxlength="10"
:rules="rules.pressureSbp"
error-message-align="left"
class="table-field"
/>
</td>
</tr>
<tr>
<td>
第2次测量
</td>
<td class="flex">
<van-field v-model="form.pressureTwoDbp"
name="pressureTwoDbp"
label=""
type="number"
placeholder="60~300，整数"
maxlength="10"
:rules="rules.pressureDbp"
error-message-align="left"
class="table-field"
/>
<span class="divide">/</span>
</td>
<td>
<div class="h-full flex">
<van-field v-model="form.pressureTwoSbp"
name="pressureTwoSbp"
label=""
type="number"
placeholder="30~300，整数"
maxlength="10"
:rules="rules.pressureSbp"
error-message-align="left"
class="table-field"
/>
</div>
</td>
</tr>
</table>
</div>
<van-field v-model="form.fastingGlucose"
name="fastingGlucose"
label="空腹血糖"
type="number"
placeholder="输入值0~50，2位小数"
maxlength="10"
:rules="rules.fastingGlucose"
>
<template #extra>
<span class="ml-1">mmol/L</span>
</template>
</van-field>
<van-field v-model="form.ldlCholesterin"
name="ldlCholesterin"
label="低密度脂蛋白胆固醇"
type="number"
placeholder="输入值0~50，2位小数"
maxlength="10"
:rules="rules.ldlCholesterin"
>
<template #extra>
<span class="ml-1">mmol/L</span>
</template>
</van-field>
<van-field v-model="form.serumCholesterin"
name="serumCholesterin"
label="血清总胆固醇"
type="number"
placeholder="输入值0~50，1位小数"
maxlength="10"
:rules="rules.serumCholesterin"
>
<template #extra>
<span class="ml-1">mmol/L</span>
</template>
</van-field>
<van-field v-model="form.hdlCholesterin"
name="hdlCholesterin"
label="高密度脂蛋白胆固醇"
type="number"
placeholder="输入值0~50，1位小数"
maxlength="10"
:rules="rules.hdlCholesterin"
>
<template #extra>
<span class="ml-1">mmol/L</span>
</template>
</van-field>
<van-field v-model="form.exerciseIntensity"
name="exerciseIntensity"
label="运动"
input-align="right"
style="padding-top: .13rem;padding-bottom: .14rem;">
<template #input>
<div>
<van-radio-group v-model="form.exerciseIntensity" direction="horizontal"
class="doc-radio-button">
<van-radio v-for="item in store.getDict('CP00120')"
:key="item.value" :name="item.value">
<template #icon>
<span :class="['radio-item',
{'radio-item-active': form.exerciseIntensity == item.value}]">
{{item.name}}
</span>
</template>
</van-radio>
</van-radio-group>
<div style="height: 14px"></div>
<div class="tip">每周保持150分钟内中等或75分钟内的高强度身体活动</div>
</div>
</template>
</van-field>
<van-field required
v-model="form.screenDate"
is-link
readonly
name="screenDate"
label="筛查日期"
placeholder="请选择"
@click="showScreenDate = true"
/>
<van-popup v-model:show="showScreenDate" position="bottom">
<van-date-picker v-model="form._screenDate"
:min-date="screenDateRange.min"
:max-date="screenDateRange.max"
@confirm="screenDateConfirm" @cancel="showScreenDate = false" />
</van-popup>
<div class="pt-4"></div>
<div class="px-5 pb-4 mt-5 flex align-center justify-around">
<van-button type="primary" round plain style="width: 44%"
@click="onPrev">上一步</van-button>
<van-button type="primary" round style="width: 44%"
@click="submit">下一步</van-button>
</div>
</van-form>
</div>
</template>
......@@ -126,6 +324,7 @@
<script>
import { useStore } from '@/resident/store/index.js'
import { checkboxReject } from '@/utils/common.js'
import dayjs from 'dayjs'
const defaultForm = (info = {}) => {
const form = {
......@@ -142,8 +341,40 @@ const defaultForm = (info = {}) => {
// 腰围
waistline: undefined,
// 是否吸烟
isSmoking: undefined
isSmoking: undefined,
// 家族史
familyHistory: [],
familyHistoryName: undefined,
// 空腹血糖
fastingGlucose: undefined,
// 血清总胆固醇
serumCholesterin: undefined,
// 低密度脂蛋白胆固醇
ldlCholesterin: undefined,
// 高密度脂蛋白胆固醇
hdlCholesterin: undefined,
// 运动
exerciseIntensity: undefined,
// 筛查日期
screenDate: undefined,
_screenDate: undefined,
// 血压第一次
pressureOneDbp: undefined,
pressureOneSbp: undefined,
// 血压第二次
pressureTwoDbp: undefined,
pressureTwoSbp: undefined,
// 高危评估结果（1：一般人群（小于3个指标）；2：高危人群（大于等于3个指标））
screenResult: undefined,
// 高危项目 CP00113
highItem: undefined,
gender: undefined
}
Reflect.ownKeys(form).forEach(key => {
if (info[key] != undefined) {
form[key] = info[key]
}
})
return form
}
......@@ -153,14 +384,35 @@ export default {
form: defaultForm(),
rules: {
medicalHistory: [{ required: true, message: '请选择' }],
familyHistory: [{ required: true, message: '请选择' }],
height: [{ required: true, message: '请输入' },
{ pattern: /^([1-9]\d{1,2}(?:\.\d{1})?|300)$/, message: '输入值在10~300内，1位小数' }],
{ pattern: /^([1-9]\d{1}(?:\.\d{1})?|[1-2]\d{2}(?:\.\d{1})?|300)$/, message: '输入值在10~300内，1位小数' }],
weight: [{ required: true, message: '请输入' },
{ pattern: /^([2-9]\d{1}(?:\.\d{1,2})?|[1-4]\d{2}(?:\.\d{1,2})?|500)$/, message: '输入值在20~500内，2位小数' }],
waistline: [{ pattern: /^([1-9]\d{1}(?:\.\d{1})?|[1][0-4]\d(?:\.\d{1})?|150)$/, message: '输入值在10~150内，1位小数' }]
waistline: [{
pattern: /^([1-9]\d{1}(?:\.\d{1})?|[1][0-4]\d(?:\.\d{1})?|150)$/, message: '输入值在10~150内，1位小数', validateEmpty: false }],
fastingGlucose: [{
pattern: /^(?:0(?:\.\d{1,2})?|[1-4]\d{0,1}(?:\.\d{1,2})?|[1-9]{0,1}(?:\.\d{1,2})?|50)$/, message: '输入值0~50，2位小数', validateEmpty: false }],
serumCholesterin: [{
pattern: /^(?:0(?:\.\d{1})?|[1-4]\d{0,1}(?:\.\d{1})?|[1-9]{0,1}(?:\.\d{1})?|50)$$/, message: '输入值0~50，1位小数', validateEmpty: false }],
ldlCholesterin: [{
pattern: /^(?:0(?:\.\d{1,2})?|[1-4]\d{0,1}(?:\.\d{1,2})?|[1-9]{0,1}(?:\.\d{1,2})?|50)$/, message: '输入值0~50，2位小数', validateEmpty: false }],
hdlCholesterin: [{
pattern: /^(?:0(?:\.\d{1})?|[1-4]\d{0,1}(?:\.\d{1})?|[1-9]{0,1}(?:\.\d{1})?|50)$$/, message: '输入值0~50，1位小数', validateEmpty: false }],
pressureDbp: [{ pattern: /^([6-9]\d{1}|[1-2]\d{2}|300)$/, message: '60~300，整数', validateEmpty: false }],
pressureSbp: [{ pattern: /^([3-9]\d{1}|[1-2]\d{2}|300)$/, message: '30~300，整数', validateEmpty: false }],
},
// 既往史
showMedical: false
showMedical: false,
// 家族史
showFamily: false,
// 筛查日期
showScreenDate: false,
// 筛查日期可选范围
screenDateRange: {
min: new Date(2024, 9, 2),
max: undefined
}
}
},
setup() {
......@@ -174,14 +426,39 @@ export default {
return height && weight ? (weight / (height / 100 * height / 100)).toFixed(2) : undefined
}
},
inject: ['checkInfo', 'recordForm'],
inject: ['recordForm'],
created() {
this.init()
},
methods: {
init() {
const date = dayjs()
this.form.screenDate = date.format('YYYY-MM-DD')
this.form._screenDate = [date.year(), date.month() + 1, date.date()]
this.screenDateRange.max = new Date(date.year(), date.month(), date.date())
this.screenDateRange.min = new Date(date.year() - 20, date.month(), date.date())
if (this.recordForm.screen) {
this.form = defaultForm(this.recordForm.screen)
return
}
const baseInfo = this.recordForm.base
this.form.currentAge = baseInfo.currentAge
this.form.gender = baseInfo.gender
},
submit() {
this.$refs.form.validate().then(() => {
this.resultHandle()
this.recordForm.screen = {...this.form}
console.log(this.form)
// 提交表单
this.$parent.onNext()
}).catch(err => console.warn(err))
},
onPrev() {
this.$refs.form.validate().then(() => {
this.recordForm.screen = {...this.form}
this.$parent.onBack()
}).catch(err => console.warn(err))
},
// 既往史
medicalConfirm() {
......@@ -192,6 +469,60 @@ export default {
},
medicalChange(e) {
this.form.medicalHistory = checkboxReject(this.form.medicalHistory, [9])
},
// 家族史
familyConfirm() {
this.form.familyHistoryName = this.store.getDict('CP00167').map(e => {
return this.form.familyHistory.includes(e.value) ? e.name : ''
}).filter(e => e).join('、')
this.showFamily = false
},
familyChange() {
this.form.familyHistory = checkboxReject(this.form.familyHistory, [9])
},
// 筛查日期
screenDateConfirm({ selectedValues }) {
this.form.screenDate = selectedValues.join('-')
this.showScreenDate = false
},
resultHandle() {
const {currentAge, height = 0, weight = 0, waistline, familyHistory = [], isSmoking, gender,
pressureOneSbp, pressureOneDbp, pressureTwoSbp, pressureTwoDbp, fastingGlucose, ldlCholesterin} = this.form
let list = []
if (currentAge >= 50) {
list.push(1)
}
let bmi = parseFloat(this.bmi)
if ((bmi >= 24)||
(gender == 2 && waistline >=85) ||
(gender == 1 && waistline >=90) ){
list.push(2)
}
if (isSmoking == 1) {
list.push(3)
}
if (familyHistory && familyHistory.length && (familyHistory.includes(1) || familyHistory.includes(2) ||
familyHistory.includes(3) || familyHistory.includes(4) || familyHistory.includes(5) || familyHistory.includes(6))) {
list.push(4)
}
if (((pressureOneSbp >= 130 && pressureOneSbp <= 139) || (pressureTwoSbp >=130 && pressureTwoSbp <= 139))&&
((pressureOneDbp >= 85 && pressureOneDbp <= 89) || (pressureTwoDbp >=85 && pressureTwoDbp <= 89) )
) {
list.push(5)
}
if (fastingGlucose>=6.1 && fastingGlucose < 7) {
list.push(6)
}
if (ldlCholesterin >= 3.4) {
list.push(7)
}
list = Array.from(new Set(list))
this.form.highItem = list
if (list.length >= 3){
this.form.screenResult = 2
}else {
this.form.screenResult = 1
}
}
},
watch: {
......@@ -207,4 +538,29 @@ export default {
<style lang="less" scoped>
@import '../../../utils/common.less';
.tip {
color: #8C8C8C;
font-size: 12px;
position: absolute;
bottom: -12px;
left: -100px;
right: 0;
}
table {
text-align: left;
border-bottom: 1px solid var(--van-cell-border-color);
>tr {
>td {
padding-left: 14px;
padding-bottom: 12px;
&:first-child {
text-align: right;
padding-left: 0;
}
}
}
.divide {
transform: translateY(4px);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment