@weitutech/by-components 1.0.30 → 1.1.0

package/src/components/table/index.vue

@@ -22,7 +22,10 @@
       </template>
     </vxe-grid>
     <CustomColumn
-      v-if="gridOptions.customColumnConfig && gridOptions.customColumnConfig.showCustomColumn"
+      v-if="
+        gridOptions.customColumnConfig &&
+        gridOptions.customColumnConfig.showCustomColumn
+      "
       ref="CustomColumnRef"
       :info-method="gridOptions.customColumnConfig.infoMethod"
       :submit-method="gridOptions.customColumnConfig.submitMethod"
@@ -35,7 +38,7 @@
 </template>
 
 <script>
-import CustomColumn from "../custom-column/index.vue"
+import CustomColumn from '../custom-column/index.vue'
 export default {
   name: 'BYTable',
   components: {
@@ -47,8 +50,14 @@ export default {
       default: () => {}
     },
     name: {
+      //如果有传入name时，当表格宽度拖动时，会缓存当前表格每列的宽度，下次刷新将展示缓存宽度(⚠️注意：同一个项目中name一定不要重复)
       type: String,
-      default: ""
+      default: ''
+    },
+    autoHeight: {
+      // 是否根据内容自动撑高
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -57,16 +66,52 @@ export default {
        * @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"
+        '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
@@ -75,25 +120,32 @@ export default {
   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
-        })
-      }
+
+      // 使用列宽缓存值(若有)
+      const newColumns = this.getColumnsData(columns)
+
       return {
         border: true,
         resizable: true,
-        showOverflow: true,
+        /**
+         * 控制单元格内容的溢出显示方式
+         * 可选值：
+         *    true：默认值，超出部分显示省略号（...）
+         *    'visible'：内容完整显示，不会被截断
+         *    'ellipsis'：显示省略号
+         *    'tooltip'：超出部分显示省略号，鼠标悬停时显示完整内容
+         */
+        showOverflow: this.autoHeight ? 'visible' : true,
+        showHeaderOverflow: this.autoHeight ? 'tooltip' : true,
         height: 550,
-        align: "left",
+        align: 'left',
         copyFields: [],
         pagerConfig: false,
-        emptyText: "暂无数据",
+        emptyText: '暂无数据',
         loadingConfig: {
-          text: "加载中..."
+          text: '加载中...'
         },
-        columns,
+        columns: newColumns,
         ...others,
         resizableConfig: {
           minWidth: 50,
@@ -106,11 +158,12 @@ export default {
         },
         sortConfig: {
           remote: true,
-          trigger: "cell",
+          trigger: 'cell',
           ...this.gridOptions.sortConfig
         }
       }
     },
+
     // 插槽集合
     slotMap() {
       const slotSet = new Set([])
@@ -127,39 +180,109 @@ export default {
     eventListeners() {
       const listeners = {}
       this.events.forEach(eventName => {
-        listeners[eventName] = (event) => this.$emit(eventName, event)
+        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)
+      this.$emit('cell-click', context)
     },
     handleResizableChange(context) {
-      this.$emit("resizable-change", 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 }))
+      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)
+      this.$emit('page-change', values)
     },
     copy(text) {
-      const oInput = document.createElement("input")
+      const oInput = document.createElement('input')
       oInput.value = text
       document.body.appendChild(oInput)
       oInput.select() // 选择对象;
-      document.execCommand("Copy") // 执行浏览器复制命令
+      document.execCommand('Copy') // 执行浏览器复制命令
       this.$message({
-        message: "复制成功",
-        type: "success"
+        message: '复制成功',
+        type: 'success'
       })
       oInput.remove()
     },
@@ -174,57 +297,67 @@ export default {
       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
-            }
-          )
+          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)
+      this.$emit('setColumn', columns)
     },
     // 多层级表头
     changeTableGroupFields(cols) {
-      const recursiveData = (cols)=> {
+      const recursiveData = cols => {
         const arr = []
-        cols.forEach((item,index)=> {
-          if(item.data && item.data.length > 0) {
+        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) {
+            if (index < cols.length - 1) {
               arr.push({
                 title: '',
                 width: 5,
                 headerClassName: 'group-split',
-                className: 'group-split',
+                className: 'group-split'
               })
             }
-          }else {
+          } 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),
+                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
+                slots: this.gridOptions.customColumnConfig.slots.includes(
+                  item.key
+                )
+                  ? { default: item.key }
+                  : undefined
               })
             }
           }
         })
         return arr
       }
