acupuncture/acupuncture-前台/src/views/medicalFile/components/postureCopy/PHQ-9.vue

<template>
  <div>
    <!--
    分值范围
      ● 评分方法：每个条目根据症状频率评分，0分表示“完全没有”，1分表示“有几天”，2分表示“七天以上”，3分表示“接近每天”。总分范围为0~27分。
    ● 分值意义：
      ○ 0~4分：无或极轻微的抑郁症状。
      ○ 5~9分：轻度抑郁。
      ○ 10~14分：中度抑郁。
      ○ 15~19分：中重度抑郁。
      ○ 20~27分：重度抑郁。
    -->
    <div>
      <div
        class="item-container"
        v-for="(item, index) in questions"
        :key="index"
      >
        <div class="item-title">{{ item.index }}. {{ item.question }}</div>
        <div class="item-radio-box">
          <el-radio-group v-model="form[`topic${item.index}`]">
            <el-radio
              v-for="(criteria, index) in item.criteria"
              :key="index"
              :label="criteria.value"
              >{{ criteria.label }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="submit-box">
        <el-button class="submit-box-but" type="primary" @click="submitForm"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PHQ9",
  props: ["scaleCode"],
  data() {
    return {
      form: {},
      questions: [
        {
          index: 1,
          question: "做任何事都觉得沉闷或者根本不想做任何事",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 2,
          question: "情绪低落、忧郁或绝望",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 3,
          question: "难于入睡、半夜会醒，或相反，睡觉时间过多",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 4,
          question: "觉得疲倦或没有精力",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 5,
          question: "胃口不好或饮食过量",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 6,
          question: "觉得自己做得不好、对自己失望或有负家人期望",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 7,
          question: "难于集中精神做事，例如看报纸或看电视",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 8,
          question:
            "其它人可能会注意到您在动或说话的时候比平时慢；或者相反，您坐立不安，比起平时有多余的身体动作",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
        {
          index: 9,
          question: "想到自己不如死了算了，或者有自残的念头",
          criteria: [
            { label: "完全没有", value: 0 },
            { label: "有几天", value: 1 },
            { label: "七天以上", value: 2 },
            { label: "接近每天", value: 3 },
          ],
        },
      ],
      scaleData: {},
    };
  },
  created() {
    this.treatmentId = this.$route.query.treatmentId; // 诊疗id
    let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据
    // 如果scaleData存在，则解析成对象，否则创建一个空对象
    this.scaleData = scaleData
      ? JSON.parse(scaleData)
      : {
          [this.treatmentId]: {},
        };

    // 如果scaleData[this.treatmentId]不存在，则创建一个空对象
    if (!this.scaleData[this.treatmentId]) {
      this.scaleData[this.treatmentId] = {};
    }
    this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form
  },
  methods: {
    submitForm() {
      let score = 0;
      // 计算总分, topic${i}属性不一定存在，先校验是否存在
      for (let i = 1; i <= 9; i++) {
        if (this.form[`topic${i}`] !== undefined) {
          score += this.form[`topic${i}`];
        }
      }
      // 存储数据
      this.scaleData[this.treatmentId][this.scaleCode] = this.form;
      localStorage.setItem("scaleData", JSON.stringify(this.scaleData));
      // 将数据传递给父组件
      this.$emit("getScaleResult", score, this.scaleCode);
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>

<style scoped>
.item-title {
  font-size: 20px;
  font-weight: bold;
  color: #3d3d3d;
  line-height: 26px;
}
.item-radio-box {
  margin: 16px 0px;
}
>>> .el-radio__label {
  font-size: 18px;
  color: #555555;
  line-height: 20px;
}
.submit-box {
  display: flex;
  justify-content: center;
  align-items: center;
  .submit-box-but {
    width: 200px;
  }
}
</style>