vxe-table 4.5.0-beta.11 → 4.5.0-beta.13

package/packages/validator/src/hook.ts

@@ -1,8 +1,10 @@
 import { nextTick } from 'vue'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import XEUtils from 'xe-utils'
+import { VXETable } from '../../v-x-e-table'
 import { getFuncText, eqEmptyValue } from '../../tools/utils'
 import { scrollToView } from '../../tools/dom'
+import { errLog, warnLog } from '../../tools/log'
 import { handleFieldOrColumn, getRowid } from '../../table/src/util'
 
 import { VxeGlobalHooksHandles, TableValidatorMethods, TableValidatorPrivateMethods, VxeTableDefines } from '../../../types/all'
@@ -45,6 +47,7 @@ const tableValidatorMethodKeys: (keyof TableValidatorMethods)[] = ['fullValidate
 const validatorHook: VxeGlobalHooksHandles.HookOptions = {
   setupTable ($xetable) {
     const { props, reactData, internalData } = $xetable
+    const { refValidTooltip } = $xetable.getRefMaps()
     const { computeValidOpts, computeTreeOpts, computeEditOpts } = $xetable.getComputeMaps()
 
     let validatorMethods = {} as TableValidatorMethods
@@ -69,6 +72,30 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
       })
     }
 
+    const handleErrMsgMode = (validErrMaps: Record<string, {
+      row: any;
+      column: any;
+      rule: any;
+      content: any;
+    }>) => {
+      const validOpts = computeValidOpts.value
+      if (validOpts.msgMode === 'single') {
+        const keys = Object.keys(validErrMaps)
+        const resMaps: Record<string, {
+          row: any;
+          column: any;
+          rule: any;
+          content: any;
+        }> = validErrMaps
+        if (keys.length) {
+          const firstKey = keys[0]
+          resMaps[firstKey] = validErrMaps[firstKey]
+        }
+        return resMaps
+      }
+      return validErrMaps
+    }
+
     /**
      * 对表格数据进行校验
      * 如果不指定数据，则默认只校验临时变动的数据，例如新增或修改
@@ -105,14 +132,12 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
       internalData._lastCallTime = Date.now()
       validRuleErr = false // 如果为快速校验，当存在某列校验不通过时将终止执行
       validatorMethods.clearValidate()
-      const validErrMaps: {
-        [key: string]: {
-          row: any;
-          column: any;
-          rule: any,
-          content: any;
-        }
-      } = {}
+      const validErrMaps: Record<string, {
+        row: any;
+        column: any;
+        rule: any;
+        content: any;
+      }> = {}
       if (editRules) {
         const columns = $xetable.getColumns()
         const handleVaild = (row: any) => {
@@ -161,7 +186,7 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
         }
         return Promise.all(rowValids).then(() => {
           const ruleProps = Object.keys(validRest)
-          reactData.validErrorMaps = validErrMaps
+          reactData.validErrorMaps = handleErrMsgMode(validErrMaps)
           return nextTick().then(() => {
             if (ruleProps.length) {
               return Promise.reject(validRest[ruleProps[0]][0])
@@ -200,7 +225,6 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
             const row = firstErrParams.row
             const rowIndex = afterFullData.indexOf(row)
             const locatRow = rowIndex > 0 ? afterFullData[rowIndex - 1] : row
-            reactData.validErrorMaps = validErrMaps
             if (validOpts.autoPos === false) {
               finish()
             } else {
@@ -212,8 +236,9 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
             }
           })
         })
+      } else {
+        reactData.validErrorMaps = {}
       }
-      // reactData.validErrorMaps = validErrMaps
       return nextTick().then(() => {
         if (cb) {
           cb()
@@ -235,18 +260,27 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
         return beginValidate(rows, cb)
       },
       clearValidate (rows, fieldOrColumn) {
+        const { validErrorMaps } = reactData
+        const validTip = refValidTooltip.value
+        const validOpts = computeValidOpts.value
         const rowList = XEUtils.isArray(rows) ? rows : (rows ? [rows] : [])
         const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : []).map(column => handleFieldOrColumn($xetable, column))) as VxeTableDefines.ColumnInfo<any>[]
-        let validErrMaps: {
-          [key: string]: {
-            row: any;
-            column: any;
-            rule: any;
-            content: any;
-          }
-        } = {}
+        let validErrMaps: Record<string, {
+          row: any;
+          column: any;
+          rule: any;
+          content: any;
+        }> = {}
+        if (validTip && validTip.reactData.visible) {
+          validTip.close()
+        }
+        // 如果是单个提示模式
+        if (validOpts.msgMode === 'single') {
+          reactData.validErrorMaps = {}
+          return nextTick()
+        }
         if (rowList.length && colList.length) {
-          validErrMaps = Object.assign({}, reactData.validErrorMaps)
+          validErrMaps = Object.assign({}, validErrorMaps)
           rowList.forEach(row => {
             colList.forEach((column) => {
               const vaildKey = `${getRowid($xetable, row)}:${column.id}`
@@ -257,14 +291,14 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
           })
         } else if (rowList.length) {
           const rowidList = rowList.map(row => `${getRowid($xetable, row)}`)
-          XEUtils.each(reactData.validErrorMaps, (item, key) => {
+          XEUtils.each(validErrorMaps, (item, key) => {
             if (rowidList.indexOf(key.split(':')[0]) > -1) {
               validErrMaps[key] = item
             }
           })
         } else if (colList.length) {
           const colidList = colList.map(column => `${column.id}`)
-          XEUtils.each(reactData.validErrorMaps, (item, key) => {
+          XEUtils.each(validErrorMaps, (item, key) => {
             if (colidList.indexOf(key.split(':')[1]) > -1) {
               validErrMaps[key] = item
             }
@@ -323,10 +357,10 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
           if (rules) {
             const cellValue = XEUtils.isUndefined(val) ? XEUtils.get(row, field) : val
             rules.forEach((rule) => {
-              const { type, trigger, required } = rule
+              const { type, trigger, required, validator } = rule
               if (validType === 'all' || !trigger || validType === trigger) {
-                if (XEUtils.isFunction(rule.validator)) {
-                  const customValid = rule.validator({
+                if (validator) {
+                  const validParams = {
                     cellValue,
                     rule,
                     rules,
@@ -334,9 +368,29 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
                     rowIndex: $xetable.getRowIndex(row),
                     column,
                     columnIndex: $xetable.getColumnIndex(column),
-                    field: column.property,
-                    $table: $xetable
-                  })
+                    field: column.field,
+                    $table: $xetable,
+                    $grid: $xetable.xegrid
+                  }
+                  let customValid: any
+                  if (XEUtils.isString(validator)) {
+                    const gvItem = VXETable.validators.get(validator)
+                    if (gvItem) {
+                      if (gvItem.cellValidatorMethod) {
+                        customValid = gvItem.cellValidatorMethod(validParams)
+                      } else {
+                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                          warnLog('vxe.error.notValidators', [validator])
+                        }
+                      }
+                    } else {
+                      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                        errLog('vxe.error.notValidators', [validator])
+                      }
+                    }
+                  } else {
+                    customValid = validator(validParams)
+                  }
                   if (customValid) {
                     if (XEUtils.isError(customValid)) {
                       validRuleErr = true
@@ -395,6 +449,13 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
         const { editStore } = reactData
         const { actived } = editStore
         const editOpts = computeEditOpts.value
+        const validOpts = computeValidOpts.value
+        // 检查清除校验消息
+        if (editRules && validOpts.msgMode === 'single') {
+          reactData.validErrorMaps = {}
+        }
+
+        // 校验单元格
         if (editConfig && editRules && actived.row) {
           const { row, column, cell } = actived.args
           if (validatorPrivateMethods.hasCellRules(type, row, column)) {
@@ -419,17 +480,37 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
        * 弹出校验错误提示
        */
       showValidTooltip (params) {
-        const { validStore } = reactData
+        const { height } = props
+        const { tableData, validStore, validErrorMaps } = reactData
+        const validOpts = computeValidOpts.value
+        const validTip = refValidTooltip.value
         validStore.visible = true
-        reactData.validErrorMaps = Object.assign({}, reactData.validErrorMaps, {
-          [`${getRowid($xetable, params.row)}:${params.column.id}`]: {
-            column: params.column,
-            row: params.row,
-            rule: params.rule,
-            content: params.rule.content
+        if (validOpts.msgMode === 'single') {
+          reactData.validErrorMaps = {
+            [`${getRowid($xetable, params.row)}:${params.column.id}`]: {
+              column: params.column,
+              row: params.row,
+              rule: params.rule,
+              content: params.rule.content
+            }
           }
-        })
+        } else {
+          reactData.validErrorMaps = Object.assign({}, validErrorMaps, {
+            [`${getRowid($xetable, params.row)}:${params.column.id}`]: {
+              column: params.column,
+              row: params.row,
+              rule: params.rule,
+              content: params.rule.content
+            }
+          })
+        }
         $xetable.dispatchEvent('valid-error', params, null)
+        if (validTip) {
+          const { cell } = params
+          if (validTip && (validOpts.message === 'tooltip' || (validOpts.message === 'default' && !height && tableData.length < 2))) {
+            return validTip.open(cell, params.rule.content)
+          }
+        }
         return nextTick()
       }
     }

