fix: 调整重构 setters 组件下几处 watch 初始值引发无法监听问题 (#178)

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

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 {

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>

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

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]

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

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

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 }