@weitutech/by-components 1.1.1 → 1.1.2

package/src/components/table/index.vue

@@ -0,0 +1,371 @@
+<template>
+  <div>
+    <vxe-grid
+      ref="xGrid"
+      v-bind="options"
+      v-on="eventListeners"
+      @cell-click="handleCellClick"
+      @resizable-change="handleResizableChange"
+    >
+      <template v-for="item in slotMap" #[item]="context">
+        <slot :name="item" v-bind="context" />
+      </template>
+      <template v-if="options.pagerConfig" #pager>
+        <!-- 📢 由于BPager利用的是ElementUi分页目前只支持vxeTable中分页配置中的currentPage、pageSize、total、pageSizes选项配置 -->
+        <by-pager
+          :page="options.pagerConfig.currentPage"
+          :limit="options.pagerConfig.pageSize"
+          :total-count="options.pagerConfig.total"
+          :page-sizes="options.pagerConfig.pageSizes"
+          @onChange="pageChange"
+        />
+      </template>
+    </vxe-grid>
+    <CustomColumn
+      v-if="
+        gridOptions.customColumnConfig &&
+        gridOptions.customColumnConfig.showCustomColumn
+      "
+      ref="CustomColumnRef"
+      :info-method="gridOptions.customColumnConfig.infoMethod"
+      :submit-method="gridOptions.customColumnConfig.submitMethod"
+      :dialog-visible="customTableVisible"
+      @closeDialog="closeCustomColumnDialog"
+      @changeTable="changeTableFields"
+      @changeTableGroup="changeTableGroupFields"
+    />
+  </div>
+</template>
+
+<script>
+import CustomColumn from '../custom-column/index.vue'
+export default {
+  name: 'BYTable',
+  components: {
+    CustomColumn
+  },
+  props: {
+    gridOptions: {
+      type: Object,
+      default: () => {}
+    },
+    name: {
+      //如果有传入name时，当表格宽度拖动时，会缓存当前表格每列的宽度，下次刷新将展示缓存宽度(⚠️注意：同一个项目中name一定不要重复)
+      type: String,
+      default: ''
+    },
+    autoHeight: {
+      // 是否根据内容自动撑高
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      /**
+       * @see https://vxetable.cn/v3.8/#/grid/api
+       */
+      events: [
+        'keydown',
+        'current-change',
+        'radio-change',
+        'checkbox-change',
+        'checkbox-all',
+        'checkbox-range-start',
+        'checkbox-range-change',
+        'checkbox-range-end',
+        'cell-dblclick',
+        'cell-menu',
+        'cell-mouseenter',
+        'cell-mouseleave',
+        'cell-delete-value',
+        'header-cell-click',
+        'header-cell-dblclick',
+        'header-cell-menu',
+        'footer-cell-click',
+        'footer-cell-dblclick',
+        'footer-cell-menu',
+        'clear-merge',
+        'sort-change',
+        'clear-sort',
+        'filter-visible',
+        'filter-change',
+        'clear-filter',
+        'toggle-row-expand',
+        'toggle-tree-expand',
+        'menu-click',
+        'cell-selected',
+        'edit-closed',
+        'edit-activated',
+        'edit-disabled',
+        'valid-error',
+        'scroll',
+        'custom',
+        'page-change',
+        'form-submit',
+        'form-submit-invalid',
+        'form-reset',
+        'form-collapse',
+        'proxy-query',
+        'proxy-delete',
+        'proxy-save',
+        'toolbar-button-click',
+        'toolbar-tool-click',
+        'zoom'
+      ],
+      // 自定义对话框显示和隐藏控制
+      customTableVisible: false
+    }
+  },
+  computed: {
+    options() {
+      const { customColumnConfig, columns, ...others } = this.gridOptions
+
+      // 使用列宽缓存值(若有)
+      const newColumns = this.getColumnsData(columns)
+
+      return {
+        border: true,
+        resizable: true,
+        /**
+         * 控制单元格内容的溢出显示方式
+         * 可选值：
+         *    true：默认值，超出部分显示省略号（...）
+         *    'visible'：内容完整显示，不会被截断
+         *    'ellipsis'：显示省略号
+         *    'tooltip'：超出部分显示省略号，鼠标悬停时显示完整内容
+         */
+        showOverflow: this.autoHeight ? 'visible' : true,
+        showHeaderOverflow: this.autoHeight ? 'tooltip' : true,
+        height: 550,
+        align: 'left',
+        copyFields: [],
+        pagerConfig: false,
+        emptyText: '暂无数据',
+        loadingConfig: {
+          text: '加载中...'
+        },
+        columns: newColumns,
+        ...others,
+        resizableConfig: {
+          minWidth: 50,
+          ...this.gridOptions.resizableConfig
+        },
+        rowConfig: {
+          height: 41,
+          isHover: true,
+          ...this.gridOptions.rowConfig
+        },
+        sortConfig: {
+          remote: true,
+          trigger: 'cell',
+          ...this.gridOptions.sortConfig
+        }
+      }
+    },
+
+    // 插槽集合
+    slotMap() {
+      const slotSet = new Set([])
+      const slots = this.gridOptions?.customColumnConfig?.slots ?? []
+      this.options.columns.forEach(col => {
+        if (col.slots) {
+          const slots = Object.values(col.slots)
+          slots.forEach(slot => slotSet.add(slot))
+        }
+      })
+      return [...Array.from(slotSet), ...slots]
+    },
+    // 注册emit事件
+    eventListeners() {
+      const listeners = {}
+      this.events.forEach(eventName => {
+        listeners[eventName] = event => this.$emit(eventName, event)
+      })
+      return listeners
+    }
+  },
+
+  methods: {
+    //获取缓存列宽，并替换列宽值
+    getColumnsData(columns) {
+      if (!this.name) {
+        return columns
+      }
+
+      const cacheColumns = JSON.parse(localStorage.getItem(this.name))
+      if (!cacheColumns) {
+        return columns
+      }
+
+      //比较columns和cols列宽缓存数据，如果有变动（表头有增加或删除），更新缓存
+      const cols = this.compareColumnsAndCols(columns, cacheColumns)
+
+      // 将缓存中的列宽，替换到columns中的列宽
+      if (cols && this.name) {
+        columns.forEach(item => {
+          item.width =
+            (cols.find(col => col.field === item.field) || {}).width ||
+            item.width ||
+            undefined
+        })
+      }
+
+      return columns
+    },
+
+    /**
+     * 更新列宽缓存
+     * 比较columns和cacheColumns列宽缓存数据，如果有变动（表头有增加或删除），更新缓存
+     * 如果columns的列在cacheColumns中不存在，则说明是新增的列，将对应的列加入到缓存中
+     * 如果cacheColumns的列在columns中不存在，则说明是删除的列，将对应的列从缓存中删除
+     * @param columns 当前表格列配置
+     * @param cacheColumns 缓存列配置
+     */
+    compareColumnsAndCols(columns, cacheColumns) {
+      if (!cacheColumns || !this.name) {
+        return undefined
+      }
+      // 如果columns的列在cacheColumns中不存在，则说明是新增的列，将对应的列加入到缓存中
+      columns.forEach(item => {
+        if (
+          item &&
+          item.field &&
+          !cacheColumns.some(col => col && col.field === item.field)
+        ) {
+          cacheColumns.push({
+            field: item.field,
+            width: item.width
+          })
+        }
+      })
+      // 如果cacheColumns的列在columns中不存在，则说明是删除的列，将对应的列从缓存中删除
+      const newCacheColumns = cacheColumns.filter(
+        item =>
+          item &&
+          item.field &&
+          columns.some(col => col && col.field === item.field)
+      )
+      // 更新缓存
+      localStorage.setItem(this.name, JSON.stringify(newCacheColumns))
+      return newCacheColumns
+    },
+
+    handleCellClick(context) {
+      if (this.options.copyFields.includes(context.column.field)) {
+        const text = context.cell.outerText
+        this.copy(text)
+      }
+      this.$emit('cell-click', context)
+    },
+    handleResizableChange(context) {
+      this.$emit('resizable-change', context)
+      if (!this.name) return
+      const collectColumn = context.$table.collectColumn
+      console.log(collectColumn, 'collectColumn')
+      const clos = collectColumn
+        .filter(col => col.field)
+        .map(col => ({
+          field: col.field,
+          width: col.renderWidth
+        }))
+      localStorage.setItem(this.name, JSON.stringify(clos))
+    },
+    pageChange(values) {
+      this.$emit('page-change', values)
+    },
+    copy(text) {
+      const oInput = document.createElement('input')
+      oInput.value = text
+      document.body.appendChild(oInput)
+      oInput.select() // 选择对象;
+      document.execCommand('Copy') // 执行浏览器复制命令
+      this.$message({
+        message: '复制成功',
+        type: 'success'
+      })
+      oInput.remove()
+    },
+    getCustomColumnRef() {
+      return this.$refs.CustomColumnRef
+    },
+    handleOpenCustomColumn() {
+      this.customTableVisible = true
+    },
+    // 改变表头字段
+    changeTableFields(cols) {
+      const columns = []
+      cols.forEach(item => {
+        if (!columns.some(col => col.field === item.key) && item.type) {
+          columns.push({
+            field: item.key,
+            title: item.label,
+            minWidth: item.minWidth || item.width,
+            maxWidth: item.maxWidth,
+            sortable:
+              typeof item.sortable === 'undefined'
+                ? true
+                : JSON.parse(item.sortable),
+            fixed: item.fixed,
+            slots: this.gridOptions.customColumnConfig.slots.includes(item.key)
+              ? { default: item.key }
+              : undefined
+          })
+        }
+      })
+      this.$emit('setColumn', columns)
+    },
+    // 多层级表头
+    changeTableGroupFields(cols) {
+      const recursiveData = cols => {
+        const arr = []
+        cols.forEach((item, index) => {
+          if (item.data && item.data.length > 0) {
+            arr.push({
+              title: item.label,
+              align: 'center',
+              children: recursiveData(item.data)
+            })
+            if (index < cols.length - 1) {
+              arr.push({
+                title: '',
+                width: 5,
+                headerClassName: 'group-split',
+                className: 'group-split'
+              })
+            }
+          } else {
+            if (!arr.some(col => col.field === item.key) && item.type) {
+              arr.push({
+                field: item.key,
+                title: item.label,
+                minWidth: item.minWidth || item.width,
+                maxWidth: item.maxWidth,
+                sortable:
+                  typeof item.sortable === 'undefined'
+                    ? true
+                    : JSON.parse(item.sortable),
+                fixed: item.fixed,
+                slots: this.gridOptions.customColumnConfig.slots.includes(
+                  item.key
+                )
+                  ? { default: item.key }
+                  : undefined
+              })
+            }
+          }
+        })
+        return arr
+      }
+      this.$emit('setGroupColumn', recursiveData(cols))
+    },
+
+    // 关闭自定义表头弹框
+    closeCustomColumnDialog() {
+      this.customTableVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/index.js

@@ -0,0 +1,31 @@
+import ByPager from './components/pager/index'
+import ByTable from './components/table/index'
+import ByForm from './components/form/form'
+import ByPageSearch from './components/page-search/page-search'
+import ByFoldSearch from './components/fold-search/index'
+import BySelect from './components/form/comps/select.vue'
+import ByDatePickerRange from './components/form/comps/date-picker-range.vue'
+import domZindex from 'dom-zindex'
+const components = {
+  ByPager,
+  ByTable,
+  ByForm,
+  ByPageSearch,
+  ByFoldSearch,
+  BySelect,
+  ByDatePickerRange
+}
+// 设置当前 z-index 起始值
+domZindex.setCurrent(99999)
+
+const install = Vue => {
+  Object.keys(components).forEach(name => {
+    Vue.component(name, components[name])
+  })
+}
+
+// 支持直接通过 script 标签引入
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+export default { install }

package/src/plugin/vxeTable.js

@@ -0,0 +1,300 @@
+import Vue from 'vue'
+// import XEUtils from "xe-utils"
+import {
+  // 全局实例对象
+  // VXETable,
+
+  // 可选表格模块
+  // VxeTableFilterModule,
+  // VxeTableEditModule,
+  // VxeTableMenuModule,
+  // VxeTableExportModule,
+  // VxeTableKeyboardModule,
+  // VxeTableValidatorModule,
+  // VxeTableCustomModule,
+
+  // 可选组件
+  VxeIcon,
+  VxeTable,
+  VxeColumn,
+  VxeColgroup,
+  VxeGrid,
+  VxeTooltip,
+  VxeToolbar,
+  VxePager,
+  // VxeForm,
+  // VxeFormItem,
+  // VxeFormGather,
+  // VxeCheckbox,
+  // VxeCheckboxGroup,
+  // VxeRadio,
+  // VxeRadioGroup,
+  // VxeRadioButton,
+  // VxeSwitch,
+  // VxeInput,
+  VxeSelect
+  // VxeOptgroup,
+  // VxeOption,
+  // VxeTextarea,
+  // VxeButton,
+  // VxeButtonGroup,
+  // VxeModal,
+  // VxeList,
+  // VxePulldown
+} from 'vxe-table'
+
+// 旧版本使用 setup({}) 或者 config({})
+// VXETable.config({
+//   // size: null, // 全局尺寸
+//   // zIndex: 999, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡；新版本可以使用 dom-zindex 共享配置
+//   // version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
+//   // loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
+//   table: {
+//     // showHeader: true,
+//     // keepSource: false,
+//     // showOverflow: null,
+//     // showHeaderOverflow: null,
+//     // showFooterOverflow: null,
+//     // size: null,
+//     // autoResize: false,
+//     // stripe: false,
+//     // border: false,
+//     // round: false,
+//     // minHeight: 144,
+//     emptyText: "暂无数据"
+//     // resizeConfig: {
+//     //   refreshDelay: 250
+//     // },
+//     // rowConfig: {
+//     //   keyField: '_X_ROW_KEY' // 行数据的唯一主键字段名
+//     // },
+//     // radioConfig: {
+//     //   trigger: 'default'
+//     // },
+//     // checkboxConfig: {
+//     //   strict: false,
+//     //   highlight: false,
+//     //   range: false,
+//     //   trigger: 'default'
+//     // },
+//     // sortConfig: {
+//     //   remote: false,
+//     //   trigger: 'default',
+//     //   orders: ['asc', 'desc', null],
+//     //   sortMethod: null
+//     // },
+//     // filterConfig: {
+//     //   remote: false,
+//     //   filterMethod: null
+//     // },
+//     // expandConfig: {
+//     //   trigger: 'default',
+//     //   showIcon: true
+//     // },
+//     // treeConfig: {
+//     //   rowField: 'id',
+//     //   parentField: 'parentId',
+//     //   children: 'children',
+//     //   hasChild: 'hasChild',
+//     //   mapChildren: '_X_ROW_CHILD',
+//     //   indent: 20,
+//     //   showIcon: true
+//     // },
+//     // tooltipConfig: {
+//     //   enterable: true
+//     // },
+//     // menuConfig: {
+//     //   visibleMethod () {}
+//     // },
+//     // editConfig: {
+//     //   mode: 'cell',
+//     //   showAsterisk: true
+//     // },
+//     // importConfig: {
+//     //   modes: ['insert', 'covering']
+//     // },
+//     // exportConfig: {
+//     //   modes: ['current', 'selected']
+//     // },
+//     // customConfig: {
+//     //  storage: false,
+//     //  mode: 'simple' // 默认自定义列方式
+//     // },
+//     // area-config: {
+//     //   multiple: false
+//     // },
+//     // scrollX: {
+//     //   enabled: false, // 是否默认开启横向虚拟滚动
+//     //   gt: 60 // 当列大于指定数量时自动触发启用虚拟滚动
+//     // },
+//     // scrollY: {
+//     //   enabled: false, // 是否默认开启纵向虚拟滚动
+//     //   gt: 100 // 当数据大于指定数量时自动触发启用虚拟滚动
+//     // },
+//     // loading: {
+//     //   icon: 'vxe-icon-spinner roll',
+//     //   text: '加载中...'
+//     // }
+//   }
+//   // grid: {
+//   // emptyText: "暂无数据"
+//   // size: null,
+//   // zoomConfig: {
+//   //   escRestore: true
+//   // },
+//   // pagerConfig: {
+//   // },
+//   // toolbarConfig: {
+//   // },
+//   // proxyConfig: {
+//   //   autoLoad: true,
+//   //   message: true,
+//   //   props: {
+//   //     list: null, // 用于列表，读取响应数据
+//   //     result: 'result', // 用于分页，读取响应数据
+//   //     total: 'page.total' // 用于分页，读取总条数
+//   //   }
+//   //   beforeItem: null,
+//   //   beforeColumn: null,
+//   //   beforeQuery: null,
+//   //   afterQuery: null,
+//   //   beforeDelete: null,
+//   //   afterDelete: null,
+//   //   beforeSave: null,
+//   //   afterSave: null
+//   // }
+//   // }
+//   // pager: {
+//   //   size: null,
+//   //   autoHidden: false,
+//   //   pageSize: 10,
+//   //   pagerCount: 7,
+//   //   pageSizes: [10, 15, 20, 50, 100],
+//   //   layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+//   // },
+//   // form: {
+//   //   preventSubmit: false
+//   //   size: null,
+//   //   colon: false,
+//   //   validConfig: {
+//   //     autoPos: true
+//   //   },
+//   //   tooltipConfig: {
+//   //     enterable: true
+//   //   },
+//   //   titleAsterisk: true
+//   // },
+//   // input: {
+//   //   size: null,
+//   //   transfer: false
+//   //   parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
+//   //   labelFormat: '',
+//   //   valueFormat: '',
+//   //   startDay: 1,
+//   //   digits: 2,
+//   //   controls: true
+//   // },
+//   // textarea: {
+//   //   size: null
+//   //   autosize: {
+//   //     minRows: 1,
+//   //     maxRows: 10
+//   //   }
+//   // },
+//   // select: {
+//   //   size: null,
+//   //   transfer: false,
+//   //   optionConfig: {
+//   //     keyField: '_X_OPTION_KEY' // 选项数据的唯一主键字段名
+//   //   },
+//   //   multiCharOverflow: 8
+//   // },
+//   // toolbar: {
+//   //   size: null,
+//   //   import: {
+//   //     mode: 'covering'
+//   //   },
+//   //   export: {
+//   //     types: ['csv', 'html', 'xml', 'txt']
+//   //   },
+//   //   buttons: [],
+//   //   tools: []
+//   // },
+//   // button: {
+//   //   size: null,
+//   //   transfer: false
+//   // },
+//   // radio: {
+//   //   size: null
+//   // },
+//   // checkbox: {
+//   //   size: null
+//   // },
+//   // switch: {
+//   //   size: null
+//   // },
+//   // modal: {
+//   //   // size: null,
+//   //   minWidth: 340,
+//   //   minHeight: 200,
+//   //   lockView: true,
+//   //   mask: true,
+//   //   duration: 3000,
+//   //   marginSize: 0,
+//   //   dblclickZoom: true,
+//   //   showTitleOverflow: true
+//   //   storage: false
+//   // },
+//   // list: {
+//   //   scrollY: {
+//   //     gt: 100
+//   //   }
+//   // }
+// })
+
+// 导入默认的语言
+// import zhCN from "vxe-table/lib/locale/lang/zh-CN"
+
+// 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
+// VXETable.setConfig({
+//   i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
+// })
+
+// 可选表格模块
+// Vue.use(VxeTableFilterModule)
+// Vue.use(VxeTableEditModule)
+// Vue.use(VxeTableMenuModule)
+// Vue.use(VxeTableExportModule)
+// Vue.use(VxeTableKeyboardModule)
+// Vue.use(VxeTableValidatorModule)
+// Vue.use(VxeTableCustomModule)
+
+// 可选组件
+Vue.use(VxeIcon)
+Vue.use(VxeTable)
+Vue.use(VxeColumn)
+Vue.use(VxeColgroup)
+Vue.use(VxeGrid)
+Vue.use(VxeTooltip)
+Vue.use(VxeToolbar)
+Vue.use(VxePager)
+// Vue.use(VxeForm)
+// Vue.use(VxeFormItem)
+// Vue.use(VxeFormGather)
+// Vue.use(VxeCheckbox)
+// Vue.use(VxeCheckboxGroup)
+// Vue.use(VxeRadio)
+// Vue.use(VxeRadioGroup)
+// Vue.use(VxeRadioButton)
+// Vue.use(VxeSwitch)
+// Vue.use(VxeInput)
+Vue.use(VxeSelect)
+// Vue.use(VxeOptgroup)
+// Vue.use(VxeOption)
+// Vue.use(VxeTextarea)
+// Vue.use(VxeButton)
+// Vue.use(VxeButtonGroup)
+// Vue.use(VxeModal)
+// Vue.use(VxeList)
+// Vue.use(VxePulldown)
+import './vxeTable.scss'