gengxin

src/router/index.js

@@ -86,6 +86,12 @@ const routes = [
         meta: { title: '问卷统计详情' },
         component: () => import('@/views/classes/completion-detail.vue'),
       },
+      {
+        path: '/statistics/nostu',
+        name: 'statistics_nostu',
+        meta: { title: '问卷-未答学生统计' },
+        component: () => import('@/views/classes/nostu.vue'),
+      },
 
       // {
       //   path: '/classes/lesson',

src/views/classes/completion-detail.vue

@@ -5,7 +5,7 @@
         <template #header>
           <span>{{ quest.name }}</span>
           [<span>完成度：</span><span>{{ questionAnswer.percentage }}%</span> <span>已答：</span><span>{{ questionAnswer.yesAnswer }}</span> <span>未答：</span
-          ><span>{{ questionAnswer.noAnswer }}</span
+          ><span @click="nostuBtn()" class="nostu">{{ questionAnswer.noAnswer }}</span
           >]
         </template>
         <el-tabs v-model="tabs" :stretch="true" type="card">
@@ -193,6 +193,13 @@ export default {
       data = data.map(v => filterVal.map(j => v[j]));
       export_json_to_excel(tHeader, data, this.quest.name);
     },
+    // 未答
+    nostuBtn() {
+      this.$router.push({
+        path: '/statistics/nostu',
+        query: { termid: this.querys.termid, questionnaireid: this.querys.questionnaireid, classid: this.querys.classid },
+      });
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -212,4 +219,12 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.nostu {
+  color: #ff0000;
+  font-weight: bold;
+}
+.nostu:hover {
+  cursor: pointer;
+}
+</style>

src/views/classes/nostu.vue

@@ -0,0 +1,107 @@
+<template>
+  <div id="nostu">
+    <detail-frame :title="pageTitle" :returns="toReturns">
+      <el-table :data="list" stripe style="width: 100%" border>
+        <el-table-column prop="name" label="学生姓名" align="center"> </el-table-column>
+        <el-table-column prop="nation" label="民族" align="center"> </el-table-column>
+        <el-table-column prop="gender" label="性别" align="center"> </el-table-column>
+        <el-table-column prop="school_name" label="学校" align="center"> </el-table-column>
+        <el-table-column prop="major" label="专业" align="center"> </el-table-column>
+        <el-table-column prop="termname" label="期数" align="center"> </el-table-column>
+        <el-table-column prop="batchname" label="批次" align="center"> </el-table-column>
+        <el-table-column prop="classname" label="班级" align="center"> </el-table-column>
+        <el-table-column prop="job" label="职位" align="center"> </el-table-column>
+        <el-table-column prop="phone" label="联系电话" align="center"> </el-table-column>
+      </el-table>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
+    </detail-frame>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import detailFrame from '@frame/layout/admin/detail-frame';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: questionanswer } = createNamespacedHelpers('questionanswer');
+const { mapActions: student } = createNamespacedHelpers('student');
+export default {
+  name: 'nostu',
+  props: {},
+  components: {
+    detailFrame,
+  },
+  data: function() {
+    return {
+      stuList: [], //查询数据
+      currentPage: 1, //默认数据1
+      pageSize: 15, //每页显示数据数量
+      origin: [], //分割数据
+      list: [], //显示数据列表
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...questionanswer(['query']),
+    ...student({ findList: 'findList', studentQuery: 'query' }),
+    async search() {
+      let ansres = await this.query(this.querys); //{ questionnaireid: this.id, termid: this.termid, batchid: this.batchid, classid: this.classid }
+      const { questionnaireid, ...stuquery } = this.querys;
+      let studentList = await this.studentQuery(stuquery);
+      let newdata = studentList.data.filter(f => {
+        return !ansres.data.find(f2 => f2.studentid == f.id);
+      });
+      if (newdata) {
+        this.$set(this, `stuList`, newdata);
+        this.$set(this, `total`, newdata.length);
+      }
+    },
+    searchPage(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    toReturns() {
+      window.history.go(-1);
+    },
+  },
+  watch: {
+    stuList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    querys() {
+      return this.$route.query;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page {
+  padding: 15px 0;
+  text-align: center;
+}
+</style>