acupuncture/acupuncture-前台/src/views/medicalFile/h5eva.vue

<template>
  <div class="app-container" v-loading="loading">
    <div class="hospital">中医体质辩识</div>
    <!-- 姓名、性别（单选）、出生日期、年龄、联系方式 -->
    <div class="card">
      <div class="card-title">基本信息</div>
      <el-descriptions class="margin-top" :column="1">
        <el-descriptions-item label="姓名">{{
          form.name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">
          {{ form.phone }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="card">
      <div
        class="q-example"
        v-for="(item, index) in evaList"
        :key="item.quesCode"
      >
        <div class="q-title">{{ index + 1 }}. {{ item.quesName }}</div>
        <div class="q-option-box">
          <el-radio-group v-model="item.optionCode" size="small">
            <el-radio
              class="q-radio"
              v-for="option in item.options"
              :key="option.optionCode"
              :label="option.optionCode"
              @click.native="handleRadio($event, item, option)"
              >{{ option.optionName }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="submit-box">
      <el-button
        type="primary"
        class="submit-box-but"
        @click="handleEvaComplete"
      >
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
import { evaTestList, evaTestSubmit, evaComplete } from "@/api/medicalFile.js";

export default {
  name: "Notice",
  data() {
    return {
      form: {},
      evaList: [],
      disabled: true,
      loading: false,
      evaId: "",
    };
  },
  created() {
    let { id, name, phone, tenantId } = this.$route.query;
    this.form = { id, name, phone, tenantId };
    localStorage.setItem("tenantId", tenantId);
    console.log(" this.form", this.form);
    this.getList(); // 创建测评
  },
  methods: {
    /** 查看试题列表 */
    getList() {
      this.loading = true;
      evaTestList({ param: { evaId: this.form.id } }).then((res) => {
        // 处理已选答案的显示问题
        res.data.questions.forEach((item) => {
          item.options.forEach((row) => {
            if (row.optionChecked == 1) {
              item.optionCode = row.optionCode;
            }
          });
        });
        this.evaList = res.data.questions;
        this.loading = false;
      });
    },
    // 提交试题答案
    handleRadio(_e, _item, option) {
      // 处理单选框会触发两次的问题
      if (_e.target.tagName === "INPUT") {
        return;
      }
      let questions = {
        optionCode: option.optionCode,
        optionName: option.optionName,
        optionScore: option.optionScore,
        quesCode: _item.quesCode,
      };
      evaTestSubmit({
        param: { evaId: this.form.id, questions: [questions] },
      }).then((res) => {});
    },
    /** 完成测评 */
    handleEvaComplete() {
      try {
        let flat = true;
        let testNUmArr = [];
        this.evaList.forEach((item, index) => {
          if (!item.optionCode) {
            testNUmArr.push(index + 1);
            flat = false;
          }
        });
        if (!flat) {
          this.$message.error(`请选择所有题目答案（${testNUmArr.join("、")}）`);
          return;
        }
        this.loading = true;
        evaComplete({ param: { evaId: this.form.id } }).then((res) => {
          this.evaList = res.data.questions;
          this.loading = false;
          this.$router.replace({
            path: "/medicalResult",
            query: {
              evaId: this.form.id,
            },
          });
        });
      } catch (e) {
        console.log("e", e);
      }
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-descriptions-item__content {
  font-weight: bold;
}
>>> .el-descriptions-item__container {
  font-size: 16px;
}
.q-radio {
  display: block;
  margin-bottom: 10px;
}
.q-option-box {
  margin: 16px 0px;
}

.q-title {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
  line-height: 26px;
}

>>> .el-dialog__header {
  padding-bottom: 0;
}
>>> .el-checkbox {
  margin-right: 10px rtant;
}
.form-item-xbs >>> .el-form-item__content {
  margin-left: 0 !important;
}
.qq {
  color: green;
}
.idcardupd {
  height: 44px;
  margin-bottom: 14px;
}
.idcardupd-but {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.idcardupd-but span {
  padding-top: 1px;
}
.idcardupd-but img {
  width: 20px;
  height: 20px;
}
.idcardupd >>> .el-upload {
  height: 44px;
  border: none;
  background: #dad0a7;
}
.hospital1 {
  text-align: center;
  font-size: 14px;
  color: #999;
}
.hospital {
  background: #fff;
  font-size: 20px;
  color: #406e49;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 10px;
  border-radius: 6px;
  text-align: center;
}
.BIMTips1 {
  color: #cccccc;
}
.BIMTips2 {
  color: #66cc00;
}
.BIMTips3 {
  color: #c3c300;
}
.BIMTips4 {
  color: #ff9900;
}
.BIMTips5 {
  color: red;
}
.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 .submit-box-but {
  background: #dad0a7;
  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;
}

.card-tips {
  font-size: 14px;
  color: #999999;
}
/*  */
.app-container {
  /* background: linear-gradient(to bottom, #406E49, #f7f8fa); */
  background: #406e49;
  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: 20px;
}

>>> .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;
} -->