liuzhipeng
4 months ago
3 changed files with 538 additions and 1 deletions
@ -0,0 +1,531 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div></div> |
|||
<el-form :rules="rules" ref="form" :model="form" label-width="110px"> |
|||
<!-- 姓名、性别（单选）、出生日期、年龄、联系方式 --> |
|||
<div class="card"> |
|||
<div class="card-title">基本信息</div> |
|||
<div> |
|||
<el-form-item label="姓名" prop="name"> |
|||
<el-input v-model="form.name" placeholder="请输入姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="性别" prop="sex"> |
|||
<el-radio v-model="form.sex" label="0">男</el-radio> |
|||
<el-radio v-model="form.sex" label="1">女</el-radio> |
|||
</el-form-item> |
|||
<el-form-item label="出生日期" prop="dateOfBirth"> |
|||
<el-date-picker |
|||
v-model="form.dateOfBirth" |
|||
type="date" |
|||
placeholder="选择日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="年龄" prop="age"> |
|||
<el-input |
|||
v-model="form.age" |
|||
type="number" |
|||
placeholder="请输入姓名" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系方式" prop="phone"> |
|||
<el-input |
|||
v-model="form.phone" |
|||
type="number" |
|||
placeholder="请输入联系方式" |
|||
></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
<!-- 身高、体重，BMI --> |
|||
<div class="card"> |
|||
<div class="card-title">体重自评</div> |
|||
<el-form-item label="身高cm" prop="height"> |
|||
<el-input |
|||
@blur="calculateBMI" |
|||
v-model="form.height" |
|||
type="number" |
|||
placeholder="请输入身高" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="体重kg" prop="weight"> |
|||
<el-input |
|||
@blur="calculateBMI" |
|||
v-model="form.weight" |
|||
type="number" |
|||
placeholder="请输入体重" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="BMI" prop="BMI"> |
|||
<el-input |
|||
v-model="form.BMI" |
|||
type="number" |
|||
placeholder="请输入BMI" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="结论" prop="verdict"> |
|||
<span :class="`BIMTips${BMIVerdict[form.verdict]}`"> |
|||
{{ form.verdict || "- - -" }}</span |
|||
> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
<div class="card"> |
|||
<div class="card-title">失眠自评（SRSS）</div> |
|||
<div |
|||
class="item-container" |
|||
v-for="(item, index) in scaleList" |
|||
:key="index" |
|||
> |
|||
<div class="item-title">{{ index + 1 }}. {{ item.question }}</div> |
|||
<div class="item-radio-box"> |
|||
<el-radio-group v-model="form[`topic${index + 1}`]"> |
|||
<el-radio |
|||
class="item-radio" |
|||
v-for="(criteria, index) in item.options" |
|||
:key="index" |
|||
:label="criteria.score" |
|||
>{{ criteria.label }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="submit-box"> |
|||
<el-button type="primary" class="submit-box-but" @click="submitForm"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getToken } from "@/utils/auth"; |
|||
import { |
|||
queryPatient, |
|||
patientAdd, |
|||
patientUpd, |
|||
patientDel, |
|||
} from "@/api/patientFile"; |
|||
export default { |
|||
name: "Notice", |
|||
dicts: ["sys_notice_status", "sys_notice_type"], |
|||
data() { |
|||
return { |
|||
headers: { |
|||
Authorization: "Bearer " + getToken(), |
|||
deptId: localStorage.getItem("hospitalId"), |
|||
}, |
|||
uploadFileUrl1: |
|||
process.env.VUE_APP_API_QZURL + "/acupuncture/patient/import", // 上传的图片服务器地址 |
|||
fileList: [], |
|||
// 表单参数 |
|||
form: { |
|||
name: "", |
|||
sex: "", |
|||
dateOfBirth: "", |
|||
age: "", |
|||
phone: "", |
|||
height: "", |
|||
weight: "", |
|||
BMI: "", |
|||
verdict: "", |
|||
}, |
|||
BMITips: [ |
|||
{ |
|||
label: "偏瘦", |
|||
score: 18.5, |
|||
}, |
|||
{ |
|||
label: "正常", |
|||
score: 23.9, |
|||
}, |
|||
{ |
|||
label: "偏胖", |
|||
score: 27.9, |
|||
}, |
|||
{ |
|||
label: "肥胖", |
|||
score: 28, |
|||
}, |
|||
], |
|||
// 表单校验 |
|||
rules: { |
|||
name: [ |
|||
{ |
|||
required: true, |
|||
message: "姓名不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
sex: [ |
|||
{ |
|||
required: true, |
|||
message: "性别不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
dateOfBirth: [ |
|||
{ |
|||
required: true, |
|||
message: "出生日期不能为空", |
|||
trigger: "change", |
|||
}, |
|||
], |
|||
age: [ |
|||
{ |
|||
required: true, |
|||
message: "年龄不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
phone: [ |
|||
{ |
|||
required: true, |
|||
message: "联系方式不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
{ |
|||
pattern: /^1[3456789]\d{9}$/, |
|||
message: "格式不正确", |
|||
trigger: "change", |
|||
}, |
|||
], |
|||
age: [ |
|||
{ |
|||
required: true, |
|||
message: "年龄不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
height: [ |
|||
{ |
|||
required: true, |
|||
message: "身高不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
weight: [ |
|||
{ |
|||
required: true, |
|||
message: "体重不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
BMI: [ |
|||
{ |
|||
required: true, |
|||
message: "BMI不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
BMIVerdict: { |
|||
偏瘦: "1", |
|||
正常: "2", |
|||
偏胖: "3", |
|||
肥胖: "4", |
|||
}, |
|||
// 1.您觉得平时睡眠足够吗 ? |
|||
// ①睡眠过多了 ②睡眠正好 ③睡眠欠一些 ④睡眠不够 ⑤睡眠时间远远不够 |
|||
// 2.您在睡眠后是否已觉得充分休息过了 ? |
|||
// ①觉得充分休息过了 ②觉得休息过了 ③觉得休息了一点 ④不觉得休息过了 ⑤觉得一点儿也没休息 |
|||
// 3.您晚上已睡过觉,白天是否打瞌睡 ? |
|||
// ① 0~5 天 ②很少 （6~12 天） ③有时 （13~18 天)） ④经常（19~24 天） ⑤总是（25~31 天） |
|||
// 4.您平均每个晚上大约能睡几小时 ? |
|||
// ①≥9小时 ② 7~8 小时 ③ 5~6 小时 ④ 3~4 小时 ⑤ 1~2 小时 |
|||
// 5.您是否有入睡困难 ? |
|||
// ①0~5 天 ②很少 （6~12 天） ③有时（13~18 天 ） ④经常（19~24 天） ⑤总是（25~31 天） |
|||
// 6.您入睡后中间是否易醒 ? |
|||
// ①0~5 天 ②很少（6~12 天） ③有时（13~18 天） ④经常 （19~24 天） ⑤总是（25~31 天） |
|||
// 7.您在醒后是否难于再入睡 ? |
|||
// ①0~5天 ②很少（61~2 天） ③有时 （13~18 天） ④经常 （19~24 天） ⑤总是 （25~31 天） |
|||
// 8.您是否多梦或常被恶梦惊醒 ? |
|||
// ①0~5天 ②很少（61~2 天） ③有时 （13~18 天） ④经常 （19~24 天） ⑤总是 （25~31 天） |
|||
// 9.为了睡眠 , 您是否吃安眠药 ? |
|||
// ①0~5天 ②很少（61~2 天） ③有时 （13~18 天） ④经常 （19~24 天） ⑤总是 （25~31 天） |
|||
// 10.您失眠后心情（心境）如何 ? |
|||
// ①无不适 ②无所谓 ③有时心烦、急躁 ④心慌、气短 ⑤乏力、没精神、做事效率低 |
|||
scaleList: [ |
|||
{ |
|||
question: "您觉得平时睡眠足够吗 ?", |
|||
options: [ |
|||
{ label: "睡眠过多了", score: 1 }, |
|||
{ label: "睡眠正好", score: 2 }, |
|||
{ label: "睡眠欠一些", score: 3 }, |
|||
{ label: "睡眠不够", score: 4 }, |
|||
{ label: "睡眠时间远远不够", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您在睡眠后是否已觉得充分休息过了 ?", |
|||
options: [ |
|||
{ label: "觉得充分休息过了", score: 1 }, |
|||
{ label: "觉得休息过了", score: 2 }, |
|||
{ label: "觉得休息了一点", score: 3 }, |
|||
{ label: "不觉得休息过了", score: 4 }, |
|||
{ label: "觉得一点儿也没休息", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您晚上已睡过觉,白天是否打瞌睡 ?", |
|||
options: [ |
|||
{ label: "0~5 天", score: 1 }, |
|||
{ label: "很少 （6~12 天）", score: 2 }, |
|||
{ label: "有时 （13~18 天）", score: 3 }, |
|||
{ label: "经常（19~24 天）", score: 4 }, |
|||
{ label: "总是（25~31 天）", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您平均每个晚上大约能睡几小时 ?", |
|||
options: [ |
|||
{ label: "≥9小时", score: 1 }, |
|||
{ label: "7~8 小时", score: 2 }, |
|||
{ label: "5~6 小时", score: 3 }, |
|||
{ label: "3~4 小时", score: 4 }, |
|||
{ label: "1~2 小时", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您是否有入睡困难 ?", |
|||
options: [ |
|||
{ label: "0~5 天", score: 1 }, |
|||
{ label: "很少 （6~12 天）", score: 2 }, |
|||
{ label: "有时（13~18 天 ）", score: 3 }, |
|||
{ label: "经常（19~24 天）", score: 4 }, |
|||
{ label: "总是（25~31 天）", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您入睡后中间是否易醒 ?", |
|||
options: [ |
|||
{ label: "0~5 天", score: 1 }, |
|||
{ label: "很少（6~12 天）", score: 2 }, |
|||
{ label: "有时（13~18 天）", score: 3 }, |
|||
{ label: "经常 （19~24 天）", score: 4 }, |
|||
{ label: "总是（25~31 天）", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您在醒后是否难于再入睡 ?", |
|||
options: [ |
|||
{ label: "0~5天", score: 1 }, |
|||
{ label: "很少（6~12 天）", score: 2 }, |
|||
{ label: "有时 （13~18 天）", score: 3 }, |
|||
{ label: "经常 （19~24 天）", score: 4 }, |
|||
{ label: "总是 （25~31 天）", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您是否多梦或常被恶梦惊醒 ?", |
|||
options: [ |
|||
{ label: "0~5天", score: 1 }, |
|||
{ label: "很少（6~12 天）", score: 2 }, |
|||
{ label: "有时 （13~18 天）", score: 3 }, |
|||
{ label: "经常 （19~24 天）", score: 4 }, |
|||
{ label: "总是 （25~31 天）", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "为了睡眠 , 您是否吃安眠药 ?", |
|||
options: [ |
|||
{ label: "0~5天", score: 1 }, |
|||
{ label: "很少（6~12 天）", score: 2 }, |
|||
{ label: "有时 （13~18 天）", score: 3 }, |
|||
{ label: "经常 （19~24 天）", score: 4 }, |
|||
{ label: "总是 （25~31 天）", score: 5 }, |
|||
], |
|||
}, |
|||
{ |
|||
question: "您失眠后心情（心境）如何 ?", |
|||
options: [ |
|||
{ label: "无不适", score: 1 }, |
|||
{ label: "无所谓", score: 2 }, |
|||
{ label: "有时心烦、急躁", score: 3 }, |
|||
{ label: "心慌、气短", score: 4 }, |
|||
{ label: "乏力、没精神、做事效率低", score: 5 }, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
// 计算BIM |
|||
calculateBMI() { |
|||
console.log(this.form.weight, this.form.height); |
|||
if (this.form.weight && this.form.height) { |
|||
const weight = parseFloat(this.form.weight); |
|||
const height = parseFloat(this.form.height); |
|||
const bmi = weight / (height / 100) ** 2; |
|||
this.form.BMI = bmi.toFixed(2); |
|||
this.getBMITips(bmi); |
|||
} |
|||
}, |
|||
// 通过BIM结果显示对于的结论 |
|||
// <18.5：体重过轻 35 |
|||
// 18.5~23.9：正常 45 |
|||
// 24~27.9：超重 46 |
|||
// ≥28：肥胖 |
|||
getBMITips(bmi) { |
|||
let tips = ""; |
|||
if (bmi < 18.5) { |
|||
tips = "体重过轻"; |
|||
} |
|||
if (bmi >= 18.5 && bmi < 23.9) { |
|||
tips = "正常"; |
|||
} |
|||
if (bmi >= 24 && bmi < 27.9) { |
|||
tips = "超重"; |
|||
} |
|||
if (bmi >= 28) { |
|||
tips = "肥胖"; |
|||
} |
|||
this.form.verdict = tips; |
|||
}, |
|||
// 上传成功回 - pdg |
|||
handleUploadPdfAdd1(res) { |
|||
if (res.code == 200) { |
|||
this.importOpen = false; |
|||
this.getList(); |
|||
this.$modal.msgSuccess("导入成功"); |
|||
} else { |
|||
this.$message.error(res.msg || "导入失败"); |
|||
this.fileList = []; |
|||
} |
|||
}, |
|||
// 上传前校检格式和大小 - 图片 |
|||
handleBeforeUpload1(file) { |
|||
const isLt2M = file.size / 1024 / 1024 < 100; |
|||
// 校检文件大小 |
|||
if (!isLt2M) { |
|||
this.$message.error("上传文件大小不能超过 100MB!"); |
|||
} |
|||
return isLt2M; |
|||
}, |
|||
// 上传前校检格式和大小 - 文件 |
|||
handleBeforePdfUpload1(file) { |
|||
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1); |
|||
const whiteList = ["xlsx", "xls"]; |
|||
if (whiteList.indexOf(fileSuffix) === -1) { |
|||
this.$message.error("上传文件只能是.xlsx, .xls"); |
|||
return false; |
|||
} |
|||
}, |
|||
/** 查询公告列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
queryPatient(this.queryParams).then((res) => { |
|||
this.listDat = res.data.list; |
|||
this.total = res.data.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = {}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function () { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
if (this.form.id != undefined) { |
|||
patientUpd(this.form).then((response) => { |
|||
this.$modal.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
patientAdd(this.form).then((response) => { |
|||
this.$modal.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped src="@/assets/styles/common.css"></style> |
|||
<style scoped> |
|||
.BIMTips1 { |
|||
color: #cccccc; |
|||
} |
|||
.BIMTips2 { |
|||
color: #66cc00; |
|||
} |
|||
.BIMTips3 { |
|||
color: #ffff00; |
|||
} |
|||
.BIMTips4 { |
|||
color: #ff9900; |
|||
} |
|||
.item-radio { |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
.item-title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #3d3d3d; |
|||
line-height: 26px; |
|||
} |
|||
.item-radio-box { |
|||
margin: 16px 0px; |
|||
} |
|||
>>> .el-radio__label { |
|||
font-size: 16px; |
|||
color: #555555; |
|||
line-height: 20px; |
|||
} |
|||
.submit-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.submit-box-but { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
.card { |
|||
padding: 16px; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
margin-bottom: 14px; |
|||
} |
|||
|
|||
.card-title { |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
/* */ |
|||
.app-container { |
|||
background: linear-gradient(to bottom, #70483e, #f7f8fa); |
|||
min-height: 100vh; |
|||
} |
|||
>>> .el-input__inner { |
|||
border: none; |
|||
border-bottom: 1px solid #dcdfe6; |
|||
border-radius: 0; |
|||
} |
|||
>>> .el-date-editor.el-input { |
|||
width: 100% !important; |
|||
} |
|||
>>> .el-form-item--medium .el-form-item__label { |
|||
padding-right: 30px; |
|||
} |
|||
</style> |
|||
<!-- >>> .el-input__inner { |
|||
padding: 0 15px !important; |
|||
} --> |
|||
Loading…
Reference in new issue