@weitutech/by-components 1.1.0 → 1.1.1

package/src/components/table/index.vue

@@ -1,371 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-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

@@ -1,300 +0,0 @@
-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'