预览问卷

src/views/question/part/wenjuan.vue

@@ -20,7 +20,8 @@
             </el-table-column>
             <el-table-column label="操作">
               <template slot-scope="scope">
-                <el-button size="mini" @click="detailBtn(scope.row)">查看</el-button>
+                <el-button size="mini" @click="editBtn(scope.row)">编辑</el-button>
+                <el-button size="mini" @click="detailBtn(scope.row)">预览</el-button>
                 <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
               </template>
             </el-table-column>
@@ -76,19 +77,25 @@
             <el-button type="primary" @click="submitFrom">确 定</el-button>
           </div>
         </el-dialog>
+        <el-dialog title="预览问卷" :visible.sync="dialogVisible">
+          <wenjuandetail :detail="detail"></wenjuandetail>
+        </el-dialog>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import wenjuandetail from '@/views/question/part/wenjuandetail.vue';
 import { createNamespacedHelpers, mapState } from 'vuex';
 const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
 const { mapActions: question } = createNamespacedHelpers('question');
 export default {
   name: 'wenjuan',
   props: {},
-  components: {},
+  components: {
+    wenjuandetail,
+  },
   data: () => ({
     list: [], //列表
     total: 0, //总数
@@ -98,7 +105,8 @@ export default {
       { value: '1', label: '发布' },
       { value: '2', label: '停用' },
     ], //状态选择数组
-    dialogFormVisible: false, //控制dialog是否显示
+    dialogFormVisible: false, //控制表单dialog是否显示
+    dialogVisible: false, //控制预览问卷dialog是否显示
     form: {},
     questions: [], //问题数组
     questiontotal: 0, //问题总数
@@ -118,6 +126,7 @@ export default {
       num: { required: true, message: '序号不能为空', trigger: 'blur' },
       status: { required: true, message: '状态不能为空', trigger: 'blur' },
     }, //表单验证规则
+    detail: {}, //问卷详情
   }),
   created() {
     this.search();
@@ -150,7 +159,7 @@ export default {
       }
     },
     // 查看详情
-    async detailBtn(item) {
+    async editBtn(item) {
       this.dialogFormVisible = true;
       this.form = item;
       await this.searchQuestion();
@@ -168,10 +177,15 @@ export default {
       });
     },
     //删除
-    async deleteBtn() {
+    async deleteBtn(id) {
       let res = await this.delete(id);
       if (res.errcode == 0) this.search();
     },
+    //预览问卷
+    detailBtn(item) {
+      this.dialogVisible = true;
+      this.$set(this, `detail`, item);
+    },
     //问卷分页
     handleCurrentChange(val) {
       this.search({ skip: (val - 1) * 10, limit: val * 10 });

src/views/question/part/wenjuandetail.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="wenjuandetail">
+    <el-row>
+      <el-col :span="24">
+        <el-col class="title" :span="24">{{ detail.name }}</el-col>
+        <el-col class="question" :span="24" v-for="(item, index) in detail.question" :key="index">
+          <p style="margin:5px 0;">
+            {{ index + 1 }}({{ item.type == '0' ? '单选' : item.type == '1' ? '多选' : item.type == '2' ? '问答' : '未识别' }})、{{ item.topic }}
+          </p>
+          <span v-if="item.type == '0'">
+            <el-radio-group v-model="item.answer" v-for="i in item.option" :key="i.number">
+              <el-radio :label="i.opname">{{ i.opname }}</el-radio>
+            </el-radio-group>
+          </span>
+          <span v-else-if="item.type == '1'">
+            <el-checkbox-group v-model="item.answer" v-for="i in item.option" :key="i.number">
+              <el-checkbox :label="i.opname"></el-checkbox>
+            </el-checkbox-group>
+          </span>
+          <span v-else-if="item.type == '2'">
+            <el-input v-model="item.answer" placeholder="请输入内容"></el-input>
+          </span>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wenjuandetail',
+  props: {
+    detail: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {
+    this.search();
+  },
+  computed: {},
+  methods: {
+    // 处理数据
+    search() {
+      for (const question of this.detail.question) {
+        if (question.type == '1') {
+          question.answer = [];
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.title {
+  text-align: center;
+  font-size: 25px;
+  font-weight: bold;
+}
+.question {
+  font-size: 16px;
+}
+</style>