From de2af7931f6f013445e8ea69093d5c40e13bff88 Mon Sep 17 00:00:00 2001
From: alwayrun <minge23@live.cn>
Date: Tue, 28 May 2024 18:16:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E9=87=8D=E6=9E=84=20s?=
 =?UTF-8?q?etters=20=E7=BB=84=E4=BB=B6=E4=B8=8B=E5=87=A0=E5=A4=84=20watch?=
 =?UTF-8?q?=20=E5=88=9D=E5=A7=8B=E5=80=BC=E5=BC=95=E5=8F=91=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E7=9B=91=E5=90=AC=E9=97=AE=E9=A2=98=20(#178)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../materials/setters/widgets/CheckBox.vue    | 46 ++++++++++---------
 .../setters/widgets/FormdataBackFill.vue      | 22 +++++----
 .../materials/setters/widgets/InputSetter.vue | 14 +++---
 .../setters/widgets/QuestionTime.vue          |  7 +--
 .../setters/widgets/QuestionTimeHour.vue      |  5 +-
 .../materials/setters/widgets/RadioGroup.vue  |  5 +-
 .../materials/setters/widgets/RadioSetter.vue |  5 +-
 .../setters/widgets/SelectSetter.vue          |  8 ++--
 8 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/web/src/materials/setters/widgets/CheckBox.vue b/web/src/materials/setters/widgets/CheckBox.vue
index 4fe7df9a..6df14725 100644
--- a/web/src/materials/setters/widgets/CheckBox.vue
+++ b/web/src/materials/setters/widgets/CheckBox.vue
@@ -38,32 +38,34 @@ const handleCheckboxChange = (value: boolean) => {
   emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 
-const watchOptionOrigin = computed(() => props.moduleConfig.optionOrigin)
-const watchExtraOptions = computed(() => props.moduleConfig?.extraOptions?.length || [])
-const watchValue = computed(() => props.formConfig.value)
+watch(
+  () => props.moduleConfig.optionOrigin,
+  (newVal) => {
+    const key = props.formConfig.key
+    const extraLen = props.moduleConfig?.extraOptions?.length
 
-watch(watchOptionOrigin, (newVal) => {
-  const key = props.formConfig.key
-  const extraLen = props.moduleConfig?.extraOptions?.length
-
-  if (key === 'randomSort' && newVal && extraLen === 0) {
-    emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
-    modelValue.value = false
+    if (key === 'randomSort' && newVal && extraLen === 0) {
+      emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
+      modelValue.value = false
+    }
   }
-})
-
-watch(watchExtraOptions, (newVal) => {
-  const key = props.formConfig.key
-  const origin = props.moduleConfig?.optionOrigin
-
-  if (key === 'randomSort' && origin && newVal === 0) {
-    emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
-    modelValue.value = false
-  }
-})
+)
 
 watch(
-  watchValue,
+  () => props.moduleConfig?.extraOptions?.length || [],
+  (newVal) => {
+    const key = props.formConfig.key
+    const origin = props.moduleConfig?.optionOrigin
+
+    if (key === 'randomSort' && origin && newVal === 0) {
+      emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
+      modelValue.value = false
+    }
+  }
+)
+
+watch(
+  () => props.formConfig.value,
   (newVal: boolean) => {
     if (newVal !== modelValue.value) {
       modelValue.value == !!newVal
diff --git a/web/src/materials/setters/widgets/FormdataBackFill.vue b/web/src/materials/setters/widgets/FormdataBackFill.vue
index 06b23f37..69e7e262 100644
--- a/web/src/materials/setters/widgets/FormdataBackFill.vue
+++ b/web/src/materials/setters/widgets/FormdataBackFill.vue
@@ -62,19 +62,21 @@ const handleSwitchChange = (value: string | null) => {
   emit(FORM_CHANGE_EVENT_KEY, { key: formdataBackfillHourKey, value: value ? '24' : null })
 }
 
-const watchValue = computed(() => props.formConfig.value)
-watch(watchValue, (config) => {
-  const formdataBackfill = config[formdataBackfillKey]
-  const formdataBackfillHour = !!config[formdataBackfillHourKey]
+watch(
+  () => props.formConfig.value,
+  (config) => {
+    const formdataBackfill = config[formdataBackfillKey]
+    const formdataBackfillHour = !!config[formdataBackfillHourKey]
 
-  if (formdataBackfill !== selectModelValue.value) {
-    selectModelValue.value = formdataBackfill
-  }
+    if (formdataBackfill !== selectModelValue.value) {
+      selectModelValue.value = formdataBackfill
+    }
 
-  if (formdataBackfillHour !== switchModelValue.value) {
-    switchModelValue.value = formdataBackfillHour
+    if (formdataBackfillHour !== switchModelValue.value) {
+      switchModelValue.value = formdataBackfillHour
+    }
   }
-})
+)
 </script>
 <style lang="scss" scoped>
 .row {
diff --git a/web/src/materials/setters/widgets/InputSetter.vue b/web/src/materials/setters/widgets/InputSetter.vue
index 06124cf5..c9bc7123 100644
--- a/web/src/materials/setters/widgets/InputSetter.vue
+++ b/web/src/materials/setters/widgets/InputSetter.vue
@@ -6,7 +6,7 @@
   ></el-input>
 </template>
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
 interface Props {
@@ -21,7 +21,6 @@ const emit = defineEmits<Emit>()
 const props = defineProps<Props>()
 
 const modelValue = ref(props.formConfig.value || '')
-const lazyValue = computed(() => props.formConfig.value)
 
 const handleInputBlur = () => {
   const { key, validate, value } = props.formConfig
@@ -40,9 +39,12 @@ const handleInputBlur = () => {
   }
 }
 
-watch(lazyValue, (value) => {
-  if (value !== modelValue.value) {
-    modelValue.value = value
+watch(
+  () => props.formConfig.value,
+  (value) => {
+    if (value !== modelValue.value) {
+      modelValue.value = value
+    }
   }
-})
+)
 </script>
diff --git a/web/src/materials/setters/widgets/QuestionTime.vue b/web/src/materials/setters/widgets/QuestionTime.vue
index bcf7d32b..6fa5a6e0 100644
--- a/web/src/materials/setters/widgets/QuestionTime.vue
+++ b/web/src/materials/setters/widgets/QuestionTime.vue
@@ -20,7 +20,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import moment from 'moment'
 import 'moment/locale/zh-cn'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
@@ -49,14 +49,11 @@ const begTimeStr = ref(moment(defaultBeginTime).format(format))
 const endTimeStr = ref(moment(defaultEndTime).format(format))
 
 const handleDatePickerChange = (key: string, value: string) => {
-  console.log(key, value)
   emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 
-const watchValue = computed(() => props.formConfig.value)
-
 watch(
-  watchValue,
+  () => props.formConfig.value,
   ([begTime, endTime]: any) => {
     if (!!begTime && begTime !== begTimeStr.value) {
       begTimeStr.value = begTime
diff --git a/web/src/materials/setters/widgets/QuestionTimeHour.vue b/web/src/materials/setters/widgets/QuestionTimeHour.vue
index 89049a51..2b9b06a8 100644
--- a/web/src/materials/setters/widgets/QuestionTimeHour.vue
+++ b/web/src/materials/setters/widgets/QuestionTimeHour.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 import moment from 'moment'
 import 'moment/locale/zh-cn'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
@@ -52,9 +52,8 @@ const handleTimePickerChange = (values: Array<string>) => {
   times.forEach((value, idx) => emit(FORM_CHANGE_EVENT_KEY, { key: keys[idx], value }))
 }
 
-const watchValue = computed(() => props.formConfig.value)
 watch(
-  watchValue,
+  () => props.formConfig.value,
   ([startTime = '00:00:00', endTime = '23:59:59']: Array<string>) => {
     if (startTime !== timeValue.value[0] || endTime !== timeValue.value[1]) {
       const times = [startTime, endTime]
diff --git a/web/src/materials/setters/widgets/RadioGroup.vue b/web/src/materials/setters/widgets/RadioGroup.vue
index 39c62cb5..864fc069 100644
--- a/web/src/materials/setters/widgets/RadioGroup.vue
+++ b/web/src/materials/setters/widgets/RadioGroup.vue
@@ -42,7 +42,10 @@ const handleRadioGroupChange = (value: string) => {
 }
 
 watch(
-  props.formConfig,
+  () => ({
+    value: props.formConfig?.value,
+    defaultValue: props.formConfig?.defaultValue
+  }),
   (config) => {
     if (config.value == null || config.value == undefined) {
       modelValue.value = config.defaultValue
diff --git a/web/src/materials/setters/widgets/RadioSetter.vue b/web/src/materials/setters/widgets/RadioSetter.vue
index c4c0a5a9..dcd378e4 100644
--- a/web/src/materials/setters/widgets/RadioSetter.vue
+++ b/web/src/materials/setters/widgets/RadioSetter.vue
@@ -53,7 +53,10 @@ const handleRadioGroupChange = (value: string) => {
 }
 
 watch(
-  props.formConfig,
+  () => ({
+    value: props.formConfig?.value,
+    defaultValue: props.formConfig?.defaultValue
+  }),
   (config) => {
     if (config.value == null || config.value == undefined) {
       modelValue.value = config.defaultValue
diff --git a/web/src/materials/setters/widgets/SelectSetter.vue b/web/src/materials/setters/widgets/SelectSetter.vue
index 63fd00a5..7b44dcbf 100644
--- a/web/src/materials/setters/widgets/SelectSetter.vue
+++ b/web/src/materials/setters/widgets/SelectSetter.vue
@@ -77,10 +77,10 @@ const handleSelectChange = (value: string) => {
 }
 
 watch(
-  props.formConfig,
-  (newValue) => {
-    if (modelValue.value != newValue.value) {
-      modelValue.value = newValue.value
+  () => props.formConfig?.value,
+  (val) => {
+    if (modelValue.value != val) {
+      modelValue.value = val
     }
   },
   { deep: true }