111

src/views/question/part/wenjuandetail.vue

@@ -2,19 +2,19 @@
   <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">
+        <el-col class="title" :span="24">{{ form.name }}</el-col>
+        <el-col class="question" :span="24" v-for="(item, index) in questions" :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 v-model="item.answer">
+              <el-radio v-for="(i, ri) in item.option" :key="`${index}-${ri}`" :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 v-model="item.answer">
+              <el-checkbox v-for="(i, ci) in item.option" :key="`${index}-${ci}`" :label="i.opname">{{ i.opname }}</el-checkbox>
             </el-checkbox-group>
           </span>
           <span v-else-if="item.type == '2'">
@@ -34,22 +34,33 @@ export default {
     detail: null,
   },
   components: {},
-  data: () => ({}),
-  created() {
-    this.search();
-  },
+  data: () => ({
+    form: {},
+    questions: [],
+  }),
+  created() {},
   computed: {},
   methods: {
-    // 处理数据
-    search() {
-      for (const question of this.detail.question) {
-        if (question.type == '1') {
-          question.answer = [];
-        }
-      }
-    },
     submit() {
-      console.log(this.detail);
+      console.log(this.questions);
+    },
+  },
+  watch: {
+    detail: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.$set(this, `form`, val);
+          let mid = JSON.parse(JSON.stringify(val.question));
+          mid = mid.map(i => {
+            if (i.type == 1) i.answer = [];
+            else i.answer = '';
+            return i;
+          });
+          this.$set(this, `questions`, mid);
+        }
+      },
     },
   },
 };