优化自定义控件表单验证

src/components/common-autocomplete/index.vue

@@ -35,11 +35,13 @@
  * @property {string} loadingText 加载提示loading
  * @property {string} minHeight 高度自定义
  * @property {Object} inputAttrs 输入框配置项
+ * @property {boolean} validateEvent 验证事件
  */
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { debounce, isObject } from 'lodash'
 import { onClickOutside, onKeyStroke, useVModel } from '@vueuse/core'
 import chunk from 'lodash/chunk'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT, useFormItem } from 'element-plus'
 
 /**
  * @type {CommonAutocompleteProps}
@@ -124,10 +126,14 @@ const props = defineProps({
   minHeight: {
     type: String,
     default: '100px'
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
   }
 })
 
-const emit = defineEmits(['update:modelValue', 'change', 'update:defaultLabel'])
+const emit = defineEmits([UPDATE_MODEL_EVENT, CHANGE_EVENT, 'update:defaultLabel'])
 // 关键字搜索
 const keywords = ref(props.defaultLabel)
 // 上次搜索记录
@@ -211,7 +217,6 @@ onMounted(() => {
 watch(() => popoverVisible.value, (val) => {
   if (!val) {
     nextTick(() => {
-      console.info('=======================', lastAutocompleteLabel.value, keywords.value)
       if (lastAutocompleteLabel.value && keywords.value && keywords.value !== lastAutocompleteLabel.value) {
         keywords.value = lastAutocompleteLabel.value
       }
@@ -224,10 +229,15 @@ watch(() => props.modelValue, (value) => {
   if (!props.useIdModel) {
     setAutocompleteLabel(value && isObject(value) ? value[labelProp.value] : '')
   }
-  vModel.value = value
 })
 
-watch(() => props.defaultLabel, (label) => {
+watch(() => {
+  if (!props.useIdModel) {
+    const value = props.modelValue
+    return value && isObject(value) ? value[labelProp.value] : ''
+  }
+  return props.defaultLabel
+}, (label) => {
   setAutocompleteLabel(label)
 })
 
@@ -242,20 +252,25 @@ const setAutocompleteLabel = label => {
   lastAutocompleteLabel.value = label
 }
 
+const { formItem } = useFormItem()
+
 const onSelectData = (row) => {
   popoverVisible.value = false
   if (!vModel.value && !row) {
     return
   }
   let label = ''
-  let value = null
+  let value
   if (row) {
     label = row[labelProp.value]
     value = props.useIdModel ? row[idProp.value] : row
   }
   setAutocompleteLabel(label)
   vModel.value = value
-  emit('change', row)
+  emit(CHANGE_EVENT, row)
+  if (props.validateEvent) {
+    formItem?.validate(CHANGE_EVENT)
+  }
 }
 
 // =======================按键处理===================

src/components/common-form/index.vue

@@ -77,6 +77,7 @@ const initRules = () => {
       if (option.required !== undefined) {
         const label = option.label || $i18nBundle(option.labelKey)
         _rules = [{
+          trigger: option.trigger,
           required: option.required,
           message: $i18nBundle('common.msg.nonNull', [label])
         }, ..._rules]

src/components/common-icon-select/index.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { filterIconsByKeywords } from '@/services/icon/IconService'
 import { useVModel } from '@vueuse/core'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT, useFormItem } from 'element-plus'
 
 const props = defineProps({
   modelValue: {
@@ -37,6 +38,10 @@ const props = defineProps({
   placeholder: {
     type: String,
     default: ''
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
   }
 })
 const iconSelectVisible = ref(false)
@@ -49,13 +54,19 @@ const filterIcons = computed(() => {
   return []
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits([UPDATE_MODEL_EVENT, CHANGE_EVENT])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
+const { formItem } = useFormItem()
+
 const selectIcon = icon => {
   iconSelectVisible.value = false
   vModel.value = icon
+  emit(CHANGE_EVENT, icon)
+  if (props.validateEvent) {
+    formItem?.validate(CHANGE_EVENT)
+  }
 }
 
 </script>
@@ -86,7 +97,7 @@ const selectIcon = icon => {
     type="danger"
     :disabled="disabled||readonly"
     size="small"
-    @click="vModel = ''"
+    @click="selectIcon()"
   >
     {{ $t('common.label.clear') }}
   </el-button>

src/components/common-window/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useVModel } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+import { UPDATE_MODEL_EVENT } from 'element-plus'
 
 const props = defineProps({
   modelValue: {
@@ -65,7 +66,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits([UPDATE_MODEL_EVENT])
 const showDialog = useVModel(props, 'modelValue', emit) // 自动响应v-model
 
 const okButtonClick = $event => {

src/views/tools/Forms.vue

@@ -149,10 +149,7 @@ const formOptions = computed(() => {
     }
   }]
 })
-const userDto = ref({
+const userDto = ref({})
-  userName: '',
-  userPassword: ''
-})
 const submitForm = (form) => {
   console.info(form)
   form.validate((valid) => {