Skip to content

fix: The form must be filled out to trigger verification, and the verification prompt is not eliminated after assignment #1943

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

Merged
shaohuzhang1 merged 1 commit into from
Dec 30, 2024
Merged

fix: The form must be filled out to trigger verification, and the verification prompt is not eliminated after assignment #1943

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
3 changes: 2 additions & 1 deletion ui/src/components/dynamics-form/FormItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ const to_rule = (rule: any) => {
}
return rule
}

/**
* 校验
*/
Expand All @@ -127,7 +128,7 @@ const rules = computed(() => {
? props_info.value.rules.map(to_rule)
: {
message: errMsg.value,
trigger: 'blur',
trigger: ['blur', 'change'],
required: props.formfield.required === false ? false : true
}
})
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Dec 30, 2024

Choose a reason for hiding this comment

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

The code is generally clean and concise, but there's a small issue with the rules computed property. If no rules are provided via props_info.value.rules, it currently returns an empty object instead of using the default values specified in the comments (message: errMsg.value). You can update this to use those defaults properly:

const rules = computed(() => {
  if (!props_info || !props_info.value || !props_info.value.rules) {
    return {
      message: errMsg.value,
      // Use default triggers based on comment here.
      trigger: props_formfield.trigger ?? 'change',
      required: !!props.formfield.required
    };
  } else {
    return props_info.value.rules.map(to_rule);
  }
});

Additionally, you may want to log some debugging information if something goes wrong during the execution to help identify issues in further checks.

This change ensures that the function behaves as expected when no rules are provided, which might be important depending on your application logic.

Expand Down
20 changes: 10 additions & 10 deletions ui/src/components/dynamics-form/items/radio/RadioCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="radio_content" :style="radioContentStyle">
<el-row :gutter="12" class="w-full">
<template v-for="(item,index) in option_list" :key="index">
<template v-for="(item, index) in option_list" :key="index">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-card
:key="item.value"
Expand All @@ -21,9 +21,10 @@
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { computed, ref, inject } from 'vue'
import type { FormField } from '@/components/dynamics-form/type'
import { useFormDisabled } from 'element-plus'
import { useFormDisabled, formItemContextKey } from 'element-plus'

const inputDisabled = useFormDisabled()

