垂直搜索菜单新增收起功能

bitsun-front · Aug 29, 2022 · 1cc9e6d · 1cc9e6d
1 parent 6269fbb
commit 1cc9e6d
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 22 deletions.
diff --git a/packages/sula/src/template-query-table/QueryTable.tsx b/packages/sula/src/template-query-table/QueryTable.tsx
@@ -15,6 +15,7 @@ import { Input, Space, Button, Radio, Checkbox, Tabs, Badge  } from 'antd';
 import { MoreOutlined, SearchOutlined, CaretDownOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import DropFilterSelect from './dropFilterComponent/dropFilterSelect';
 import moment from 'moment';
+import arrow_top from '../assets/arrow_top.png';
 
 type FormPropsPicks = 'fields' | 'initialValues' | 'layout' | 'itemLayout';
 type TablePropsPicks =
@@ -66,6 +67,7 @@ export default class QueryTable extends React.Component<Props> {
     this.state = {
       isHorizontally: props.isHorizontally === undefined ? true : props.isHorizontally,
       status: {},
+      showSideMenu: true,
       sliderFormHeight: 500
     }
   }
@@ -137,6 +139,7 @@ export default class QueryTable extends React.Component<Props> {
   };
 
   renderForm = (locale, isHorizontally) => {
+    const { showSideMenu } = this.state;
     const { formProps, layout, itemLayout, fields, initialValues, visibleFieldsCount, triggerResetData, queryActionCallback, resetActionCallback, noConditionOpts } = this.props;
     const formActionsRender = formProps?.actionsRender ?? [
       {
@@ -191,27 +194,58 @@ export default class QueryTable extends React.Component<Props> {
       },
     ];
     return (
-      <div className='queryFormContainer' style={!isHorizontally ? {background: '#ffffff', borderTop: '1px #E1E2E3 solid', height: `${this.state.sliderFormHeight}px`, overflow: 'hidden'} : {}}>
-        <QueryForm
-          {...formProps}
-          ctxGetter={() => {
-            return {
-              table: this.tableRef.current,
-            };
-          }}
-          ref={this.formRef}
-          hasBottomBorder={this.hasActionsRender()}
-          layout={layout}
-          itemLayout={itemLayout}
-          fields={fields}
-          initialValues={initialValues}
-          visibleFieldsCount={visibleFieldsCount}
-          actionsRender={formActionsRender}
-          getFilterKeyLabel={this.getFilterKeyLabel}
-          getFilterValueLabel={this.getFilterValueLabel}
-          isQueryTableForm={this.judgeIsEmpty(noConditionOpts) ? true : !noConditionOpts}
-          isHorizontally={isHorizontally}
-        />
+      <div style={{position: 'relative'}}>
+        <div 
+          className='queryFormContainer' 
+          style={!isHorizontally ? {
+            background: '#ffffff', 
+            borderTop: '1px #E1E2E3 solid', 
+            height: `${this.state.sliderFormHeight}px`, 
+            overflow: 'hidden', 
+            width: showSideMenu ? '288px' : '0px',
+            opacity: showSideMenu ? 1 : 0,
+            } : {}}
+        >
+          <QueryForm
+            {...formProps}
+            ctxGetter={() => {
+              return {
+                table: this.tableRef.current,
+              };
+            }}
+            ref={this.formRef}
+            hasBottomBorder={this.hasActionsRender()}
+            layout={layout}
+            itemLayout={itemLayout}
+            fields={fields}
+            initialValues={initialValues}
+            visibleFieldsCount={visibleFieldsCount}
+            actionsRender={formActionsRender}
+            getFilterKeyLabel={this.getFilterKeyLabel}
+            getFilterValueLabel={this.getFilterValueLabel}
+            isQueryTableForm={this.judgeIsEmpty(noConditionOpts) ? true : !noConditionOpts}
+            isHorizontally={isHorizontally}
+          />
+        </div>
+        {
+          !isHorizontally && 
+          <div 
+            className='queryFormCollapse'
+            onClick={() => {
+              this.setState({
+                showSideMenu: !showSideMenu
+              })
+            }}
+          >
+            <img 
+              src={arrow_top}
+              style={{
+                width: '14px',
+                transform: showSideMenu ? 'rotate(90deg)' : 'rotate(270deg)'
+              }}
+            />
+          </div>
+        }
       </div>
     );
   };

diff --git a/packages/sula/src/template-query-table/style/query-table.less b/packages/sula/src/template-query-table/style/query-table.less
@@ -25,6 +25,10 @@
 
 .queryFormContainer {
   flex-shrink: 0 !important;
+  margin-right: 10px;
+  position: relative;
+  transition: 0.5s;
+  -webkit-transition: 0.5s; /* Safari */
   .ant-form {
     height: 100%;
   }
@@ -58,14 +62,28 @@
   background: #fff;
 }
 
+.queryFormCollapse {
+  position: absolute;
+  width: 9px;
+  height: 64px;
+  background-color: #ffffff;
+  border-radius: 0 4px 4px 0;
+  top: 50%;
+  right: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .ant-popover {
   z-index: 1055 !important;
 }
 
 
 .suitClass {
-  width: calc(100% - 293px);
+  width: calc(100% - 303px);
   flex-shrink: 1;
+  flex-grow: 1;
 }
 
 .table-bssula-summary {