@weitutech/by-components 1.0.27

package/src/components/pager/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div id="pager" class="pager fixed bottom-0 right-0 w-full flex justify-center items-center z-50">
+    <el-pagination
+      :current-page="pager['page']"
+      :page-size="pager['limit']"
+      :page-sizes="pageSizes"
+      background
+      layout="total, prev, pager, next,sizes, jumper"
+      :total="totalCount"
+      @size-change="(value) => handleValueChange(value, 'limit')"
+      @current-change="(value) => handleValueChange(value, 'page')"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BYPager',
+  props: {
+    limit: {
+      type: Number,
+      default: 15
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    totalCount: {
+      type: Number,
+      required: true,
+      default: 25
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [10, 15, 20, 25, 30, 50, 100]
+    }
+  },
+
+  data() {
+    return {
+      pager: {
+        page: this.page,
+        limit: this.limit
+      }
+    }
+  },
+
+  watch: {
+    page: {
+      handler: function(val, oldVal) {
+        this.pager.page = val
+      },
+      immediate: true
+    },
+    limit: {
+      handler: function(val, oldVal) {
+        this.pager.limit = val
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // 修改分页文案
+    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至"
+    document.getElementsByClassName("el-pagination__jump")[0].childNodes[2].nodeValue = ""
+  },
+
+  methods: {
+    handleValueChange(value, field) {
+      if (!value) return
+      const values = {
+        ...this.pager,
+        [field]: value,
+        page: field === "limit" ? 1 : value
+      }
+      this.$emit("onChange", values)
+    }
+  }
+}
+</script>
+

package/src/components/table/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <vxe-grid
+      ref="xGrid"
+      v-bind="options"
+      v-on="eventListeners"
+      @cell-click="handleCellClick"
+    >
+      <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: () => {}
+    }
+  },
+  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", "resizable-change", "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, ...others } = this.gridOptions
+      return {
+        border: true,
+        resizable: true,
+        showOverflow: true,
+        height: 550,
+        align: "left",
+        copyFields: [],
+        pagerConfig: false,
+        emptyText: "暂无数据",
+        loadingConfig: {
+          text: "加载中..."
+        },
+        ...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: {
+    handleCellClick(context) {
+      if (this.options.copyFields.includes(context.column.field)) {
+        const text = context.cell.outerText
+        this.copy(text)
+      }
+      this.$emit("cell-click", context)
+    },
+    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"

package/src/plugin/vxeTable.scss

@@ -0,0 +1,14 @@
+// 修改scss变量
+$vxe-font-size: 12px;
+$vxe-table-header-font-color: #000;
+$vxe-table-header-background-color: #fafafa;
+$vxe-font-color: #606266;
+// $vxe-primary-color: #409eff;
+// $vxe-table-font-color: $vxe-font-color;
+$vxe-table-border-color: #ebeef5;
+// $vxe-table-border-radius: 4px;
+$vxe-table-row-height-default: 41px;
+$vxe-table-column-padding-default: 9.5px 0;
+// ...
+
+@import 'vxe-table/styles/index.scss';