From 38f6ea96d665f764da6a905c833d3c39018ecef4 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sat, 6 Jan 2024 19:28:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common-autocomplete/index.vue | 27 +++++++++++++++-----
 src/components/common-form/index.vue         |  1 +
 src/components/common-icon-select/index.vue  | 15 +++++++++--
 src/components/common-window/index.vue       |  5 ++--
 src/views/tools/Forms.vue                    |  5 +---
 5 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/components/common-autocomplete/index.vue b/src/components/common-autocomplete/index.vue
index 80f2d49..aea328e 100644
--- a/src/components/common-autocomplete/index.vue
+++ b/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)
+  }
 }
 
 // =======================按键处理===================
diff --git a/src/components/common-form/index.vue b/src/components/common-form/index.vue
index ba12b79..f79add0 100644
--- a/src/components/common-form/index.vue
+++ b/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]
diff --git a/src/components/common-icon-select/index.vue b/src/components/common-icon-select/index.vue
index 4f48e27..215528d 100644
--- a/src/components/common-icon-select/index.vue
+++ b/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>
diff --git a/src/components/common-window/index.vue b/src/components/common-window/index.vue
index 972ae20..ebf1351 100644
--- a/src/components/common-window/index.vue
+++ b/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 => {
diff --git a/src/views/tools/Forms.vue b/src/views/tools/Forms.vue
index 226a14a..6cc7b97 100644
--- a/src/views/tools/Forms.vue
+++ b/src/views/tools/Forms.vue
@@ -149,10 +149,7 @@ const formOptions = computed(() => {
     }
   }]
 })
-const userDto = ref({
-  userName: '',
-  userPassword: ''
-})
+const userDto = ref({})
 const submitForm = (form) => {
   console.info(form)
   form.validate((valid) => {