vxe-table 3.7.7-beta.2 → 3.7.7-beta.4

package/packages/validator/src/mixin.js

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils'
 import VXETable from '../../v-x-e-table'
 import GlobalConfig from '../../v-x-e-table/src/conf'
+import { getRowid, handleFieldOrColumn } from '../../table/src/util'
 import { eqEmptyValue, getFuncText } from '../../tools/utils'
 import { warnLog, errLog } from '../../tools/log'
 import DomTools from '../../tools/dom'
@@ -87,8 +88,9 @@ export default {
      * 聚焦到校验通过的单元格并弹出校验错误提示
      */
     handleValidError (params) {
+      const { validOpts } = this
       return new Promise(resolve => {
-        if (this.validOpts.autoPos === false) {
+        if (validOpts.autoPos === false) {
           this.emitEvent('valid-error', params)
           resolve()
         } else {
@@ -100,6 +102,19 @@ export default {
         }
       })
     },
+    handleErrMsgMode (validErrMaps) {
+      const { validOpts } = this
+      if (validOpts.msgMode === 'single') {
+        const keys = Object.keys(validErrMaps)
+        const resMaps = validErrMaps
+        if (keys.length) {
+          const firstKey = keys[0]
+          resMaps[firstKey] = validErrMaps[firstKey]
+        }
+        return resMaps
+      }
+      return validErrMaps
+    },
     /**
      * 对表格数据进行校验
      * 如果不指定数据，则默认只校验临时变动的数据，例如新增或修改
@@ -111,7 +126,7 @@ export default {
      */
     beginValidate (rows, cb, isFull) {
       const validRest = {}
-      const { editRules, afterFullData, treeConfig, treeOpts } = this
+      const { editRules, afterFullData, visibleColumn, treeConfig, treeOpts } = this
       const childrenField = treeOpts.children || treeOpts.childrenField
       let vaildDatas
       if (rows === true) {
@@ -130,6 +145,7 @@ export default {
       this.lastCallTime = Date.now()
       this.validRuleErr = false // 如果为快速校验，当存在某列校验不通过时将终止执行
       this.clearValidate()
+      const validErrMaps = {}
       if (editRules) {
         const columns = this.getColumns()
         const handleVaild = row => {
@@ -153,6 +169,12 @@ export default {
                       if (!validRest[column.property]) {
                         validRest[column.property] = []
                       }
+                      validErrMaps[`${getRowid(this, row)}:${column.id}`] = {
+                        column,
+                        row,
+                        rule,
+                        content: rule.content
+                      }
                       validRest[column.property].push(rest)
                       if (!isFull) {
                         this.validRuleErr = true
@@ -172,6 +194,7 @@ export default {
         }
         return Promise.all(rowValids).then(() => {
           const ruleProps = Object.keys(validRest)
+          this.validErrorMaps = this.handleErrMsgMode(validErrMaps)
           return this.$nextTick().then(() => {
             if (ruleProps.length) {
               return Promise.reject(validRest[ruleProps[0]][0])
@@ -207,20 +230,21 @@ export default {
              * 将表格滚动到可视区
              * 由于提示信息至少需要占一行，定位向上偏移一行
              */
-            const row = firstErrParams.row
-            const rowIndex = afterFullData.indexOf(row)
-            const locatRow = rowIndex > 0 ? afterFullData[rowIndex - 1] : row
             if (this.validOpts.autoPos === false) {
               finish()
             } else {
-              if (treeConfig) {
-                this.scrollToTreeRow(locatRow).then(posAndFinish)
-              } else {
-                this.scrollToRow(locatRow).then(posAndFinish)
-              }
+              const row = firstErrParams.row
+              const column = firstErrParams.column
+              const rowIndex = afterFullData.indexOf(row)
+              const columnIndex = visibleColumn.indexOf(column)
+              const locatRow = rowIndex > 0 ? afterFullData[rowIndex - 1] : row
+              const locatColumn = columnIndex > 0 ? visibleColumn[rowIndex - 1] : column
+              this.scrollToRow(locatRow, locatColumn).then(posAndFinish)
             }
           })
         })
+      } else {
+        this.validErrorMaps = {}
       }
       return this.$nextTick().then(() => {
         if (cb) {
@@ -335,34 +359,66 @@ export default {
         }
       })
     },
-    _clearValidate () {
+    _clearValidate  (rows, fieldOrColumn) {
+      const { validOpts, validErrorMaps } = this
       const validTip = this.$refs.validTip
-      Object.assign(this.validStore, {
-        visible: false,
-        row: null,
-        column: null,
-        content: '',
-        rule: null
-      })
-      if (validTip && validTip.visible) {
+      const rowList = XEUtils.isArray(rows) ? rows : (rows ? [rows] : [])
+      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : []).map(column => handleFieldOrColumn(this, column)))
+      let validErrMaps = {}
+      if (validTip && validTip.reactData.visible) {
         validTip.close()
       }
+      // 如果是单个提示模式
+      if (validOpts.msgMode === 'single') {
+        this.validErrorMaps = {}
+        return this.$nextTick()
+      }
+      if (rowList.length && colList.length) {
+        validErrMaps = Object.assign({}, validErrorMaps)
+        rowList.forEach(row => {
+          colList.forEach((column) => {
+            const vaildKey = `${getRowid(this, row)}:${column.id}`
+            if (validErrMaps[vaildKey]) {
+              delete validErrMaps[vaildKey]
+            }
+          })
+        })
+      } else if (rowList.length) {
+        const rowidList = rowList.map(row => `${getRowid(this, row)}`)
+        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(validErrorMaps, (item, key) => {
+          if (colidList.indexOf(key.split(':')[1]) > -1) {
+            validErrMaps[key] = item
+          }
+        })
+      }
+      this.validErrorMaps = validErrMaps
       return this.$nextTick()
     },
     /**
      * 触发校验
      */
     triggerValidate (type) {
-      const { editConfig, editStore, editRules, validStore } = this
+      const { editConfig, editStore, editRules, editOpts, validOpts } = this
       const { actived } = editStore
-      if (actived.row && editRules) {
+      // 检查清除校验消息
+      if (editRules && validOpts.msgMode === 'single') {
+        this.validErrorMaps = {}
+      }
+
+      // 校验单元格
+      if (editConfig && editRules && actived.row) {
         const { row, column, cell } = actived.args
         if (this.hasCellRules(type, row, column)) {
           return this.validCellRules(type, row, column).then(() => {
-            if (editConfig.mode === 'row') {
-              if (validStore.visible && validStore.row === row && validStore.column === column) {
-                this.clearValidate()
-              }
+            if (editOpts.mode === 'row') {
+              this.clearValidate(row, column)
             }
           }).catch(({ rule }) => {
             // 如果校验不通过与触发方式一致，则聚焦提示错误，否则跳过并不作任何处理
@@ -381,23 +437,37 @@ export default {
      * 弹出校验错误提示
      */
     showValidTooltip (params) {
-      const { $refs, height, tableData, validOpts } = this
+      const { $refs, height, validStore, validErrorMaps, tableData, validOpts } = this
       const { rule, row, column, cell } = params
       const validTip = $refs.validTip
       const content = rule.content
-      return this.$nextTick(() => {
-        Object.assign(this.validStore, {
-          row,
-          column,
-          rule,
-          content,
-          visible: true
+      validStore.visible = true
+      if (validOpts.msgMode === 'single') {
+        this.validErrorMaps = {
+          [`${getRowid(this, row)}:${column.id}`]: {
+            column,
+            row,
+            rule,
+            content
+          }
+        }
+      } else {
+        this.validErrorMaps = Object.assign({}, validErrorMaps, {
+          [`${getRowid(this, row)}:${column.id}`]: {
+            column,
+            row,
+            rule,
+            content
+          }
         })
-        this.emitEvent('valid-error', params)
+      }
+      this.emitEvent('valid-error', params, null)
+      if (validTip) {
         if (validTip && (validOpts.message === 'tooltip' || (validOpts.message === 'default' && !height && tableData.length < 2))) {
           return validTip.open(cell, content)
         }
-      })
+      }
+      return this.$nextTick()
     }
   }
 }

package/styles/grid.scss

@@ -29,26 +29,6 @@
     padding: 0.5em 1em;
     background-color: $vxe-grid-maximize-background-color;
   }
-  .vxe-body--row {
-    &.row--pending {
-      color: $vxe-table-validate-error-color;
-      text-decoration: line-through;
-      cursor: no-drop;
-      .vxe-body--column {
-        position: relative;
-        &:after {
-          content: "";
-          position: absolute;
-          top: 50%;
-          left: 0;
-          width: 100%;
-          height: 0;
-          border-bottom: 1px solid $vxe-table-validate-error-color;
-          z-index: 1;
-        }
-      }
-    }
-  }
   .vxe-grid--form-wrapper,
   .vxe-grid--top-wrapper,
   .vxe-grid--bottom-wrapper  {

package/styles/pulldown.scss

@@ -38,8 +38,8 @@
     transform: scaleY(1);
   }
 }
-.vxe-pulldown--wrapper {
-  background-color: $vxe-pulldown-panel-background-color;
+.vxe-pulldown--panel-wrapper {
+  background-color: var(--vxe-pulldown-panel-background-color);
 }
 
 .vxe-pulldown,

package/styles/select.scss

@@ -79,23 +79,40 @@
   }
 }
 
-.vxe-select-filter--wrapper {
+.vxe-select--panel-search {
   display: block;
-  .vxe-select-filter--input {
+  .vxe-select-search--input {
     width: 100%;
   }
 }
 
+.vxe-select--panel-wrapper {
+  position: relative;
+  border-radius: $vxe-border-radius;
+  border: 1px solid $vxe-table-popup-border-color;
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+  background-color: $vxe-select-panel-background-color;
+}
+
+.vxe-select--panel-header {
+  border-bottom: 1px solid $vxe-table-popup-border-color;
+}
+
+.vxe-select--panel-footer {
+  border-top: 1px solid $vxe-table-popup-border-color;
+}
+
+.vxe-select--panel-header,
+.vxe-select--panel-footer {
+  padding: 4px 0;
+}
+
 .vxe-select-option--wrapper {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 4px 0;
   max-height: 200px;
-  border-radius: $vxe-border-radius;
-  border: 1px solid $vxe-table-popup-border-color;
-  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
-  background-color: $vxe-select-panel-background-color;
 }
 
 .vxe-optgroup {

package/styles/table.scss

@@ -1067,7 +1067,7 @@
   .vxe-footer--column {
     &.col--ellipsis {
       @extend %DefaultColumnHeight;
-      &:not(.col--actived) {
+      &:not(.col--active) {
         & > .vxe-cell {
           @extend %TextEllipsis;
         }
@@ -1173,26 +1173,28 @@
 
   /*校验不通过*/
   .vxe-body--column {
-    &.col--actived,
+    &.col--active,
     &.col--selected {
       position: relative;
     }
     &.col--valid-error {
-      .vxe-cell--valid {
-        width: 320px;
+      .vxe-cell--valid-error-hint {
+        width: 100%;
         position: absolute;
-        bottom: calc(100% + 4px);
         left: 50%;
+        font-size: 12px;
+        line-height: 1.2em;
         transform: translateX(-50%);
-        text-align: center;
+        text-align: left;
         pointer-events: none;
         z-index: 4;
-        .vxe-cell--valid-msg {
+        padding-left: $vxe-table-cell-padding-left;
+        padding-right: $vxe-table-cell-padding-right;
+        .vxe-cell--valid-error-msg {
           display: inline-block;
           border-radius: $vxe-border-radius;
-          padding: 8px 12px;
-          color: #fff;
-          background-color: #f56c6c;
+          color: $vxe-table-validate-error-color;
+          background-color: $vxe-table-validate-error-background-color;
           pointer-events: auto;
         }
       }
@@ -1209,20 +1211,90 @@
 
     }
   }
-  .vxe-body--row {
-    &:first-child {
-      .vxe-cell--valid {
-        bottom: auto;
-        top: calc(100% + 4px);
+  &.vaild-msg--single {
+    .vxe-body--row {
+      &:last-child {
+        .vxe-cell--valid-error-hint {
+          bottom: calc(100%);
+        }
+        &:first-child {
+          .vxe-cell--valid-error-hint {
+            bottom: auto;
+          }
+        }
       }
     }
   }
-  .vxe-body--column {
-    &:first-child {
-      .vxe-cell--valid {
-        left: 10px;
-        transform: translateX(0);
-        text-align: left;
+  &.vaild-msg--full {
+    .vxe-body--row {
+      &:last-child {
+        .vxe-cell--valid-error-hint {
+          top: calc(100% - 1.3em);
+        }
+      }
+    }
+  }
+  /*已废弃，旧的校验样式**/
+  &.old-cell-valid {
+    .vxe-body--column {
+      &.col--valid-error {
+        .vxe-cell--valid-error-hint {
+          width: 320px;
+          position: absolute;
+          bottom: calc(100% + 4px);
+          left: 50%;
+          transform: translateX(-50%);
+          text-align: center;
+          pointer-events: none;
+          z-index: 4;
+          .vxe-cell--valid-error-msg {
+            display: inline-block;
+            border-radius: $vxe-border-radius;
+            padding: 8px 12px;
+            color: #fff;
+            background-color: #f56c6c;
+            pointer-events: auto;
+          }
+        }
+      }
+    }
+    .vxe-body--row {
+      &:first-child {
+        .vxe-cell--valid-error-hint {
+          bottom: auto;
+          top: calc(100% + 4px);
+        }
+      }
+    }
+    .vxe-body--column {
+      &:first-child {
+        .vxe-cell--valid-error-hint {
+          left: 10px;
+          transform: translateX(0);
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  /*单元格标记删除状态*/
+  .vxe-body--row {
+    &.row--pending {
+      color: $vxe-table-validate-error-color;
+      text-decoration: line-through;
+      cursor: no-drop;
+      .vxe-body--column {
+        position: relative;
+        &:after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 100%;
+          height: 0;
+          border-bottom: 1px solid $vxe-table-validate-error-color;
+          z-index: 1;
+        }
       }
     }
   }
@@ -1265,7 +1337,7 @@
   &.vxe-editable {
     &.cell--highlight {
       .vxe-body--column {
-        &.col--actived {
+        &.col--active {
           box-shadow: inset 0px 0px 0px 2px $vxe-primary-color;
           &.col--valid-error {
             box-shadow: inset 0px 0px 0px 2px $vxe-table-validate-error-color;
@@ -1297,7 +1369,7 @@
     }
     .vxe-body--column {
       padding: 0;
-      &.col--actived {
+      &.col--active {
         padding: 0;
       }
     }

package/types/grid.d.ts

@@ -10,7 +10,7 @@ import { RowInfo } from './component'
 /* eslint-disable no-use-before-define */
 
 /**
- * 高级表格
+ * 配置式表格
  */
 export declare class Grid extends Table {
   /**

package/types/table.d.ts

@@ -600,6 +600,22 @@ export declare class Table extends VXETableComponent {
    * @param row 指定行
    */
   setRadioRow(row: RowInfo): Promise<any>;
+  /**
+   * 将指定行设置为取消/标记待删除状态
+   */
+  setPendingRow(rows: any | any[], status: boolean): Promise<any>
+  /**
+   * 切换指定行的取消/标记待删除状态
+   */
+  togglePendingRow(rows: any | any[]): Promise<any>
+  /**
+   * 获取待删除状态的数据
+   */
+  getPendingRecords(): any[]
+  /**
+   * 清除所有标记状态
+   */
+  clearPendingRow(): Promise<any>
   /**
    * 手动清除临时合并的单元格
    */
@@ -708,6 +724,11 @@ export declare class Table extends VXETableComponent {
    * 用于 expand-config，判断行是否为展开状态
    * @param row 指定行
    */
+  isRowExpandByRow(row: RowInfo): boolean;
+  /**
+   * 已废弃，请使用 isRowExpandByRow
+   * @deprecated
+   */
   isExpandByRow(row: RowInfo): boolean;
   /**
    * 用于 type=expand，手动清空展开行状态，数据会恢复成未展开的状态
@@ -908,6 +929,7 @@ export declare class Table extends VXETableComponent {
     insertRecords: RowInfo[];
     removeRecords: RowInfo[];
     updateRecords: RowInfo[];
+    pendingRecords: RowInfo[]
   };
 
   /**

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

@@ -181,7 +181,7 @@ export class TableRenderParams extends RenderParams {
 
 export class GridRenderParams extends TableRenderParams {
   /**
-   * 高级表格实例对象
+   * 配置式表格实例对象
    */
   $grid: Grid;
 }