WXL
2025-01-09 95075418735842f54c116c2dc2d18199d4408e50
src/views/outsideChainwt.vue
@@ -1,8 +1,19 @@
<template>
  <div class="questionnaire">
    <div class="CONTENT">
      <div class="title">{{ taskname ? taskname : "问卷" }}</div>
    <div class="CONTENT" v-if="!accomplish">
      <div class="preview-left">
        <div class="toptitle">
          <div class="title">{{ taskname ? taskname : "问卷" }}</div>
          <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5">
            {{
              kcb
                ? kcb
                : "亲爱的患者-家属,您好!我们是无锡儿童医院的医护人员,为了更好地了解您的康复情况,请您抽一点宝贵时间,完成这份随访问卷。"
            }}
            <!-- 亲爱的患者/家属您好,为了更好的了解您出院后的康复情况,给您适当及时的健康指导,请您抽一点宝贵时间,完成这份出院随访问卷调查。 -->
          </div>
        </div>
        <el-divider></el-divider>
        <!-- 单选 -->
        <div
          class="topic-dev"
@@ -11,27 +22,51 @@
        >
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 1">
            <div class="dev-text">
              {{ index + 1 }}、[单选]<span>{{ item.scriptContent }}</span>
              {{ index + 1 }}、<span style="line-height: 1.5"
                >{{ item.scriptContent }}
                <span style="color: #3ba2f7">[单选]</span></span
              >
            </div>
            <div class="dev-xx">
              <el-radio-group v-model="item.scriptResult" @change="handleOptionChange($event, index, item)">
              <el-radio-group
                class="custom-radio"
                v-model="item.scriptResult"
                @change="handleOptionChange($event, index, item)"
              >
                <el-radio
                  border
                  v-for="(items, index) in item.svyLibTemplateTargetoptions"
                  :class="
                    items.isabnormal && item.scriptResult == items.optioncontent
                      ? 'red-star'
                      : ''
                  "
                  :key="index"
                  :label="items.optioncontent"
                  >{{ items.optioncontent }}</el-radio
                >
              </el-radio-group>
            </div>
            <div v-show="item.prompt">
              <el-alert :title="item.prompt" type="warning"> </el-alert>
            </div>
          </div>
          <!-- 多选 -->
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 2">
            <div class="dev-text">
              {{ index + 1 }}、[多选]<span>{{ item.scriptContent }}</span>
              {{ index + 1 }}、<span style="line-height: 1.5"
                >{{ item.scriptContent }}
                <span style="color: #3ba2f7">[多选]</span></span
              >
            </div>
            <div class="dev-xx">
              <el-checkbox-group v-model="item.scriptResult">
              <el-checkbox-group
                class="custom-radio"
                v-model="item.scriptResult"
                @change="updateScore($event, index, item)"
              >
                <el-checkbox
                  border
                  @change="$forceUpdate()"
                  v-for="(items, indexs) in item.svyLibTemplateTargetoptions"
                  :key="indexs"
@@ -41,16 +76,23 @@
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- :class="items.isabnormal ? 'red-star' : ''" -->
            <div v-show="item.prompt && item.scriptResult[0]">
              <el-alert :title="item.prompt" type="warning"> </el-alert>
            </div>
          </div>
          <!-- 填空 -->
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 4">
            <div class="dev-text">
              {{ index + 1 }}、[问答]<span>{{ item.scriptContent }}</span>
              {{ index + 1 }}、<span style="line-height: 1.5"
                >{{ item.scriptContent
                }}<span style="color: #3ba2f7">[问答]</span></span
              >
            </div>
            <div class="dev-xx">
              <el-input
                type="textarea"
                :rows="2"
                :rows="3"
                placeholder="请输入答案"
                v-model="item.scriptResult"
                clearable
