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

<template>
  <div>
    <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: "≤15分钟", value: 0 },
            { label: "16~30分钟", value: 1 },
            { label: "31~60分钟", value: 2 },
            { label: "≥60分钟", value: 3 },
          ],
        },
        {
          index: 3,
          question: "睡眠时间-每晚实际睡眠时间",
          criteria: [
            { label: ">7小时", value: 0 },
            { label: "6~7小时", value: 1 },
            { label: "5~6小时", value: 2 },
            { label: "<5小时", value: 3 },
          ],
        },
        {
          index: 4,
          question: "睡眠效率-睡眠时间与床上时间的比例",
          criteria: [
            { label: ">85%", value: 0 },
            { label: "75%~84%", value: 1 },
            { label: "65%~74%", value: 2 },
            { label: "<65%", value: 3 },
          ],
        },
        {
          index: 5,
          question: "睡眠障碍-夜间醒来、呼吸困难、噩梦等",
          criteria: [
            { label: "每项无", value: 0 },
            { label: "<1次/周", value: 1 },
            { label: "1~2次/周", value: 2 },
            { label: "≥3次/周", value: 3 },
          ],
        },
        {
          index: 6,
          question: "催眠药物-使用催眠药物的频率",
          criteria: [
            { label: "无", value: 0 },
            { label: "<1次/周", value: 1 },
            { label: "1~2次/周", value: 2 },
            { label: "≥3次/周", value: 3 },
          ],
        },
        {
          index: 7,
          question: "日间功能障碍-白天困倦、注意力不集中等",
          criteria: [
            { label: "无", value: 0 },
            { label: "<1次/周", value: 1 },
            { label: "1~2次/周", value: 2 },
            { label: "≥3次/周", 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 <= 7; 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>