datang-meeting/acupuncture-前台/src/views/screening/index.vue

<template>
  <div class="app-container">
    <div class="hospital">山西因孚社区</div>
    <el-form
      v-if="stepNum == 1"
      :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
            :disabled="true"
            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" v-if="stepNum == 2">
      <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" v-if="stepNum == 1">
      <el-button type="primary" class="submit-box-but" @click="submitForm">
        下一步
      </el-button>
    </div>
    <div class="submit-box" v-if="stepNum == 2">
      <el-button type="primary" class="submit-box-but" @click="scaleSubmitForm">
        提交
      </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 {
      stepNum: 2,
      headers: {
        Authorization: "Bearer " + getToken(),
        deptId: localStorage.getItem("hospitalId"),
      },
      uploadFileUrl1:
        process.env.VUE_APP_API_QZURL + "/acupuncture/patient/import", // 上传的图片服务器地址
      fileList: [],
      // 表单参数
      form: {
        name: "",
        sex: "0",
        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() {
      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：偏瘦
    // 18.5~23.9：正常
    // 24~27.9：偏胖
    // ≥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) {
          // patientAdd(this.form).then((response) => {
          //   this.$modal.msgSuccess("新增成功");
          //   this.open = false;
          //   this.getList();
          // });
          this.stepNum++;
        }
      });
    },
    // 量表结果
    scaleSubmitForm() {
      let score = 0;
      // 计算总分, topic${i}属性不一定存在，先校验是否存在
      for (let i = 1; i <= 24; i++) {
        if (this.form[`topic${i}`] !== undefined) {
          score += this.form[`topic${i}`];
        }
      }
      console.log("score", score);
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
.hospital {
  background: #fff;
  font-size: 20px;
  color: #70483e;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 10px;
  border-radius: 6px;
  text-align: center;
}
.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 {
    background: #c6a268;
    width: 100%;
    font-size: 16px;
  }
}
.card {
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 14px;
}

.card-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

/*  */
.app-container {
  /* background: linear-gradient(to bottom, #70483e, #f7f8fa); */
  background: #70483e;
  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;
}

>>> .el-radio input[aria-hidden="true"] {
  display: none !important;
}

>>> .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>
<!-- >>> .el-input__inner {
  padding: 0 15px !important;
} -->