package/styles/cssvar.scss

@@ -135,6 +135,7 @@
 
   /*validate*/
   --vxe-table-validate-error-color: #{$vxe-table-validate-error-color};
+  --vxe-table-validate-error-background-color: #{$vxe-table-validate-error-background-color};
 
   /*grid*/
   --vxe-grid-maximize-background-color: #{$vxe-grid-maximize-background-color};
@@ -148,8 +149,6 @@
   --vxe-tooltip-dark-color: #{$vxe-tooltip-dark-color};
   --vxe-tooltip-dark-background-color: #{$vxe-tooltip-dark-background-color};
   --vxe-tooltip-light-background-color: #{$vxe-tooltip-light-background-color};
-  --vxe-tooltip-validate-error-color: #{$vxe-tooltip-validate-error-color};
-  --vxe-tooltip-validate-error-background-color: #{$vxe-tooltip-validate-error-background-color};
 
   /*pager*/
   --vxe-pager-background-color: #{$vxe-pager-background-color};

package/styles/table.scss

@@ -1190,6 +1190,7 @@
           display: inline-block;
           border-radius: var(--vxe-border-radius);
           color: var(--vxe-table-validate-error-color);
+          background-color: var(--vxe-table-validate-error-background-color);
           pointer-events: auto;
         }
       }
