vxe-table 3.8.23 → 3.9.0-rc.0

package/packages/table/module/export/util.ts

@@ -0,0 +1,24 @@
+import type { VxeTablePropTypes } from '../../../../types'
+
+// 默认导出或打印的 HTML 样式
+const defaultHtmlStyle = 'body{margin:0;padding: 0 1px;color:#333333;font-size:14px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0}.vxe-table:not(.is--print){table-layout:fixed}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{border-color:#D0D0D0;border-style:solid;border-width:0}.vxe-table.is--print{width:100%}.border--default,.border--full,.border--outer{border-top-width:1px}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9}.vxe-table td>div,.vxe-table th>div{padding:.5em .4em}.col--center{text-align:center}.col--right{text-align:right}.vxe-table:not(.is--print) .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vxe-table--tree-node{text-align:left}.vxe-table--tree-node-wrapper{position:relative}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:.5em;border-right-color:transparent;border-bottom-color:transparent}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599}.vxe-table--tree-cell{display:block;padding-left:1.5em}.vxe-table input[type="checkbox"]{margin:0}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}'
+
+export function getExportBlobByContent (content: string, options: { type: string }) {
+  return new Blob([content], { type: `text/${options.type};charset=utf-8;` })
+}
+
+export function createHtmlPage (opts: VxeTablePropTypes.PrintConfig, content: string): string {
+  const { style } = opts
+  return [
+    '<!DOCTYPE html><html>',
+    '<head>',
+    '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">',
+    `<title>${opts.sheetName}</title>`,
+    '<style media="print">.vxe-page-break-before{page-break-before:always;}.vxe-page-break-after{page-break-after:always;}</style>',
+    `<style>${defaultHtmlStyle}</style>`,
+    style ? `<style>${style}</style>` : '',
+    '</head>',
+    `<body>${content}</body>`,
+    '</html>'
+  ].join('')
+}

package/packages/table/module/filter/mixin.ts

