canrd-outside / order-erp-front · Commits

Commit 93f9a19aa16a3e9cb95338417c52d9a398e3f70b

Authored by 无木
1 parent 61d853e6

feat(form): add `alwaysShowLines` prop 

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

close: #1051
Inline Side-by-side
Showing 5 changed files with 20 additions and 3 deletions
CHANGELOG.zh_CN.md
  View file @93f9a19
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 ### ✨ Features 3 ### ✨ Features
4 4
5 - **BasicTree** 添加搜索功能相关属性和方法 5 - **BasicTree** 添加搜索功能相关属性和方法
  6 +- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
6 7
7 ### 🐛 Bug Fixes 8 ### 🐛 Bug Fixes
8 9
src/components/Form/src/hooks/useAdvanced.ts
  View file @93f9a19
@@ -103,7 +103,7 @@ export default function ({ @@ -103,7 +103,7 @@ export default function ({
103 } 103 }
104 return { isAdvanced: advanceState.isAdvanced, itemColSum }; 104 return { isAdvanced: advanceState.isAdvanced, itemColSum };
105 } 105 }
106 - if (itemColSum > BASIC_COL_LEN) { 106 + if (itemColSum > BASIC_COL_LEN * (unref(getProps).alwaysShowLines || 1)) {
107 return { isAdvanced: advanceState.isAdvanced, itemColSum }; 107 return { isAdvanced: advanceState.isAdvanced, itemColSum };
108 } else { 108 } else {
109 // The first line is always displayed 109 // The first line is always displayed
src/components/Form/src/props.ts
  View file @93f9a19
@@ -59,6 +59,8 @@ export const basicProps = { @@ -59,6 +59,8 @@ export const basicProps = {
59 rulesMessageJoinLabel: propTypes.bool.def(true), 59 rulesMessageJoinLabel: propTypes.bool.def(true),
60 // 超过3行自动折叠 60 // 超过3行自动折叠
61 autoAdvancedLine: propTypes.number.def(3), 61 autoAdvancedLine: propTypes.number.def(3),
  62 + // 不受折叠影响的行数
  63 + alwaysShowLines: propTypes.number.def(1),
62 64
63 // 是否显示操作按钮 65 // 是否显示操作按钮
64 showActionButtonGroup: propTypes.bool.def(true), 66 showActionButtonGroup: propTypes.bool.def(true),
src/components/Form/src/types/form.ts
  View file @93f9a19
@@ -97,6 +97,8 @@ export interface FormProps { @@ -97,6 +97,8 @@ export interface FormProps {
97 autoFocusFirstItem?: boolean; 97 autoFocusFirstItem?: boolean;
98 // Automatically collapse over the specified number of rows 98 // Automatically collapse over the specified number of rows
99 autoAdvancedLine?: number; 99 autoAdvancedLine?: number;
  100 + // Always show lines
  101 + alwaysShowLines?: number;
100 // Whether to show the operation button 102 // Whether to show the operation button
101 showActionButtonGroup?: boolean; 103 showActionButtonGroup?: boolean;
102 104
src/views/demo/form/AdvancedForm.vue
  View file @93f9a19
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <BasicForm @register="register" /> 4 <BasicForm @register="register" />
5 </CollapseContainer> 5 </CollapseContainer>
6 6
7 - <CollapseContainer title="超过3行自动收起" class="mt-4"> 7 + <CollapseContainer title="超过3行自动收起，折叠时保留2行" class="mt-4">
8 <BasicForm @register="register1" /> 8 <BasicForm @register="register1" />
9 </CollapseContainer> 9 </CollapseContainer>
10 </PageWrapper> 10 </PageWrapper>
@@ -160,14 +160,26 @@ @@ -160,14 +160,26 @@
160 compact: true, 160 compact: true,
161 showAdvancedButton: true, 161 showAdvancedButton: true,
162 }); 162 });
  163 + const extraSchemas: FormSchema[] = [];
  164 + for (let i = 14; i < 30; i++) {
  165 + extraSchemas.push({
  166 + field: 'field' + i,
  167 + component: 'Input',
  168 + label: '字段' + i,
  169 + colProps: {
  170 + span: 8,
  171 + },
  172 + });
  173 + }
163 const [register1] = useForm({ 174 const [register1] = useForm({
164 labelWidth: 120, 175 labelWidth: 120,
165 - schemas: [...getSchamas(), ...getAppendSchemas()], 176 + schemas: [...getSchamas(), ...getAppendSchemas(), ...extraSchemas],
166 actionColOptions: { 177 actionColOptions: {
167 span: 24, 178 span: 24,
168 }, 179 },
169 compact: true, 180 compact: true,
170 showAdvancedButton: true, 181 showAdvancedButton: true,
  182 + alwaysShowLines: 2,
171 }); 183 });
172 return { 184 return {
173 register, 185 register,