@@ -1206,10 +1207,21 @@
 
     }
   }
-  .vxe-body--row {
-    &:last-child {
-      .vxe-cell--valid {
-        top: calc(100% - 1.3em);
+  &.vaild-msg--single {
+    .vxe-body--row {
+      &:last-child {
+        .vxe-cell--valid {
+          bottom: calc(100%);
+        }
+      }
+    }
+  }
+  &.vaild-msg--full {
+    .vxe-body--row {
+      &:last-child {
+        .vxe-cell--valid {
+          top: calc(100% - 1.3em);
+        }
       }
     }
   }
@@ -1221,8 +1233,8 @@
         position: relative;
         &:before {
           content: "";
-          top: var(--vxe-table-cell-dirty-width);
-          left: var(--vxe-table-cell-dirty-width);
+          top: calc(var(--vxe-table-cell-dirty-width) * -1);
+          left: calc(var(--vxe-table-cell-dirty-width) * -1);
           position: absolute;
           border-width: var(--vxe-table-cell-dirty-width);
           border-style: solid;
@@ -1291,6 +1303,15 @@
   }
 }
 
+/*valid error*/
+div.vxe-table--tooltip-wrapper {
+  &.vxe-table--valid-error {
+    padding: 0;
+    color: var(--vxe-table-validate-error-color);
+    background-color: var(--vxe-table-validate-error-background-color);
+  }
+}
+
 /*footer*/
 .vxe-table--footer-wrapper {
   color: var(--vxe-table-footer-font-color);

package/styles/tooltip.scss

@@ -125,11 +125,3 @@
     }
   }
 }
