From 325318bfe39d4912b40fd490b07bfd9c140e8852 Mon Sep 17 00:00:00 2001
From: "bruce.cheng" <chengyabing@outlook.com>
Date: Tue, 17 Oct 2023 00:42:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20ProTable=E6=90=9C=E7=B4=A2=E5=8C=BA?=
 =?UTF-8?q?=E5=9D=97=E6=94=AF=E6=8C=81=E5=A4=9A=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid/index.vue            | 28 ++++++++++++++----------
 src/components/ProTable/index.vue        |  2 ++
 src/components/SearchForm/index.vue      | 19 +++++++++-------
 src/hooks/useTable.ts                    |  6 ++---
 src/views/proTable/useProTable/index.vue |  9 ++++++++
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/components/Grid/index.vue b/src/components/Grid/index.vue
index 38200f4..de12f0f 100644
--- a/src/components/Grid/index.vue
+++ b/src/components/Grid/index.vue
@@ -24,14 +24,14 @@ import type { BreakPoint } from "./interface/index";
 type Props = {
   cols?: number | Record<BreakPoint, number>;
   collapsed?: boolean;
-  collapsedRows?: number;
+  collapsedRow?: number;
   gap?: [number, number] | number;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
   collapsed: false,
-  collapsedRows: 1,
+  collapsedRow: 1,
   gap: 0
 });
 
@@ -91,11 +91,18 @@ const gridCols = computed(() => {
 });
 provide("cols", gridCols);
 
