train-student/src/views/question/question.vue

<template>
  <div id="question">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <nav-bar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </nav-bar>
        </el-col>
        <el-col :span="24" class="main" v-if="info">
          <question-info :info="info" :form="form" @submit="submit"></question-info>
        </el-col>
        <el-col :span="24" class="foot">
          <foot-info></foot-info>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import footInfo from '@/layout/common/footInfo.vue';
import questionInfo from '@question/src/views/question.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: mapQuestion } = createNamespacedHelpers('questionnaire');
const { mapActions: questionAnswer } = createNamespacedHelpers('questionAnswer');
export default {
  name: 'question',
  props: {},
  components: {
    NavBar, //头部导航
    footInfo, //底部导航
    questionInfo, //问卷调查
  },
  data: () => ({
    info: {},
    form: {
      opname: [],
    },
    title: '',
    isleftarrow: '',
    transitionName: 'fade',
    navShow: true,
  }),
  created() {
    this.searchInfo();
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
  methods: {
    ...mapQuestion(['query', 'fetch', 'update']),
    ...questionAnswer({ getAnswer: 'query', sendAnswer: 'create', updateAnswer: 'update' }),
    // 查询问卷题
    async searchInfo({ ...info } = {}) {
      let answer = await this.getAnswer({ questionnaireid: this.id, studentid: this.user.userid });
      let asArr = [];
      let asObject = {};
      if (this.$checkRes(answer)) {
        let tAnswer = answer.data[0];
        asArr = _.get(tAnswer, `answers`, []);
        asObject.answerid = _.get(tAnswer, `_id`);
      }
      let result = await this.fetch(this.id);
      // 将答案塞进去
      result.data.question.map(i => {
        if (!i.answer) i.type === '1' ? (i.answer = []) : '';
        let mid = asArr.find(f => f.questionid === i._id);

        if (_.get(mid, `answer`)) {
          i.answer = JSON.parse(mid.answer);
        }
        return i;
      });

      this.$set(this, `info`, { ...result.data, ...asObject });
    },
    // 提交答案
    async submit(task) {
      let { answerid } = task;
      let { termid, batchid, classid, userid: studentid, planid } = this.user;
      let answers = task.question.map(i => {
        let { answer, _id: questionid } = i;
        answer ? (answer = JSON.stringify(answer)) : '';
        return { answer, questionid };
      });
      let object = { termid, batchid, classid, studentid, planid, questionnaireid: this.id, answers };
      let res;
      if (!answerid) {
        res = await this.sendAnswer(object);
      } else {
        object.id = answerid;
        res = await this.updateAnswer(object);
      }
      this.$checkRes(res, '提交成功', res.errmsg);
    },
  },
};
</script>
<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}
.main {
  min-height: 570px;
  margin: 0 0 50px 0;
}
</style>