n20-common-lib 2.22.77 → 2.22.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.77",
+  "version": "2.22.78",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/Table/index.vue

@@ -174,7 +174,10 @@ export default {
   provide() {
     let bigData = this.bigData
     return {
-      bigData
+      bigData,
+      n20TableContext: {
+        getData: () => this.data || []
+      }
     }
   },
   watch: {

package/src/components/TableOperateColumn/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-table-column v-if="!bigData" v-bind="$attrs">
+  <el-table-column v-if="!bigData" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </el-table-column>
-  <ux-table-column v-else :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
+  <ux-table-column v-else :field="$attrs.prop" :title="$attrs.label" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </ux-table-column>
 </template>
@@ -10,17 +10,143 @@
 <script>
 // import { $lc } from '../../utils/i18n/index'
 import OperateBtns from './OperateBtns.vue'
+
+const DEFAULT_OPERATE_COLUMN_MIN_WIDTH = 80
+
 export default {
   name: 'TableOperateColumn',
   components: {
     OperateBtns
   },
-  inject: { bigData: { default: false } },
+  inject: {
+    bigData: { default: false },
+    n20TableContext: { default: null }
+  },
   props: {
     btnList: {
       type: Array,
       default: () => []
     }
+  },
+  computed: {
+    resolvedColumnAttrs() {
+      const attrs = { ...this.$attrs }
+      const hasWidth =
+        Object.prototype.hasOwnProperty.call(attrs, 'width') &&
+        attrs.width !== null &&
+        attrs.width !== undefined &&
+        attrs.width !== ''
+      if (hasWidth) {
+        return attrs
+      }
+
+      const minWidthKey = ['minWidth', 'min-width'].find((key) => {
+        const value = attrs[key]
+        return Object.prototype.hasOwnProperty.call(attrs, key) && value !== null && value !== undefined && value !== ''
+      })
+      const calculatedWidth = this.calcOperateColumnWidth()
+      if (minWidthKey) {
+        const minWidth = this.parsePixelWidth(attrs[minWidthKey])
+        if (minWidth !== null) {
+          attrs[minWidthKey] = Math.max(calculatedWidth, minWidth)
+        }
+      } else {
+        // 避免 Element/UX Table 将大量剩余空间分配给操作列。
+        attrs.width = calculatedWidth
+      }
+      return attrs
+    }
+  },
+  methods: {
+    measureOperateText(text) {
+      const normalizedText = text === undefined || text === null ? '' : String(text)
+      if (!normalizedText) return 0
+
+      const fallbackWidth = Array.from(normalizedText).reduce(
+        (width, char) => width + (/[⺀-鿿]/.test(char) ? 14 : 8),
+        0
+      )
+      if (typeof document === 'undefined') return fallbackWidth
+
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      if (!context) return fallbackWidth
+
+      context.font = '14px PingFang SC, Microsoft YaHei, sans-serif'
+      return Math.max(context.measureText(normalizedText).width, fallbackWidth)
+    },
+    parsePixelWidth(value) {
+      if (typeof value === 'number') {
+        return Number.isFinite(value) && value >= 0 ? value : null
+      }
+      if (typeof value !== 'string') return null
+
+      const normalizedValue = value.trim()
+      if (!/^\d+(\.\d+)?(px)?$/.test(normalizedValue)) return null
+      const parsedValue = Number.parseFloat(normalizedValue)
+      return Number.isFinite(parsedValue) ? parsedValue : null
+    },
+    calcOperateColumnWidth() {
+      const CELL_HORIZONTAL_PADDING = this.bigData ? 20 : 16
+      // OperateBtns 使用行内元素，除 6px margin 外还会产生约 4px 的模板空白。
+      const BUTTON_GAP = 10
+      const CHILDREN_ARROW_WIDTH = 20
+      const MORE_BUTTON_WIDTH = 16
+      const buttons = (this.btnList || []).filter((button) => button && button.isHas !== false)
+      const getButtonWidth = (button) => {
+        let width = this.measureOperateText(button.label)
+        if (button.children && button.children.length > 0) {
+          width += CHILDREN_ARROW_WIDTH
+        }
+        return width
+      }
+      const buttonWidths = buttons.map(getButtonWidth)
+
+      if (buttonWidths.length === 0) {
+        return DEFAULT_OPERATE_COLUMN_MIN_WIDTH
+      }
+
+      const calcLayoutWidth = (inlineWidths, hasMoreButton = false) => {
+        const itemCount = inlineWidths.length + (hasMoreButton ? 1 : 0)
+        const contentWidth = inlineWidths.reduce((total, width) => total + width, 0)
+        const moreButtonWidth = hasMoreButton ? MORE_BUTTON_WIDTH : 0
+        const gapWidth = Math.max(itemCount - 1, 0) * BUTTON_GAP
+        return contentWidth + moreButtonWidth + gapWidth + CELL_HORIZONTAL_PADDING
+      }
+      const rows = this.n20TableContext?.getData?.() || []
+      if (rows.length > 0) {
+        const maxRowWidth = rows.reduce((maxWidth, row) => {
+          const visibleButtonWidths = buttons
+            .filter((button) => this.hasButton(button.isHas, row))
+            .map(getButtonWidth)
+          const rowWidth = visibleButtonWidths.length > 3
+            ? calcLayoutWidth(visibleButtonWidths.slice(0, 2), true)
+            : calcLayoutWidth(visibleButtonWidths)
+          return Math.max(maxWidth, rowWidth)
+        }, 0)
+        return Math.max(DEFAULT_OPERATE_COLUMN_MIN_WIDTH, Math.ceil(maxRowWidth))
+      }
+
+      const sortedButtonWidths = [...buttonWidths].sort((a, b) => b - a)
+      const directButtonsWidth = calcLayoutWidth(sortedButtonWidths.slice(0, 3))
+      const collapsedButtonsWidth =
+        sortedButtonWidths.length > 3 ? calcLayoutWidth(sortedButtonWidths.slice(0, 2), true) : 0
+
+      return Math.max(
+        DEFAULT_OPERATE_COLUMN_MIN_WIDTH,
+        Math.ceil(directButtonsWidth),
+        Math.ceil(collapsedButtonsWidth)
+      )
+    },
+    hasButton(isHas, row) {
+      if (isHas === undefined || isHas === null) return true
+      if (typeof isHas === 'boolean') return isHas
+      if (typeof isHas === 'function') return isHas(row)
+      if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return typeof this.$has === 'function' ? this.$has(isHas) : true
+      }
+      return false
+    }
   }
 }
 </script>