create-jnrs-template-vue 1.2.1 → 1.2.2

package/jnrs-template-vue/src/components/common/JnTable.vue

@@ -1,133 +0,0 @@
-<!--
- @Author : TanRui
- @WeChat : Tan578853789
- @File   : JnTable.vue
- @Date   : 2025/12/18
- @Desc.  : 表格组件
- -->
-
-<script setup lang="ts" generic="T extends Record<string, any>">
-import { computed } from 'vue'
-import type { UseReactivityTableHeightOptions } from '@/composables/tools/useReactivityTableHeight'
-import { useReactivityTableHeight } from '@/composables/tools/useReactivityTableHeight'
-
-type PaginationModelValue = {
-  currentPage: number
-  pageSize: number
-}
-
-interface Props {
-  /**
-   * 表数据
-   */
-  data?: T[]
-  /**
-   * 行数据的 Key，在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
-   * 支持多层访问：user.info.id
-   */
-  rowKey?: string
-  /**
-   * 总是显示横向滚动条
-   */
-  scrollbar?: boolean
-  /**
-   * 表格高度，默认为 100%
-   * @default 100%
-   */
-  height?: string | number
-  /**
-   * 表格高度是否自动计算，默认为 false
-   * @default false
-   */
-  autoHeight?: boolean
-  /**
-   * 表格高度自动计算配置项
-   */
-  autoHeightOptions?: UseReactivityTableHeightOptions
-  /**
-   * 是否显示序号列
-   */
-  showIndexColumn?: boolean
-  /**
-   * 是否显示选择列
-   */
-  showSelectionColumn?: boolean
-  /**
-   * 当前页码和每页大小（用于序号计算）
-   */
-  pagination?: PaginationModelValue
-}
-
-const {
-  rowKey = 'id',
-  scrollbar = true,
-  height = null,
-  autoHeight = true,
-  autoHeightOptions = {},
-  showIndexColumn = true,
-  showSelectionColumn = true,
-  pagination = { currentPage: 0, pageSize: 0 }
-} = defineProps<Props>()
-
-const { maxHeight: reactiveMaxHeight } = useReactivityTableHeight(autoHeightOptions ?? {})
-
-// 表格最终高度
-const finalHeight = computed(() => {
-  if (height != null) {
-    return height
-  }
-  if (autoHeight) {
-    return reactiveMaxHeight.value
-  }
-  return '100%'
-})
-
-// 索引列计算
-const getIndex = (index: number) => {
-  return index + (pagination.currentPage - 1) * pagination.pageSize + 1
-}
-</script>
-
-<template>
-  <el-table
-    class="jn_table"
-    header-cell-class-name="jn_table_header"
-    ref="jnTableRef"
-    :row-key="rowKey"
-    :data="data"
-    border
-    :scrollbar-always-on="scrollbar"
-    :height="finalHeight"
-  >
-    <el-table-column v-if="showIndexColumn" label="序号" type="index" align="center" width="60">
-      <template #default="{ $index }">
-        <span>{{ getIndex($index) }}</span>
-      </template>
-    </el-table-column>
-    <slot></slot>
-    <el-table-column
-      v-if="showSelectionColumn"
-      type="selection"
-      width="60"
-      align="center"
-      fixed="right"
-      :reserve-selection="true"
-    />
-  </el-table>
-</template>
-
-<style lang="scss" scoped>
-.jn_table {
-  width: 100%;
-
-  :deep(.jn_table_header) {
-    color: var(--jnrs-font-primary) !important;
-    background: var(--jnrs-background-head) !important;
-
-    .cell {
-      padding: 0 8px;
-      line-height: 1.2em;
-    }
-  }
-}
-</style>

package/jnrs-template-vue/src/composables/tools/useReactivityTableHeight.ts

@@ -1,63 +0,0 @@
-/**
- * @Author : TanRui
- * @WeChat : Tan578853789
- * @File   : useReactivityTableHeight.ts
- * @Date   : 2025/12/10
- * @Desc.  : 响应式根据视口动态计算表格高度
- */
-
-import { ref, onActivated, onDeactivated } from 'vue'
-import { debounce } from '@jnrs/shared/lodash'
-
-// 总底部高度
-const PADDING_HEIGHT = 40
-
-// 总边距
-const FOOT_HEIGHT = 40
-
-export interface UseReactivityTableHeightOptions {
-  // 表格类名，默认值 el-table
-  className?: string
-  // 默认高度，默认值 300
-  bottomGap?: number
-}
-
-/**
- * @param  className 表格类名，默认值 el-table，如果页面存在多个表格，则必须分别传入自定义类名
- * @param  bottomGap 底部间隔，默认值 77
- * @return maxHeight 表格高度
- */
-export function useReactivityTableHeight({
-  className = 'el-table',
-  bottomGap = PADDING_HEIGHT + FOOT_HEIGHT
-}: UseReactivityTableHeightOptions = {}) {
-  const maxHeight = ref(500)
-
-  const calculateTableHeight = debounce(
-    () => {
-      const element = document.querySelector(`.${className}`)
-      if (element) {
-        const rect = element.getBoundingClientRect()
-        const innerHeight = window.innerHeight
-        const gap = rect.top + bottomGap
-        const mh = innerHeight - gap
-        maxHeight.value = mh > 100 ? mh : 100
-      }
-    },
-    300,
-    { leading: false }
-  )
-
-  // 初始化高度计算
-  onActivated(() => {
-    calculateTableHeight()
-    window.addEventListener('resize', calculateTableHeight)
-  })
-
-  // 清理事件监听器
-  onDeactivated(() => {
-    window.removeEventListener('resize', calculateTableHeight)
-  })
-
-  return { maxHeight }
-}