n20-common-lib 3.3.17 → 3.3.19

package/package.json

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

package/src/components/CascaderArea/index.vue

@@ -34,6 +34,10 @@ export default {
       type: Boolean,
       default: false
     },
+    selectAnyLevel: {
+      type: Boolean,
+      default: false
+    },
     isStreet: {
       type: Boolean,
       default: false
@@ -56,20 +60,29 @@ export default {
       areaTree: []
     }
   },
+  watch: {
+    selectAnyLevel() {
+      // 开关运行中切换时复用对应缓存，否则按新模式重新请求地区树。
+      if (window[this.cacheKey]) {
+        this.areaTree = window[this.cacheKey]
+      } else {
+        this.getAreaTree()
+      }
+    }
+  },
   computed: {
-    isChinaUrban() {
-      return this.isUrban && this.countryId === 'CHN'
-    },
     propsAs() {
       let _prop = {
         value: 'regionNo',
         label: 'regionName',
         children: 'children',
         expandTrigger: 'hover',
-        // 保留二级城市的子节点后，允许独立选择二级城市和三级地区。
-        checkStrictly: this.isChinaUrban || !this.isUrban
+        checkStrictly: !this.isUrban
       }
-      return Object.assign(_prop, this.props)
+      const props = Object.assign(_prop, this.props)
+      // 任意级模式必须允许非叶子节点被选中，避免调用方覆盖后出现不可选层级。
+      if (this.selectAnyLevel) props.checkStrictly = true
+      return props
     },
     areaKey() {
       return this.countryId === 'CHN' ? '_china_area_tree_' : `_${this.countryId}_area_tree_`
@@ -81,8 +94,9 @@ export default {
       return this.countryId === 'CHN' ? '_china_street_tree_' : `_${this.countryId}_street_tree_`
     },
     cacheKey() {
-      // 按当前模式检查缓存，避免普通地区缓存存在时误用尚未加载的城市缓存。
-      return this.isUrban ? this.urbanKey : this.isStreet ? this.streetKey : this.areaKey
+      const modeKey = this.isUrban ? this.urbanKey : this.isStreet ? this.streetKey : this.areaKey
+      // 两种模式的 disabled 标记及树深度不同，不能共享已处理的选项树。
+      return this.selectAnyLevel ? `${modeKey}_select_any_level_` : modeKey
     }
   },
   mounted() {
@@ -94,25 +108,28 @@ export default {
   },
   methods: {
     getAreaTree() {
+      const cacheKey = this.cacheKey
+      const isUrban = this.isUrban
+      const isStreet = this.isStreet
+      const selectAnyLevel = this.selectAnyLevel
       this.$axios
         .get(
           `/bems/1.0/area?t=${Math.random()}`,
-          { countryId: this.countryId, isEnable: '1', resultType: 2, queryLeave4: this.isStreet },
+          // 任意级模式需要请求下级地区；默认模式保持原先的请求范围。
+          { countryId: this.countryId, isEnable: '1', resultType: 2, queryLeave4: isStreet || selectAnyLevel },
           { loading: false, noMsg: true }
         )
         .then(({ data }) => {
           if (data) {
             let result = JSON.parse(JSON.stringify(data))
-            if (this.isUrban) {
-              window[this.urbanKey] = isUrbanFn(result, this.isChinaUrban)
-              this.areaTree = window[this.urbanKey]
-            } else if (this.isStreet) {
-              window[this.streetKey] = treeFn(result)
-              this.areaTree = window[this.streetKey]
-            } else {
-              window[this.areaKey] = treeFn(result)
-              this.areaTree = window[this.areaKey]
-            }
+            // 旧城市模式仍在二级截断；任意级模式统一保留接口返回的完整树。
+            window[cacheKey] = selectAnyLevel
+              ? treeFn(result, true)
+              : isUrban
+              ? isUrbanFn(result)
+              : treeFn(result)
+            // 若请求期间切换了模式，不用旧请求覆盖当前显示。
+            if (cacheKey === this.cacheKey) this.areaTree = window[cacheKey]
           }
         })
     },
@@ -122,36 +139,28 @@ export default {
   }
 }
 
-const treeFn = (data) => {
+const treeFn = (data, selectAnyLevel = false) => {
   return data?.map((res) => {
-    if (!['3', '4', '5'].includes(res.regionLevel) && res.hasChildren) {
+    // 默认仍只开放原先可选的层级；开关开启时保留接口已有的禁用状态。
+    if (!selectAnyLevel && !['3', '4', '5'].includes(res.regionLevel) && res.hasChildren) {
       res.disabled = true
     }
 
     if (!res.children?.length) {
       res.children = null
     } else {
-      res.children = treeFn(res.children)
+      res.children = treeFn(res.children, selectAnyLevel)
     }
     return res
   })
 }
 
-const isUrbanFn = (data, isChinaUrban = false) => {
+const isUrbanFn = (data) => {
   return data?.map((res) => {
-    const regionLevel = String(res.regionLevel)
-    // 直辖市只保留一级节点，直接返回接口原有的两位 regionNo，不伪造下级编码。
-    const isMunicipality =
-      isChinaUrban && regionLevel === '1' && ['11', '12', '31', '50'].includes(String(res.regionNo))
-    if (isChinaUrban && regionLevel === '1' && !isMunicipality) {
-      // 普通省份仅用于展开；checkStrictly 模式下禁用父节点不影响子节点选择。
-      res.disabled = true
-    }
-    if (isMunicipality || (!isChinaUrban && regionLevel === '2') || !res.children?.length) {
+    if (res.regionLevel === '2' || !res.children?.length) {
       res.children = null
     } else {
-      // 保留省代管县级市等三级节点，解除原先在二级统一截断的限制。
-      res.children = isUrbanFn(res.children, isChinaUrban)
+      res.children = isUrbanFn(res.children)
     }
     return res
   })

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>