train-center/src/views/questionstate/index.vue

<template>
  <div id="index">
    <list-frame title="问卷完成度查询" :total="total" :needFilter="false" :needAdd="false" :needPag="views === 'plan'">
      <transition name="el-fade-in-linear">
        <self-cards :title="planTitle" v-if="views === `plan`">
          <data-table :fields="fields" :data="list" :opera="opera" @view="data => toView(data, 'term')"></data-table>
        </self-cards>
        <self-cards :title="termTitle" v-if="views === `term`" :returns="toReturns">
          <data-table :fields="termFields" :data="termList" :opera="opera" @view="data => toView(data, 'pool')"></data-table>
        </self-cards>
        <self-cards title="问卷列表" v-if="views === `pool`" :returns="toReturns">
          <data-table :fields="quesFields" :data="quesList" :opera="opera" @view="data => toView(data, 'batch')"></data-table>
        </self-cards>
        <self-cards :title="batchTitle" v-if="views === `batch`" :returns="toReturns">
          <el-alert :title="`进度:${batch.answertotal || 0}/${batch.alltotal || 0}`" :closable="false"></el-alert>
          <data-table :fields="batchFields" :data="batch.list" :opera="opera" @view="data => toView(data, 'class')"></data-table>
        </self-cards>
        <self-cards :title="classTitle" v-if="views === `class`" :returns="toReturns">
          <el-alert :title="`进度:${classes.answertotal || 0}/${classes.alltotal || 0}`" :closable="false"></el-alert>
          <data-table :fields="classFields" :data="classes.list" :opera="opera" @view="data => toView(data, 'student')"></data-table>
        </self-cards>
        <self-cards :title="studentTitle" v-if="views === `student`" :returns="toReturns">
          <el-alert :title="`进度:${student.answertotal || 0}/${student.alltotal || 0}`" :closable="false"></el-alert>
          <data-table :fields="studFields" :data="student.list" :opera="[]"></data-table>
        </self-cards>
      </transition>
    </list-frame>
  </div>
</template>

<script>
import listFrame from '@frame/layout/admin/list-frame';
import dataTable from '@frame/components/data-table';
import selfCards from './parts/cards';
import _ from 'lodash';
import { createNamespacedHelpers } from 'vuex';
const { mapActions: trainPlan } = createNamespacedHelpers('trainplan');
const { mapActions: classes } = createNamespacedHelpers('classes');
const { mapActions: student } = createNamespacedHelpers('student');
const { mapActions: completion } = createNamespacedHelpers('completion');
const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
const { mapActions: termquest } = createNamespacedHelpers('termquest');
export default {
  name: 'index',
  metaInfo: { title: '问卷完成度查询' },
  props: {},
  components: {
    listFrame,
    dataTable,
    selfCards,
  },
  data: () => ({
    views: 'plan', // term, batch, class
    planTitle: '全年计划',
    termTitle: '',
    batchTitle: '',
    classTitle: '',
    studentTitle: '',
    planid: undefined,
    opera: [
      {
        label: '查看',
        icon: 'el-icon-view',
        method: 'view',
      },
    ],
    fields: [
      { label: '计划标题', prop: 'title' },
      { label: '年度', prop: 'year' },
      {
        label: '状态',
        prop: 'status',
        format: i => {
          return i === '0' ? '筹备中' : i === '1' ? '发布中' : '已结束';
        },
      },
    ],
    list: [],
    termFields: [{ label: '期数', prop: 'term' }],
    termList: [],
    quesFields: [{ label: '标题', prop: 'name' }],
    quesList: [],
    quest: [],
    batchFields: [
      { label: '批次', prop: 'name' },
      { label: '进度', prop: 'completion' },
    ],
    batch: {
      list: [],
    },
    classFields: [
      { label: '班级', prop: 'name' },
      { label: '进度', prop: 'completion' },
    ],
    classes: {
      list: [],
    },
    total: 0,
    studFields: [
      { label: '姓名', prop: 'name' },
      { label: '进度', prop: 'completion' },
    ],
    student: {
      list: [],
    },
    classid: '',
    studTotal: 0,
  }),

  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...trainPlan(['query', 'delete', 'update']),
    ...completion({ getCompletion: 'query' }),
    ...classes({ getClassesList: 'query' }),
    ...student({ getStudentList: 'query' }),
    ...termquest({ getTermQuestList: 'query' }),
    ...questionnaire({ getQuestionnaireList: 'query' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, status: '1', ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
      const quest = await this.getQuestionnaireList();
      if (this.$checkRes(res)) {
        this.$set(this, `quest`, quest.data);
      }
    },
    async toView({ data }, type) {
      this.views = type;
      if (type === 'term') {
        let planid = data._id;
        this.planid = planid;
        this.$set(this, `termTitle`, data.title);
        this.$set(this, `termList`, data.termnum);
      }
      if (type === 'pool') {
        let termid = data._id;
        let res = await this.getTermQuestList({ termid: termid });
        if (this.$checkRes(res)) {
          let { term } = data;
          let { questionnaireid, termid, ...othrers } = res.data[0];
          let newArr = this.quest.filter(q => (_.find(questionnaireid, sq => sq === q.id) ? q : ''));
          newArr = newArr.map(q => {
            q.term = term;
            q.termid = termid;
            return q;
          });
          this.$set(this, `quesList`, newArr);
        }
      }
      if (type === 'batch') {
        let termid = data.termid;
        let questionnaireid = data.id;
        let res = await this.getCompletion({ type: '0', typeid: termid, trainplanid: this.planid, questionnaireid });
        if (this.$checkRes(res)) {
          let { data: completion, answertotal, alltotal, completiontotal } = res;
          completion = completion.map(i => {
            i.completion.includes('NaN') ? (i.completion = '-') : '';
            i.questname = data.name;
            i.term = data.term;
            i.questionnaireid = questionnaireid;
            return i;
          });
          this.$set(this, `batch`, { list: completion, answertotal, alltotal, completiontotal });
        }
        this.$set(this, `batchTitle`, `第${data.term}期 问卷${data.name}进度`);
      }
      if (type === 'class') {
        let { id: batch, questname, term, questionnaireid } = data;
        let res = await this.getCompletion({ type: '1', typeid: batch, questionnaireid });
        if (this.$checkRes(res)) {
          let { data: completion, answertotal, alltotal, completiontotal } = res;
          completion = completion.map(i => {
            i.completion.includes('NaN') ? (i.completion = '-') : '';
            i.questname = data.questname;
            i.questionnaireid = questionnaireid;
            return i;
          });
          this.$set(this, `classes`, { list: completion, answertotal, alltotal, completiontotal });
        }
        this.$set(this, `classTitle`, `${data.name} 问卷${questname}进度`);
      }
      if (type === 'student') {
        let { id, questname, questionnaireid } = data;
        let res = await this.getCompletion({ type: '2', typeid: data.id, 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 });
        }
        this.$set(this, `studentTitle`, `${data.name} 问卷${questname}进度`);
      }
    },
    toReturns() {
      if (this.views === 'term') this.views = 'plan';
      else if (this.views === 'pool') this.views = 'term';
      else if (this.views === 'batch') this.views = 'pool';
      else if (this.views === 'class') this.views = 'batch';
      else if (this.views === 'student') this.views = 'class';
    },
  },
  watch: {
    views: {
      handler(val) {
        if (val === 'plan') this.planid = undefined;
      },
    },
  },
};
</script>

<style lang="less" scoped></style>