Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions web/src/materials/setters/widgets/CheckBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(watchOptionOrigin, (newVal) => {
const key = props.formConfig.key
const extraLen = props.moduleConfig?.extraOptions?.length
watch(
() => props.moduleConfig.optionOrigin,
(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
watch(
() => 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
if (key === 'randomSort' && origin && newVal === 0) {
emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
modelValue.value = false
}
}
})
)

watch(
watchValue,
() => props.formConfig.value,
(newVal: boolean) => {
if (newVal !== modelValue.value) {
modelValue.value == !!newVal
Expand Down
22 changes: 12 additions & 10 deletions web/src/materials/setters/widgets/FormdataBackFill.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
14 changes: 8 additions & 6 deletions web/src/materials/setters/widgets/InputSetter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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>
7 changes: 2 additions & 5 deletions web/src/materials/setters/widgets/QuestionTime.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions web/src/materials/setters/widgets/QuestionTimeHour.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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]
Expand Down
5 changes: 4 additions & 1 deletion web/src/materials/setters/widgets/RadioGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion web/src/materials/setters/widgets/RadioSetter.vue
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的watch监听同理，建议使用getter函数返回监听props属性，而不需要对props单独做一个计算属性取监听

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已调整

Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions web/src/materials/setters/widgets/SelectSetter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down