web-qn/src/components/WebQn.vue

<template>
  <div>
    <!-- page title -->
    <div v-if="stage == 0">
      <mt-header type="default" title="问卷调查-问候语" fixed></mt-header>
    </div>
    <div v-else-if="stage == 1">
      <mt-header title="问卷调查-问卷题目" fixed>
        <mt-button v-if="questionHEAD!=0" icon="back" slot="left" @click="onPreTap">返回</mt-button>
      </mt-header>
    </div>
    <div v-else-if="stage == 2">
      <mt-header title="问卷调查-结束语" fixed></mt-header>
      <p>
        <img src="static/ending-image.jpeg" style="width: 100%;"/>
      </p>
    </div>

    <!-- 问候语 -->
    <div v-if="stage == 0">
      <p style="margin: 80px 0;">{{questionaire.info.hello}}</p>
      <mt-button type="primary" @click="start" class="button-bottom">继续</mt-button>
    </div>

    <!-- 问卷题目 -->
    <div rows="auto * auto" v-else-if="stage==1">
      <!-- 题目问题 -->
      <div style="margin:20px 0 40px 0">
        <!-- <Progress :value="questionHEAD" :maxValue="questionaire.questions.length" /> -->
        <mt-progress :value="percent" :bar-height="5" style="margin-top: -30px;"></mt-progress>
        <div>
          <span class="h3">{{questionHEAD + 1}}、</span>
          <span class="h3" style="margin-left: 5;">[</span>
          <span class="h3">{{questionType}}</span>
          <span class="h3" style="margin-right: 5;">]</span>
        </div>

        <p class="h3">{{questionBody}}</p>

        <span class="h3">{{questionRemark}}</span>
      </div>

      <mt-radio
        v-if="questionType == '单选题'"
        v-model="selectedSingle"
        :options="questionOptions"
        @change="onOptionSelected"
      ></mt-radio>
      <mt-checklist
        v-else-if="questionType == '多选题'"
        v-model="selectedMultiple"
        :options="questionOptions"
        @change="onOptionSelected"
      ></mt-checklist>
      <textarea
        v-model="answerValue"
        placeholder="请在此输入答案"
        v-else-if="questionType == '开放题'"
        style="width: 96%;height: 160px;"
      />

      <mt-button
        type="primary"
        @click="onQuestionConfirm"
        class="button-bottom"
        v-show="nextBtnVisible"
      >继续</mt-button>
    </div>
    <!-- <div rows="* auto" v-else class="margin">
                <Label class="body" :text="questionaire.info.bye" textWrap="true" verticalAlignment="top" />
                <Button text="继续" @tap="onFinishTap" row="1" />
    </div>-->
    <div v-if="stage == 2">
      <p style="margin: 80px 0;">{{questionaire.info.bye}}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import dateFormat from "../dateFormat.js";
import indicatorBiz from "../indicatorBiz.js";
import Vue from "vue";
import { MessageBox } from "mint-ui";

// CREATED(0, "已创建"),
// CLICKED(1, "已点击"),
// STARTED(2, "已开始"),
// COMPLETE(3, "已完成");

