1

src/components/common/Sidebar.vue

@@ -84,11 +84,11 @@ export default {
           index: '/question',
           title: '问卷管理',
         },
-        {
-          icon: 'el-icon-s-home',
-          index: '/questions',
-          title: '问卷管理(第二种)',
-        },
+        // {
+        //   icon: 'el-icon-s-home',
+        //   index: '/questions',
+        //   title: '问卷管理(第二种)',
+        // },
         {
           icon: 'el-icon-s-home',
           index: '/questionBank',

src/router/index.js

@@ -66,6 +66,11 @@ export default new Router({
           component: () => import('../views/answer/index.vue'),
           meta: { title: '答案管理' },
         },
+        {
+          path: '/answer/detail',
+          component: () => import('../views/answer/detail.vue'),
+          meta: { title: '问卷答题情况' },
+        },
       ],
     },
     {

src/views/answer/detail.vue

@@ -0,0 +1,131 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-button type="primary" size="mini" @click="back">返回</el-button>
+        </el-col>
+        <el-col :span="24" class="down">
+          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView"></data-table>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="答题详情" width="60%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
+      <el-col :span="24" class="dialog">
+        <el-col :span="24" class="list" v-for="(item, index) in form" :key="index">
+          <el-col :span="24" class="quest">
+            <span>{{ index + 1 }}.{{ item.quest }}</span>
+          </el-col>
+          <el-col :span="24" class="answer">
+            {{ item.answer }}
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import dataTable from '@common/src/components/frame/filter-page-table.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: answer } = createNamespacedHelpers('answer');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    dataTable,
+  },
+  data: function() {
+    return {
+      opera: [
+        {
+          label: '查看答案',
+          method: 'view',
+        },
+      ],
+      fields: [
+        { label: '答题人', prop: 'user.name', filter: 'input' },
+        { label: '联系方式', prop: 'user.phone' },
+        { label: '答题时间', prop: 'create_time' },
+      ],
+      list: [],
+      total: 0,
+      // 答题详情
+      dialog: false,
+      form: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...answer(['query', 'fetch', 'create', 'update', 'delete']),
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      info.questionnaire_id = this.id;
+      info.user = true;
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 查看详情
+    toView({ data }) {
+      this.$set(this, `form`, data.answer);
+      this.dialog = true;
+    },
+    // 取消
+    handleClose() {
+      this.form = {};
+      this.dialog = false;
+    },
+    back() {
+      this.$router.push({ path: '/answer' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    text-align: right;
+    margin: 0 0 15px 0;
+  }
+}
+/deep/.el-dialog__body {
+  padding: 0 20px;
+  height: 660px;
+  overflow-y: auto;
+}
+.dialog {
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .quest {
+      color: #000;
+      font-size: 18px;
+      font-weight: bold;
+      margin: 0 0 10px 0;
+    }
+    .answer {
+      font-size: 16px;
+      text-indent: 1rem;
+    }
+  }
+  .list:last-child {
+    border-bottom: none;
+  }
+}
+</style>

src/views/answer/index.vue

@@ -2,36 +2,64 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        test
+        <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView"></data-table>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import dataTable from '@common/src/components/frame/filter-page-table.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
 export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    dataTable,
+  },
   data: function() {
-    return {};
+    return {
+      opera: [
+        {
+          label: '查看问卷情况',
+          method: 'view',
+        },
+      ],
+      fields: [
+        { label: '名称', prop: 'title', filter: 'input' },
+        { label: '信息简介', prop: 'brief' },
+        { label: '创建时间', prop: 'create_time' },
+      ],
+      list: [],
+      total: 0,
+    };
   },
-  created() {},
-  methods: {},
-  computed: {
-    ...mapState(['user']),
+  async created() {
+    await this.search();
   },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
+  methods: {
+    ...questionnaire(['query', 'fetch', 'create', 'update', 'delete']),
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 查看答案
+    toView({ data }) {
+      this.$router.push({ path: '/answer/detail', query: { id: data.id } });
     },
   },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
 };
 </script>