WXL
2024-09-09 d27e3ada8f1e9c005747988e9bf2519fcd6da21a
src/views/outsideChain.vue
@@ -1,52 +1,97 @@
<template>
  <div class="questionnaire">
    <h1>夏季防暑随访收集问卷</h1>
    <el-form :model="formData" label-width="80px">
      <el-form-item label="问题一">
        <el-input v-model="formData.question1"></el-input>
      </el-form-item>
      <el-form-item label="问题二">
        <el-input v-model="formData.question2"></el-input>
      </el-form-item>
      <el-form-item label="问题三">
        <el-radio-group v-model="formData.question3">
          <el-radio label="选项1">选项1</el-radio>
          <el-radio label="选项2">选项2</el-radio>
          <el-radio label="选项3">选项3</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题四">
        <el-radio-group v-model="formData.question3">
          <el-radio label="选项1">选项1</el-radio>
          <el-radio label="选项2">选项2</el-radio>
          <el-radio label="选项3">选项3</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题五">
        <el-radio-group v-model="formData.question3">
          <el-radio label="选项1">选项1</el-radio>
          <el-radio label="选项2">选项2</el-radio>
          <el-radio label="选项3">选项3</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题六">
        <el-radio-group v-model="formData.question3">
          <el-radio label="选项1">选项1</el-radio>
          <el-radio label="选项2">选项2</el-radio>
          <el-radio label="选项3">选项3</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交问卷</el-button>
      </el-form-item>
    </el-form>
    <div class="CONTENT">
      <div class="title">随访问卷</div>
      <div class="preview-left">
        <!-- 单选 -->
        <div
          class="topic-dev"
          v-for="(item, index) in questionList"
          :key="item.aaa"
        >
          <div
            class="scriptTopic-dev"
            :key="item.sort"
            v-if="item.scriptType == 1"
          >
            <div class="dev-text">
              {{ item.sort }}、[单选]<span>{{ item.scriptContent }}</span>
            </div>
            <div class="dev-xx">
              <el-radio-group v-model="item.remark">
                <el-radio
                  v-for="(items, index) in item.svyLibTemplateTargetoptions"
                  :key="index"
                  :label="index"
                  >{{ items.optioncontent }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <!-- 多选 -->
          <div
            class="scriptTopic-dev"
            :key="item.sort"
            v-if="item.scriptType == 2"
          >
            <div class="dev-text">
              {{ item.sort }}、[多选]<span>{{ item.scriptContent }}</span>
            </div>
            <div class="dev-xx">
              <el-checkbox-group v-model="qremark">
                <el-checkbox
                  v-for="(items, index) in item.svyLibTemplateTargetoptions"
                  :key="index"
                  :label="index"
                >
                  {{ items.optioncontent }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 填空 -->
          <div
            class="scriptTopic-dev"
            :key="item.sort"
            v-if="item.scriptType == 4"
          >
            <div class="dev-text">
              {{ item.sort }}、[问答]<span>{{ item.scriptContent }}</span>
            </div>
            <div class="dev-xx">
              <el-input placeholder="请输入答案" v-model="radioas" clearable>
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <el-form :model="formData" label-width="80px">
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交问卷</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  getExternalfollowup,
  SetsaveQuestionAnswer,
} from "@/api/AiCentre/index";
import JSEncrypt from "jsencrypt";
export default {
  data() {
    return {
      taskid: 355,
      patid: 265823,
      questionList: null,
      // 前端公钥
      publicKey:
        "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKR0yHv0rbJWQE+Sc7/FwpW66qMd9qX2k6z+SDgkSdxWh/1GbBoAP7bDQQRF6vXmoKsD2ya42H6XRLSDXAoayuMCAwEAAQ== ",
      // 后端私钥
      privateKey:
        " MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEAtDOpbUQhcEoYy77agRhIHmAzs7H+KHJhN56gTTI9fWq23j77nI055MFV3oQQziIrNUTNaPpEQhZXBpI0+f9K9QIDAQABAkB3n0fcWfrcoMN/FU3VnrnZOEF6CzFNxkgU9P8y36QECWKZ9JhYQkNpKrMC9oXlN3VSaRigV7B+L/I/a0Rs1W+tAiEA4jx7xcXJ4y4BNwAmVHt6NNiEkzIwWnwC/0qsEu8NsOsCIQDL6MMn1D2uznC6OuOWpxDCkBh1JL1NzZTZeH2G+hj7nwIgKGAC9tjFnvWm4dn0/T7MIIJDpsFeP8fCAS2iZ/6hwuECIAS/eLvWr1EAsZNEh8QcQ8GkBU3E+ztyjAK8UX/xFt/VAiBf79/1tDErX4/DChecM8w3c3DhbBcjuE3fHZn7p6/UKg==",
      formData: {
        question1: "",
        question2: "",
@@ -59,28 +104,126 @@
    this.getQuestionnaire();
  },
  methods: {
    // 获取数据
    getQuestionnaire() {
      this.taskid = this.$route.query.param1;
      this.patid = this.$route.query.param2;
      let taskname = this.$route.query.param3;
      let routertf = this.$route.query.param5;
      // console.log(taskid, "taskid");
      // console.log(patid, "patid");
      // console.log(taskname, "taskname");
      // console.log(routertf, "routertf");
      // let taskid =
      //   "OFp7tn/B6x7IzKJetvGWHdSWBj7msRlnlj6am9dyuHTH6sEt4uBbVCUXs5kcF/e4O2W6vqHf2Bz9K3/evbYDmw==";
      // let patid =
      //   "CVk0j8O86AeCqhV5WPsBBYDg9fec0wDoDlP9imYK4wDBNIkxywZzMJEGlPagOxnq6qr2WYZo0U8MUGWRGnq8ZA==";
      // 解密
      // this.taskid = this.decrypt(taskid);
      // this.patid = this.decrypt(patid);
      // this.taskid = taskid;
      // this.patid = 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);
      getExternalfollowup({ param1: this.taskid, param2: this.patid }).then((res) => {
        if (res.code == 200) {
          this.questionList = res.rows;
        }
      });
    },
    // 加密函数
    encrypt(txt) {
      const encryptor = new JSEncrypt();
      encryptor.setPublicKey(this.publicKey); // 设置公钥
      return encryptor.encrypt(txt); // 对数据进行加密
    },
    // 解密函数
    decrypt(txt) {
      const encryptor = new JSEncrypt();
      encryptor.setPrivateKey(this.privateKey); // 设置私钥
      return encryptor.decrypt(txt); // 对数据进行解密
    },
    // 提交
    submitForm() {
      // 提交表单逻辑
      console.log(this.formData);
      console.log(this.questionList);
      let form = {
        param1: this.taskid,
        param2: this.patid,
        ivrTaskcalldetailList: [],
      };
      this.questionList.forEach((item) => {
        let optionarr = [];
        item.ivrLibaScriptTargetoptionList.forEach((option) => {
          optionarr.push(option.targetvalue);
        });
        let ivrTaskcalldetail = {
          asrtext: item.asrtext,
          valueType: item.valueType,
          scriptContent: item.scriptContent,
          targetoptions: optionarr.join(","),
        };
        form.ivrTaskcalldetailList.push(ivrTaskcalldetail);
      });
      console.log(form, "form");
      SetsaveQuestionAnswer(form).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("提交成功");
        }
      });
      // 可以将数据提交到后端或者进行其他处理
    },
    getQuestionnaire() {
      this.taskid = this.$route.query.taskid;
      this.userid = this.$route.query.userid;
      this.$modal.msgSuccess("用户id为" + this.userid);
      this.$modal.msgSuccess("任务id为" + this.taskid);
    },
  },
};
</script>
<style scoped>
<style lang="scss" scoped>
.questionnaire {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #e1f3f2;
  // background-image: url("../assets/images/chainbackground.jpg");
  // background-repeat: no-repeat;
  // background-position: center center;
  // background-size: cover;
  // height: 100vh;
  background-image: url("../assets/images/chainbackground.jpg");
  background-size: cover;
  background-attachment: fixed; /* 保持背景固定 */
  background-position: center;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  .CONTENT {
    padding: 10px;
    .title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
    }
  }
}
.preview-left {
  margin: 20px;
  //   margin: 20px;
  padding: 30px;
  // 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;
    }
  }
}
</style>