@@ -59,14 +101,47 @@
            </div>
          </div>
        </div>
        <div class="bottom-fixed">
          <el-button
            type="primary"
            style="width: 80%; font-size: 20px"
            @click="cache(true)"
            >提交问卷</el-button
          >
        </div>
      </div>
      <el-form :model="formData" label-width="80px">
        <el-form-item>
          <el-button type="primary" @click="cache(true)">提交问卷</el-button>
          <el-button type="primary" @click="cache">缓存问卷</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="CONTENT" v-else>
      <div class="preview-lefts">
        <div
          style="
            text-align: center;
            padding-top: 50px;
            font-size: 24px;
            color: #175997;
            font-weight: 600;
            margin-bottom: 10px;
          "
        >
          感谢您的配合!
        </div>
        <div style="font-size: 20px">
          {{
            jsy
              ? jsy
              : "生活上要劳逸结合,注意休息和营养,适当锻炼,戒烟限酒,保持心情舒畅,定期复诊。那本次回访就到这里,祝您身体健康!"
          }}
        </div>
      </div>
    </div>
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <el-alert :title="jsy" type="success"> </el-alert>
      </div>
    </el-dialog> -->
  </div>
</template>
@@ -83,7 +158,99 @@
    return {
      taskid: 355,
      patid: 265823,
      questionList: null,
      kcb: "",
      excep:'',
      questionList: [
        // {
        //   scriptType: 1,
        //   scriptContent: "您的年龄范围是?",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "18-25", value: "18-25", isabnormal: true },
        //     { optioncontent: "26-35", value: "26-35" },
        //     { optioncontent: "36-45", value: "36-45" },
        //     { optioncontent: "46-55", value: "46-55" },
        //     { optioncontent: "56+", value: "56+" },
        //   ],
        //   required: true,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么?",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 2,
        //   scriptContent: "您感兴趣的活动有哪些?",
        //   scriptResult: [],
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "旅游", value: "travel", isabnormal: true },
        //     { optioncontent: "阅读", value: "reading", isabnormal: true },
        //     { optioncontent: "运动", value: "sports", isabnormal: true },
        //     { optioncontent: "音乐", value: "music" },
        //     { optioncontent: "电影", value: "movies" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么?",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么?",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer", isabnormal: true },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么?",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 4,
        //   scriptContent: "您的姓名是什么?",
        //   scriptResult: "name",
        //   required: true,
        //   scriptResult: null,
        // },
      ],
      jsy: null,
      dialogVisible: false,
      Endornot: true,
      accomplish: false,
      // 前端公钥
      publicKey:
        "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKR0yHv0rbJWQE+Sc7/FwpW66qMd9qX2k6z+SDgkSdxWh/1GbBoAP7bDQQRF6vXmoKsD2ya42H6XRLSDXAoayuMCAwEAAQ== ",
@@ -97,7 +264,12 @@
      },
    };
  },
  mounted() {
    window.addEventListener("beforeunload", this.cache);
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", this.cache);
  },
  created() {
    this.getQuestionnaire();
  },
