测试完成

WXL

2024-06-05 f357f41d488c8f91b63d86807874b02e2d9a6d08

 src/views/outsideChain.vue

@@ -1,52 +1,63 @@
<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="dev-text">
            {{ index + 1 }}、<span>{{ item.questionText }}</span>
          </div>

          <div class="dev-xx" v-if="item.valueType == 1">
            <el-radio-group v-model="item.radio">
              <el-radio
                v-for="(items, index) in item.ivrLibaScriptTargetoptionList"
                :key="items.id"
                :label="items.id"
                >{{ items.targetvalue }}</el-radio
              >
            </el-radio-group>
          </div>
          <div v-else>
            <el-input
              type="textarea"
              placeholder="未获取到信息"
              v-model.sync="item.questionResult"
              :rows="2"
            />
          </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 } from "@/api/AiCentre/index";
import CryptoJS from "crypto-js";
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: "",
@@ -65,22 +76,107 @@
      // 可以将数据提交到后端或者进行其他处理
    },
    getQuestionnaire() {
      this.taskid = this.$route.query.taskid;
      this.userid = this.$route.query.userid;
      this.$modal.msgSuccess("用户id为" + this.userid);
      let taskid = this.$route.query.param1;
      let patid = this.$route.query.param2;
      this.taskid = this.decrypt(taskid);
      this.patid = this.decrypt(patid);

      this.$modal.msgSuccess("用户id为" + this.patid);
      this.$modal.msgSuccess("任务id为" + this.taskid);
      this.taskid = this.encrypt(this.taskid);
      this.patid = 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); // 对数据进行解密
    },
    // // 加密函数
    // encryptData(data, publicKey) {
    //   // 将公钥转换为CryptoJS格式
    //   let key = CryptoJS.enc.Utf8.parse(publicKey);

    //   // 使用公钥进行加密
    //   let encrypted = CryptoJS.AES.encrypt(data, key, {
    //     mode: CryptoJS.mode.ECB,
    //     padding: CryptoJS.pad.Pkcs7,
    //   });

    //   // 返回加密后的数据
    //   return encrypted.toString();
    // },

    // // 解密函数
    // decryptData(encryptedData, privateKey) {
    //   // 将私钥转换为CryptoJS格式
    //   let key = CryptoJS.enc.Utf8.parse(privateKey);

    //   // 使用私钥进行解密
    //   let decrypted = CryptoJS.AES.decrypt(encryptedData, key, {
    //     mode: CryptoJS.mode.ECB,
    //     padding: CryptoJS.pad.Pkcs7,
    //   });
    //   // 将解密后的数据转换为字符串并返回
    //   return decrypted.toString(CryptoJS.enc.Utf8);
    // },
  },
};
</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>