datang-meeting/acupuncture-后台/src/views/medicalFile/components/posture/TAPS.vue

<template>
  <div>
    <!--
    1. 后方视角（SET 1）
      图形1	图形2	图形3	图形4	图形5
    2. 弯腰时从上方视角（SET 2）
      图形1	图形2	图形3	图形4	图形5
    3. 前方视角（根据性别选择 SET 3）
      图形1	图形2	图形3	图形4	图形5
    -->
    <div>
      <div style="">
        <img src="./TAPS.png" alt="" />
      </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: "后方视角（SET 1）",
          criteria: [
            { label: "图形1", value: 1 },
            { label: "图形2", value: 2 },
            { label: "图形3", value: 3 },
            { label: "图形4", value: 4 },
            { label: "图形5", value: 5 },
          ],
        },
        {
          index: 2,
          question: "弯腰时从上方视角（SET 2）",
          criteria: [
            { label: "图形1", value: 1 },
            { label: "图形2", value: 2 },
            { label: "图形3", value: 3 },
            { label: "图形4", value: 4 },
            { label: "图形5", value: 5 },
          ],
        },
        {
          index: 3,
          question: "前方视角（根据性别选择 SET 3）",
          criteria: [
            { label: "图形1", value: 1 },
            { label: "图形2", value: 2 },
            { label: "图形3", value: 3 },
            { label: "图形4", value: 4 },
            { label: "图形5", value: 5 },
          ],
        },
      ],
      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>