+// 默认 cols,折叠填列--计算折叠重要
+const defaultGridCols = computed(() => {
+  if (typeof props.cols === "object") return props.cols["xl"] ?? props.cols;
+  return props.cols;
+});
+
 // 寻找需要开始折叠的字段 index
 const slots = useSlots().default!();
 
 const findIndex = () => {
   let fields: VNodeArrayChildren = [];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let suffix: VNode | null = null;
   slots.forEach((slot: any) => {
     // suffix
@@ -104,20 +111,19 @@ const findIndex = () => {
     if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
   });
 
-  // 计算 suffix 所占用的列
-  let suffixCols = 0;
-  if (suffix) {
-    suffixCols =
-      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
-      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
-  }
+  // // 计算 suffix 所占用的列
   try {
     let find = false;
     fields.reduce((prev = 0, current, index) => {
       prev +=
         ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
         ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
-      if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+      if (
+        Number(prev) >
+        (props.collapsedRow > props.collapsedRow * defaultGridCols.value
+          ? props.collapsedRow
+          : props.collapsedRow * defaultGridCols.value)
+      ) {
         hiddenIndex.value = index;
         find = true;
         throw "find it";
@@ -163,5 +169,5 @@ const style = computed(() => {
   };
 });
 
-defineExpose({ breakPoint });
+defineExpose({ breakPoint, defaultGridCols });
 </script>
diff --git a/src/components/ProTable/index.vue b/src/components/ProTable/index.vue
index 16de9e6..02cf871 100644
--- a/src/components/ProTable/index.vue
+++ b/src/components/ProTable/index.vue
@@ -9,6 +9,7 @@
     :columns="searchColumns"
     :search-param="searchParam"
     :search-col="searchCol"
+    :search-collapsed-row="searchCollapsedRow"
   />
 
   <!-- 表格主体 -->
@@ -130,6 +131,7 @@ export interface ProTableProps {
   toolButton?: ("refresh" | "setting" | "search")[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
   rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
   searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+  searchCollapsedRow?: number; // 起始折叠行，索引从0开始，默认从第二行开始折叠
 }
 
 // 接受父组件参数，配置默认值
diff --git a/src/components/SearchForm/index.vue b/src/components/SearchForm/index.vue
index 2379f86..5313baf 100644
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@@ -1,7 +1,8 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div v-if="columns.length" class="card table-search">
     <el-form ref="formRef" :model="searchParam">
-      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
+      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol" :collapsed-row="props.searchCollapsedRow">
         <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
           <el-form-item>
             <template #label>
@@ -45,6 +46,7 @@ interface ProTableProps {
   columns?: ColumnProps[]; // 搜索配置列
   searchParam?: { [key: string]: any }; // 搜索参数
   searchCol: number | Record<BreakPoint, number>;
+  searchCollapsedRow?: number; // 起始折叠行，索引从0开始，默认从第二行开始折叠
   search: (params: any) => void; // 搜索方法
   reset: (params: any) => void; // 重置方法
 }
@@ -52,7 +54,8 @@ interface ProTableProps {
 // 默认值
 const props = withDefaults(defineProps<ProTableProps>(), {
   columns: () => [],
-  searchParam: () => ({})
+  searchParam: () => ({}),
+  searchCollapsedRow: 1
 });
 
 // 获取响应式设置
@@ -69,12 +72,15 @@ const getResponsive = (item: ColumnProps) => {
 };
 
 // 是否默认折叠搜索项
-const collapsed = ref(true);
+const collapsed = ref<boolean>(true);
 
 // 获取响应式断点
 const gridRef = ref();
 const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
 
+// 默认了列
+const defaultGridCols = computed<number>(() => gridRef.value?.defaultGridCols);
+
 // 判断是否显示 展开/合并 按钮
 const showCollapse = computed(() => {
   let show = false;
@@ -82,13 +88,10 @@ const showCollapse = computed(() => {
     prev +=
       (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
       (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
-    if (typeof props.searchCol !== "number") {
-      if (prev >= props.searchCol[breakPoint.value]) show = true;
-    } else {
-      if (prev >= props.searchCol) show = true;
-    }
+    if (prev > defaultGridCols.value * (props.searchCollapsedRow ? props.searchCollapsedRow : 1)) show = true;
     return prev;
   }, 0);
+
   return show;
 });
 </script>
diff --git a/src/hooks/useTable.ts b/src/hooks/useTable.ts
index 4decc65..d714225 100644
--- a/src/hooks/useTable.ts
+++ b/src/hooks/useTable.ts
@@ -1,5 +1,5 @@
+import { computed, reactive, toRefs } from "vue";
 import { Table } from "./interface";
-import { reactive, computed, toRefs } from "vue";
 
 /**
  * @description table 页面操作方法封装
@@ -22,8 +22,8 @@ export const useTable = (
     pageable: {
       // 当前页数
       pageNum: 1,
-      // 每页显示条数
-      pageSize: 10,
+      // 每页显示条数// 每页显示条数， 兼容一下默认页码
+      pageSize: initParam.hasOwnProperty("pageSize") ? eval("initParam.pageSize") : 10,
       // 总条数
       total: 0
     },
diff --git a/src/views/proTable/useProTable/index.vue b/src/views/proTable/useProTable/index.vue
index f9235cf..db2bc8f 100644
--- a/src/views/proTable/useProTable/index.vue
+++ b/src/views/proTable/useProTable/index.vue
@@ -6,6 +6,7 @@
       :request-api="getTableList"
       :init-param="initParam"
       :data-callback="dataCallback"
+      :search-collapsed-row="3"
       @darg-sort="sortTable"
     >
       <!-- 表格 header 按钮 -->
@@ -204,6 +205,14 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
       defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
     }
   },
+  { prop: "demo1", label: "演示字段1（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo2", label: "演示字段2（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo3", label: "演示字段3（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo4", label: "演示字段4（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo5", label: "演示字段5（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo6", label: "演示字段6（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo7", label: "演示字段7（为展示多行演示）", search: { el: "input" }, isShow: false },
+  { prop: "demo8", label: "演示字段8（为展示多行演示）", search: { el: "input" }, isShow: false },
   { prop: "operation", label: "操作", fixed: "right", width: 330 }
 ]);
 
-- 
Gitee