@jzt-packages/components 1.0.0

package/src/JztQueryTable/index.vue

@@ -0,0 +1,1445 @@
+<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->
+
+<template>
+  <div class="jzt-query-page">
+    <!-- 查询表单 -->
+    <JztSearchForm
+      ref="searchFormRef"
+      v-show="isShowSearch"
+      :search="_search"
+      @setFirstValue="setFirstValue"
+      :reset="_reset"
+      :customForm="customForm"
+      :allow-collapsed="allowCollapsed"
+      :collapsed="collapsed"
+      :query-items="searchColumns"
+      :search-param="searchParam"
+      :show-param="initParam"
+      :search-init-param="searchInitParam"
+      :search-col="searchCol"
+      :show-query-btn="showQueryBtn"
+      :show-reset-btn="showResetBtn"
+      :suffix="btnSuffix"
+      :is-card="searchCard"
+      :valid-query="validQuery"
+    >
+      <template #rightBtn>
+        <div v-if="!!slots.rightBtn" class="mr5 flx-left-center" style="height: 100%">
+          <slot name="rightBtn">
+            <!-- <el-button v-if="showQueryBtn" type="primary" @click="_search">搜索</el-button>
+          <el-button v-if="showQueryBtn" plain @click="reset">重置</el-button> -->
+          </slot>
+        </div>
+      </template>
+      <template #formTopSlot>
+        <slot name="formTopSlot"></slot>
+        <el-tabs
+          v-if="tabIsTop && tabsList && tabsList.length"
+          v-model="tabActiveValue"
+          class="table-tabs mb10"
+          style="margin-top: -8px"
+          :class="tabType ? tabsClass?.[tabType] : 'spd-line-card'"
+          :type="tabType"
+          @tab-change="handleTabChange"
+        >
+          <el-tab-pane
+            v-for="tab in tabsList"
+            :label="tab[tabsProps?.label || 'label']"
+            :name="tab[tabsProps?.value || 'value']"
+          ></el-tab-pane>
+        </el-tabs>
+      </template>
+    </JztSearchForm>
+    <slot>
+      <!-- 表格主体 -->
+      <div
+        v-loading="displayLoading"
+        :class="['table-main', isFullscreen ? 'fullscreen-page' : '', tableCard ? 'spd-card' : 'noCardGap']"
+      >
+        <slot name="tableTops" />
+        <slot name="queryTableMain">
+          <el-tabs
+            v-if="!tabIsTop && tabsList && tabsList.length"
+            v-model="tabActiveValue"
+            class="table-tabs"
+            :class="tabType ? tabsClass?.[tabType] : 'spd-line-card'"
+            :type="tabType"
+            @tab-change="handleTabChange"
+          >
+            <el-tab-pane
+              v-for="tab in tabsList"
+              :label="tab[tabsProps?.label || 'label']"
+              :name="tab[tabsProps?.value || 'value']"
+            >
+              <template #label>
+                <span class="custom-tabs-label flx-left-center">
+                  <component v-if="tab?.leftRender" :is="tab?.leftRender" />
+                  <span>{{ tab[tabsProps?.label || 'label'] }}</span>
+                  <span v-if="!isEmpty(tab?.tabCount)">
+                    ({{ tabsProps?.isFold && Number(tab?.tabCount) > 99 ? '99+' : tab.tabCount }})
+                  </span>
+                  <component v-if="tab?.rightRender" :is="tab?.rightRender" />
+                </span>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+          <!-- <slot name="btnTop" /> -->
+          <!-- 表格头部 操作按钮 -->
+          <div class="table-header flx-between-top" v-if="(topList && topList.length) || hasSlotContent || toolButton">
+            <slot name="headerTitle" />
+            <div class="header-button-lf">
+              <div class="flx-left-center flx-wrap p2">
+                <slot
+                  name="toolBtnLeft"
+                  :selected-list="selectedList"
+                  :selected-list-ids="selectedListIds"
+                  :is-selected="isSelected"
+                />
+                <JztButtonList
+                  v-if="topList && topList.length"
+                  :buttonList="topList"
+                  @onClick="handleButtonClick"
+                ></JztButtonList>
+                <slot
+                  name="toolBtnRight"
+                  :selected-list="selectedList"
+                  :selected-list-ids="selectedListIds"
+                  :is-selected="isSelected"
+                />
+              </div>
+            </div>
+            <div v-if="toolButton" class="header-button-ri">
+              <slot
+                name="settingBtnLeft"
+                :selected-list="selectedList"
+                :selected-list-ids="selectedListIds"
+                :is-selected="isSelected"
+              />
+              <slot
+                name="toolButton"
+                :selected-list="selectedList"
+                :selected-list-ids="selectedListIds"
+                :is-selected="isSelected"
+              >
+                <slot
+                  name="toolLeft"
+                  :selected-list="selectedList"
+                  :selected-list-ids="selectedListIds"
+                  :is-selected="isSelected"
+                />
+                <el-button
+                  v-if="showToolButton('refresh') && requestApi"
+                  :icon="Refresh"
+                  :icon-size="16"
+                  title="刷新"
+                  class="tool_btn grey-button"
+                  plain
+                  @click="getTableList"
+                />
+                <el-button
+                  v-if="showToolButton('fullScreen')"
+                  :title="isFullscreen ? '退出全屏' : '全屏'"
+                  class="tool_btn grey-button"
+                  plain
+                  @click="isFullscreen = !isFullscreen"
+                >
+                  <i :class="['iconfont', isFullscreen ? 'icon-shiyingchuangkou' : 'icon-manping']"></i>
+                </el-button>
+                <el-button
+                  v-if="showToolButton('setting') && tableColumns.length"
+                  title="列配置"
+                  :icon="Setting"
+                  class="tool_btn grey-button"
+                  plain
+                  @click.native.stop="changeDialog"
+                />
+                <!-- <ColumnsSetting
+            v-if="showToolButton('setting') && tableColumns.length"
+            v-model:columns="tableColumns"
+            :column-types="columnTypes"
+            v-model:loading="loading1"
+            @refreshSetting="getSettingConfig"
+          >
+            <template #reference>
+              <el-button title="列设置" :icon="Setting" class="tool_btn" />
+            </template>
+          </ColumnsSetting> -->
+                <!-- <el-button
+            v-if="showToolButton('search') && searchColumns?.length"
+            title="显示/隐藏查询"
+            class="tool_btn"
+            :icon="Search"
+            @click="isShowSearch = !isShowSearch"
+          /> -->
+              </slot>
+            </div>
+          </div>
+          <!-- 表格上方插槽 -->
+          <slot
+            name="tableHeader"
+            :selected-list="selectedList"
+            :selected-list-ids="selectedListIds"
+            :is-selected="isSelected"
+          />
+          <!-- <div style="padding: 0 10px; height: 100%"> -->
+          <!-- 表格主体 -->
+
+          <el-table
+            v-if="isShow"
+            ref="tableRef"
+            v-bind="$attrs"
+            :id="uuid"
+            :row-class-name="
+              ({ row, rowIndex }) => {
+                // 处理 rowClassName 为函数的情况
+                if (typeof rowClassName === 'function') {
+                  return rowClassName({ row, rowIndex })
+                }
+                const isSelected = rowKey && radio && radio === row[rowKey]
+                // 处理 rowClassName 为字符串的情况
+                return isSelected ? rowClassName || 'highlight-current-row' : ''
+              }
+            "
+            :data="processTableData"
+            :default-expand-all="isExpandAll"
+            :border="border"
+            :row-key="rowKey"
+            :class="[
+              addTableNoEmpty && (!processTableData || !processTableData.length) ? 'noDataEmpty' : '',
+              addTableNoEmpty ? 'tableNoHeight' : ''
+            ]"
+            @cell-click="handleCellClick"
+            @selection-change="tableSelectionChange"
+            @header-dragend="headerDragend"
+            @row-click="handleRowClick"
+          >
+            <!-- 默认插槽 -->
+            <slot />
+
+            <template
+              v-for="item in typeof columnConfig?.layout === 'string'
+                ? columnConfig?.layout?.split?.(',')
+                : columnConfig?.layout"
+              :key="item"
+            >
+              <el-table-column
+                v-if="columnTypes.includes(item?.trim?.() as TypeProps)"
+                v-bind="{ type: item, ...(columnConfig?.[`${item}Props`] || {}) }"
+                :width="columnConfig?.[`${item}Props`]?.width ?? (['expand', 'sort'].includes(item) ? 100 : 80)"
+                :align="columnConfig?.[`${item}Props`]?.align ?? 'center'"
+                :reserve-selection="
+                  columnConfig?.[`${item}Props`].reserveSelection ?? columnConfig?.[`${item}Props`]?.type == 'selection'
+                "
+              >
+                <template #default="scope">
+                  <template v-if="item.includes('expand')">
+                    <component
+                      :is="columnConfig?.expandProps?.render"
+                      v-bind="scope"
+                      v-if="columnConfig?.expandProps?.render"
+                    />
+                    <slot v-else :name="columnConfig?.expandProps?.type" v-bind="scope" />
+                  </template>
+                  <el-radio v-if="item.includes('radio')" v-model="radio" :label="scope.row[rowKey]">
+                    <i></i>
+                  </el-radio>
+                  <el-tag v-if="item.includes('sort')" class="move">
+                    <el-icon><DCaret /></el-icon>
+                  </el-tag>
+                </template>
+              </el-table-column>
+            </template>
+            <template v-for="(item, index) in selectColumns" :key="item">
+              <el-table-column
+                v-if="item.type && columnTypes.includes(item.type)"
+                v-bind="item"
+                :align="item.align ?? 'center'"
+                :reserve-selection="item.reserveSelection ?? item.type == 'selection'"
+                :selectable="item.type === 'selection' && item?.selectable ? item?.selectable : () => true"
+              >
+                <template #default="scope">
+                  <!-- <div style="width: 100%; height: 100%"> -->
+                  <template v-if="item.type == 'expand'">
+                    <component :is="item.render" v-bind="scope" v-if="item.render" />
+                    <slot v-else :name="item.type" v-bind="scope" />
+                  </template>
+                  <el-radio
+                    v-if="item.type == 'radio'"
+                    v-model="radio"
+                    :name="'radio' + index"
+                    :label="scope.row[rowKey]"
+                    @change="setRadioItem(scope.row[rowKey], scope.row, item)"
+                  >
+                    <i></i>
+                  </el-radio>
+                  <el-tag v-if="item.type == 'sort'" type="primary" class="move" size="small">
+                    <i class="iconfont icon-tuozhuai fontS-20"></i>
+                  </el-tag>
+                  <!-- </div> -->
+                </template>
+              </el-table-column>
+            </template>
+            <template v-for="item in tableColumns" :key="item">
+              <!-- other -->
+              <TableColumn v-if="item.prop !== 'operation' && item.isShow && !item.hidden" :column="item">
+                <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </TableColumn>
+              <!-- 自定义表格操作列 -->
+            </template>
+            <!-- 自定义表格操作列 -->
+            <template v-for="(item, index) in operationColumns">
+              <el-table-column v-if="item.isShow !== false" v-bind="item" :align="item.align ?? 'left'">
+                <template #default="{ row }">
+                  <template v-for="(btnItem, index) in item.btnLList" :key="index">
+                    <span v-if="hasPermissionFn(btnItem, row)">
+                      <component v-if="btnItem.render" :is="btnItem.render" v-bind="row" style="margin: 0 12px" />
+                      <span v-else-if="btnItem.slotName">
+                        <slot :name="btnItem.slotName" v-bind="row" />
+                      </span>
+                      <el-button
+                        v-else
+                        @click="btnItem.fun && tableOperationFn(btnItem, row)"
+                        :disabled="btnItem.disabledFn && btnItem.disabledFn(row)"
+                        :link="btnItem.link === false ? false : true"
+                        :type="btnItem.type || 'primary'"
+                        :icon="btnItem.icon || ''"
+                        v-bind="(btnItem as any).$attr"
+                        style="margin: 0 6px"
+                      >
+                        <span>{{ btnItem.text }}</span>
+                      </el-button>
+                    </span>
+                  </template>
+                </template>
+              </el-table-column>
+            </template>
+            <!-- 插入表格最后一行之后的插槽 -->
+            <template #append>
+              <slot name="append" />
+            </template>
+            <!-- 无数据 -->
+            <template #empty>
+              <div class="table-empty">
+                <slot name="empty">
+                  <JztEmpty :emptyText="emptyText" />
+                </slot>
+                <slot name="empty-desc"></slot>
+              </div>
+            </template>
+          </el-table>
+          <!--  新增按钮放在这个tableBottom插槽，class使用jzt-table-add-btn 就可以 -->
+          <slot name="tableBottom" />
+          <!-- 分页组件 -->
+          <slot name="pagination">
+            <Pagination
+              v-if="pagination"
+              :pageable="pageable"
+              :show-check-total="showCheckTotal"
+              :checkTotal="selectedListIds.length || 0"
+              :handle-size-change="handleSizeChange"
+              :handle-current-change="handleCurrentChange"
+            />
+          </slot>
+        </slot>
+        <slot name="pageFooter" :loading="displayLoading" :pageable="pageable" />
+      </div>
+    </slot>
+  </div>
+  <teleport to="body">
+    <ColumnsSetting
+      ref="columnsSettingRef"
+      v-if="showToolButton('setting') && tableColumns.length && gridParams1?.url"
+      v-model:columns="tableColumns"
+      :column-types="columnTypes"
+      :grid-params="gridParams1"
+      v-model:loading="loading1"
+      @refresh-column-table="refreshColumnTable"
+      @changeColumns="changeColumns"
+    ></ColumnsSetting>
+  </teleport>
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { Refresh, Setting } from '@element-plus/icons-vue'
+import { isEmpty, removeEmpty, hasPermission } from '@jzt-spd/utils'
+import { GUIDNoneValue } from '@jzt-spd/utils/consts'
+import { ElTable, ElTableColumn } from 'element-plus'
+import * as _ from 'lodash-es'
+import { cloneDeep, debounce } from 'lodash-es'
+import Sortable from 'sortablejs'
+import { computed, onBeforeUnmount, onMounted, provide, ref, unref, useAttrs, useSlots, watch } from 'vue'
+// import { hasPermission } from '../hooks/useAuthButtons'
+// import { localGet, isEmpty } from '@jzt-spd/utils'
+import { useFormSetByUserType } from '../hooks/useFormByUserType'
+import { useTableEvents } from '../hooks/useTableEvents'
+import JztButtonList from '../JztButtonList/index.vue'
+import JztEmpty from '../JztEmpty/index.vue'
+import { BreakPoint } from '../JztGrid/interface'
+import JztSearchForm from '../JztSearchForm/index.vue'
+import { generateUUID, handleProp } from '../utils'
+import ColumnsSetting from './components/ColumnsSetting.vue'
+import Pagination from './components/Pagination.vue'
+import TableColumn from './components/TableColumn.vue'
+import { useOperation, useTable } from './hooks/useQueryTable'
+import { useSelection } from './hooks/useSelection'
+import {
+  ColumnConfigProps,
+  ColumnProps,
+  GridParams,
+  TableConfigProps,
+  tabsListProps,
+  TabsProps,
+  TopButtonProps,
+  TypeProps
+} from './interface'
+// const tabActive = ref(0)
+export interface ProTableProps {
+  tableLoading?: boolean // 表格加载中
+  tabActiveName?: string | number // tabs绑定值的key
+  tabActive?: string | number // tabs绑定值
+  tabsList?: tabsListProps[] //tablist list数据
+  tabsProps?: TabsProps //  tablist 配置项
+  tableConfig: TableConfigProps // 列配置项  ==> 必传
+  columnConfig?: ColumnConfigProps // 列多选，显示序号，单选等配置项 非必传
+  // columns: ColumnProps[]; // 列配置项  ==> 必传
+  data?: any[] // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+  requestApi?: (params: any) => Promise<any> // 请求表格数据的 api ==> 非必传
+  requestAuto?: boolean // 是否自动执行请求 api ==> 非必传（默认为true）
+  requestError?: (params: any) => void // 表格 api 请求错误监听 ==> 非必传
+  dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+  title?: string // 表格标题 ==> 非必传
+  pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
+  initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
+  border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
+  toolButton?: ('refresh' | 'setting' | 'search' | 'fullScreen')[] | boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  searchCol?: number | Record<BreakPoint, number> // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 3, lg: 4, xl: 5,xxl:6 }
+  searchFilter?: (data: any) => Record<string, any> // 查询时处理数据的函数 可对查询前的数据进行编辑后再查询 ==> 非必传
+  allowCollapsed?: boolean // 查询表单是否折叠
+  collapsed?: boolean // 查询表单默认是否折叠
+  tableLoaded?: (data: any) => void // 表格加载完成的回调函数 ==> 非必传
+  showQueryBtn?: boolean // 是否展示查询重构按钮
+  showResetBtn?: boolean // 是否展示重置按钮
+  customForm?: boolean // 是否是默认表单(可设置labelWidth、search.width)，并且不会随着屏幕变化
+  btnSuffix?: boolean // 按钮是否总是在最后（不跟随）
+  gridParams?: GridParams //  列配置 gridId  url  toolButton 开启列配置必须传递
+  tabType?: '' | 'card' | 'border-card' // el-tabs 的type
+  tableCard?: boolean // 是需要card样式，某下弹框不需要的话 设置false
+  searchCard?: boolean // 是需要card样式，某下弹框不需要的话 设置false
+  addTableNoEmpty?: boolean // 添加表格时，是否需要置空图
+  showCheckTotal?: boolean // 是否显示表格合计
+  validQuery?: boolean // 是否校验查询条件
+  tabIsTop?: boolean // tab是否在顶部
+  rowClassName?: Function | string // 行样式ClassName
+  emptyText?: string // 置空图文案
+  searchClear?: boolean // 是否显示查询清空选中
+  minHeight?: string | boolean // 表格最小高度
+  tabChangeSearch?: boolean // tab change 自动请求
+}
+
+// 自定义 el-tabs 样式 类名
+const tabsClass = {
+  card: 'spd-card-tabs',
+  'border-card': 'spd-border-card-tabs'
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  tableLoading: false, // 表格加载中
+  tabsProps: () => ({
+    label: 'label',
+    value: 'value',
+    isFold: false // 超过99 是否显示99+
+  }),
+  columns: () => [],
+  requestAuto: true,
+  pagination: true,
+  initParam: () => ({}),
+  border: true,
+  toolButton: true,
+  rowKey: 'id',
+  searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }),
+  allowCollapsed: true,
+  collapsed: true,
+  showQueryBtn: true,
+  showResetBtn: true,
+  customForm: false,
+  btnSuffix: false,
+  tabType: '',
+  tableCard: true,
+  searchCard: true,
+  addTableNoEmpty: false,
+  validQuery: false,
+  tabIsTop: false,
+  emptyText: '暂无内容',
+  searchClear: true,
+  minHeight: '170px',
+  tabChangeSearch: false
+})
+const { useButtonClickFn } = useTableEvents()
+const slots = useSlots()
+const hasSlotContent = computed(() => {
+  return !!(slots.toolBtnLeft || slots.toolBtnRight)
+})
+// const tabActiveValue = computed(() => {
+//   if (!isEmpty(props.tabActive)) {
+//     return props.tabActive
+//   } else if (!isEmpty(props.tabActiveName)) {
+//     return props.initParam[props.tabActiveName]
+//   }
+// })
+const gridParams1 = ref<GridParams>({
+  gridId: props.gridParams?.gridId || '',
+  url: props.gridParams?.url || ''
+})
+const tabActiveValue = computed({
+  get() {
+    if (!isEmpty(props.tabActive)) {
+      changeTabsSetting(props.tabActive)
+      return props.tabActive
+    } else if (props.tabActiveName) {
+      changeTabsSetting(props.initParam[props.tabActiveName])
+      return props.initParam[props.tabActiveName]
+    }
+    // 修复: 当两个条件都不满足时，返回空字符串避免 undefined
+    return ''
+  },
+  set(val: string) {
+    if (!isEmpty(props.tabActiveName) && props.tabActiveName) {
+      const params = {
+        ...props.initParam,
+        [props.tabActiveName]: val
+      }
+      emit('update:initParam', params)
+      changeInitParams(params)
+    }
+    if (!isEmpty(props.tabActive)) {
+      emit('update:tabActive', val)
+    }
+    if (!showToolButton('setting')) {
+      // 有列配置的时候，需要先请求数据 在获取表格数据，因为这里涉及到pageSize，所以需要等待
+      getTableList()
+    }
+  }
+})
+// const isShowSetting = computed(() => {
+//   return showToolButton('setting') ? 500 : 0
+// })
+
+// 表格全屏
+const isFullscreen = ref(false)
+const searchFormRef = ref()
+// table 实例
+const tableRef = ref<InstanceType<typeof ElTable>>()
+
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+
+// column 列类型
+const columnTypes: TypeProps[] = ['selection', 'radio', 'index', 'expand', 'sort']
+
+// 是否显示搜索模块
+const isShowSearch = ref(true)
+
+// 控制 ToolButton 显示
+const showToolButton = (key: 'refresh' | 'setting' | 'search' | 'fullScreen') => {
+  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton
+}
+
+// //  判断单选 多选类型
+// const hasCheckType = (key: 'radio' | 'selection' | 'expand') => {
+//   if (!key) return false
+//   return selectColumns.value.some(item => item.type === key)
+// }
+
+// 是否需要防抖
+const debounceTime = computed(() => (showToolButton('setting') && props.gridParams?.url ? 500 : 0))
+
+const changeTabsSetting = debounce((tabActive?: string | number) => {
+  changeTable(props.tableConfig.columns)
+  if (!props?.tabsList || !props?.tabsList?.length) return
+  // 所有 tab 的 gridId 一致（或都没有）时，不切换 gridId，共享同一份列配置
+  if (isTabColl.value) return
+  const index = props.tabsList.findIndex(item => item.value === tabActive)
+  if (index !== -1) {
+    // 如果有则取 tabsList，无则不取（适用于所有的tab字段不一致，每个 tab 单独配置）
+    gridParams1.value.gridId = props.tabsList[index]?.gridId || gridParams1.value.gridId || ''
+  }
+}, debounceTime.value)
+
+// 单选值
+const radio = ref('')
+// 单选值- 选中row
+const radioItem = ref()
+
+// 设置单选值
+const setRadioItem = (key: string, row: any, item?: ColumnProps) => {
+  tableRef.value?.setCurrentRow(row)
+  radio.value = key
+  radioItem.value = row
+  emit('radioChange', key, row)
+}
+// 设置默认选中行
+const setExpandRow = debounce(() => {
+  if (!processTableData.value || !processTableData.value.length) {
+    expandedRows.value = []
+    return
+  }
+  if (isExpandAll.value) {
+    const rowKey = props.rowKey
+    expandedRows.value = processTableData.value.map(item => {
+      return item[rowKey]
+    })
+  } else {
+    expandedRows.value = []
+  }
+}, 200)
+
+// 当前展开的行（如果你想支持只展开一个）
+const expandedRows = ref<any[]>([])
+// 行点击事件
+// const handleRowClick = (row, column, event) => {
+//   const rowKey = props.rowKey
+//   if (column.type === 'radio') {
+//     setRadioItem(row[rowKey], row)
+//   } else if (column.type === 'selection') {
+//     // 最后一个参数必须是 false
+//     tableRef.value!.toggleRowSelection(row, undefined, false)
+//   } else if (column.type === 'expand') {
+//     const isExpanded = expandedRows.value.includes(row[rowKey])
+//     if (isExpanded) {
+//       // 折叠
+//       tableRef.value!.toggleRowExpansion(row, false)
+//       expandedRows.value = expandedRows.value.filter(item => item !== row[rowKey])
+//     } else {
+//       // 展开
+//       tableRef.value!.toggleRowExpansion(row, true)
+//       expandedRows.value.push(row[rowKey])
+//     }
+//   }
+// }
+// 单元格点击事件
+const handleCellClick = (row, column, cell) => {
+  emit('cellClick', row, column)
+  const rowKey = props.rowKey
+  if (column.type === 'radio') {
+    setRadioItem(row[rowKey], row)
+  } else if (column.type === 'selection') {
+    // 最后一个参数必须是 false
+    tableRef.value!.toggleRowSelection(row, undefined, false)
+  } else if (column.type === 'expand') {
+    const isExpanded = expandedRows.value.includes(row[rowKey])
+    if (isExpanded) {
+      // 折叠
+      tableRef.value!.toggleRowExpansion(row, false)
+      expandedRows.value = expandedRows.value.filter(item => item !== row[rowKey])
+    } else {
+      // 展开
+      tableRef.value!.toggleRowExpansion(row, true)
+      expandedRows.value.push(row[rowKey])
+    }
+  }
+}
+// 行点击事件
+const handleRowClick = (row: any, column: any) => {
+  const rowKey = props.rowKey
+  setRadioItem(row[rowKey], row)
+  emit('rowClick', row, column)
+}
+
+// 效验查询条件必填
+const validateSearchForm = async () => {
+  if (!props.validQuery || !searchFormRef.value) {
+    // 需要初始化数据
+    return true
+  } else {
+    const validate = await searchFormRef.value.validateForm()
+    return validate
+  }
+}
+// 所有 tab 的 gridId 是否一致（不存在或全部一致），一致时共享同一份列配置，切换 tab 不改变 gridId
+// true: isTabColl.value说明所有tab 用同一个列配置
+const isTabColl = computed(() => {
+  // 收集所有存在的 gridId（过滤掉 undefined / null / 空值）
+  const gridIds = props.tabsList?.map(item => item.gridId).filter(val => !isEmpty(val))
+  // 没有 gridId 字段，或所有 gridId 完全一致，都返回 true
+  if (gridIds?.length === 0) return true
+  return gridIds?.every(val => val === gridIds[0])
+})
+// tab切换
+const handleTabChange = (val: string | number) => {
+  // isTabColl.value说明所有tab 用同一个列配置
+  if (isTabColl.value && props.tabChangeSearch) {
+    searchAndClear()
+  }
+  emit('tabChange', val)
+}
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected, headerDragend } = useSelection(props.rowKey)
+const loading = ref<boolean>(false)
+const loading1 = ref<boolean>(false)
+// 合并后的展示用 loading：开启即时、关闭延迟 200ms。
+// 用于衔接「列配置 loading1」与「数据 loading」两个先后周期，避免出现 loading→结束→loading 的断层。
+const displayLoading = ref(false)
+let loadingOffTimer: ReturnType<typeof setTimeout> | null = null
+watch(
+  () => loading.value || loading1.value || props.tableLoading,
+  val => {
+    if (val) {
+      // 任一 loading 开启：立即显示，并清掉待关闭的定时器
+      if (loadingOffTimer) {
+        clearTimeout(loadingOffTimer)
+        loadingOffTimer = null
+      }
+      displayLoading.value = true
+    } else {
+      // 全部关闭：延迟 200ms 再隐藏，若期间又有 loading 开启则会被上面的 clearTimeout 取消
+      loadingOffTimer = setTimeout(() => {
+        displayLoading.value = false
+        loadingOffTimer = null
+      }, 200)
+    }
+  },
+  { immediate: true }
+)
+// 组件卸载时清理待执行的关闭定时器，避免卸载后仍触发 ref 赋值
+onBeforeUnmount(() => {
+  if (loadingOffTimer) {
+    clearTimeout(loadingOffTimer)
+    loadingOffTimer = null
+  }
+})
+
+// 表格 tableSelectionChange多选事件
+const tableSelectionChange = e => {
+  selectionChange(e)
+  emit('selectionChange', {
+    isSelected: isSelected.value,
+    selectedList: selectedList.value,
+    selectedListIds: selectedListIds.value
+  })
+}
+const formatterForm = form => {
+  let searchForm = cloneDeep(form)
+  searchColumns.value.forEach(item => {
+    // isSetEmptyData：空值默认值&& 未选择或输入数据 -> 设置默认值进行查询
+    if (item?.search && item.search?.isSetEmptyData && isEmpty(searchForm[item.prop])) {
+      searchForm[item.prop] = item.search.emptyNullValue || GUIDNoneValue
+    }
+    // 如果是数组 切设置了切割字段 -> 切割数组到开始与结束字段 并删除原字段
+    if (item.search && item.search?.startField && item.search?.endField) {
+      const { startField, endField } = item.search
+      const timeList = searchForm[item.prop] || []
+      if (item?.search?.el !== 'JztNumericalRange' && item?.search?.el !== 'JztDateSelect') {
+        // 只有时间才需要删除字段
+        searchForm[startField] = timeList[0] ?? ''
+        searchForm[endField] = timeList[1] ?? ''
+      }
+      delete searchForm[item.prop]
+    }
+  })
+  const endFrom = removeEmpty(searchForm)
+  return endFrom
+}
+
+const { isExpandAll, isShow, toggleExpandAll } = useOperation()
+// 表格操作 Hooks
+const {
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+  changeInitParams
+} = useTable(
+  validateSearchForm,
+  props.requestApi,
+  props.initParam,
+  props.pagination,
+  props.dataCallback,
+  props.requestError,
+  props.searchFilter,
+  props.tableLoaded,
+  loading,
+  formatterForm
+)
+// 清空选中数据列表
+const clearSelection = () => tableRef.value?.clearSelection()
+
+// 是否可以发起请求（等待所有 isSetFirstValue 的异步 enum 加载完成）
+const isReadyToRequest = ref(true)
+
+// 监听 waitFirstValueCount 改变，为了等待所有isSetFirstValue=true的获取完成后再执行请求，需要携带参数
+const setFirstValue = count => {
+  if (count == waitFirstValueCount.value) {
+    isReadyToRequest.value = true
+    props.requestAuto && _search()
+  }
+}
+
+// 初始化表格数据 && 拖拽排序
+onMounted(async () => {
+  dragSort()
+  // 未设置过 isSetFirstValue=true，直接请求
+  // 判断列设置是因为，必须要判断pageSize
+  if (!waitFirstValueCount.value && !showToolButton('setting')) {
+    props.requestAuto && _search()
+  }
+})
+
+// 处理表格数据
+// let processTableData = computed(() => {
+//   if (!props.data) return tableData.value
+//   if (!props.pagination) return props.data
+//   return props.data.slice(
+//     (pageable.value.pageIndex - 1) * pageable.value.pageSize,
+//     pageable.value.pageSize * pageable.value.pageIndex
+//   )
+// })
+// 处理表格数据
+const processTableData = computed({
+  get() {
+    // radio.value = ''
+    // radioItem.value = {}
+    if (!props.data) return tableData.value
+    if (!props.pagination) return props.data
+    return props.data.slice(
+      (pageable.value.pageIndex - 1) * pageable.value.pageSize,
+      pageable.value.pageSize * pageable.value.pageIndex
+    )
+  },
+  set(val) {
+    if (!Array.isArray(val)) return
+    tableData.value = val
+  }
+})
+// 监听表格数据，处理默认展开行的数据
+watch(
+  () => processTableData.value,
+  list => {
+    radio.value = ''
+    radioItem.value = {}
+    setExpandRow()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 监听页面 initParam 改化，重新获取表格数据
+// !删除该功能 在tab切换时已经处理掉接口了
+// watch(
+//   () => props.initParam[props.tabActiveName],
+//   () => {
+//     if (props.initParam && !isEmpty(props.tabActiveName)) {
+//       getTableList
+//     }
+//   },
+//   { deep: true }
+// )
+
+const tableColumns = ref<ColumnProps[]>([])
+
+// props.tableConfig.columns 动态更新后及时更新tableColumns
+// watch(
+//   () => props.tableConfig.columns,
+//   () => {
+//     tableColumns.value = props.tableConfig.columns.filter(item => item.prop && !item.type)
+//     tableColumns.value = props.tableConfig.columns.filter(item => item.prop && !item.type)
+//   }
+// )
+// 列表操作列 'index', 'selection', 'radio', 'expand', 'sort'
+const selectColumns = computed<ColumnProps[]>(() => {
+  const selectCol = props.tableConfig.columns.filter(item => {
+    if (item.type && columnTypes.includes(item.type)) {
+      return getColIsShow(item)
+    }
+  })
+  return selectCol || []
+})
+// 获取当前的列是否展示
+const getColIsShow = item => {
+  let isShow = item.isShow
+  const type = typeof item.isShow
+  if (type === 'object') {
+    isShow = item.isShow?.value
+  } else if (type === 'function') {
+    isShow = item.isShow?.()
+  }
+  return isShow !== false
+}
+const operationColumns = computed<ColumnProps[]>(() => {
+  const operationCol = props.tableConfig.columns.filter(item => {
+    if (item.prop === 'operation') {
+      return getColIsShow(item)
+    }
+  })
+  return operationCol || []
+})
+
+watch(
+  () => props.tableConfig.columns,
+  columns => {
+    changeTable(columns)
+  },
+  {
+    deep: true
+  }
+)
+watch(
+  () => gridParams1.value.gridId,
+  gridId => {
+    setTimeout(() => {
+      columnsSettingRef.value?.changeTableColumns(props.tableConfig.columns, gridParams1.value)
+    }, 0)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const changeTable = debounce((columns: ColumnProps[]) => {
+  const settingColumns = columnsSettingRef.value?.getCurrentTableColumns() || []
+  if (settingColumns && settingColumns.length) {
+    buildTableColumns(settingColumns)
+  } else {
+    flatColumnsFunc(columns)
+  }
+}, debounceTime.value)
+
+// 接收 queryItems 并设置为响应式
+const queryItems = computed(() => props.tableConfig.queryItems || [])
+//reactive<QueryItemsProps[]>(props.tableConfig.queryItems || []);
+
+// 接收 topList 并设置为响应式 TopButtonProps
+const topList = computed<TopButtonProps[]>(() => props.tableConfig.topList || [])
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>())
+const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
+  if (!enumValue) return
+
+  // 如果当前 enumMap 存在相同的值 return
+  if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return
+
+  // 当前 enum 为静态数据，则直接存储到 enumMap
+  if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+
+  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+  // enumMap.value.set(prop!, [])
+
+  // // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+  // const { data, result } = await enumValue()
+  // enumMap.value.set(prop!, data || result)
+}
+const originalColumn = ref<any[]>([])
+
+// 处理数据，递归处理
+const flatColumnsFunc = async (columns: ColumnProps[]) => {
+  tableColumns.value = await processColumns(columns)
+  originalColumn.value = _.cloneDeep(tableColumns.value)
+}
+// 初始化 处理数据
+const processColumns = async (columns: ColumnProps[]): Promise<ColumnProps[]> => {
+  const result: ColumnProps[] = []
+  for (const col of columns) {
+    if (col.prop && !col.type && col.isShow !== false && col.prop !== 'operation') {
+      const newCol: ColumnProps = {
+        ...col,
+        isShow: col.isShow ?? true,
+        isSetting: unref(col.isSetting) ?? true,
+        isFilterEnum: col.isFilterEnum ?? true
+      }
+      if (col._children?.length) {
+        newCol._children = await processColumns(col._children)
+      }
+      await setEnumMap(newCol)
+      result.push(newCol)
+    }
+  }
+  return result
+}
+const buildTableColumns = (asyncColumns: ColumnProps[]) => {
+  const result: ColumnProps[] = []
+  for (const col of asyncColumns) {
+    if (!col.prop || col.type || col.isShow === false || col.prop === 'operation' || col.hidden) {
+      continue
+    } else {
+      result.push({
+        ...col,
+        isShow: unref(col.isShow) ?? true,
+        isSetting: unref(col.isSetting) ?? true,
+        isFilterEnum: col.isFilterEnum ?? true,
+        // hidden: col.hidden === true,
+        isSetShow: col.hidden !== false
+      })
+    }
+  }
+
+  tableColumns.value = result
+  originalColumn.value = _.cloneDeep(result)
+}
+
+flatColumnsFunc(props.tableConfig.columns)
+// 注入 enumColumnMap
+provide('enumColumnMap', enumMap)
+// 获取类配置数据
+
+const changeColumns = (columns: ColumnProps[], pageSize: number, id: string) => {
+  // 1️⃣ 构建 tableColumns（一次性）
+  const nextTableColumns = cloneDeep(columns)
+
+  // 2️⃣ 构建 emit 所需数据
+  const allColumns: any[] = []
+  const checkColumns: any[] = []
+  for (const item of columns) {
+    if (!item.prop) continue
+    const colInfo = {
+      fieldName: item.prop,
+      titleName: item.label
+    }
+    allColumns.push(colInfo)
+    if (item.isShow && !item.hidden) {
+      checkColumns.push(colInfo)
+    }
+  }
+
+  // 3️⃣ 一次性更新响应式状态
+  tableColumns.value = nextTableColumns
+  pageable.value.pageSize = pageSize
+
+  // 4️⃣ emit（数据已稳定）
+  emit('getEndColumns', {
+    allColumns,
+    checkColumns,
+    pageSize,
+    id
+  })
+
+  // 5️⃣ 最后决定是否刷新
+  if (props.requestAuto && !waitFirstValueCount.value && isReadyToRequest.value) {
+    handleSizeChange(pageSize)
+  }
+}
+
+// const changeColumns = (columns: ColumnProps[], pageSize: number, id: string) => {
+//   // console.log('changeColumns', !waitFirstValueCount.value, !isAllMounted.value)
+//   tableColumns.value = cloneDeep(columns)
+//   if (props.requestAuto && !waitFirstValueCount.value && isAllMounted.value) {
+//     // 刷新数据
+//     handleSizeChange(pageSize)
+//   }
+//   const endCol = [] as any
+//   const allCol = [] as any
+
+//   columns.forEach(item => {
+//     allCol.push({
+//       fieldName: item.prop,
+//       titleName: item.label
+//     })
+//     if (item.isShow && !item.hidden) {
+//       endCol.push({
+//         fieldName: item.prop,
+//         titleName: item.label
+//       })
+//     }
+//   })
+//   emit('getEndColumns', {
+//     allColumns: allCol,
+//     checkColumns: endCol,
+//     pageSize: pageSize,
+//     id: id
+//   })
+//   pageable.value.pageSize = pageSize
+// }
+// TODO 暂时不走配置
+// const getSettingConfig = () => {
+//     getTableSetting(showToolButton('setting'), tableColumns.value, loading1).then(res => {
+//       tableColumns.value = res
+//       // tableColumns.value = tableColumns.value
+//     })
+// }
+// getSettingConfig()
+
+// 过滤需要搜索的配置项 && 排序
+const searchColumns = computed(() => {
+  return queryItems.value
+    ?.filter(item => item.search?.el || item.search?.render)
+    .sort((a, b) => a.search!.order! - b.search!.order!)
+})
+const waitFirstValueCount = ref<number>(0) // 需要等待的次数
+
+const initSearchParam = () => {
+  // 设置 搜索表单默认排序 && 搜索表单项的默认值
+  searchColumns.value?.forEach((column, index) => {
+    // column.search!.order = column.search?.order ?? index + 2
+    if (!column.search) return
+    column.search.order ??= index + 2
+    if (useFormSetByUserType(column?.isSetFirstValue, column.prop) && typeof column.enum === 'function') {
+      //  设置isSetFirstValue && enum设置的是函数时，需要等待函数返回数据，才能设置默认值
+      waitFirstValueCount.value++
+      isReadyToRequest.value = false
+    }
+    const key = column.search?.key ?? handleProp(column.prop!)
+    // 计算默认值（优先级明确）
+    let defaultValue
+    if (!isEmpty(column.search?.defaultValue)) {
+      defaultValue = column.search?.defaultValue
+    } else if (!isEmpty(props.initParam[column.prop])) {
+      defaultValue = props.initParam[column.prop]
+    }
+    // 设置默认值
+    if (!isEmpty(defaultValue)) {
+      searchParam.value[key] = defaultValue
+      searchInitParam.value[key] = defaultValue
+    }
+  })
+}
+initSearchParam()
+
+const columnsSettingRef = ref()
+const changeDialog = event => {
+  event.stopPropagation()
+  columnsSettingRef.value?.changeDialog(gridParams1.value)
+}
+// 外部手动保存列配置
+const saveColumns = async () => {
+  return new Promise(async (resolve, reject) => {
+    const { id, columns } = await columnsSettingRef.value?._saveColumn(false)
+    const endCol = [] as any
+    columns.forEach(item => {
+      if (item.isShow && !item.hidden) {
+        endCol.push({
+          fieldName: item.prop,
+          titleName: item.label
+        })
+      }
+    })
+    resolve({
+      columns: endCol,
+      id
+    })
+  })
+}
+
+// setTimeout(async () => {
+//   const id = await saveColumns()
+// }, 2000)
+// 定义 emit 事件
+const emit = defineEmits<{
+  search: [any]
+  reset: []
+  dragSort: [{ newIndex?: number; oldIndex?: number }]
+  radioChange: [any, any]
+  tabChange: [any]
+  selectionChange: [
+    {
+      isSelected: boolean
+      selectedList: any[]
+      selectedListIds: string[]
+    }
+  ]
+  'update:initParam': [any]
+  'update:tabActive': [any]
+  getEndColumns: [any]
+  refreshColumnTable: [any]
+  rowClick: any
+  cellClick: any
+}>()
+// 格式化后的搜索参数
+const formattedSearchForm = ref({})
+// 搜索清空
+const _search = () => {
+  search()
+  if (props.searchClear) {
+    clearSelection()
+    setRadioItem('', {})
+    selectionChange([])
+    tableRef.value?.setCurrentRow({})
+  }
+
+  // 处理格式化数据
+  const searchForm = formatterForm({
+    ...searchParam.value,
+    ...props.initParam
+  })
+  formattedSearchForm.value = searchForm
+  emit('search', searchForm)
+}
+// 重新搜索并清空表格的勾选
+const searchAndClear = () => {
+  clearSelection()
+  setRadioItem('', {})
+  selectionChange([])
+  _search()
+  tableRef.value?.setCurrentRow({})
+}
+
+const _reset = () => {
+  reset()
+  clearSelection()
+  emit('reset')
+}
+
+// 表格拖拽排序
+let sortableInstance: Sortable | null = null
+const dragSort = () => {
+  const tbody = document.querySelector(`#${uuid.value} tbody`) as HTMLElement
+  if (!tbody) return
+  sortableInstance = Sortable.create(tbody, {
+    handle: '.move',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      // 修复: 边界检查，防止 undefined 或越界
+      if (newIndex === undefined || oldIndex === undefined) return
+      if (newIndex < 0 || oldIndex < 0) return
+      if (newIndex >= processTableData.value.length || oldIndex >= processTableData.value.length) return
+
+      const [removedItem] = processTableData.value.splice(oldIndex, 1)
+      processTableData.value.splice(newIndex, 0, removedItem)
+      emit('dragSort', { newIndex, oldIndex })
+    }
+  })
+}
+
+// 组件卸载时清理 Sortable 实例
+onBeforeUnmount(() => {
+  if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
+})
+
+// // 是否显示表格操作按钮
+const hasPermissionFn = (btnItem: TopButtonProps, row: any) => {
+  // console.log(btnItem.text, btnItem.hideFun ? !btnItem.hideFun(row) : true, hasPermission(btnItem.hasPerm))
+
+  return (btnItem.hideFun ? !btnItem.hideFun(row) : true) && hasPermission(btnItem.hasPerm)
+}
+// 按钮点击
+const handleButtonClick = (fun: Function) => {
+  const searchForm = formatterForm({
+    ...searchParam.value,
+    ...props.initParam
+  })
+  fun &&
+    fun({
+      radio: radio.value,
+      radioItem: radioItem.value,
+      isSelected: isSelected.value,
+      selectedList: selectedList.value,
+      selectedListIds: selectedListIds.value,
+      searchParam: searchParam.value,
+      searchForm // 经过格式化的数据 ,未删除searchParam， 兼容上面被使用的情况
+    })
+}
+// 操作列点击操作
+const tableOperationFn = (item: any, row: any) => {
+  useButtonClickFn(item, row)
+  // let secondConfirm = ''
+  // if (item.secondConfirm) {
+  //   secondConfirm = item.secondConfirm
+  // } else if (item.id === 'delete') {
+  //   secondConfirm = `确定${item.text || '删除'}该条数据吗?`
+  // }
+  // if (secondConfirm) {
+  //   ElMessageBox.confirm(secondConfirm, '警告', {
+  //     confirmButtonText: '确定',
+  //     cancelButtonText: '取消',
+  //     type: 'warning'
+  //   })
+  //     .then(() => {
+  //       item.fun(row)
+  //     })
+  //     .catch(error => {
+  //     })
+  // } else {
+  //   item.fun(row)
+  // }
+}
+
+/*
+  动态更改表格数据，只需要是内部请求时才需要调用
+  外部使用方法 传入一个回调 处理数组后返回最终结果即可
+  外部使用方式：
+    jztQueryTableRef?.value?.changeTableData(data => {
+        return  newData
+    })
+ */
+const changeTableData = (dataCallback: any) => {
+  const endData = dataCallback(processTableData.value)
+  processTableData.value = endData || []
+}
+// 获取表格的选中值
+const getTableCheckedValue = () => {
+  return {
+    radio: radio.value,
+    radioItem: radioItem.value,
+    isSelected: isSelected.value,
+    selectedList: selectedList.value,
+    selectedListIds: selectedListIds.value
+  }
+}
+//列配置 确定 重置 刷新列表
+const refreshColumnTable = (type: string) => {
+  emit('refreshColumnTable', type)
+}
+
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: tableRef,
+  tableData: processTableData,
+  // radio, // radio  如果有人后面用到这个，联调自测的时候请改用 getTableCheckedValue去获取(谢谢)
+  // radioItem,
+  pageable,
+  searchParam,
+  searchInitParam,
+  formattedSearchForm, // 格式化后的搜索参数
+  isSelected,
+  selectedList,
+  selectedListIds,
+
+  // 下面为 function
+  getTableList, // 如果纯查询，在当前页面查询的话，就掉用这个接口
+  search, // 查询，会重置页码
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+  clearSelection,
+  enumMap,
+  toggleExpandAll,
+  changeTableData,
+  setRadioItem,
+  searchAndClear, // 查询并清空表格单选与多选数据 会触发emit
+  getTableCheckedValue,
+  saveColumns
+})
+
+// 获取 attrs
+const attrs = useAttrs()
+// const maxHeight = computed(() => {
+//   const maxHeight = props.maxHeight //attrs['max-height'] || attrs['maxHeight']
+//   if (!maxHeight) return '100%'
+//   if (typeof maxHeight === 'number') {
+//     return maxHeight + 'px'
+//   } else {
+//     return maxHeight
+//   }
+// })
+
+// 表格固定高度
+const height = computed(() => {
+  if (attrs['height']) {
+    if (typeof attrs['height'] === 'number') {
+      return attrs['height'] + 'px'
+    } else {
+      return attrs['height']
+    }
+  }
+  return '100%'
+})
+// 页面固定高度
+const pageHeight = computed(() => {
+  const height = attrs['page-height'] || attrs['pageHeight']
+  if (!height) return '100%'
+  if (typeof height === 'number') {
+    return height + 'px'
+  } else {
+    return height
+  }
+})
+// 表格最小高度
+const minHeight = computed(() => {
+  const minHeight = props.minHeight // attrs['min-height'] || attrs['minHeight']
+  if (minHeight === false) {
+    return '100%'
+  } else if (typeof minHeight === 'string') {
+    return minHeight || '170px'
+  } else {
+    return '170px'
+  }
+})
+</script>
+<style lang="scss" scoped>
+@use './index';
+
+.jzt-query-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  height: v-bind(pageHeight);
+  :deep(.el-tabs .el-tabs__header.is-top) {
+    margin-bottom: 2px !important;
+  }
+  :deep(.jzt-table-add-btn) {
+    height: 42px;
+    padding: 8px;
+    font-size: 14px;
+    border-left: 1px solid var(--el-border-color);
+    border-right: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+}
+:deep(.header-button-lf) {
+  .el-button {
+    margin: 4px 8px 4px 0;
+  }
+}
+:deep(.header-button-ri) {
+  .el-button {
+    margin: 4px 4px 4px 4px;
+  }
+}
+.table-main {
+  flex: 1;
+  overflow: hidden;
+  :deep(.el-scrollbar__wrap) {
+    // height: 0;
+    min-height: 0;
+  }
+  :deep(.el-table .el-scrollbar) {
+    min-height: v-bind(minHeight);
+    height: v-bind(height);
+  }
+}
+.header-button-ri {
+  flex-wrap: nowrap !important;
+}
+.noCardGap {
+  padding: 0;
+}
+.el-table {
+  flex: 1;
+  // margin-top: 2px;
+  .el-scrollbar {
+    min-height: 150px;
+  }
+}
+
+:deep(.el-table) {
+  .highlight-current-row {
+    background-color: var(--el-color-primary-light-9) !important;
+  }
+}
+
+.el-table.noDataEmpty {
+  :deep(.el-scrollbar) {
+    display: none;
+  }
+}
+.el-table.tableNoHeight {
+  :deep(.el-scrollbar) {
+    min-height: 0;
+  }
+}
+</style>