@weitutech/by-components 1.0.27 → 1.0.30

package/src/components/table/index.vue

@@ -1,219 +1,240 @@
-<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>
+<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: {
+      type: String,
+      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", "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 cols = JSON.parse(localStorage.getItem(this.name)) || undefined
+      if (cols && this.name) {
+        columns.forEach(item => {
+          item.width = (cols.find(col => col.field === item.field) || {}).width || undefined
+        })
+      }
+      return {
+        border: true,
+        resizable: true,
+        showOverflow: true,
+        height: 550,
+        align: "left",
+        copyFields: [],
+        pagerConfig: false,
+        emptyText: "暂无数据",
+        loadingConfig: {
+          text: "加载中..."
+        },
+        columns,
+        ...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)
+    },
+    handleResizableChange(context) {
+      this.$emit("resizable-change", context)
+      if (!this.name) return
+      const collectColumn = context.$table.collectColumn
+      console.log(collectColumn, "collectColumn")
+      const clos = collectColumn.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 +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)
-}
+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 }