import Vue from "vue" ; import { FormItem } from "element-ui" ; import rules from "./rules" ; import errorMessage from "./error-message" ; import { Component , Prop , Watch } from "vue-property-decorator" ; const ElFormItemMethods = ( FormItem as any ) . methods ; @ Component export default class ElFormItemVerifyComponent extends Vue { static fieldChange : "verify" | "clear" ; @ Prop ( [ String , Function ] ) verify ? : string | Function ; @ Prop ( ) canBeEmpty ? : string ; @ Prop ( ) space ? : string ; @ Prop ( ) emptyMessage ? : string ; @ Prop ( ) errorMessage ? : string ; @ Prop ( ) alias ? : string ; @ Prop ( ) watch : undefined ; @ Prop ( ) fieldChange ? : string ; @ Watch ( "validateMessage" ) onValidateMessageChanged ( msg ) { if ( this . _verify && msg !== "" ) { const alias = this . alias || ( this as any ) . label || "该输入项" ; ( this as any ) . validateMessage = errorMessage . macroToValue ( ( this as any ) . validateMessage , "alias" , alias ) ; } } @ Watch ( "watch" ) onWatchChanged ( ) { if ( this . _verify ) ( this as any ) . validate ( "" ) ; } get _verify ( ) : boolean { return this . verify !== undefined && ( this as any ) . prop ; } getRules ( ) { if ( ! this . _verify ) return ElFormItemMethods . getRules . apply ( this , arguments ) ; let asyncVerifyRules = [ ] ; let fieldValue = ( this as any ) . fieldValue ; fieldValue = [ undefined , null ] . indexOf ( fieldValue ) === - 1 ? fieldValue + "" : "" ; if ( this . space === undefined ) fieldValue = fieldValue . trim ( ) ; if ( fieldValue === "" ) { asyncVerifyRules . push ( { validator : ( rule , val , callback ) => { if ( this . canBeEmpty !== undefined || ( this as any ) . minLength <= 0 ) callback ( ) ; else callback ( Error ( this . emptyMessage || errorMessage . get ( "empty" ) ) ) ; } } ) ; } else { const ruleGetters = rules ( ) ; for ( let name in ruleGetters ) { const ruleVal = ( this as any ) [ name ] ; if ( ruleVal !== undefined ) asyncVerifyRules = asyncVerifyRules . concat ( ruleGetters [ name ] ( ruleVal ) ) ; } if ( this . errorMessage !== undefined ) { for ( let rule of asyncVerifyRules ) ( rule as any ) . message = this . errorMessage ; } if ( typeof this . verify === "function" ) asyncVerifyRules . push ( { validator : this . verify } ) ; if ( asyncVerifyRules . length === 0 ) { asyncVerifyRules . push ( { validator ( rule , val , callback ) { callback ( ) ; } } ) ; } } asyncVerifyRules [ 0 ] . required = this . canBeEmpty === undefined ; return asyncVerifyRules ; } clearValidate ( ) { if ( ElFormItemMethods . clearValidate ) { ElFormItemMethods . clearValidate . apply ( this , arguments ) ; } else { ( this as any ) . validateState = "" ; ( this as any ) . validateMessage = "" ; ( this as any ) . validateDisabled = false ; } } onFieldChange ( ) { const fieldChange = this . fieldChange || ElFormItemVerifyComponent . fieldChange ; if ( ! this . _verify || fieldChange !== "clear" ) ElFormItemMethods . onFieldChange . apply ( this , arguments ) ; else if ( this . _verify && fieldChange === "clear" ) this . clearValidate ( ) ; } }