From c55d6a03e73e0795841a377ed19e0976b6a5cce3 Mon Sep 17 00:00:00 2001 From: caichuanming Date: Sat, 8 Feb 2020 21:59:07 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E7=BA=A7=E6=90=9C=E7=B4=A2=E8=BF=81?= =?UTF-8?q?=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AdvancedSearch/index.js | 130 ++++++++++++++++++++++ components/AdvancedSearch/index.less | 95 ++++++++++++++++ components/AdvancedSearchItem/index.js | 133 +++++++++++++++++++++++ components/AdvancedSearchItem/index.less | 51 +++++++++ components/AdvancedSearchLine/index.js | 21 ++++ components/AdvancedSearchLine/index.less | 0 components/SearchView/index.js | 1 + 7 files changed, 431 insertions(+) create mode 100644 components/AdvancedSearch/index.js create mode 100644 components/AdvancedSearch/index.less create mode 100644 components/AdvancedSearchItem/index.js create mode 100644 components/AdvancedSearchItem/index.less create mode 100644 components/AdvancedSearchLine/index.js create mode 100644 components/AdvancedSearchLine/index.less diff --git a/components/AdvancedSearch/index.js b/components/AdvancedSearch/index.js new file mode 100644 index 0000000..a67f3a6 --- /dev/null +++ b/components/AdvancedSearch/index.js @@ -0,0 +1,130 @@ +/* eslint-disable */ + +import React from 'react'; +import { Collapse } from 'antd'; +import styles from './index.less'; +import IconFont from '@/components/CustomIcon/IconFont'; +import AssociationSearch from '@/components/associationSearch'; +import AdvancedSearchItem from '@/components/AdvancedSearchItem'; + +class AdvancedSearch extends React.Component { + constructor(props) { + super(props); + this.advancedItem = React.createRef(); + this.state = { + collapseStatus: false, + advancedTerm: [ + { + label: null, + value: null, + }, + ], + advancedForm: [ + { + type: [], + field: [], + advancedType: '', + }, + ], + }; + } + + // TODO: 切换筛选类型 + onChangeType = () => { + // TODO: 清空筛选条件 + }; + + // 切换筛选条件 + onChangeTerm = (data) => { + this.setState({ + advancedForm: data, + }); + }; + + // 添加筛选条件 + addTerm() { + const { advancedForm } = this.state; + const result = advancedForm; + result.push({ + type: [], + field: [], + advancedType: '', + }); + this.setState({ + advancedForm: result, + }); + } + + // 隐藏区显隐 + changeCollapse() { + const { collapseStatus } = this.state; + this.setState({ + collapseStatus: !collapseStatus, + }); + } + + render() { + const { approval } = this.props; + const { collapseStatus, advancedForm } = this.state; + return ( + + { + return this.changeCollapse(); + }} + > + 高级搜索 + + + } + > +
+ {/* 审批事项 */} + {approval && ( +
+
+
审批事项:
+
+ +
+
+
+ )} + {/* 搜索字段 */} +
+
+
搜索字段:
+
+ +
+
+ { + return this.addTerm(); + }} + > + + 添加 + +
+
+ + + ); + } +} +export default AdvancedSearch; diff --git a/components/AdvancedSearch/index.less b/components/AdvancedSearch/index.less new file mode 100644 index 0000000..2ec7f46 --- /dev/null +++ b/components/AdvancedSearch/index.less @@ -0,0 +1,95 @@ +.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; + &.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; +} +.termLine { + display: flex; + justify-content: flex-start; + align-items: flex-start; + margin-bottom: 20px; + .termLabel { + width: 66px; + height: 32px; + margin-right: 25px; + text-align: right; + line-height: 32px; + } + .termCont { + flex: 1; + .termContext { + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + } + .termHead { + width: 300px; + margin-right: 20px; + } + .termBody { + width: 450px; + } + .termDelete { + width: 20px; + height: 20px; + position: relative; + margin-left: 10px; + cursor: pointer; + &:before { + content: ''; + display: block; + width: 2px; + height: 15px; + background-color: #8c97a3; + transform: translate(-50%, -50%) rotate(45deg); + position: absolute; + top: 50%; + left: 50%; + } + &:after { + content: ''; + display: block; + width: 2px; + height: 15px; + background-color: #8c97a3; + transform: translate(-50%, -50%) rotate(-45deg); + position: absolute; + top: 50%; + left: 50%; + } + } + } +} +.btnAddTerm { + display: inline-block; + margin-left: 98px; + color: #04b4ad; + cursor: pointer; + .btnAddTermIcon { + font-size: 9px; + margin-right: 3px; + } +} diff --git a/components/AdvancedSearchItem/index.js b/components/AdvancedSearchItem/index.js new file mode 100644 index 0000000..2d643c9 --- /dev/null +++ b/components/AdvancedSearchItem/index.js @@ -0,0 +1,133 @@ +/* eslint-disable */ +/* + * @Author: CaiChuanming + * @Date: 2020-01-14 11:28:09 + * @LastEditTime : 2020-01-16 15:39:18 + * @LastEditors : Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /admin_web/src/components/AdvancedSearchItem/index.js + */ +import React from 'react'; +import styles from './index.less'; +import BISelect from '@/ant_components/BISelect'; +import BIInput from '@/ant_components/BIInput'; +import { switchCase } from '@babel/types'; +import BIDatePicker from '@/ant_components/BIDatePicker'; + +// 测试数据 +const searchEnum = [ + { + value: '1', + label: 'input', + advancedType: 'input', + }, + { + value: '2', + label: '模糊搜索', + advancedType: 'search', + }, + { + value: '3', + label: '复选框', + advancedType: 'checkbox', + }, + { + value: '4', + label: '单选框', + advancedType: 'radio', + }, + { + value: '5', + label: '时间', + advancedType: 'data', + }, +]; + +class AdvancedSearchItem extends React.Component { + constructor(props) { + super(props); + } + + // 删除筛选条件 + removeTerm = (index) => { + const { onChangeTermFn, advancedForm } = this.props; + if (advancedForm.length < 2) { + return; + } + advancedForm.splice(index, 1); + onChangeTermFn(advancedForm); + }; + + // 切换筛选条件 + onChangeTerm = (values = {}, all = {}, index) => { + const { onChangeTermFn, advancedForm } = this.props; + let result = null; + if (Object.keys(values).length !== 0) { + const typeIndex = searchEnum.findIndex((item) => values.key === item.value); + result = Object.assign({}, all, { type: values, advancedType: searchEnum[typeIndex].advancedType }); + } else { + result = Object.assign({}, all, { type: [] }); + } + advancedForm.splice(index, 1, result); + onChangeTermFn(advancedForm); + }; + + // 根据类型展示搜索字段 + advancedItem = (advancedType) => { + switch (advancedType) { + case 'input': + return ; + case 'search': + return 'search'; + case 'checkbox': + return 'checkbox'; + case 'radio': + return 'radio'; + case 'data': + return ; + default: + return null; + } + }; + + advancedRender = () => { + const { advancedForm } = this.props; + return advancedForm.map((item, index) => ( +
+ {/* 搜索条件 */} + { + this.onChangeTerm(values, item, index); + }} + > + {searchEnum.map((cItem) => { + return {cItem.label}; + })} + + {this.advancedItem(item.advancedType)} + {/* 删除 */} + {advancedForm.length > 1 && ( +
{ + return this.removeTerm(index); + }} + className={styles.termDelete} + /> + )} +
+ )); + }; + + render() { + return
{this.advancedRender()}
; + } +} +export default AdvancedSearchItem; diff --git a/components/AdvancedSearchItem/index.less b/components/AdvancedSearchItem/index.less new file mode 100644 index 0000000..812a60f --- /dev/null +++ b/components/AdvancedSearchItem/index.less @@ -0,0 +1,51 @@ +.termContext { + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + &:hover { + .termDelete { + display: block; + } + } +} +.termHead { + width: 300px; + margin-right: 20px; +} +.termBody { + width: 450px; +} +.termDelete { + width: 20px; + height: 20px; + position: relative; + margin-left: 10px; + cursor: pointer; + display: none; + &:before { + content: ''; + display: block; + width: 2px; + height: 15px; + background-color: #8c97a3; + transform: translate(-50%, -50%) rotate(45deg); + position: absolute; + top: 50%; + left: 50%; + } + &:after { + content: ''; + display: block; + width: 2px; + height: 15px; + background-color: #8c97a3; + transform: translate(-50%, -50%) rotate(-45deg); + position: absolute; + top: 50%; + left: 50%; + } +} diff --git a/components/AdvancedSearchLine/index.js b/components/AdvancedSearchLine/index.js new file mode 100644 index 0000000..0cd4fb0 --- /dev/null +++ b/components/AdvancedSearchLine/index.js @@ -0,0 +1,21 @@ +/* eslint-disable */ +/* + * @Author: CaiChuanming + * @Date: 2020-01-14 11:28:09 + * @LastEditTime : 2020-01-14 15:47:55 + * @LastEditors : Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /admin_web/src/components/AdvancedSearchLine/index.js + */ +import React from 'react'; + +class AdvancedSearchLine extends React.Component { + constructor(props) { + super(props); + } + + render() { + return
111
; + } +} +export default AdvancedSearchLine; diff --git a/components/AdvancedSearchLine/index.less b/components/AdvancedSearchLine/index.less new file mode 100644 index 0000000..e69de29 diff --git a/components/SearchView/index.js b/components/SearchView/index.js index 9a98e42..0d89d46 100644 --- a/components/SearchView/index.js +++ b/components/SearchView/index.js @@ -358,6 +358,7 @@ class SearchView extends React.Component { {searchCols.map((arr, index) => { return this._renderRow(arr, index); })} +

高级搜索

); } -- 2.21.0