高级搜索 - 业务

components/DataView/index.js

@@ -569,13 +569,14 @@ export default class DataView extends React.Component {
 
     // 渲染搜索栏
     _renderSearchForm = () => {
-        const { searchCols } = this.props;
+        const { searchCols, advancedCols } = this.props;
         const { searchForm } = this.state;
         if (searchCols === null || searchCols.length <= 0) return null;
         return (
             <SearchView
                 searchForm={searchForm}
                 searchCols={searchCols}
+                advancedCols={advancedCols}
                 search={this.search}
                 onChangeParams={this._changeSearchForm}
             />
@@ -616,7 +617,8 @@ export default class DataView extends React.Component {
 
     // 渲染查询条件按钮组件
     _renderFilterBtn = () => {
-        const { searchCols } = this.props;
+        let { searchCols, advancedCols } = this.props;
+        searchCols = [...searchCols, ...advancedCols];
         const { searchForm, siftDataArr, currentSiftNum } = this.state;
         if (searchCols === null || searchCols.length <= 0) return null;
         const chooseItems = formatForm(searchForm, searchCols);

components/SearchView/index.js

@@ -15,6 +15,7 @@ import OrgTreeSelect from '@/components/orgTreeSelect/index.tsx';
 import AssociationSearch from '@/components/associationSearch/index.tsx';
 import AssociationSearchFilter from '@/components/associationSearchFilter/index.tsx';
 import NumberRange from '@/components/numberRange';
+import SearchViewAdvanced from '@/submodule/components/SearchViewAdvanced';
 // 样式
 import styles from './index.less';
 // 工具
@@ -352,13 +353,17 @@ class SearchView extends React.Component {
     };
 
     render() {
-        const { style, searchCols = [] } = this.props;
+        const { style, searchCols = [], advancedCols = [] } = this.props;
         return (
             <BIForm className={styles.view} style={style}>
                 {searchCols.map((arr, index) => {
                     return this._renderRow(arr, index);
                 })}
-                <p>高级搜索</p>
+                <SearchViewAdvanced>
+                    {advancedCols.map((arr, index) => {
+                        return this._renderRow(arr, index);
+                    })}
+                </SearchViewAdvanced>
             </BIForm>
         );
     }

components/SearchViewAdvanced/index.js

+/*
+ * @Author: CaiChuanming
+ * @Date: 2020-02-09 21:38:05
+ * @LastEditTime : 2020-02-09 23:00:29
+ * @LastEditors  : Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /admin_web/src/submodule/components/SearchViewAdvanced/index.js
+ */
+/* eslint-disable */
+
+import React from 'react';
+import { Collapse } from 'antd';
+import styles from './index.less';
+import IconFont from '@/components/CustomIcon/IconFont';
+
+class SearchViewAdvanced extends React.Component {
+    constructor(props) {
+        super(props);
+        this.advancedItem = React.createRef();
+        this.state = {
+            collapseStatus: false,
+        };
+    }
+
+    // 隐藏区显隐
+    changeCollapse() {
+        const { collapseStatus } = this.state;
+        this.setState({
+            collapseStatus: !collapseStatus,
+        });
+    }
+
+    render() {
+        const { approval } = this.props;
+        const { collapseStatus, advancedForm } = this.state;
+        return (
+            <Collapse bordered={false}>
+                <Collapse.Panel
+                    key="1"
+                    style={{ border: 'none' }}
+                    showArrow={false}
+                    header={
+                        <div
+                            className={styles.collapseTitle}
+                            onClick={() => {
+                                return this.changeCollapse();
+                            }}
+                        >
+                            高级搜索
+                            <IconFont
+                                type="iconzhankaiicon"
+                                className={`${styles.collapseIcon} ${collapseStatus ? styles.show : null}`}
+                            />
+                        </div>
+                    }
+                >
+                    {this.props.children}
+                </Collapse.Panel>
+            </Collapse>
+        );
+    }
+}
+export default SearchViewAdvanced;

components/SearchViewAdvanced/index.less

+.collapseTitle {
+    color: #04b4ad;
+    font-size: 14px;
+    cursor: pointer;
+    padding-bottom: 20px;
+}
+.collapseIcon {
+    font-size: 9px;
+    transform: rotate(0);
+    transition: transform 0.3s ease-in-out;
+    margin-left: 5px;
+    vertical-align: middle;
+    &.show {
+        transform: rotate(180deg);
+    }
+}
+:global .ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+    padding: 0;
+}
+:global .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+    padding: 0;
+}
+:global .ant-collapse-header {
+    display: inline-block;
+}