const props = defineProps<{
Expand All @@ -37,11 +38,14 @@ const props = defineProps<{
modelValue?: any
disabled?: boolean
}>()

const elFormItem = inject(formItemContextKey, void 0)
const selected = (activeValue: string | number) => {
emit('update:modelValue', activeValue)
if (elFormItem?.validate) {
elFormItem.validate('change')
}
}
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue', 'change'])
const width = ref<number>()
const radioContentStyle = computed(() => {
if (width.value) {
Expand All @@ -55,11 +59,7 @@ const radioContentStyle = computed(() => {
}
return {}
})
const resize = (wh: any) => {
if (wh.height) {
width.value = wh.width
}
}

const textField = computed(() => {
return props.formField.text_field ? props.formField.text_field : 'key'
})
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Dec 30, 2024

Choose a reason for hiding this comment

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

This code appears to be functioning correctly for the intended purpose of displaying a list of radio button options based on the option_list property passed via props. However, there are some areas that can improve readability and performance:

  1. Unused Import and Function Call: The line import { useFormDisabled } from 'element-plus' is defined but not used. This line should either be removed or utilized to ensure it serves its intended purpose.

  2. Inline Styles: Inline styles set using Vue's :style directive will not automatically update when the element size changes due to layout reflow. It’s better to use dynamic classes when possible to prevent unnecessary re-renders.

  3. Code Organization: There seems to be an attempt to handle validation after option selection with a change event listener, which might work well depending on how you structure your application. However, consider whether this mechanism aligns with best practices in data management.

Here’s an updated version with a focus on making the code cleaner and more maintainable:

<template>
  <div class="radio_content" :class="{ [textField]: true, disabled: disabled }">
    <el-row :gutter="12" class="w-full">
      <template v-for="(item, index) in option_list" :key="item.value">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-card
            :key="item.value"
            @click="selected(item.value)"
            :disabled="inputDisabled || disabled"
          >
            {{ item[textField] }}
          </el-card>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, inject } from 'vue'
import type { FormField } from '@/components/dynamics-form/type'
import { useFormDisabled, formItemContextKey } from 'element-plus'

// Remove unused import
// const inputEnabled = useFormDisabled()

const props = defineProps<{
  modelValue?:
    | string
    | number
    | boolean
    | null
    | undefined
    | Array<string | number | boolean | null | undefined>
  disabled?: boolean
}>()

const elFormItem = inject(formItemContextKey)

const selected = (value: string | number | boolean) => {
  emit('update:modelValue', value)
  // Validate the checkbox immediately
  if ((elFormItem as Record<string, any>)?.validate) {
    (elFormItem as Record<string, any>).validate('change')
  }
}

const emit = defineEmits(['update:modelValue', 'change'])

const textField = computed(() => {
  return props.formField.text_field ? props.formField.text_field : 'key'
})
</script>

<style scoped>
.radio_content.key {
  color: #007FFF; /* Example color */
}

.disabled {
  opacity: 0.6;
}
</style>

Key Changes:

  • Removed an unused import (formUseDisabled) and associated logic.
  • Used inline conditional styling within the v-for, avoiding explicit widths and ensuring responsiveness with CSS Flexbox and Grid properties.
  • Added basic validation handling when user interacts with checkboxes.
  • Styled components with SCSS to apply specific colors and disable effects conditionally.
  • Ensured clear separation between template and script, maintaining logical order while adhering to conventions.

Expand Down
9 changes: 6 additions & 3 deletions ui/src/components/dynamics-form/items/radio/RadioRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { computed, inject } from 'vue'
import type { FormField } from '@/components/dynamics-form/type'
import { useFormDisabled } from 'element-plus'
import { useFormDisabled, formItemContextKey } from 'element-plus'
const inputDisabled = useFormDisabled()
const props = defineProps<{
formValue?: any
Expand All @@ -26,9 +26,12 @@ const props = defineProps<{
// 选中的值
modelValue?: any
}>()

const elFormItem = inject(formItemContextKey, void 0)
const selected = (activeValue: string | number) => {
emit('update:modelValue', activeValue)
if (elFormItem?.validate) {
elFormItem.validate('change')
}
}
const emit = defineEmits(['update:modelValue'])

Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Dec 30, 2024

Choose a reason for hiding this comment

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

In the provided Vue.js component:

  1. Imports: The inject function should be imported from 'vue' since it's now available, so replace import { useFormDisabled } from 'element-plus' with import { useFormDisabled, inject } from 'element-plus'`.

  2. Code Consistency: The indentation on line 7 seems inconsistent, which could lead to unexpected behavior.

  3. Type Annotations: Ensure all types defined match their actual data structures. For example, if FormField is an interface or class, ensure you have proper definitions for modelValue and other properties.

  4. Element Plus Validation: The .validate() call within the selected method might not work if the form item does not yet exist at that point due to asynchronous operations. Consider moving this validation step after the form has been initialized properly.

  5. Optional Chaining: You can use optional chaining (?.) instead of checking against void 0, making the code more concise: if (elFormItem?.validate).

Here’s your revised code snippet with some of these corrections applied:

<template>
  <div>
    <!-- Your template content -->
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';
import type { FormField } from '@/components/dynamics-form/types';

const inputDisabled = useFormDisabled();
const props = defineProps<{
  formValue?: any;
};
- const emit = defineEmits(['update:modelValue']);
+
// Inject necessary context key
const elFormItem = inject(formItemContextKey);

const selected = async (activeValue: string | number) => {
  await emit('update:modelValue', activeValue);
  
  // Check if form item exists before validating to avoid errors
  if (elFormItem && elFormItem.validate) {
    await elFormItem.validate('change');
  }
};

defineEmits(['update:modelValue']);
</script>

Explanation:

  • Importing inject: Ensures compatibility with Vue >= 3.
  • Indentation: Corrected the indentation around {} blocks.
  • Using Optional Chaining: Enhanced readability and robustness by using ?..
  • Awaiting Events: Used await when emitting events to prevent potential race conditions.
  • Validation Context Check: Added checks to confirm the existence and validate methods of elFormItem.

Expand Down