From 93f9a19aa16a3e9cb95338417c52d9a398e3f70b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Fri, 13 Aug 2021 11:51:23 +0800
Subject: [PATCH] feat(form): add `alwaysShowLines` prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

允许设置Form折叠时始终保持显示状态的行数

close: #1051
---
 CHANGELOG.zh_CN.md                           |  1 +
 src/components/Form/src/hooks/useAdvanced.ts |  2 +-
 src/components/Form/src/props.ts             |  2 ++
 src/components/Form/src/types/form.ts        |  2 ++
 src/views/demo/form/AdvancedForm.vue         | 16 ++++++++++++++--
 5 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index b3f77493..fca530eb 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
 ### ✨ Features
 
 - **BasicTree** 添加搜索功能相关属性和方法
+- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
 
 ### 🐛 Bug Fixes
 
diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts
index f8d49eaa..b8cd3d55 100644
--- a/src/components/Form/src/hooks/useAdvanced.ts
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -103,7 +103,7 @@ export default function ({
       }
       return { isAdvanced: advanceState.isAdvanced, itemColSum };
     }
-    if (itemColSum > BASIC_COL_LEN) {
+    if (itemColSum > BASIC_COL_LEN * (unref(getProps).alwaysShowLines || 1)) {
       return { isAdvanced: advanceState.isAdvanced, itemColSum };
     } else {
       // The first line is always displayed
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
index a165673c..36237f40 100644
--- a/src/components/Form/src/props.ts
+++ b/src/components/Form/src/props.ts
@@ -59,6 +59,8 @@ export const basicProps = {
   rulesMessageJoinLabel: propTypes.bool.def(true),
   // 超过3行自动折叠
   autoAdvancedLine: propTypes.number.def(3),
+  // 不受折叠影响的行数
+  alwaysShowLines: propTypes.number.def(1),
 
   // 是否显示操作按钮
   showActionButtonGroup: propTypes.bool.def(true),
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
index 0e84b133..5793adc7 100644
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -97,6 +97,8 @@ export interface FormProps {
   autoFocusFirstItem?: boolean;
   // Automatically collapse over the specified number of rows
   autoAdvancedLine?: number;
+  // Always show lines
+  alwaysShowLines?: number;
   // Whether to show the operation button
   showActionButtonGroup?: boolean;
 
diff --git a/src/views/demo/form/AdvancedForm.vue b/src/views/demo/form/AdvancedForm.vue
index 8cc53807..03bb1657 100644
--- a/src/views/demo/form/AdvancedForm.vue
+++ b/src/views/demo/form/AdvancedForm.vue
@@ -4,7 +4,7 @@
       <BasicForm @register="register" />
     </CollapseContainer>
 
-    <CollapseContainer title="超过3行自动收起" class="mt-4">
+    <CollapseContainer title="超过3行自动收起，折叠时保留2行" class="mt-4">
       <BasicForm @register="register1" />
     </CollapseContainer>
   </PageWrapper>
@@ -160,14 +160,26 @@
         compact: true,
         showAdvancedButton: true,
       });
+      const extraSchemas: FormSchema[] = [];
+      for (let i = 14; i < 30; i++) {
+        extraSchemas.push({
+          field: 'field' + i,
+          component: 'Input',
+          label: '字段' + i,
+          colProps: {
+            span: 8,
+          },
+        });
+      }
       const [register1] = useForm({
         labelWidth: 120,
-        schemas: [...getSchamas(), ...getAppendSchemas()],
+        schemas: [...getSchamas(), ...getAppendSchemas(), ...extraSchemas],
         actionColOptions: {
           span: 24,
         },
         compact: true,
         showAdvancedButton: true,
+        alwaysShowLines: 2,
       });
       return {
         register,
-- 
GitLab