-
-/*valid error*/
-.vxe-table--tooltip-wrapper {
-  &.vxe-table--valid-error {
-    background-color: var(--vxe-tooltip-validate-error-background-color);
-    color: var(--vxe-tooltip-validate-error-color);
-  }
-}

package/styles/variable.scss

@@ -132,6 +132,7 @@ $vxe-loading-z-index: 999 !default;
 
 /*validate*/
 $vxe-table-validate-error-color: #f56c6c !default;
+$vxe-table-validate-error-background-color: $vxe-table-body-background-color !default;
 
 /*grid*/
 $vxe-grid-maximize-background-color: #fff !default;
@@ -145,8 +146,6 @@ $vxe-toolbar-panel-background-color: #fff !default;
 $vxe-tooltip-dark-color: #fff !default;
 $vxe-tooltip-dark-background-color: #303133 !default;
 $vxe-tooltip-light-background-color: #fff !default;
-$vxe-tooltip-validate-error-color: #fff !default;
-$vxe-tooltip-validate-error-background-color: #f56c6c !default;
 
 /*pager*/
 $vxe-pager-background-color: #fff !default;

package/types/form.d.ts

@@ -262,18 +262,7 @@ export namespace VxeFormDefines {
      * 使用自定义校验函数，接收一个 Promise
      * @param params 参数
      */
-    validator?(params: {
-      $form: VxeFormConstructor,
-      itemValue: any,
-      rule: VxeFormDefines.FormRule
-      rules: VxeFormDefines.FormRule[]
-      data: any
-      field: string,
-      /**
-       * @deprecated
-       */
-      property: string
-    }): void | Error | Promise<any>
+    validator?: string | ((params: RuleValidatorParams) => void | Error | Promise<any>)
     /**
      * 提示消息
      */
@@ -286,6 +275,14 @@ export namespace VxeFormDefines {
     message?: string
   }
 
+  export interface RuleValidatorParams {
+    $form: VxeFormConstructor
+    itemValue: any
+    rule: VxeFormDefines.FormRule
+    rules: VxeFormDefines.FormRule[]
+    data: any
+    field: string
+  }
   export interface ValidateErrorParams {
     $form: VxeFormConstructor,
     rule: VxeFormDefines.FormRule

package/types/table.d.ts

@@ -40,6 +40,7 @@ export interface VxeTableConstructor<D = any> extends VxeComponentBase, VxeTable
 export interface TablePrivateRef {
   refElem: Ref<HTMLDivElement>
   refTooltip: Ref<VxeTooltipInstance>
+  refValidTooltip: Ref<VxeTooltipInstance>
   refTableFilter: Ref<ComponentPublicInstance>
   refTableMenu: Ref<VxeMenuPanelInstance>
   refTableHeader: Ref<ComponentPublicInstance>
@@ -2013,14 +2014,32 @@ export namespace VxeTablePropTypes {
    * 校验配置项
    */
   export interface ValidConfig {
+    /**
+     * 是否自动定位到校验不通过的单元格
+     */
     autoPos?: boolean
+    /**
+     * 是否显示错误显示
+     */
     showMessage?: boolean
+    /**
+     * 校验消息提示方式
+     */
+    msgMode?: 'single' | 'full' | null | ''
+    /**
+     * 当点击表格之外或者其他列之后，是否自动清除单元格的校验消息
+     */
+    autoClear?: boolean
+    /**
+     * 校验提示框的最大宽度
+     */
+    maxWidth?: number
+
     /**
      * 不建议使用，后续废弃
      * @deprecated
      */
     message?: string
-    maxWidth?: number
   }
   export interface ValidOpts extends ValidConfig { }
 

package/types/v-x-e-table/index.d.ts

@@ -6,6 +6,7 @@ import { VxeGlobalInterceptor } from './interceptor'
 import { VxeGlobalCommands } from './commands'
 import { VxeGlobalFormats } from './formats'
 import { VxeGlobalMenus } from './menus'
+import { VxeGlobalValidators } from './validators'
 import { VxeGlobalHooks } from './hooks'
 import { VxeGlobalSetup } from './setup'
 
@@ -39,6 +40,7 @@ export const renderer: VxeGlobalRenderer
 export const commands: VxeGlobalCommands
 export const formats: VxeGlobalFormats
 export const menus: VxeGlobalMenus
+export const validators: VxeGlobalValidators
 export const hooks: VxeGlobalHooks
 export const modal: ModalController
 export const saveFile: SaveFileFunction
@@ -93,6 +95,10 @@ export interface VXETableCore {
    * Table context menu
    */
   menus: VxeGlobalMenus
+  /**
+   * Validators table/form
+   */
+  validators: VxeGlobalValidators
   /**
    * Table VxeGlobalHooks API
    */
@@ -131,7 +137,7 @@ export interface VXETableCore {
 }
 
 /**
- * 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项等...
+ * 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式为零代码而设计...
  */
 export const VXETable: VXETableCore
 
@@ -140,6 +146,7 @@ export * from './interceptor'
 export * from './commands'
 export * from './formats'
 export * from './menus'
+export * from './validators'
 export * from './hooks'
 export * from './setup'
 

package/types/v-x-e-table/menus.d.ts

@@ -5,18 +5,30 @@ import { VxeGlobalRendererHandles } from './renderer'
 /* eslint-disable no-use-before-define */
 
 export namespace VxeGlobalMenusHandles {
-  export type MenusCallback<D = VxeTableDataRow> = (params: MenusCallbackParams<D>, event: Event) => any
-
+  export type MenusOption<D = VxeTableDataRow> = {
+    menuMethod?: (params: MenuMethodParams<D>, event: Event) => any
+  }
   interface MenusParams<D = VxeTableDataRow> {
     $grid: VxeGridConstructor<D> | null
     $table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
   }
-  export interface MenusCallbackParams<D = VxeTableDataRow> extends MenusParams<D>, VxeGlobalRendererHandles.RenderCellParams<D> {
+  export interface MenuMethodParams<D = VxeTableDataRow> extends MenusParams<D>, VxeGlobalRendererHandles.RenderCellParams<D> {
     $grid: VxeGridConstructor<D> | null
     $table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
     $event: MouseEvent
     menu: VxeTableDefines.MenuFirstOption | VxeTableDefines.MenuChildOption
   }
+
+  /**
+   * 请使用 MenusOption
+   * @deprecated
+   */
+  export type MenusCallback = MenusOption
+  /**
+   * 请使用 MenuMethodParams
+   * @deprecated
+   */
+  export interface MenusCallbackParams<D = VxeTableDataRow> extends MenuMethodParams<D> {}
 }
 
 /**
@@ -24,11 +36,11 @@ export namespace VxeGlobalMenusHandles {
  */
 export interface VxeGlobalMenus {
   mixin(options: {
-    [code: string]: VxeGlobalMenusHandles.MenusCallback<any>
+    [code: string]: VxeGlobalMenusHandles.MenusOption<any> | ((params: VxeGlobalMenusHandles.MenuMethodParams<any>, event: Event) => any)
   }): VxeGlobalMenus
   has(code: string): boolean
-  get(code: string): VxeGlobalMenusHandles.MenusCallback<any>
-  add(code: string, callback: VxeGlobalMenusHandles.MenusCallback<any>): VxeGlobalMenus
+  get(code: string): VxeGlobalMenusHandles.MenusOption<any>
+  add(code: string, options: VxeGlobalMenusHandles.MenusOption<any> | ((params: VxeGlobalMenusHandles.MenuMethodParams<any>, event: Event) => any)): VxeGlobalMenus
   delete(code: string): void
-  forEach(callback: (options: VxeGlobalMenusHandles.MenusCallback<any>, code: string) => void): void
+  forEach(callback: (options: VxeGlobalMenusHandles.MenusOption<any>, code: string) => void): void
 }

package/types/v-x-e-table/validators.d.ts

@@ -0,0 +1,30 @@
+import { VxeTableDefines, VxeTableDataRow } from '../table'
+import { VxeFormDefines } from '../form'
+
+/* eslint-disable no-use-before-define */
+
+export namespace VxeGlobalValidatorsHandles {
+  export interface ValidatorsOptions<D = VxeTableDataRow> {
+    itemValidatorMethod?: ItemValidatorMethod
+    cellValidatorMethod?: CellValidatorMethod<D>
+  }
+
+  export type ItemValidatorMethod = (params: ItemValidatorParams, ...args: any[]) => void | Error | Promise<any>
+  export type CellValidatorMethod<D = VxeTableDataRow> = (params: CellValidatorParams<D>, ...args: any[]) => void | Error | Promise<any>
+  export interface ItemValidatorParams extends VxeFormDefines.RuleValidatorParams {}
+  export interface CellValidatorParams<D = VxeTableDataRow> extends VxeTableDefines.RuleValidatorParams<D> {}
+}
+
+/**
+ * 全局快捷菜单
+ */
+export interface VxeGlobalValidators {
+  mixin(options: {
+    [code: string]: VxeGlobalValidatorsHandles.ValidatorsOptions<any>
+  }): VxeGlobalValidators
+  has(code: string): boolean
+  get(code: string): VxeGlobalValidatorsHandles.ValidatorsOptions<any>
+  add(code: string, callback: VxeGlobalValidatorsHandles.ValidatorsOptions<any>): VxeGlobalValidators
+  delete(code: string): void
+  forEach(callback: (options: VxeGlobalValidatorsHandles.ValidatorsOptions<any>, code: string) => void): void
+}

package/types/validator.d.ts

@@ -1,5 +1,6 @@
 import { VXEComponent } from './component'
 import { VxeTableDefines, VxeTableDataRow, VxeTableConstructor } from './table'
+import { VxeGridConstructor } from './grid'
 import { VxeColumnPropTypes } from './column'
 
 /* eslint-disable no-use-before-define */
@@ -71,7 +72,7 @@ declare module './table' {
        * 使用自定义校验函数，接收一个 Promise
        * @param params 参数
        */
-      validator?(params: VxeTableDefines.ValidatorErrorParams<D>): void | Error | Promise<void>
+      validator?: string | ((params: RuleValidatorParams<D>) => void | Error | Promise<void>)
       /**
        * 提示消息
        */
@@ -83,6 +84,18 @@ declare module './table' {
        */
       message?: string
     }
+    export interface RuleValidatorParams<D = VxeTableDataRow> {
+      $table: VxeTableConstructor<D>
+      $grid: VxeGridConstructor<D> | null
+      cellValue: any
+      rule: ValidatorRule<D>
+      rules: ValidatorRule<D>[]
+      column: VxeTableDefines.ColumnInfo<D>
+      columnIndex: number
+      row: D
+      rowIndex: number
+      field: string
+    }
     export interface ValidatorErrorParams<D = VxeTableDataRow> {
       $table: VxeTableConstructor<D>
       cellValue: any