export default {
  name: "WebQn",
  data: function() {
    return {};
  },
  data: function() {
    return {
      webQuestionaire: {},
      questionaire: { info: {} },
      questionHEAD: 0,
      answerSheet: {
        // questionaireId: this.questionaire.info.id,
        questionaireId: 0,
        sheetName: "",
        status: 0,
        startTime: null,
        endTime: null,
        locationLong: this.long,
        locationLat: this.lat
      },
      answers: {},
      answerValue: "",
      answerNote: {},
      selectedSingle: "",
      selectedMultiple: [],
      recorder: null,
      isRecording: false,
      indicators: {},
      historyStack: [],
      nextBtnVisible: true,
      webQnUrl: "",
      lastCheckList: []
    };
  },
  mounted: function() {
    let id = this.getParam("id");
    if (!id) {
      alert("无效的问卷地址");
      return;
    }
    this.webQnUrl = this.$baseUrl + "/web-qn/" + id;
    console.log("webQnUrl", this.webQnUrl);
    axios.get(this.webQnUrl + "/judge").then(response => {
      console.log("open way:", response.data);
      this.openWay = response.data;
      if (response.data == "Project") {
        console.log("匿名方式问卷打开");
        let qnDataUrl = this.webQnUrl + "/complete-info-incognito";
        console.log("qnDataUrl:", qnDataUrl);
        axios.get(qnDataUrl).then(r => {
          this.questionaire = r.data;
          this.webQuestionaire = { status: 1 };
          // this.webQuestionaire = webQnResponse.data;
          // this.questionaire.info = r.data.info;
          console.log("匿名方式问卷内容：", this.questionaire);
        });
      } else {
        console.log("登录方式问卷打开");
        axios.get(this.webQnUrl).then(webQnResponse => {
          let qnId = webQnResponse.data.qnId;
          let qnDataUrl = this.webQnUrl + "/complete-info";
          console.log("qnDataUrl", qnDataUrl);
          axios.get(qnDataUrl).then(r => {
            this.questionaire = r.data;
            this.webQuestionaire = webQnResponse.data;
            // this.questionaire.info = r.data.info;
            console.log("登录方式问卷内容", this.questionaire);
          });
        });
      }

      // 获取最新的配额
      // let $this = this;
      // axios.get(`${this.$baseUrl}/questionaire/${this.questionaire.info.id}/indicator`).then(function (response) {
      //     // $this.indicators = response.data
      //     for (let i = 0; i < response.data.length; i++) {
      //         $this.indicators[response.data[i].id] = response.data[i];
      //     }
      // });

      // // 将本次运行写入数据库
      // if (this.questionaire.info.status >= 3) {
      //     this.insertAnswerSheet();
      // }
      // this.onQuestionLoaded();
    });

    let time = new Date();
    this.answerSheet.startTime = dateFormat.formatDate(
      "yyyy-MM-dd HH:mm:ss",
      time
    );
    this.answerSheet.sheetName = this.generateSheetName(time);
  },
  computed: {
    stage() {
      if (this.webQuestionaire.status == 3) {
        // 显示结束语
        return 2;
      } else if (this.webQuestionaire.status == 2) {
        // 显示题目
        return 1;
      } else {
        // 显示问候语
        return 0;
      }
    },
    // pageTitle() {
    //     console.log('compute page title');
    //     let title = '';
    //     switch (this.stage) {
    //         case 0:
    //             title = "问候语";
    //             break;
    //         case 1: title = "问卷内容";
    //             break;
    //         case 2: title = "问卷已结束";
    //             break;
    //     }
    //     if (this.isRecording) {
    //         return `${title}(录音中...)`
    //     } else {
    //         return title;
    //     }
    // },
    currentQuestion() {
      return this.questionaire.questions[this.questionHEAD];
    },
    percent() {
      let perc =
        ((this.questionHEAD + 1) / this.questionaire.questions.length) * 100;
      console.log("percent", perc);
      return perc;
    },
    questionType() {
      let type = this.currentQuestion.type;
      if (type == 1) {
        if (
          this.currentQuestion.minOptions == 1 &&
          this.currentQuestion.maxOptions == 1
        ) {
          return "单选题";
        } else {
          return "多选题";
        }
      } else if (type == 3) {
        return "排序题";
      } else if (type == 4) {
        return "开放题";
      }
    },
    questionBody() {
      // 处理${ID}的情况
      return this.replaceDollarId(this.currentQuestion.body);
    },
    questionRemark() {
      // 处理${ID}的情况
      return this.replaceDollarId(this.currentQuestion.remark);
    },
    upperDatasourceQuestion() {
      console.log("call upperDatasourceQuestion");
      // 获取上一级的数据源所在的题目id（同一个id，但列数小1的题目）
      if (!this.currentQuestion.datasourceId) {
        return 0;
      } else {
        let dsId = this.currentQuestion.datasourceId;
        let dsColumn = this.currentQuestion.datasourceColumn;
        for (let i = 0; i < this.questionHEAD; i++) {
          if (
            this.questionaire.questions[i].datasourceId == dsId &&
            this.questionaire.questions[i].datasourceColumn == dsColumn - 1
          ) {
            return this.questionaire.questions[i].id;
          }
        }
        return 0;
      }
    },
    questionOptions() {
      console.log("call questionOptions");
      let opts = [];
      if (this.upperDatasourceQuestion == 0) {
        opts = this.currentQuestion.options;
      } else {
        let dsId = this.currentQuestion.datasourceId;
        let dsColumn = this.currentQuestion.datasourceColumn;
        let targetOptionId = this.answers[this.upperDatasourceQuestion].answer;
        let dsFilter = this.findOptionContent(
          this.upperDatasourceQuestion,
          targetOptionId
        );
        let subDataColumn = [];
        let datasource = null;
        for (let i in this.questionaire.datasource) {
          if (this.questionaire.datasource[i].id == dsId) {
            datasource = this.questionaire.datasource[i];
            break;
          }
        }
        if (!datasource) {
          return this.currentQuestion.options;
        }
        for (let i in datasource.contentList) {
          if (datasource.contentList[i]["c" + (dsColumn - 1)] == dsFilter) {
            subDataColumn.push(datasource.contentList[i]["c" + dsColumn]);
          }
        }

        let subOptions = [];
        for (let i in this.currentQuestion.options) {
          if (
            this.currentQuestion.options[i].datasourceId == 0 ||
            subDataColumn.indexOf(
              this.currentQuestion.options[i].optionContent
            ) >= 0
          ) {
            subOptions.push(this.currentQuestion.options[i]);
          }
        }
        opts = subOptions;
      }
      // 组装成 mt-radio 或 mt-checklist 组件需要的格式
      for (let i = 0; i < opts.length; i++) {
        // let label = `${i + 1}、${opts[i].optionContent}`;
        let label = `${opts[i].optionContent}`;
        let value = i.toString();
        Vue.set(opts[i], "label", label);
        Vue.set(opts[i], "value", value);
      }
      return opts;
    }
  },
  watch: {
    questionHEAD() {
      //换题后返回页面顶部
      console.log("before scroll", document.documentElement.scrollTop);
      document.documentElement.scrollTop = 0;
      console.log("after scroll", document.documentElement.scrollTop);
    }
  },
  methods: {
    getParam: function(name) {
      if (
        (name = new RegExp("[?&]" + encodeURIComponent(name) + "=([^&]*)").exec(
          location.search
        ))
      )
        return decodeURIComponent(name[1]);
    },
    // backEventHandler(args) {
    //     console.log('activityBackPressedEvent......')
    //     debugger;
    //     if (this.stage < 2) {
    //         args.cancel = true;
    //         this.onQuitTap();
    //     } else if (this.stage == 2) {
    //         args.cancel = true;
    //         this.onFinishTap();
    //     }
    // },
    start() {
      if (this.openWay == "Project") {
        // 匿名方式打开
        this.webQuestionaire.status = 2;
      } else {
        // 登录状态打开方式
        this.webQuestionaire.status = 2;
        axios
          .put(this.webQnUrl, { status: 2 })
          .then(() => console.log("update status success"));
      }
    },
    getUserName() {
      if (this.openWay == "Project") {
        // 匿名方式打开
        return "incognito";
      } else {
        // 登录状态打开方式
        return this.webQuestionaire.phoneNumber;
      }
    },
    getOrgCode() {
      let orgCode = "webqn";
      return orgCode;
    },
    generateSheetName(time) {
      let orgCode = this.getOrgCode();
      let userName = this.getUserName();
      return `${orgCode}-${dateFormat.formatDate(
        "yyyyMMddHHmmss",
        time
      )}-${userName}`;
    },
    replaceDollarId(body) {
      // 处理${ID}的情况
      let regex = /\$\{(\d+)\}/m;
      let match = regex.exec(body);
      while (match && match[0]) {
        let targetQuestionId = match[1];
        let targetOptionId = this.answers[targetQuestionId].answer;
        let targetOptionContent = this.findOptionContent(
          targetQuestionId,
          targetOptionId
        );
        body = body.replace(match[0], targetOptionContent);
        match = regex.exec(body);
      }
      return body;
    },
    onQuitTap() {
      confirm({
        title: "请确认",
        message: "确定要结束问卷吗？",
        okButtonText: "确定",
        cancelButtonText: "取消"
      }).then(result => {
        if (result) {
          // 中途拒访
          this.finishQuestionaire(2);
        }
      });
    },
    onPreTap() {
      let lastIndex = this.historyStack.pop();
      this.questionHEAD = lastIndex;
      this.onQuestionLoaded(true);
    },
    onListItemTap(event) {
      let selectedOpt = event.item;
      selectedOpt.isSelected = !selectedOpt.isSelected;
      console.log(
        "onListItemTap",
        `select option: ${selectedOpt.optionContent}, selected? ${selectedOpt.isSelected}`
      );
      this.onOptionChange(selectedOpt);
    },
    onOptionSelected(index) {
      console.log("option changed : ", typeof index);
      let _type = typeof index;
      let selectedOpt = null;
      if (_type == "object") {
        // 多选

        let isUnselect = this.lastCheckList.length > index.length;
        if (!isUnselect) {
          let lastIndex = index[index.length - 1];
          selectedOpt = this.questionOptions[lastIndex];
        }
        // 将本次选项写入this.lastCheckList
        this.lastCheckList.length = 0;
        for (let i = 0; i < index.length; i++) {
          this.lastCheckList.push(index[i]);
        }
        if (isUnselect) {
          return;
        }
      } else if (_type == "string") {
        selectedOpt = this.questionOptions[index];
      }
      // 处理开放选项
      if (selectedOpt.open) {
        MessageBox.prompt(selectedOpt.openOptionTips, "请填写").then(
          ({ value }) => {
            console.log(`Dialog value: ${value}, `);
            this.answerNote[selectedOpt.id] = value;
          }
        );
      }
    },
    onQuestionLoaded(isBack) {
      console.log("call onQuestionLoaded");
      if (isBack) {
        let lastQuestionId = this.questionaire.questions[this.questionHEAD].id;
        let lastAnswer = this.answers[lastQuestionId];
        this.answerValue = lastAnswer.answer;
        if (this.currentQuestion.type == 1 && lastAnswer.answerNote) {
          this.answerNote[lastAnswer.answer] = lastAnswer.answerNote;
        }
        delete this.answers[lastQuestionId];
      } else {
        this.answerValue = "";
        this.answerNote = {};
        this.selectedSingle = "";
        this.selectedMultiple = [];
      }

      // 根据题目类型，动态展示对应的答题方式
      // ---- 已在页面绑定中体现了

      // 处理${ID}的情况
      // ---- 已在computed questionBody()中处理

      // 处理数据源绑定（如果绑定了数据源并且上一列已经选中，则根据上一列的结果筛选选项）
      // ---- 已在computed questionOptions()中处理

      // 如果某选项会跳转到结束问卷，则提示出来
      // ---- 已在页面绑定中体现了
    },
    findOptionContent(targetQuestionId, targetOptionId) {
      for (let i in this.questionaire.questions) {
        if (this.questionaire.questions[i].id == targetQuestionId) {
          console.log("target qeustion", this.questionaire.questions[i].body);
          for (let j in this.questionaire.questions[i].options) {
            if (
              this.questionaire.questions[i].options[j].id == targetOptionId
            ) {
              console.log(
                "target option",
                this.questionaire.questions[i].options[j].optionContent
              );
              return this.questionaire.questions[i].options[j].optionContent;
            }
          }
        }
      }
    },
    onQuestionConfirm() {
      console.log("onQuestionConfirm...");
      // let selections = [];
      let selectionIds = [];
      let questionId = this.questionaire.questions[this.questionHEAD].id;
      if (this.currentQuestion.type == 1) {
        if (this.questionType == "单选题") {
          if (this.selectedSingle) {
            selectionIds.push(this.questionOptions[this.selectedSingle].id);
          }
        } else {
          for (let i = 0; i < this.selectedMultiple.length; i++) {
            selectionIds.push(
              this.questionOptions[this.selectedMultiple[i]].id
            );
          }
        }
        console.log("selectionIds", selectionIds);
        if (
          this.currentQuestion.maxOptions &&
          this.currentQuestion.maxOptions < selectionIds.length
        ) {
          alert(`最多可选中${this.currentQuestion.maxOptions}项`);
          return;
        }
        if (
          this.currentQuestion.minOptions &&
          this.currentQuestion.minOptions > selectionIds.length
        ) {
          alert(`最少需选中${this.currentQuestion.minOptions}项`);
          return;
        }

        // 确定答案
        // this.answers[questionId] = selectionIds.join(',');
        this.answers[questionId] = {
          questionId: questionId,
          answer: selectionIds.join(",")
        };

        if (
          this.currentQuestion.maxOptions == 1 &&
          this.answerNote[selectionIds[0]]
        ) {
          this.answers[questionId].answerNote = this.answerNote[
            selectionIds[0]
          ];
        } else if (this.currentQuestion.maxOptions > 1) {
          let answerNoteObj = {};
          for (let index in selectionIds) {
            let selectedId = selectionIds[index];
            if (this.answerNote[selectedId]) {
              answerNoteObj[selectedId] = this.answerNote[selectedId];
            }
          }
          this.answers[questionId].answerNote = JSON.stringify(answerNoteObj);
        }

        // 判断是否配额不足
        let isIndicartorOut = indicatorBiz.isIndicartorOut(
          this.currentQuestion,
          this.indicators,
          this.answers
        );
        if (isIndicartorOut) {
          // 配额不足，跳转至结束
          this.finishQuestionaire(4);
          return;
        }

        // 判断是否需要跳题以及是否需要结束问卷
        let hopToQuestionId = 0;
        if (
          this.currentQuestion.type == 1 &&
          this.currentQuestion.maxOptions == 1
        ) {
          for (let i in this.questionOptions) {
            let opt = this.questionOptions[i];
            if (opt.id == selectionIds[0] && opt.redirectTo != 0) {
              hopToQuestionId = opt.redirectTo;
              break;
            }
          }
        }
        console.log("hop to question", hopToQuestionId);
        if (hopToQuestionId == -2) {
          // 甄别不过，跳转至结束
          this.finishQuestionaire(3);
          return;
        } else if (hopToQuestionId == -1) {
          // 正常结束
          this.finishQuestionaire(1);
          return;
        } else if (hopToQuestionId > 0) {
          // 跳转到某道题
          // for (let i in this.questionaire.questions) {
          for (let i = 0; i < this.questionaire.questions.length; i++) {
            if (this.questionaire.questions[i].id == hopToQuestionId) {
              this.questionHEAD = i;
              this.onQuestionLoaded();
              return;
            }
          }
        }
      } else if (this.currentQuestion.type == 3) {
        // 排序题
      } else if (this.currentQuestion.type == 4) {
        // 开放题
        if (this.currentQuestion.required && !this.answerValue) {
          alert("此项必填");
          return;
        }
        this.answers[questionId] = {
          questionId: questionId,
          answer: this.answerValue
        };
      }

      if (this.questionHEAD == this.questionaire.questions.length - 1) {
        // 所有题目都回答完了，问卷正常结束
        this.finishQuestionaire(1);
        return;
      } else {
        // 进入下一道题
        this.historyStack.push(this.questionHEAD);
        this.questionHEAD++;
      }
      this.onQuestionLoaded();
    },
    finishQuestionaire(status) {
      if (this.questionaire.info.status >= 3) {
        this.answerSheet.status = status;
        this.answerSheet.endTime = dateFormat.formatDate(
          "yyyy-MM-dd HH:mm:ss",
          new Date()
        );
        let arr = [];
        for (let i in this.answers) {
          arr.push(this.answers[i]);
        }
        // 持久化answerSheet数据
        // this.updateAnswerSheetData(JSON.stringify(arr));

        axios
          .post(this.webQnUrl, {
            sheet: this.answerSheet,
            answers: arr
          })
          .then(() => {
            // this.updateAnswerSheetDataUploaded(true);
            // alert('问卷结果已提交');
            if (this.openWay == "Project") {
              this.webQuestionaire.status = 3;
            } else {
              // 登录状态打开方式
              this.webQuestionaire.status = 3;
            }
          });
      }
    },
    onFinishTap() {
      if (app.android) {
        app.android.off(
          app.AndroidApplication.activityBackPressedEvent,
          this.backEventHandler
        );
        console.log("backEventHandler off");
      }
      if (this.isRecord) {
        this.recorder.stop().catch(ex => {
          console.log("recorder stop failed", ex);
          this.isRecording = false;
        });
      }
      this.$modal.close();
    },
    insertAnswerSheet() {
      this.$db.execSQL(
        "insert into answer_sheet values(?,?,?,?,?,?,?,?,?,?,?,?)",
        [
          this.answerSheet.sheetName,
          this.answerSheet.questionaireId,
          this.answerSheet.status,
          this.answerSheet.startTime,
          null,
          this.answerSheet.locationLong,
          this.answerSheet.locationLat,
          null,
          0,
          this.isRecord ? 1 : 0,
          0,
          this.getUserName()
        ],
        function(err) {
          if (err) {
            console.error("insertAnswerSheet error", err);
          }
        }
      );
    }
    // updateAnswerSheetData(answerJson) {
    //     this.$db.execSQL('update answer_sheet set endTime = ?, answerJson = ?, status = ? where sheetName = ?',
    //         [
    //             this.answerSheet.endTime,
    //             answerJson,
    //             this.answerSheet.status,
    //             this.answerSheet.sheetName,
    //         ], function (err) {
    //             if (err) {
    //                 console.error('updateAnswerSheetData error', err)
    //             }
    //         })
    // },
    // updateAnswerSheetDataUploaded(isDataUploaded) {
    //     this.$db.execSQL('update answer_sheet set dataUploaded = ?  where sheetName = ?',
    //         [
    //             isDataUploaded ? 1 : 0,
    //             this.answerSheet.sheetName,
    //         ], function (err) {
    //             if (err) {
    //                 console.error('updateAnswerSheetDataUploaded error', err)
    //             }
    //         })
    // }
  }
};
</script>

<style scoped>
.button-bottom {
  width: 96%;
  /* position: absolute; */
  /* left: 2%; */
  /* bottom: 2%; */
  margin-top: 40px;
  margin-left: 2%;
}
</style>