acupuncture/acupuncture-前台/src/views/medicalFile/components/insomnia/epworth.vue

<template>
  <div>
    <!--
    1	坐着阅读书刊	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    2	看电视	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    3	在公共场所坐着不活动（如剧院或会议）	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    4	作为乘客在车内乘坐一小时以上	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    5	午间静卧休息	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    6	坐着和别人交谈	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    7	午餐后静坐（不饮酒）	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    8	坐在车内，当车辆因交通拥堵而停下时	0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡
    -->
    <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: "phq",
  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 },
          ],
        },
      ],
      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 <= 8; 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>