n20-common-lib 3.0.37 → 3.0.38

package/src/components/TablePro/index.vue

@@ -7,6 +7,7 @@
         <div class="skeleton-cell" v-for="col in skeletonCols" :key="'col-' + col"></div>
       </div>
     </div>
+    <!-- 表格 -->
     <vxe-table
       ref="vxeTable"
       :key="colsKey"
@@ -48,6 +49,7 @@
         iconMatch: 'n20-icon-xiala-moren'
       }"
       :merge-cells="mergeCells"
+      :row-class-name="getRowClassName"
       v-bind="Object.assign({ size: size }, $attrs, sizeBind)"
       v-on="$listeners"
       @sort-change="(val) => customSortMethod(val)"
@@ -58,6 +60,7 @@
       @cell-mouseleave="handleCellMouseLeave"
       @scroll="handleTableScroll"
       @toggle-tree-expand="syncExpandState"
+      @column-resizable-change="resizableChange"
     >
       <template v-for="(item, i) in _columns">
         <slot v-if="item.slotName" :name="item.slotName" :column="item"></slot>
@@ -201,45 +204,45 @@
               ></i>
             </div>
           </template>
-          <template #default="{ row }">
-            <slot :name="`cell_${item.prop}`" :row="row">{{ row[item.prop] }}</slot>
+          <!-- 处理旧格式 formatter 和 render -->
+          <template v-if="item._oldFormatter || item._oldRender" #default="{ row, column }">
+            <!-- 旧的 render 函数 -->
+            <template v-if="item._oldRender && item.render">
+              <vxe-tooltip :content="row[column.property]">
+                <template #default>
+                  <div v-html="item.render($createElement, row)"></div>
+                </template>
+              </vxe-tooltip>
+            </template>
+            <!-- 旧的 formatter 函数：formatter: ({ row }) => html -->
+            <template v-else-if="item._oldFormatter && item._originalFormatter">
+              <div v-html="item._originalFormatter({ row })"></div>
+            </template>
+            <!-- 纯对象字段 -->
+            <template
+              v-else-if="row[column.property] && typeof row[column.property] === 'object' && row[column.property].name"
+            >
+              {{ row[column.property].name }}
+            </template>
+            <slot v-else :name="`cell_${item.prop}`" :row="row">{{ row[column.property] }}</slot>
           </template>
         </vxe-column>
       </template>
-      <vxe-column fixed="right" header-class-name="fixed-column__static" :min-width="clacStaticColumnWidth">
-        <template #header>
-          <div class="flex-box flex-v flex-c">
-            <i
-              v-if="showColumn"
-              v-title="$lc('设置显示列')"
-              class="v3-icon-system-solution pointer"
-              :class="hoverIconKey === 'showColumn' ? 'color-primary' : ''"
-              @mouseenter="hoverIconKey = 'showColumn'"
-              @mouseleave="hoverIconKey = null"
-              @click="$emit('visible-column')"
-            ></i>
-            <tableSetSize v-if="showSetsize" :size="sizeC" v-bind="$attrs" @update:size="sizeUp" @resize="sizeSet" />
-            <i
-              v-if="$attrs.treeConfig || $attrs['tree-config']"
-              v-title="!isExpand ? $lc('展开分组') : $lc('折叠分组')"
-              class="pointer"
-              :class="[
-                isExpand ? 'v3-icon-group-collapse' : 'v3-icon-group-expand',
-                hoverIconKey === 'toggleExpand' ? 'color-primary' : ''
-              ]"
-              @mouseenter="hoverIconKey = 'toggleExpand'"
-              @mouseleave="hoverIconKey = null"
-              @click="toggleExpand"
-            ></i>
-          </div>
-        </template>
-      </vxe-column>
       <template #empty>
         <slot name="empty">
           <empty type="noData" :content="$lc('暂无数据')" :height="200" :width="200" />
         </slot>
       </template>
     </vxe-table>
