fix(Form): 修复一些bug (DevCloudFE#126)

* fix: 修复updateOn为change时，popover闪一下问题

* fix: 修复提交验证失效问题

* fix: 修改getDfcUID方法名为getFormControlUID

Author: AlanLee97

packages/devui-vue/devui/form/src/directive/d-validate-rules.ts

@@ -14,6 +14,7 @@ interface ValidateFnParam {
   messageShowType: MessageShowType
   dfcUID: string
   popPosition: PopPosition | Array<BasePopPosition>
+  updateOn?: UpdateOn
 }
 
 interface CustomValidatorRuleObject {
@@ -46,6 +47,7 @@ export interface ShowPopoverErrorMessageEventData {
   message?: string
   uid?: string, 
   popPosition?: PopPosition
+  [prop : string]: any
 }
 
 type MessageShowType = 'popover' | 'text' | 'none' | 'toast';
@@ -210,17 +212,31 @@ function handleErrorStrategyPass(el: HTMLElement): void {
   el.setAttribute('class', classList.join(' '));
 }
 
-function handleValidateError({el, tipEl, message, isFormTag, messageShowType, dfcUID, popPosition = 'right-bottom'}: Partial<ValidateFnParam>): void {
+function getFormControlUID(el: HTMLElement): string {
+  if(el.tagName.toLocaleLowerCase() === "body") return "";
+  let uid = ''
+  if(el.parentElement.id.startsWith('dfc-')) {
+    return el.parentElement.id;
+  }else {
+    uid = getFormControlUID(el.parentElement);
+  }
+}
+
+function handleValidateError({el, tipEl, message = "", isFormTag, messageShowType, dfcUID, popPosition = 'right-bottom', updateOn}: Partial<ValidateFnParam>): void {
   // 如果该指令用在form标签上，这里做特殊处理
   if(isFormTag && messageShowType === MessageShowTypeEnum.toast) {
     // todo：待替换为toast
     alert(message);
     return;
   }
 
+  if(!dfcUID) {
+    dfcUID = getFormControlUID(el);
+  }
+  
   // messageShowType为popover时，设置popover
   if(MessageShowTypeEnum.popover === messageShowType) {
-    EventBus.emit("showPopoverErrorMessage", {showPopover: true, message, uid: dfcUID, popPosition} as ShowPopoverErrorMessageEventData);
+    EventBus.emit("showPopoverErrorMessage", {showPopover: true, message, uid: dfcUID, popPosition, updateOn} as ShowPopoverErrorMessageEventData);
     return;
   }
 
@@ -250,7 +266,7 @@ function getFormName(binding: DirectiveBinding): string {
 }
 
 // 校验处理函数
-function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition}: Partial<ValidateFnParam>) {
+function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition, updateOn}: Partial<ValidateFnParam>) {
   validator.validate({modelName: modelValue}).then(() => {
     handleValidatePass(el, tipEl);
   }).catch((err) => {
@@ -265,7 +281,7 @@ function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowTyp
       msg = errors[0].message;
     }
 
-    handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition});
+    handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn});
   })
 }
 
@@ -394,14 +410,21 @@ export default {
     const htmlEventValidateHandler = (e) => {
       const modelValue = e.target.value;
       if(messageShowType === MessageShowTypeEnum.popover) {
-        EventBus.emit("showPopoverErrorMessage", {showPopover: false, message: "", uid: dfcUID, popPosition} as ShowPopoverErrorMessageEventData);
+        EventBus.emit("showPopoverErrorMessage", {showPopover: false, message: "", uid: dfcUID, popPosition, updateOn} as ShowPopoverErrorMessageEventData);
       }
-      validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition});
+      validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn});
     }
 
     // 监听事件验证
     vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler); 
 
+    // 如果校验时机为change，则在focus时关闭popover
+    if(messageShowType === MessageShowTypeEnum.popover && updateOn === UpdateOnEnum.change) {
+      vnode.children[0].el.addEventListener('focus', () => {
+        EventBus.emit("showPopoverErrorMessage", {showPopover: false, uid: dfcUID, updateOn} as ShowPopoverErrorMessageEventData);
+      }); 
+    }
+
     // 设置errorStrategy
     if(errorStrategy === ErrorStrategyEnum.pristine) {
       handleErrorStrategy(el);
@@ -415,7 +438,7 @@ export default {
       const modelValue = isFormTag ? '' : vnode.children[0].el.value;
 
       // 进行提交验证
-      validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType});
+      validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: 'submit'});
     });
 
   }

