train-dirtea/src/views/question/dir/dir-quest.vue

<template>
  <div id="dir-quest">
    <template v-if="view == 'list'">
      <el-card style="margin:10px" v-for="(i, index) in questList" :key="index" @click.native="toDetail(i, 'detail')">
        <p>{{ i.name }}</p>
        <p>类型:{{ i.type == 0 ? '常用问卷' : '非常用问卷' }}</p>
      </el-card>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="3" style="margin:5px 10px">
          <el-button type="text" size="mini" icon="el-icon-arrow-left" @click="view = 'list'">返回问卷列表</el-button>
        </el-col>
      </el-row>
      <van-panel title="进度" :status="`${student.answertotal || 0}/${student.alltotal || 0}`">
        <van-cell-group>
          <van-cell v-for="(i, index) in student.list" :key="index" :title="i.name" :value="i.completion" />
        </van-cell-group>
      </van-panel>
    </template>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: completion } = createNamespacedHelpers('completion');
const { mapActions: classes } = createNamespacedHelpers('classes');
const { mapActions: termquest } = createNamespacedHelpers('termquest');
const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
const { mapActions: util } = createNamespacedHelpers('util');
export default {
  name: 'dir-quest',
  props: {},
  components: {},
  data: function() {
    return {
      view: 'list', //detail
      questList: [],
      classInfo: {},
      student: {
        list: [],
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...completion({ getCompletion: 'query' }),
    ...classes({ getClass: 'fetch' }),
    ...termquest({ getTermQuestList: 'query' }),
    ...questionnaire({ getQuestionnaireList: 'query', allFetch: 'mergeRequest' }),
    ...util({ modelFetch: 'fetch' }),
    async search() {
      //查询班级信息,获得期,批次
      let res = await this.getClass(this.classid);
      if (!this.$checkRes(res)) {
        this.$notify({ type: 'danger', message: '没有查询到班级' });
        return;
      } else this.$set(this, `classInfo`, res.data);
      let ql = [];
      //查询所有问卷
      const quest = await this.getQuestionnaireList({ type: 0 });
      if (this.$checkRes(quest)) {
        ql = ql.concat(quest.data);
      }
      //查询这期的所有问卷,id=>数据
      let rql = await this.modelFetch({ model: 'termquest', termid: res.data.termid });
      if (this.$checkRes(rql)) {
        let ids = _.get(rql.data, `questionnaireid`);
        if (ids) {
          let questList = await this.allFetch({ method: 'fetch', data: ids });
          ql = ql.concat(questList.filter(f => f.status == 1));
        }
      }
      this.$set(this, `questList`, ql);
    },
    async toDetail(data, type) {
      this.view = type;
      let { id: questionnaireid } = data;
      let { id: batch } = this.classInfo;
      let res = await this.getCompletion({ type: '2', typeid: batch, questionnaireid });
      if (this.$checkRes(res)) {
        let { data: completion, answertotal, alltotal, completiontotal } = res;
        completion = completion.map(i => {
          i.completion.includes('NaN') ? (i.completion = '-') : '';
          return i;
        });
        this.$set(this, `student`, { list: completion, answertotal, alltotal, completiontotal });
      }
    },
  },
  computed: {
    ...mapState(['user', 'classid']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
</style>