feat: 完成 预览功能， 适配组件

- 完成预览的功能，可以提供回看已经提交的内容
- 适配单选、矩阵、文件上传、填空等组件
- question 的类型添加 answre 字段

src/views/Design/components/Questions/NPS.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="content">
     <van-field
-      v-model="element.stem"
-      :label="element.stem"
-      :required="element.config.is_required === 1"
+      v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
       label-align="top"
     >
       <template #left-icon>
@@ -13,13 +11,13 @@
         <contenteditable v-model="element.stem" :active="active" @blur="saveStem"></contenteditable>
       </template>
       <template #input>
-        <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
+        <div v-for="(optionItem, optionItemIndex) in isPreview ? element.list : element.options" :key="optionItemIndex">
           <div
-            v-for="(item, optionIndex) in optionItem"
-            :key="optionIndex"
+            v-for="(item, optionIndex) in isPreview ? optionItem.options : optionItem" :key="optionIndex"
             @click="chooseOption(item)"
           >
-            <RateCharacter v-model="answerValue" :config="element.config"></RateCharacter>
+            <RateCharacter v-model="rate" :index="optionIndex" :config="element.config" @change="handleRateChange">
+            </RateCharacter>
             <div class="tips">
               <p>{{ element.config.prompt_left }}</p>
               <p>{{ element.config.prompt_center }}</p>
@@ -36,6 +34,7 @@
 import { ref, toRefs } from 'vue';
 import RateCharacter from './RateCharacter.vue';
 
+const isPreview = defineModel('isPreview', { default: false });
 const props = defineProps({
   element: {
     type: Object
@@ -51,6 +50,36 @@ const props = defineProps({
   sn: { type: String, default: '' },
   questionType: { type: [String, Number], default: 4 }
 });
+
+// answer 的答案以 矩阵形式存储， 例如 [4,7]，上层更新答案的时候也容易
+const rates = defineModel('rates', { default: [] });
+const rate = ref(0);
+
+// 不知道的 BUG ，开始的时候不能重置颜色。 故如此
+setTimeout(() => {
+  rate.value = localStorage.getItem(props.sn);
+  console.log(`rate value:`, rate.value);
+  // if (rates.value[0] !== undefined) {
+  // console.log(`rates value:`, rates.value);
+  // rate.value = rates.value[0]
+  // }
+  // else return
+}, 1000);
+
+/**
+ *
+ * @param index {number} 索引
+ * @param rate {number} 具体数值
+ */
+function handleRateChange(index, rate) {
+  //  如果没有查询到对应索引的数值， 那么就直接push一个，直到有数值为止
+  while (rates.value.length < index) {
+    rates.value.push(NaN);
+  }
+  rates.value[index] = rate;
+  localStorage.setItem(props.sn, rate.value);
+}
+
 const { element } = toRefs(props);
 const chooseId = ref('');
 const emit = defineEmits(['update:element']);