@@ -113,22 +285,20 @@
      //   "CVk0j8O86AeCqhV5WPsBBYDg9fec0wDoDlP9imYK4wDBNIkxywZzMJEGlPagOxnq6qr2WYZo0U8MUGWRGnq8ZA==";
      // this.taskid = this.decrypt(taskid);
      // this.patid = this.decrypt(patid);
      // this.$modal.msgSuccess("用户id为" + this.patid);
      // this.$modal.msgSuccess("任务id为" + this.taskid);
      // let taskids = this.encrypt(this.taskid);
      // let patids = this.encrypt(this.patid);
      console.log(this.$route.query.param1);
      console.log(this.$route.query.param2);
      // 先取缓存
      getCachequestionnaire({ param1: this.taskid, param2: this.patid }).then(
        (res) => {
          if (res.code == 200) {
            this.questionList = res.data;
            this.accomplish = res.data.submit;
            if (this.questionList[0]) {
              this.questionList.forEach((item) => {
                if (item.scriptResult) {
                if (item.scriptResult && item.scriptType != 2) {
                  item.scriptResult = JSON.parse(item.scriptResult);
                } else if (item.scriptResult && item.scriptType == 2) {
                  item.scriptResult = item.scriptResult.split("&");
                }
              });
              return;
@@ -146,7 +316,9 @@
      getExternalfollowup({ param1: this.taskid, param2: this.patid }).then(
        (res) => {
          if (res.code == 200) {
            this.questionList = res.rows;
            this.questionList = res.data.script;
            this.jsy = res.data.jsy;
            this.kcb = res.data.kcb;
            // 处理题目收集结果格式
            this.questionList.forEach((item) => {
              item.nextScriptno = Number(item.nextScriptno);
@@ -158,14 +330,12 @@
        }
      );
    },
    // 加密函数
    encrypt(txt) {
      const encryptor = new JSEncrypt();
      encryptor.setPublicKey(this.publicKey); // 设置公钥
      return encryptor.encrypt(txt); // 对数据进行加密
    },
    // 解密函数
    decrypt(txt) {
      const encryptor = new JSEncrypt();
@@ -178,46 +348,66 @@
      let form = {
        param1: this.taskid,
        param2: this.patid,
        excep:this.excep,
        serviceSubtaskDetailList: [],
      };
      const arr = structuredClone(this.questionList);
      arr.forEach((item) => {
        item.asrtext = JSON.stringify(item.scriptResult);
        if (item.scriptType == 2 && item.scriptResult[0]) {
          item.asrtext = item.scriptResult.join("&");
        }
      });
      // arr.forEach((item) => {
      //   item.asrtext = JSON.stringify(item.scriptResult);
      //   if (item.scriptType == 2 && item.scriptResult[0]) {
      //     item.scriptResult = item.scriptResult.join("&");
      //   }
      // });
      form.serviceSubtaskDetailList = arr;
      Submitaquestionnaire(form).then((res) => {
        if (res.code == 200) {
          if (this.jsy) {
            this.dialogVisible = true;
          }
          this.accomplish = true;
          this.$modal.msgSuccess("提交成功");
        }
      });
      // 可以将数据提交到后端或者进行其他处理
    },
    // 缓存
    cache(subm) {
      console.log("进入缓存");
      let form = {
        param1: this.taskid,
        param2: this.patid,
        svyLibTemplateScriptVOS: [],
      };
      const arr = structuredClone(this.questionList);
      console.log(arr,'srr')
      arr.forEach((item, index) => {
        var obj = item.svyLibTemplateTargetoptions.find(
          (items) => items.optioncontent == item.scriptResult
        );
        if (obj.isabnormal) {
          console.log(obj.isabnormal);
          form.excep = 1;
          this.excep=1;
        }
      });
      arr.forEach((item) => {
        item.scriptResult = JSON.stringify(item.scriptResult);
        if (item.scriptType == 2 && item.scriptResult[0]) {
          item.scriptResult = item.scriptResult.join("&");
        } else if (item.scriptType != 2 && item.scriptResult) {
          item.scriptResult = JSON.stringify(item.scriptResult);
        }
      });
      form.svyLibTemplateScriptVOS = arr;
      Cachequestionnaire(form).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("提交成功");
          if (subm) {
            this.submitForm();
          }
        }
      });
    },
    // 处理选项
    handleOptionChange(selectedvalue, index,arr) {
    // 处理单选选项
    handleOptionChange(selectedvalue, index, arr) {
      // 查找选中的选项对象
      const selectedOption = arr.svyLibTemplateTargetoptions.find(
        (option) => option.optioncontent == selectedvalue
@@ -225,7 +415,23 @@
      if (selectedOption) {
        // 将选中的选项对象的 id 赋值给 obj.sonId
        this.questionList[index].nextScriptno = selectedOption.nextQuestion;
        this.questionList[index].score = selectedOption.score;
        this.questionList[index].prompt = selectedOption.prompt;
      }
    },
    // 处理多选选项
    updateScore(selectedvalues, index, arr) {
      // ��加分数
      let score = 0;
      selectedvalues.forEach((value) => {
        const selectedOption = arr.svyLibTemplateTargetoptions.find(
          (option) => option.optioncontent == value
        );
        if (selectedOption) {
          score += Number(selectedOption.score);
        }
      });
      this.questionList[index].score = score;
    },
  },
};
@@ -233,7 +439,8 @@
<style lang="scss" scoped>
.questionnaire {
  background-image: url("../assets/images/chainbackground.jpg");
  // background-image: url("../assets/images/chainbackground.jpg");
  background-color: #f9f9fb;
  background-size: cover;
  background-attachment: fixed; /* 保持背景固定 */
  background-position: center;
@@ -242,8 +449,8 @@
  margin: 0;
  padding: 0;
  .CONTENT {
    padding: 10px;
    .title {
      color: #3769f3;
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
@@ -252,9 +459,13 @@
  }
}
.preview-left {
  margin: 20px;
  margin: 10px;
  margin-bottom: 60px;
  background-color: #fff;
  border-radius: 5px;
  //   margin: 20px;
  padding: 30px;
  padding: 10px;
  height: 100%;
  // background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
@@ -267,4 +478,118 @@
    }
  }
}
.preview-lefts {
  margin: 10px;
  background-color: #fff;
  border-radius: 5px;
  //   margin: 20px;
  padding: 10px;
  height: 95vh; // background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .topic-dev {
    margin-bottom: 25px;
    font-size: 20px !important;
    .dev-text {
      margin-bottom: 10px;
    }
  }
}
.red-star {
  ::v-deep.el-radio__label {
    position: relative;
    padding-right: 10px; /* 根据需要调整 */
  }
  ::v-deep.el-radio__label::after {
    content: "*";
    color: red;
    position: absolute;
    right: -5px; /* 根据需要调整 */
    top: 0;
  }
  ::v-deep.el-checkbox__label {
    position: relative;
    padding-right: 10px; /* 根据需要调整 */
  }
  ::v-deep.el-checkbox__label::after {
    content: "*";
    color: red;
    position: absolute;
    right: -5px; /* 根据需要调整 */
    top: 0;
  }
}
::v-deep.el-checkbox-group {
  font-size: 0;
  display: flex;
  flex-direction: column;
  margin: 5px 0;
}
::v-deep.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0;
}
::v-deep.el-radio-group {
  display: flex;
  flex-direction: column;
  margin: 5px 0;
}
::v-deep.el-radio.is-bordered + .el-radio.is-bordered {
  /* margin-left: 10px; */
  margin-left: 0;
}
::v-deep.custom-radio .el-radio {
  margin: 2px 0;
}
.radio-option {
  flex: none; /* 不让选项自动填充空间 */
  white-space: nowrap; /* 防止选项文本换行 */
  margin: 0 10px; /* 设置选项左右的间隔 */
  font-size: 20px; /* 增大字体大小 */
}
.el-radio__label {
  font-size: 20px; /* 增大标签文字大小 */
}
.toptitle {
}
.bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0; /* 根据需要调整内边距 */
  background: #fff; /* 根据需要调整背景颜色 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
  z-index: 1000; /* 确保按钮在页面最上层 */
}
::v-deep.el-alert--warning.is-light {
  background-color: #fbf9f3;
  color: #ffba00;
}
::v-deep {
  .el-alert__title {
    font-size: 20px;
    line-height: 18px;
  }
}
::v-deep.el-radio--medium.is-bordered .el-radio__label {
  font-size: 20px;
}
::v-deep.el-radio--medium.is-bordered {
  padding: 5px 20px 0px 10px;
  border-radius: 4px;
  height: 36px;
}
::v-deep.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
  line-height: 17px;
  font-size: 20px;
}
::v-deep.el-checkbox {
  margin-right: 0px;
}
</style>