+    <!-- 操作列 -->
+    <tableOperate
+      :size="sizeC"
+      v-bind="$attrs"
+      @update:size="sizeUp"
+      @resize="sizeSet"
+      @toggle-expand="toggleExpand"
+      @visible-column="dialogVisible = !dialogVisible"
+    />
     <!-- 操作列的悬浮按钮组 -->
     <transition name="hover-btns-fade">
       <div
@@ -288,12 +291,29 @@
         </div>
       </div>
     </transition>
+
+    <table-show-column
+      ref="showColumn"
+      :dialog-visible.sync="dialogVisible"
+      :check-columns="checkColumns"
+      :columns="columns"
+      :label-key="labelKey"
+      :auto-save="autoSave"
+      :page-id="pageId"
+      :isExport="isExport"
+      :isFilter="isFilter"
+      :width="width"
+      :hasPX="hasPX"
+      @setColumns="setColumns"
+    />
   </div>
 </template>
 
 <script>
 import empty from '../Empty'
-import tableSetSize from '../TableSetSize/index.vue'
+import tableOperate from '../TableOperate/index.vue'
+import tableShowColumn from '../ShowColumn/index.vue'
+
 import { $lc } from '../../utils/i18n/index.js'
 
 const renderer = {
@@ -313,7 +333,8 @@ const renderer = {
 export default {
   name: 'TablePro',
   components: {
-    tableSetSize,
+    tableOperate,
+    tableShowColumn,
     empty,
     renderer
   },
@@ -426,13 +447,47 @@ export default {
     },
     // 悬浮按钮组隐藏延迟（毫秒）
     hoverBtnsHideDelay: {
-      type: Number,
-      default: 150
+      type: Number
     },
     // 悬浮按钮组最大显示数量，超过则收起到"更多"下拉菜单
     hoverBtnsMaxShow: {
       type: Number,
       default: 4
+    },
+    // 列头标签键
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    // 是否自动保存列设置
+    autoSave: {
+      type: Boolean,
+      default: true
+    },
+    pageId: {
+      type: String,
+      default: undefined
+    },
+    isExport: {
+      type: Boolean,
+      default: false
+    },
+    isFilter: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: '1000px'
+    },
+    hasPX: {
+      type: Boolean,
+      default: false
+    },
+    // 导出函数
+    exportFn: {
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -454,16 +509,18 @@ export default {
       isDropdownVisible: false, // "更多"下拉菜单是否展开
       hoverHeaderProp: null, // 当前悬停表头列的 prop
       hoverIconKey: null, // 当前悬停的静态列头图标标识
-      isExpand: false
+      isExpand: false,
+      dialogVisible: false, // 显示列设置对话框
+      checkColumns: [] // 显示列设置对话框中已选择的列
     }
   },
   computed: {
     _columns: {
       get() {
         if (this.isAutoWidth) {
-          return this.calcColumnWidth(this.columns)
+          return this.calcColumnWidth(this.checkColumns)
         } else {
-          return this.columns
+          return this.checkColumns
         }
       },
       set(val) {
@@ -502,9 +559,9 @@ export default {
     },
     // 计算列宽
     clacStaticColumnWidth() {
-      const hasExpand = this.$attrs.expandConfig || this.$attrs['expand-config']
+      const hasExpand = this.$attrs.treeConfig || this.$attrs['tree-config']
       const activeCount = [this.showColumn, this.showSetsize, hasExpand].filter(Boolean).length
-      return activeCount === 3 ? 100 : activeCount === 2 ? 80 : 50
+      return activeCount === 3 ? 112 : 76
     }
   },
   watch: {
@@ -524,12 +581,36 @@ export default {
   },
   activated() {
     this.$refs.vxeTable.loadData(this.data)
+    if (this.pageId) {
+      this.getColumns()
+    }
   },
   beforeDestroy() {
     // 清理定时器
     this.clearHoverTimers()
   },
+  mounted() {
+    if (this.pageId) {
+      this.getColumns()
+    }
+  },
   methods: {
+    resizableChange({ resizeWidth, columnIndex }) {
+      this.checkColumns[columnIndex].width = resizeWidth
+
+      this.$refs.showColumn.saveColumns(this.checkColumns)
+    },
+    setColumns(list) {
+      if (this.isExport) {
+        this.exportFn(list)
+      } else {
+        this.checkColumns = list
+      }
+    },
+    async getColumns() {
+      const columns = await this.$refs.showColumn.getColumns(this.pageId)
+      this.checkColumns = columns?.length ? columns : this.columns
+    },
     /**
      * 一键展开/折叠表格树形行（仅处理第一层级数据行）
      * 通过 vxe-table 的 setTreeExpand API 批量设置顶层行的展开状态，
@@ -722,7 +803,7 @@ export default {
       // 输出全部条件
       const obj = {}
       // 复制默认筛选条件为空
-      this.columns.forEach((item) => {
+      this.checkColumns.forEach((item) => {
         if (item.filters) {
           this.$set(obj, item.prop, undefined)
         }
@@ -1000,69 +1081,64 @@ export default {
       }
     },
     // ========== 列宽计算相关方法 ==========
+    getRowClassName({ row }) {
+      const checkedRows = this.$refs.vxeTable?.getCheckboxRecords(false) || []
+      const checkedSet = new Set(checkedRows)
+      return checkedSet.has(row) ? 'n20-table-pro__row-checked' : ''
+    },
     calcColumnWidth(columns) {
-      columns = columns.map((item) => {
-        return {
-          ...item,
-          _width_: 0
-        }
-      })
+      // 常量配置
+      const CHAR_WIDTH = 20 // 每个字符的平均宽度（像素）
+      const PADDING = 20 // 左右padding
+      const CHECKBOX_WIDTH = 50 // 复选框列宽度
+      const OPERATE_WIDTH = 180 // 操作列宽度
+      const HOVER_BTNS_WIDTH = 356 // 悬浮按钮组宽度
+      const MIN_LABEL_LENGTH = 10 // 最小标签长度
 
-      // 优先使用表格容器的宽度，如果没有则使用app容器宽度
+      // 获取容器宽度
       let wrapperEl = this.$refs.vxeTable?.$el
-      if (!wrapperEl) {
-        wrapperEl = document.querySelector('div#app')
-      }
-      if (!wrapperEl) {
-        return columns
-      }
-      const { width: windowWidth } = wrapperEl.getBoundingClientRect()
-      // 定义每个字符的平均宽度（像素）
-      const CHAR_WIDTH = 20 // 根据实际字体大小调整
-      const PADDING = 20 // 左右padding
+      if (!wrapperEl) wrapperEl = document.querySelector('div#app')
+      if (!wrapperEl) return columns
 
-      function calc(columns) {
-        // 计算所有列的基础宽度总和
-        let totalBaseWidth = 0
-        columns.forEach((column) => {
-          if (column.static && column.label === $lc('操作') && !column.width && !column.minWidth) {
-            column.width = 180
-          }
-          if (column.type === 'checkbox') {
-            column.width = 50
-          }
+      const { width: containerWidth } = wrapperEl.getBoundingClientRect()
 
-          // 如果没有设置宽度，根据字符数计算最小宽度
-          if (!column.width && !column.minWidth && !column['min-width']) {
-            const textLength = (column.label && column.label.length) || 10
-            column.minWidth = Math.ceil(textLength * CHAR_WIDTH + PADDING)
-          }
+      // 解析宽度值（支持数字、"100"、"100px"格式）
+      const parseWidth = (value) => (typeof value === 'number' ? value : parseInt(value, 10) || 0)
 
-          // 计算基础宽度：有width的用width，没有的用minWidth
-          const widthValue = column.width || column.minWidth || column['min-width'] || 0
-          // 处理不同格式的宽度：数字、"100"、"100px"
-          let baseWidth = 0
-          if (typeof widthValue === 'number') {
-            baseWidth = widthValue
-          } else if (typeof widthValue === 'string') {
-            // 提取字符串中的数字部分
-            baseWidth = parseInt(widthValue) || 0
-          }
-          column['_baseWidth_'] = baseWidth
-          totalBaseWidth += baseWidth
-        })
-        // 如果所有列的基础宽度总和 >= 容器宽度，不做处理
-        if (totalBaseWidth >= windowWidth) {
-          return columns
-        } else {
-          const seqColumns = columns.filter((item) => item.type !== 'seq' && item.type !== 'checkbox')
-          if (seqColumns.length > 0) {
-            seqColumns[0].width = ''
-          }
-          return columns
+      // 计算列宽并统计总宽度
+      let totalWidth = 0
+      const calcColumns = columns.map((column) => {
+        // 操作列固定宽度
+        if (column.static && column.label === $lc('操作') && !column.width && !column.minWidth) {
+          column.width = OPERATE_WIDTH
+        }
+        // 复选框列固定宽度
+        if (column.type === 'checkbox') {
+          column.width = CHECKBOX_WIDTH
+        }
+        // 未设置宽度时，根据标签字符数计算最小宽度
+        if (!column.width && !column.minWidth && !column['min-width']) {
+          const textLength = column.label?.length || MIN_LABEL_LENGTH
+          column.minWidth = Math.ceil(textLength * CHAR_WIDTH + PADDING)
+        }
+        // 计算基础宽度
+        const widthValue = column.width || column.minWidth || column['min-width'] || 0
+        const baseWidth = parseWidth(widthValue)
+        column._baseWidth_ = baseWidth
+        totalWidth += baseWidth
+        return column
+      })
+
+      // 悬浮按钮：给最后一列预留按钮组空间
+      if (this.btnList?.length && calcColumns.length > 0) {
+        const lastColumn = calcColumns[calcColumns.length - 1]
+        const baseWidth = lastColumn._baseWidth_ || 0
+        if (baseWidth <= HOVER_BTNS_WIDTH) {
+          lastColumn.width = HOVER_BTNS_WIDTH + baseWidth
         }
+        lastColumn.align = 'left'
       }
-      return calc(columns)
+      return calcColumns
     }
   }
 }

package/src/components/TableSetSize/index.vue

@@ -2,8 +2,8 @@
   <el-dropdown @command="setSize">
     <i
       v-title="$lc('行高')"
-      class="v3-icon-line-height pointer"
-      :class="hoverIconKey === 'height' ? 'color-primary' : ''"
+      class="v3-icon-line-height pointer color-white"
+      :class="hoverIconKey === 'height' ? 'color-white' : ''"
       @mouseenter="hoverIconKey = 'height'"
       @mouseleave="hoverIconKey = null"
     ></i>
@@ -26,7 +26,7 @@ export default {
       type: Object,
       default: () => ({
         border: 'inner',
-        size: 'mini',
+        size: 'small',
         stripe: false
       })
     },

package/src/components/TableSetSize/index1.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="el-table-set-size flex-box">
+    <div class="el-table-set-size-item m-r-0">
+      <i
+        v-title="$lc('设置显示列')"
+        class="v3-icon-system-solution pointer color-white"
+        :class="hoverIconKey === 'showColumn' ? 'color-white' : ''"
+        @mouseenter="hoverIconKey = 'showColumn'"
+        @mouseleave="hoverIconKey = null"
+        @click="$emit('visible-column')"
+      ></i>
+    </div>
+    <div class="el-table-set-size-item m-r-0">
+      <tableSetSize
+        :size="sizeC"
+        v-bind="$attrs"
+        @update:size="(row) => $emit('update:size', row)"
+        @resize="(row) => $emit('resize', row)"
+      />
+    </div>
+    <div class="el-table-set-size-item m-r-0">
+      <i
+        v-title="!isExpand ? $lc('展开分组') : $lc('折叠分组')"
+        class="pointer"
+        :class="[
+          isExpand ? 'v3-icon-group-collapse' : 'v3-icon-group-expand',
+          hoverIconKey === 'toggleExpand' ? 'color-white' : ''
+        ]"
+        @mouseenter="hoverIconKey = 'toggleExpand'"
+        @mouseleave="hoverIconKey = null"
+        @click="$emit('toggle-expand')"
+      ></i>
+    </div>
+    <!--  v-if="$attrs.treeConfig || $attrs['tree-config']"
+    <div class="el-table-set-size-item m-r-0" :class="sizeC === 'mini' && 'active'" @click="setSize('mini')">
+      <img class="icon-mini" src="./mini.png" />
+      <div class="text-mini">{{ _lang === 'zh' ? '小行距' : 'mini' }}</div>
+    </div>
+    <div class="el-table-set-size-item" :class="sizeC === 'small' && 'active'" @click="setSize('small')">
+      <img class="icon-small" src="./small.png" />
+      <div class="text-small">{{ _lang === 'zh' ? '中行距' : 'small' }}</div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import tableSetSize from './index.vue'
+export default {
+  name: 'TableSetSize',
+  components: { tableSetSize },
+  props: {
+    size: {
+      type: String,
+      default: 'small'
+    },
+    mini: {
+      type: Object,
+      default: () => ({
+        border: true,
+        size: 'mini',
+        stripe: true
+      })
+    },
+    small: {
+      type: Object,
+      default: () => ({
+        border: true,
+        size: 'small',
+        stripe: false
+      })
+    }
+  },
+  data() {
+    let _this = this
+    return {
+      isExpand: false,
+      hoverIconKey: null, // 当前悬停的静态列头图标标识
+      sizeC: localStorage.getItem('table-size') || _this.size
+    }
+  }
+}
+</script>

package/src/components/Tabs/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="n20-tabs__wrapper">
+    <el-tabs :value="init" class="n20-tabs__tab" type="card" :before-leave="beforeFn" @tab-click="clickFn">
+      <el-tab-pane
+        v-for="item of data"
+        :key="item.name"
+        :tab-info="item"
+        :name="item.name"
+        :icon="item.icon"
+        :disabled="item.disabled"
+      >
+        <template slot="label">
+          <span v-if="item.icon" :class="item.icon"></span>
+          <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
+          <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
+          <span v-else>{{ item.name }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="n20-tabs__right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../utils/i18n/index'
+export default {
+  name: 'Tabs',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: 'mini'
+    }
+  },
+  computed: {
+    stop() {
+      return !this.$listeners['update:init']
+    }
+  },
+  methods: {
+    clickFn(C) {
+      let item = C.$attrs['tab-info']
+      if (this.$listeners['update:init']) {
+        !item.disabled && this.$emit('update:init', item.name)
+      }
+      if (this.$listeners['click']) {
+        this.$emit('click', item)
+      }
+    },
+    beforeFn(name) {
+      return name === this.init ? true : !this.stop
+    }
+  }
+}
+</script>

package/src/index.js

@@ -42,7 +42,7 @@ import InputSearch from './components/InputSearch/index.vue'
 import NavMenu from './components/NavMenu/index.vue'
 import PageHeader from './components/PageHeader/index.vue'
 import Page from './components/PageLayout/page.vue'
-import Pagination from './components/Pagination/index.vue'
+import Pagination from './components/Pagination/main.vue'
 import SecondaryTab from './components/SecondaryTab/index.vue'
 import SelectLazy from './components/SelectLazy/index.vue'
 import SelectTreeLazy from './components/SelectTree/SelectTreeLazy.vue'
@@ -75,6 +75,7 @@ import HandlingAdvice from './components/HandlingAdvice/index.vue'
 import Preview from './components/Preview/index.vue'
 import SelectTreePro from './components/SelectTree/pro.vue'
 import Tree from './components/Tree/index.vue'
+import Tabs from './components/Tabs/index.vue'
 
 // 新版日期选择框
 import BusiDatePicker from './components/DateSelect/busiDate.vue'
@@ -207,6 +208,7 @@ const components = [
   ShowColumn,
   Page,
   Task,
+  Tabs,
   IconGroupButton,
   Anchor,
   AnchorItem,
@@ -383,6 +385,7 @@ export {
   TertiaryTab,
   TimePicker,
   Tree,
+  Tabs,
   Upload,
   UploadMsg,
   WorkCard,