修改组件

components/DataView/filterModal/index.js

+import React from 'react';
+import Modal from '@/ant_components/BIModal';
+import styles from './styles.less';
+
+
+class FilterModal extends React.Component {
+    render() {
+        return (
+            <Modal
+                wrapClassName={styles.modalCla}
+                width="520"
+                title="筛选条件"
+
+            >
+                <div className={styles.wrap}>
+
+                </div>
+            </Modal>
+        )
+    }
+}
+export default FilterModal;
\ No newline at end of file

components/DataView/filterModal/styles.less

+.modalCla{
+    :global .ant-modal-body{
+        padding: 0;
+    }
+    :global .ant-modal-footer{
+        display: flex;
+        justify-content: center;
+        background:rgba(255,255,255,1);
+    }
+    .wrap{
+        display: flex;
+        flex-flow: row;
+        min-height: 700px;
+    }
+}
\ No newline at end of file

components/DataView/popoverFilter/hide/index.js

+import React, { Component } from 'react';
+import { Switch, Popover } from 'antd';
+import Icon from '@/submodule/components/IconFont';
+import _ from 'lodash';
+import s from './index.less';
+import hideIcon from '@/assets/airTable/hide.png';
+/**
+ * 操作栏显隐控制
+ * 参数
+ * @configs  操作栏配置
+ * @columns  表头列表配置
+ * @onChange 显隐变化回调
+ */
+export default class Hide extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false,
+            columnConfig: props.columnConfig,
+        };
+    }
+
+
+
+    toggleOption = () => {
+        const { visible } = this.state;
+        this.setState({
+            visible: !visible,
+        });
+    };
+
+    renderContent = () => {
+        const { columnConfig = [] } = this.state;
+        const { conditions } = this.props;
+        return (
+            <div className={s.optionsModal}>
+                <div className={s.optionList}>
+                    {conditions.map((item, i) => {
+                        return (
+                            <div
+                                key={i}
+                                role="presentation"
+                                className={s.optionItem}
+                            // onClick={this.changeHide.bind(this, i, Number(item.showStatus) === 1 ? 0 : 1)}
+                            >
+                                <Switch checked={true} size="small" />
+                                <span className={s.optionName}>{item.label}</span>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    };
+
+    render() {
+        return (
+            <Popover
+                overlayClassName={s.popover}
+                placement="topLeft"
+                content={this.renderContent()}
+                // visible={visible}
+                onVisibleChange={this.toggleOption}
+                trigger="click"
+            >
+                <span className={s.addBtn}><Icon iconFontType="iconxinzeng" /> 添加筛选条件</span>
+            </Popover>
+        );
+    }
+}

components/DataView/popoverFilter/hide/index.less

+@import "~@/theme/common";
+
+.popover {
+    :global(.ant-popover-inner-content) {
+        padding: 0;
+    }
+
+    :global(.ant-popover-title) {
+        padding: 14px 16px;
+    }
+}
+
+.operateContainer {
+    cursor: pointer;
+    text-align: center;
+    padding: 5px 8px;
+    border-radius: 2px;
+
+    &:hover {
+        background: #F6F6F6;
+    }
+
+    .operateIcon {
+        width: 14px;
+        height: 12px;
+        margin-right: 3px;
+    }
+
+    .operateName {
+        font-size: 14px;
+        font-weight: 400;
+        color: @textPrimaryColor;
+    }
+
+    &:hover {
+        background: #F6F6F6;
+    }
+
+    &.selected {
+        background: @primaryColor;
+    }
+}
+
+.optionsModal {
+    min-width: 174px;
+    padding-top: 10px;
+
+    .optionList {
+        max-height: 300px;
+        overflow: auto;
+
+        .optionItem {
+            padding: 0 10px;
+            margin-bottom: 5px;
+            cursor: pointer;
+
+            .optionName {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .btns {
+        width: 100%;
+        height: 44px;
+        background: #F6F6F6;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        .btn {
+            //width: 50%;
+            font-size: 12px;
+            color: @textGeneralColor;
+            cursor: pointer;
+
+            &:last-child {
+                color: @primaryColor;
+            }
+        }
+    }
+}
+.addBtn{
+    cursor: pointer;
+    color: @primaryColor;
+}

components/DataView/popoverFilter/index.js

+import React, { Component } from 'react';
+import { fromJS, Map, List, is } from 'immutable';
+import { Popover, message } from 'antd';
+import Button from '@/ant_components/BIButton';
+import classnamse from 'classnames';
+import SearchView from '@/submodule/components/SearchView';
+import BISelect from '@/ant_components/BISelect';
+import filterIcon from '@/assets/airTable/filter.png';
+import closeIcon from '@/assets/airTable/close.png';
+import SettingPanel from './hide'
+import styles from './styles.less';
+
+const TransType = ['2', '3', '4', '13', '14'];
+/** 
+ * 操作栏过滤条件控制
+ * 参数
+ * @filterValues        已有的过滤条件
+ * @filterColumnConfig  可以过滤的配置项
+ * @onChange            变化回调
+ * @hideSettingPanel    设置过滤条件
+ * @conditions          全量条件数据
+ * @openSettingPanel     打开设置变量看板
+ * @closeSettingPanel    关闭设置变量看板
+ * @selectedConditions   已选择条件数据
+ * 
+ */
+export default class Filter extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false,
+            filterConfig: props.filterConfig || [{}],
+        };
+    }
+
+    componentDidMount() {
+        const { filterConfig = [] } = this.props;
+        this.setState({
+            filterConfig: filterConfig.length > 0 ? filterConfig : [{}],
+        });
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const { filterConfig } = this.props;
+        const x1 = fromJS(filterConfig);
+        const x2 = fromJS(nextProps.filterConfig);
+        if (!is(x1, x2)) {
+            this.setState({
+                filterConfig: nextProps.filterConfig.length > 0 ? nextProps.filterConfig : [{}],
+            });
+        }
+    }
+
+    toggleOption = () => {
+        const { visible } = this.state;
+        this.setState({
+            visible: !visible,
+        });
+    };
+
+    // 重置
+    resetFilterItem = () => {
+        this.setState({
+            filterConfig: [{}],
+        });
+        this.onChange([]);
+    };
+    // 改变筛选条件
+    changeFilterKey = (index, value) => {
+        const { filterConfig } = this.state;
+        const { filterColumnConfig } = this.props;
+        const filter = filterColumnConfig.find((item) => {
+            return item.key === value;
+        });
+        const data = {
+            colName: value,
+            colChsName: filter.title,
+            operationCode: filter.operator && filter.operator[0] && filter.operator[0].id,
+            colValues: undefined,
+        };
+        const temp = List(filterConfig)
+            .splice(index, 1, data)
+            .toJS();
+        this.setState({
+            filterConfig: temp,
+        });
+    };
+
+    // 回调表格更改操作栏方法
+    onChange = (props, changedValues, allValues) => {
+        // const { onChange, filterConfig } = this.props;
+        // const x1 = fromJS(changedConfig);
+        // const x2 = fromJS(filterConfig);
+        // if (!is(x1, x2)) {
+        //     if (typeof onChange === 'function') {
+        //         onChange({ type: 'filterConfig', config: changedConfig });
+        //     }
+        // }
+    };
+    // 渲染搜索栏
+    _renderSearchForm = () => {
+        const { selectedConditions = [] } = this.props;
+        const { searchForm = {} } = this.state;
+        if (selectedConditions === null || selectedConditions.length <= 0) return null;
+        return (
+            <SearchView
+                modal='modal'
+                searchForm={searchForm}
+                searchCols={selectedConditions}
+                search={this.search}
+                onChangeParams={this.onChange}
+            />
+        );
+    };
+    renderContent = () => {
+        const { hideSettingPanel } = this.props;
+        return (
+            <div className={styles.optionsModal}>
+                <div className={styles.content}>
+                    {this._renderSearchForm()}
+                </div>
+                <div className={styles.btns}>
+
+                    <div role="presentation" className={styles.addFilterBtn}>
+                        {hideSettingPanel ? null : <SettingPanel {...this.props} />}
+                    </div>
+                    <div className={styles.handleBtn}>
+                        <Button
+                            className={classnamse(styles.btn, styles.resetBtn)}
+                        >
+                            重置
+                        </Button>
+                        <Button
+                            className={classnamse(styles.btn, styles.okBtn)}
+
+                            type="primary"
+                        >
+                            确认
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    renderOpenBtn = () => {
+        const { filterValues = [] } = this.props;
+        if (this.props.renderOpenBtn && typeof this.props.renderOpenBtn === 'function') {
+            return this.props.renderOpenBtn();
+        }
+        // const len = filterValues.filter((item) => {
+        //     return item.value > 0;
+        // }).length;
+        const len = 10
+        let background = len > 0 ? 'rgba(247,181,0,0.1)' : '';
+        return (
+            <div className={styles.operateContainer} style={{ background }}>
+                <img alt="" className={styles.operateIcon} src={filterIcon} />
+                <span className={styles.operateName}>{len > 0 ? `${len}条筛选` : '筛选'}</span>
+            </div>
+        )
+    }
+
+    render() {
+        return (
+            <Popover
+                overlayClassName={styles.popover}
+                placement="bottomLeft"
+                title="筛选条件"
+                content={this.renderContent()}
+                visible={true}
+                onVisibleChange={this.toggleOption}
+                trigger="click"
+            >
+                {this.renderOpenBtn()}
+            </Popover>
+        );
+    }
+}
\ No newline at end of file

components/DataView/popoverFilter/styles.less

+@import "~@/theme/common";
+
+.popover {
+    :global(.ant-popover-inner-content) {
+        padding: 0;
+    }
+
+    :global(.ant-popover-title) {
+        padding: 14px 16px;
+    }
+}
+
+.operateContainer {
+    cursor: pointer;
+    text-align: center;
+    padding: 5px 8px;
+    border-radius: 2px;
+
+    &:hover {
+        background: #F6F6F6;
+    }
+
+    .operateIcon {
+        width: 14px;
+        height: 12px;
+        margin-right: 3px;
+    }
+
+    .operateName {
+        font-size: 14px;
+        font-weight: 400;
+        color: @textPrimaryColor;
+    }
+
+    &:hover {
+        background: #F6F6F6;
+    }
+
+    &.selected {
+        background: @primaryColor;
+    }
+}
+
+.optionsModal {
+   width: 520px;
+    padding-top: 10px;
+.content{
+    min-height: 200px;
+    padding-right: 16px;
+}
+    .optionList {
+        max-height: 300px;
+        overflow: auto;
+
+        .optionItem {
+            padding: 0 10px;
+            margin-bottom: 5px;
+            cursor: pointer;
+
+            .optionName {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .btns {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 16px;
+        border-top: 1px solid #ECECECFF ;
+        .btn {
+            width: 80px;
+            height: 32px;
+            font-size: 12px;
+            cursor: pointer;
+            &:last-child {
+               margin-left: 16px;
+            }
+        }
+    }
+}

components/IconFont/IconFont.js

+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+    scriptUrl: '//at.alicdn.com/t/font_1509781_pkjtz0jd3g.js',
+});
+
+export default IconFont;

components/IconFont/index.js

+import React from 'react';
+import { Icon } from 'antd';
+import IconFont from './IconFont';
+import styles from './styles.less';
+
+const CustomIcon = props => {
+    const { type, iconFontType } = props;
+    const isHttp = /^((https|http)?:\/\/)[^\s]+/.test(type);
+    if (iconFontType) {
+        return <IconFont type={iconFontType} />
+    }
+    return isHttp ? <img src={type} alt="icon" className={`${styles.iconCls}`} /> : <Icon type={type} />
+
+};
+export default CustomIcon
\ No newline at end of file

components/IconFont/styles.less

+.iconCls{
+    // width: 20px;
+    height: 20px;
+    line-height: 20px;
+}

components/SearchView/index.less

@@ -24,7 +24,9 @@
         .colWrap {
             display: inline-block;
             vertical-align: middle;
-
+            &._1 {
+                width: 100%;
+            }
             &._2 {
                 width: 50%;
             }
@@ -81,6 +83,9 @@
             }
         }
     }
+    .modalRowWrap{
+        margin-bottom: 0px;
+    }
 }
 
 .chooseAll {
@@ -89,3 +94,11 @@
     //background-color: blue;
     //border-top: 1px solid red;
 }
+.formItem{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    :global .ant-form-item-control{
+        line-height: 1.2;
+    }
+}
\ No newline at end of file