-      this.$emit("setGroupColumn", recursiveData(cols))
+      this.$emit('setGroupColumn', recursiveData(cols))
     },
 
     // 关闭自定义表头弹框
@@ -235,6 +368,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/index.js

@@ -18,7 +18,7 @@ const components = {
 // 设置当前 z-index 起始值
 domZindex.setCurrent(99999)
 
-const install = (Vue) => {
+const install = Vue => {
   Object.keys(components).forEach(name => {
     Vue.component(name, components[name])
   })
@@ -28,4 +28,4 @@ const install = (Vue) => {
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue)
 }
-export default {install }
+export default { install }

package/src/plugin/vxeTable.js

@@ -1,4 +1,4 @@
-import Vue from "vue"
+import Vue from 'vue'
 // import XEUtils from "xe-utils"
 import {
   // 全局实例对象
@@ -41,7 +41,7 @@ import {
   // VxeModal,
   // VxeList,
   // VxePulldown
-} from "vxe-table"
+} from 'vxe-table'
 
 // 旧版本使用 setup({}) 或者 config({})
 // VXETable.config({
@@ -297,4 +297,4 @@ Vue.use(VxeSelect)
 // Vue.use(VxeModal)
 // Vue.use(VxeList)
 // Vue.use(VxePulldown)
-import "./vxeTable.scss"
+import './vxeTable.scss'

package/src/style/custom-column.scss

@@ -49,10 +49,10 @@
   cursor: move;
 }
 
-.fixedClass{
-  width:100%;
+.fixedClass {
+  width: 100%;
   height: 2px;
-  border-bottom:2px dashed #ccc;
+  border-bottom: 2px dashed #ccc;
   padding-top: 10px;
 }
 
@@ -100,10 +100,10 @@
   }
 }
 
-.draggable_title{
+.draggable_title {
   font-size: 12px;
   font-weight: 700;
-  margin:20px 0 ;
+  margin: 20px 0;
 }
 
 .left_box_body {
@@ -134,9 +134,8 @@
     overflow-y: auto;
     .checkbox_title {
       margin: 20px 0;
-
     }
-    div:nth-child(1) .checkbox_title  {
+    div:nth-child(1) .checkbox_title {
       margin-top: 8px;
     }
   }
@@ -191,4 +190,3 @@
 .cell-1 {
   flex: 1;
 }
-

package/src/style/index.scss

@@ -1,6 +1,13 @@
-@import './pager.scss';
-@import './page-search.scss';
-@import './fold-search.scss';
-@import './table.scss';
-@import './form.scss';
-@import './custom-column.scss'
+// @import './pager.scss';
+// @import './page-search.scss';
+// @import './fold-search.scss';
+// @import './table.scss';
+// @import './form.scss';
+// @import './custom-column.scss';
+
+@use './pager.scss';
+@use './page-search.scss';
+@use './fold-search.scss';
+@use './table.scss';
+@use './form.scss';
+@use './custom-column.scss';

package/src/utils/index.js

@@ -1,8 +1,8 @@
-export const deepClone = (target) => {
+export const deepClone = target => {
   // 定义一个变量
   let result
   // 如果当前需要深拷贝的是一个对象的话
-  if (typeof target === "object") {
+  if (typeof target === 'object') {
     // 如果是一个数组的话
     if (Array.isArray(target)) {
       result = [] // 将result赋值为一个数组，并且执行遍历
@@ -29,4 +29,4 @@ export const deepClone = (target) => {
   }
   // 返回最终结果
   return result
-}
+}

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

package/babel.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ],
-  plugins: [
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator"
-  ]
-}

package/jsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

package/postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    // 可以根据您的需求添加具体的 PostCSS 插件
-    // 例如 autoprefixer 用于添加浏览器前缀
-    'autoprefixer': {}
-  }
-}

package/vue.config.js

@@ -1,7 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-
-module.exports = defineConfig({
-  transpileDependencies: true,
-  outputDir: 'lib',
-  productionSourceMap: false
-})