feat:打分题配置

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

@@ -15,7 +15,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
+
 const rateItem = ref([
   {
     label: 1,
@@ -36,34 +37,48 @@ const rateItem = ref([
   {
     label: 5,
     active: false
-  },
-  {
-    label: 6,
-    active: false
-  },
-  {
-    label: 7,
-    active: false
-  },
-  {
-    label: 8,
-    active: false
-  },
-  {
-    label: 9,
-    active: false
-  },
-  {
-    label: 10,
-    active: false
   }
 ]);
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true
+  }
+});
+
+const renderScore = (min, max, interval) => {
+  const result = [];
+  for (let i = min; i <= max; i += interval) {
+    result.push({
+      label: i,
+      active: false
+    });
+    // 如果达到 10 条数据，停止生成
+    if (result.length === 11) {
+      break;
+    }
+  }
+  rateItem.value = result;
+};
 const getItem = (value) => {
   // chooseId.value = value.id;
   rateItem.value.forEach((item, index) => {
     rateItem.value[index].active = item.label <= value.label;
   });
 };
+
+// 监听 min、max 和 score_interval 的变化
+watch(
+  () => [props.config.min, props.config.max, props.config.score_interval],
+  (newValues) => {
+    const [newMin, newMax, newScoreInterval] = newValues;
+    // this.renderScore();
+    renderScore(newMin, newMax, newScoreInterval);
+    // 在这里可以添加对这些值变化的处理逻辑
+  },
+  { immediate: true }
+);
 </script>
 
 <style scoped lang="scss">
@@ -76,7 +91,7 @@ ul {
 .rate_item {
   margin: 0 3px;
   margin-top: 5px;
-  padding: 0 8px;
+  padding: 0 7px;
   border: 1px solid #ddd;
   border-radius: 4px;
   color: #666;