@@ -0,0 +1,273 @@
+import XEUtils from 'xe-utils'
+import { VxeUI } from '../../../ui'
+import { toFilters, handleFieldOrColumn } from '../../src/util'
+import { getDomNode, triggerEvent } from '../../../ui/src/dom'
+import { isEnableConf } from '../../../ui/src/utils'
+
+const { renderer } = VxeUI
+
+export default {
+  methods: {
+    /**
+     * 手动弹出筛选面板
+     * @param column
+     */
+    _openFilter (fieldOrColumn: any) {
+      const column = handleFieldOrColumn(this, fieldOrColumn)
+      if (column && column.filters) {
+        const { elemStore } = this
+        const { fixed } = column
+        return this.scrollToColumn(column).then(() => {
+          const headerWrapperElem = elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']
+          if (headerWrapperElem) {
+            const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-filter--btn`)
+            triggerEvent(filterBtnElem, 'click')
+          }
+        })
+      }
+      return this.$nextTick()
+    },
+    /**
+     * 修改筛选条件列表
+     * @param {ColumnInfo} fieldOrColumn 列
+     * @param {Array} options 选项
+     */
+    _setFilter (fieldOrColumn: any, options: any, update: any) {
+      const column = handleFieldOrColumn(this, fieldOrColumn)
+      if (column && column.filters) {
+        column.filters = toFilters(options || [])
+      }
+      return update ? this.updateData() : this.$nextTick()
+    },
+    checkFilterOptions () {
+      const { filterStore } = this
+      filterStore.isAllSelected = filterStore.options.every((item: any) => item._checked)
+      filterStore.isIndeterminate = !filterStore.isAllSelected && filterStore.options.some((item: any) => item._checked)
+    },
+    /**
+     * 点击筛选事件
+     * 当筛选图标被点击时触发
+     * 更新选项是否全部状态
+     * 打开筛选面板
+     * @param {Event} evnt 事件
+     * @param {ColumnInfo} column 列配置
+     * @param {Object} params 参数
+     */
+    triggerFilterEvent (evnt: any, column: any, params: any) {
+      const { filterStore } = this
+      if (filterStore.column === column && filterStore.visible) {
+        filterStore.visible = false
+      } else {
+        const { target: targetElem, pageX } = evnt
+        const { filters, filterMultiple, filterRender } = column
+        const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+        const filterRecoverMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null)
+        const { visibleWidth } = getDomNode()
+        Object.assign(filterStore, {
+          args: params,
+          multiple: filterMultiple,
+          options: filters,
+          column,
+          style: null,
+          visible: true
+        })
+        // 复原状态
+        filterStore.options.forEach((option: any) => {
+          const { _checked, checked } = option
+          option._checked = checked
+          if (!checked && _checked !== checked) {
+            if (filterRecoverMethod) {
+              filterRecoverMethod({ option, column, $table: this })
+            }
+          }
+        })
+        this.checkFilterOptions()
+        this.initStore.filter = true
+        this.$nextTick(() => {
+          const { $refs } = this
+          const { tableHeader, tableBody, filterWrapper } = $refs
+          const bodyElem = tableBody.$el
+          const headerElem = tableHeader ? tableHeader.$el : null
+          if (!bodyElem) {
+            return
+          }
+          const filterWrapperElem = filterWrapper.$el
+          if (!filterWrapperElem) {
+            return
+          }
+          const filterWidth = filterWrapperElem.offsetWidth
+          const filterHeight = filterWrapperElem.offsetHeight
+          const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header')
+          const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer')
+          const centerWidth = filterWidth / 2
+          const minMargin = 10
+          const maxLeft = bodyElem.clientWidth - filterWidth - minMargin
+          let left, right
+          const style: any = {
+            top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight}px`
+          }
+          // 判断面板不能大于表格高度
+          let maxHeight = null
+          const bodyHeight = bodyElem.clientHeight - (headerElem ? headerElem.clientHeight / 2 : 0)
+          if (filterHeight >= bodyHeight) {
+            maxHeight = Math.max(40, bodyHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0))
+          }
+          if (column.fixed === 'left') {
+            left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth
+          } else if (column.fixed === 'right') {
+            right = (targetElem.offsetParent.offsetWidth - targetElem.offsetLeft) + (targetElem.offsetParent.offsetParent.offsetWidth - targetElem.offsetParent.offsetLeft) - column.renderWidth - centerWidth
+          } else {
+            left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth - bodyElem.scrollLeft
+          }
+          if (left) {
+            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth
+            if (overflowWidth > 0) {
+              left -= overflowWidth
+            }
+            style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`
+          } else if (right) {
+            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth
+            if (overflowWidth > 0) {
+              right += overflowWidth
+            }
+            style.right = `${Math.max(minMargin, right)}px`
+          }
+          filterStore.style = style
+          filterStore.maxHeight = maxHeight
+        })
+      }
+      this.emitEvent('filter-visible', { column, field: column.field, property: column.field, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt)
+    },
+    _getCheckedFilters () {
+      const { tableFullColumn } = this
+      const filterList: any[] = []
+      tableFullColumn.forEach((column: any) => {
+        const { field, filters } = column
+        const valueList: any[] = []
+        const dataList : any[] = []
+        if (filters && filters.length) {
+          filters.forEach((item: any) => {
+            if (item.checked) {
+              valueList.push(item.value)
+              dataList.push(item.data)
+            }
+          })
+          if (valueList.length) {
+            filterList.push({ column, field, property: field, values: valueList, datas: dataList })
+          }
+        }
+      })
+      return filterList
+    },
+    /**
+     * 确认筛选
+     * 当筛选面板中的确定按钮被按下时触发
+     * @param {Event} evnt 事件
+     */
+    confirmFilterEvent (evnt: any) {
+      const { filterStore, filterOpts, scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = this
+      const { column } = filterStore
+      const { field } = column
+      const values: any[] = []
+      const datas: any[] = []
+      column.filters.forEach((item: any) => {
+        if (item.checked) {
+          values.push(item.value)
+          datas.push(item.data)
+        }
+      })
+      const filterList = this.getCheckedFilters()
+      const params = { $table: this, $event: evnt, column, field, property: field, values, datas, filters: filterList, filterList }
+      // 如果是服务端筛选，则跳过本地筛选处理
+      if (!filterOpts.remote) {
+        this.handleTableData(true)
+        this.checkSelectionStatus()
+      }
+      if (this.mouseConfig && this.mouseOpts.area && this.handleFilterEvent) {
+        this.handleFilterEvent(evnt, params)
+      }
+      this.emitEvent('filter-change', params, evnt)
+      this.closeFilter()
+      this.updateFooter().then(() => {
+        const { scrollXLoad, scrollYLoad } = this
+        if ((oldScrollXLoad || scrollXLoad) || (oldScrollYLoad || scrollYLoad)) {
+          if ((oldScrollXLoad || scrollXLoad)) {
+            this.updateScrollXSpace()
+          }
+          if ((oldScrollYLoad || scrollYLoad)) {
+            this.updateScrollYSpace()
+          }
+          return this.refreshScroll()
+        }
+      }).then(() => {
+        this.updateCellAreas()
+        return this.recalculate(true)
+      }).then(() => {
+        // 存在滚动行为未结束情况
+        setTimeout(() => this.recalculate(), 50)
+      })
+    },
+    handleClearFilter (column: any) {
+      if (column) {
+        const { filters, filterRender } = column
+        if (filters) {
+          const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+          const filterResetMethod = column.filterResetMethod || (compConf ? (compConf.tableFilterResetMethod || compConf.filterResetMethod) : null)
+          filters.forEach((item: any) => {
+            item._checked = false
+            item.checked = false
+            if (!filterResetMethod) {
+              item.data = XEUtils.clone(item.resetValue, true)
+            }
+          })
+          if (filterResetMethod) {
+            filterResetMethod({ options: filters, column, $table: this })
+          }
+        }
+      }
+    },
+    /**
+     * 重置筛选
+     * 当筛选面板中的重置按钮被按下时触发
+     * @param {Event} evnt 事件
+     */
+    resetFilterEvent (evnt: any) {
+      this.handleClearFilter(this.filterStore.column)
+      this.confirmFilterEvent(evnt)
+    },
+    /**
+     * 清空指定列的筛选条件
+     * 如果为空则清空所有列的筛选条件
+     * @param {String} fieldOrColumn 列
+     */
+    _clearFilter (fieldOrColumn: any) {
+      const { filterStore } = this
+      let column
+      if (fieldOrColumn) {
+        column = handleFieldOrColumn(this, fieldOrColumn)
+        if (column) {
+          this.handleClearFilter(column)
+        }
+      } else {
+        this.visibleColumn.forEach(this.handleClearFilter)
+      }
+      if (!fieldOrColumn || column !== filterStore.column) {
+        Object.assign(filterStore, {
+          isAllSelected: false,
+          isIndeterminate: false,
+          style: null,
+          options: [],
+          column: null,
+          multiple: false,
+          visible: false
+        })
+      }
+      return this.updateData()
+    },
+    _updateFilterOptionStatus (item: any, checked: any) {
+      item._checked = checked
+      item.checked = checked
+      return this.$nextTick()
+    }
+  } as any
+}

package/packages/table/module/filter/panel.ts

@@ -0,0 +1,220 @@
+import { VxeUI } from '../../../ui'
+import { formatText, isEnableConf, getClass } from '../../../ui/src/utils'
+import { getSlotVNs } from '../../../ui/src/vn'
+import { CreateElement } from 'vue'
+
+const { getI18n, getIcon, renderer } = VxeUI
+
+export default {
+  name: 'VxeTableFilterPanel',
+  props: {
+    filterStore: Object
+  },
+  computed: {
+    hasCheckOption () {
+      const { filterStore } = this
+      return filterStore && filterStore.options.some((option: any) => option.checked)
+    }
+  } as any,
+  render (this: any, h: CreateElement) {
+    const { $parent: $xetable, filterStore } = this
+    const { args, column } = filterStore
+    const filterRender = column ? column.filterRender : null
+    const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+    const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : ''
+    return h('div', {
+      class: [
+        'vxe-table--filter-wrapper',
+        'filter--prevent-default',
+        compConf && compConf.className ? compConf.className : '',
+        getClass(filterClassName, Object.assign({ $panel: this, $table: $xetable }, args)),
+        {
+          'is--animat': $xetable.animat,
+          'is--multiple': filterStore.multiple,
+          'is--active': filterStore.visible
+        }
+      ],
+      style: filterStore.style
+    }, filterStore.visible && column ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : [])
+  },
+  methods: {
+    renderOptions (h: CreateElement, filterRender: any, compConf: any) {
+      const { $parent: $xetable, filterStore } = this
+      const { args, column, multiple, maxHeight } = filterStore
+      const slots = column ? column.slots : null
+      const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
+      if (slots && slots.filter) {
+        return [
+          h('div', {
+            class: 'vxe-table--filter-template'
+          }, $xetable.callSlot(slots.filter, Object.assign({ $panel: this, context: this }, args), h))
+        ]
+      } else if (rtFilter) {
+        return [
+          h('div', {
+            class: 'vxe-table--filter-template'
+          }, getSlotVNs(rtFilter.call($xetable, h, filterRender, Object.assign({ $panel: this, context: this }, args))))
+        ]
+      }
+      const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item: any) => item._checked)
+      const isAllIndeterminate = multiple && filterStore.isIndeterminate
+      return [
+        h('ul', {
+          class: 'vxe-table--filter-header'
+        }, [
+          h('li', {
+            class: ['vxe-table--filter-option', {
+              'is--checked': isAllChecked,
+              'is--indeterminate': isAllIndeterminate
+            }],
+            attrs: {
+              title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+            },
+            on: {
+              click: (evnt: any) => {
+                this.changeAllOption(evnt, !filterStore.isAllSelected)
+              }
+            }
+          }, (multiple
+            ? [
+                h('span', {
+                  class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                })
+              ]
+            : []).concat([
+            h('span', {
+              class: 'vxe-checkbox--label'
+            }, getI18n('vxe.table.allFilter'))
+          ]))
+        ]),
+        h('ul', {
+          class: 'vxe-table--filter-body',
+          style: maxHeight
+            ? {
+                maxHeight: `${maxHeight}px`
+              }
+            : {}
+        }, filterStore.options.map((item: any) => {
+          const isChecked = item._checked
+          const isIndeterminate = false
+          return h('li', {
+            class: ['vxe-table--filter-option', {
+              'is--checked': isChecked
+            }],
+            attrs: {
+              title: item.label
+            },
+            on: {
+              click: (evnt: any) => {
+                this.changeOption(evnt, !item._checked, item)
+              }
+            }
+          }, (multiple
+            ? [
+                h('span', {
+                  class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                })
+              ]
+            : []).concat([
+            h('span', {
+              class: 'vxe-checkbox--label'
+            }, formatText(item.label, 1))
+          ]))
+        }))
+      ]
+    },
+    renderFooter (h: CreateElement) {
+      const { $parent: $xetable, hasCheckOption, filterStore } = this
+      const { filterOpts } = $xetable
+      const { column, multiple } = filterStore
+      const filterRender = column.filterRender
+      const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate
+      return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
+        ? [
+            h('div', {
+              class: 'vxe-table--filter-footer'
+            }, [
+              h('button', {
+                class: {
+                  'is--disabled': isDisabled
+                },
+                attrs: {
+                  disabled: isDisabled
+                },
+                on: {
+                  click: this.confirmFilter
+                }
+              }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
+              h('button', {
+                on: {
+                  click: this.resetFilter
+                }
+              }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
+            ])
+          ]
+        : []
+    },
+    // 全部筛选事件
+    filterCheckAllEvent (evnt: any, value: any) {
+      const filterStore = this.filterStore
+      filterStore.options.forEach((option: any) => {
+        option._checked = value
+        option.checked = value
+      })
+      filterStore.isAllSelected = value
+      filterStore.isIndeterminate = false
+    },
+
+    /*************************
+     * Publish methods
+     *************************/
+    // （单选）筛选发生改变
+    changeRadioOption (evnt: any, checked: any, item: any) {
+      const { $parent: $xetable, filterStore } = this
+      filterStore.options.forEach((option: any) => {
+        option._checked = false
+      })
+      item._checked = checked
+      $xetable.checkFilterOptions()
+      this.confirmFilter(evnt)
+    },
+    // （多选）筛选发生改变
+    changeMultipleOption (evnt: any, checked: any, item: any) {
+      const { $parent: $xetable } = this
+      item._checked = checked
+      $xetable.checkFilterOptions()
+    },
+    changeAllOption (evnt: any, checked: any) {
+      if (this.filterStore.multiple) {
+        this.filterCheckAllEvent(evnt, checked)
+      } else {
+        this.resetFilter(evnt)
+      }
+    },
+    // 筛选发生改变
+    changeOption (evnt: any, checked: any, item: any) {
+      if (this.filterStore.multiple) {
+        this.changeMultipleOption(evnt, checked, item)
+      } else {
+        this.changeRadioOption(evnt, checked, item)
+      }
+    },
+    // 确认筛选
+    confirmFilter (evnt: any) {
+      const { $parent: $xetable, filterStore } = this
+      filterStore.options.forEach((option: any) => {
+        option.checked = option._checked
+      })
+      $xetable.confirmFilterEvent(evnt)
+    },
+    // 重置筛选
+    resetFilter (evnt: any) {
+      const { $parent: $xetable } = this
+      $xetable.resetFilterEvent(evnt)
+    }
+    /*************************
+     * Publish methods
+     *************************/
+  } as any
+}