packages/devui-vue/devui/form/src/form-control/form-control.tsx

@@ -2,6 +2,7 @@ import { defineComponent, inject, ref, computed, reactive, onMounted, Teleport }
 import { uniqueId } from 'lodash-es';
 import { IForm, formControlProps, formInjectionKey } from '../form-types';
 import { ShowPopoverErrorMessageEventData } from '../directive/d-validate-rules'
+import clickoutsideDirective from '../../../shared/devui-directive/clickoutside'
 import { EventBus, getElOffset } from '../util';
 import Icon from '../../../icon/src/icon';
 import Popover from '../../../popover/src/popover';
@@ -11,6 +12,9 @@ type positionType = 'top' | 'right' | 'bottom' | 'left';
 
 export default defineComponent({
   name: 'DFormControl',
+  directives: {
+    clickoutside: clickoutsideDirective
+  },
   props: formControlProps,
   setup(props, ctx) {
     const formControl = ref();
@@ -19,6 +23,7 @@ export default defineComponent({
     const isHorizontal = labelData.layout === 'horizontal';
     const uid = uniqueId("dfc-");
     const showPopover = ref(false);
+    const updateOn = ref('change');
     const tipMessage = ref("");
     const popPosition = ref<positionType>("bottom");
     let rectInfo: Partial<DOMRect> = {
@@ -38,11 +43,12 @@ export default defineComponent({
       EventBus.on("showPopoverErrorMessage", (data: ShowPopoverErrorMessageEventData) => {
         if (uid === data.uid) {
           rectInfo = el.getBoundingClientRect();
-          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - (rectInfo.width / 2) : rectInfo.right;
-          popoverTopPosition = popPosition.value === "top" ? elOffset.top + (rectInfo.height / 2) - rectInfo.height : elOffset.top + (rectInfo.height / 2);
           showPopover.value = data.showPopover;
           tipMessage.value = data.message;
           popPosition.value = data.popPosition as any; // todo: 待popover组件positionType完善类型之后再替换类型
+          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - (rectInfo.width / 2) : rectInfo.right;
+          popoverTopPosition = popPosition.value === "top" ? elOffset.top + (rectInfo.height / 2) - rectInfo.height : elOffset.top + (rectInfo.height / 2);
+          updateOn.value = data.updateOn ?? 'change';
         }
       });
     });
@@ -60,23 +66,31 @@ export default defineComponent({
       }
     })
 
+    const handleClickOutside = () => {
+      if(updateOn.value !== 'change') {
+        showPopover.value = false;
+      }
+    }
+
     return () => {
       const {
         feedbackStatus,
         extraInfo,
       } = props;
-      return <div class="form-control" ref={formControl} data-uid={uid}>
-        <Teleport to="body">
+      return <div class="form-control" ref={formControl} data-uid={uid} v-clickoutside={handleClickOutside}>
+        { showPopover.value && 
+          <Teleport to="body">
             <div style={{
               position: 'absolute',
               left: popoverLeftPosition + 'px',
               top: popoverTopPosition + 'px',
               width: rectInfo.width + 'px',
               height: rectInfo.height + 'px',
             }}>
-              <Popover visible={showPopover.value} content={tipMessage.value} popType={"error"} position={popPosition.value} />
+              <Popover controlled={updateOn.value !== 'change'} visible={showPopover.value} content={tipMessage.value} popType={"error"} position={popPosition.value} />
             </div>
           </Teleport>
+        }
         <div class={`devui-form-control-container${isHorizontal ? ' devui-form-control-container-horizontal' : ''}${feedbackStatus ? ' has-feedback' : ''}${feedbackStatus === 'error' ? ' feedback-error' : ''}`}>
           <div class="devui-control-content-wrapper" id={uid}>
             {ctx.slots.default?.()}