问卷调查学生与班主任页面更新完成

src/layout/question/classProgress.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="classProgress">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <span style="padding:0 50px 0 0;">
+            问卷进度：<span>{{ progressInfo.answertotal }}/{{ progressInfo.alltotal }}</span>
+          </span>
+          <span>
+            总完成度：<span>{{ progressInfo.completiontotal }}</span>
+          </span>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="list" v-for="(item, index) in progressInfo.data" :key="index">
+            <el-col :span="16" class="name">
+              <span>{{ item.name }}</span>
+            </el-col>
+            <el-col :span="8" class="completion"> 完成度：{{ item.completion }} </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'classProgress',
+  props: {
+    progressInfo: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 15px 10px 0 10px;
+}
+.info .top {
+  text-align: center;
+  padding: 10px 0;
+  border-bottom: 1px dashed #333;
+}
+.info .top span span {
+  color: red;
+}
+.main {
+  padding: 10px 0 0 0;
+}
+.list {
+  padding: 10px;
+  background: #fff;
+  margin: 0 0 10px 0;
+  border-radius: 10px;
+}
+.list .name {
+  padding: 0;
+}
+.list .completion {
+  padding: 0;
+}
+</style>

src/layout/question/quesProgress.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="quesProgress">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="list" v-for="(item, index) in quesProgress" :key="index">
+          <el-col :span="18" class="name">
+            <p>{{ item.name }}</p>
+          </el-col>
+          <el-col :span="6" class="btn">
+            <el-link :underline="false" @click="showBtn(item.id)">查看完成度</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+    <!-- <van-overlay :show="show" @click="closeBtn">
+      <div class="wrapper" @click="closeBtn">
+        <el-col :span="24" class="center">
+          <el-col :span="24" class="top">
+            <span>问卷进度：{{ progressInfo.answertotal }}/{{ progressInfo.alltotal }}</span>
+          </el-col>
+          <el-col :span="24" v-for="(item, index) in progressInfo.data" :key="index">
+            <el-col :span="12">
+              <span>{{ item.name }}</span>
+            </el-col>
+            <el-col :span="12">
+              {{ item.completion }}
+            </el-col>
+          </el-col>
+        </el-col>
+      </div>
+    </van-overlay> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'quesProgress',
+  props: {
+    quesProgress: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {
+    classid() {
+      return this.$route.query.classid;
+    },
+  },
+  methods: {
+    showBtn(questionnaireid) {
+      this.$router.push({ path: '/question/classProgress', query: { questionnaireid: questionnaireid, classid: this.classid } });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  padding: 10px;
+  margin: 10px;
+  background: #fff;
+  border-radius: 10px;
+  width: 95%;
+}
+.list .name p {
+  padding: 10px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list .btn {
+  text-align: center;
+  padding: 10px 0;
+}
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.center {
+  width: 90%;
+  background: #ffffff;
+  padding: 0 0 10px 0;
+  border-radius: 10px;
+}
+</style>

src/layout/question/teaClass.vue

@@ -8,7 +8,7 @@
             <p>班级人数：{{ item.number }}</p>
           </el-col>
           <el-col :span="7" class="btn">
-            <el-link :underline="false" @click="$router.push({ path: '/question/progress', query: { classid: item.id } })">班级问卷进度</el-link>
+            <el-link :underline="false" @click="$router.push({ path: '/question/teaProgress', query: { classid: item.id } })">班级问卷进度</el-link>
           </el-col>
         </el-col>
       </el-col>

src/router/index.js

@@ -70,12 +70,19 @@ const routes = [
     meta: { title: '填写答案', isleftarrow: true },
     component: () => import('../views/question/question.vue'),
   },
+  // 班主任查看班级问卷调查
+  {
+    path: '/question/teaProgress',
+    meta: { title: '问卷调查-班级问卷', isleftarrow: true },
+    component: () => import('../views/question/teaProgress.vue'),
+  },
   // 班主任查看班级问卷调查答题进度
   {
-    path: '/question/progress',
-    meta: { title: '问卷调查-问卷进度', isleftarrow: true },
-    component: () => import('../views/question/progress.vue'),
+    path: '/question/classProgress',
+    meta: { title: '问卷调查-班级问卷答题进度', isleftarrow: true },
+    component: () => import('../views/question/classProgress.vue'),
   },
+
   // 个人信息
   {
     path: '/user/index',

src/store/index.js

@@ -6,6 +6,7 @@ import group from '@frame/store/group';
 import question from '@frame/store/question';
 import questionAnswer from '@frame/store/question-answer';
 import questionnaire from '@frame/store/questionnaire';
+import completion from '@frame/store/question-completion';
 import director from '@frame/store/director';
 import student from '@frame/store/student';
 import lesson from '@frame/store/lesson';
@@ -46,5 +47,6 @@ export default new Vuex.Store({
     subject,
     task,
     dept,
+    completion,
   },
 });

src/views/question/progress.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="progress">
+  <div id="classProgress">
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="top">
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          问卷调查
+          <classProgressList :progressInfo="progressInfo"></classProgressList>
         </el-col>
       </el-col>
     </el-row>
@@ -15,15 +15,19 @@
 
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
-import teaLeaveList from '@/layout/user/teaLeaveList.vue';
+import classProgressList from '@/layout/question/classProgress.vue';
 import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: completion } = createNamespacedHelpers('completion');
+import _ from 'lodash';
 export default {
-  name: 'progress',
+  name: 'classProgress',
   props: {},
   components: {
     NavBar, //头部导航
+    classProgressList, //班级问卷进度
   },
   data: () => ({
+    progressInfo: {},
     title: '',
     isleftarrow: '',
     navShow: true,
@@ -32,6 +36,12 @@ export default {
     this.searchInfo();
   },
   computed: {
+    questionnaireid() {
+      return this.$route.query.questionnaireid;
+    },
+    classid() {
+      return this.$route.query.classid;
+    },
     ...mapState(['user']),
   },
   mounted() {
@@ -44,7 +54,15 @@ export default {
       this.isleftarrow = to.meta.isleftarrow;
     },
   },
-  methods: {},
+  methods: {
+    ...completion({ getCompletion: 'query' }),
+    async searchInfo() {
+      const termFetch = await this.getCompletion({ type: '2', typeid: this.classid, questionnaireid: this.questionnaireid });
+      if (this.$checkRes(termFetch)) {
+        this.$set(this, `progressInfo`, termFetch);
+      }
+    },
+  },
 };
 </script>
 

src/views/question/teaProgress.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="teaProgress">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <quesProgress :quesProgress="quesProgress"></quesProgress>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import quesProgress from '@/layout/question/quesProgress.vue';
+import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: classes } = createNamespacedHelpers('classes');
+const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
+const { mapActions: termquest } = createNamespacedHelpers('termquest');
+import _ from 'lodash';
+export default {
+  name: 'teaProgress',
+  props: {},
+  components: {
+    NavBar, //头部导航
+    quesProgress, //班级问卷进度
+  },
+  data: () => ({
+    classInfo: {},
+    quest: [],
+    quesProgress: [],
+    title: '',
+    isleftarrow: '',
+    navShow: true,
+  }),
+  created() {
+    this.searchInfo();
+  },
+  computed: {
+    id() {
+      return this.$route.query.classid;
+    },
+    ...mapState(['user']),
+  },
+  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: {
+    ...classes({ classFectch: 'fetch' }),
+    ...questionnaire({ getQuestionnaireList: 'query' }),
+    ...termquest({ getTermQuestList: 'query' }),
+    // 查询班级信息，全部问卷，当前期问卷
+    async searchInfo() {
+      // 班级信息
+      let classInfo = await this.classFectch(this.id);
+      if (this.$checkRes(classInfo)) {
+        this.$set(this, `classInfo`, classInfo.data);
+      }
+      //查询所有问卷
+      const quest = await this.getQuestionnaireList();
+      if (this.$checkRes(quest)) {
+        this.$set(this, `quest`, quest.data);
+      }
+      //查询这期的所有问卷,id=>数据
+      const res = await this.getTermQuestList({ termid: this.classInfo.termid });
+      let { questionnaireid, termid, ...othrers } = res.data[0];
+      let newArr = this.quest.filter(q => (_.find(questionnaireid, sq => sq === q.id) ? q : ''));
+      this.$set(this, `quesProgress`, newArr);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+</style>