From 7b4bc017269f5f46e75de6a31ec2e90704636697 Mon Sep 17 00:00:00 2001 From: caichuanming Date: Sun, 9 Feb 2020 23:30:55 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E7=BA=A7=E6=90=9C=E7=B4=A2=20-=20?= =?UTF-8?q?=E4=B8=9A=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DataView/index.js | 6 ++- components/SearchView/index.js | 9 +++- components/SearchViewAdvanced/index.js | 63 ++++++++++++++++++++++++ components/SearchViewAdvanced/index.less | 25 ++++++++++ 4 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 components/SearchViewAdvanced/index.js create mode 100644 components/SearchViewAdvanced/index.less diff --git a/components/DataView/index.js b/components/DataView/index.js index 698967a..167cce8 100644 --- a/components/DataView/index.js +++ b/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 ( @@ -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); diff --git a/components/SearchView/index.js b/components/SearchView/index.js index 0d89d46..730e1b6 100644 --- a/components/SearchView/index.js +++ b/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 ( {searchCols.map((arr, index) => { return this._renderRow(arr, index); })} -

高级搜索

+ + {advancedCols.map((arr, index) => { + return this._renderRow(arr, index); + })} +
); } diff --git a/components/SearchViewAdvanced/index.js b/components/SearchViewAdvanced/index.js new file mode 100644 index 0000000..2e00b0e --- /dev/null +++ b/components/SearchViewAdvanced/index.js @@ -0,0 +1,63 @@ +/* + * @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 ( + + { + return this.changeCollapse(); + }} + > + 高级搜索 + + + } + > + {this.props.children} + + + ); + } +} +export default SearchViewAdvanced; diff --git a/components/SearchViewAdvanced/index.less b/components/SearchViewAdvanced/index.less new file mode 100644 index 0000000..27a6289 --- /dev/null +++ b/components/SearchViewAdvanced/index.less @@ -0,0 +1,25 @@ +.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; +} -- 2.21.0