From b6ccbba48be8f9c0da9db43c6b1bb838a032ba0a Mon Sep 17 00:00:00 2001 From: caichuanming Date: Thu, 6 Feb 2020 23:19:12 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86searchview=E7=A7=BB=E5=8A=A8=E5=88=B0s?= =?UTF-8?q?ubmodule?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DataView/index.js | 42 ++-- components/SearchView/index.js | 386 +++++++++++++++++++++++++++++++ components/SearchView/index.less | 91 ++++++++ 3 files changed, 498 insertions(+), 21 deletions(-) create mode 100644 components/SearchView/index.js create mode 100644 components/SearchView/index.less diff --git a/components/DataView/index.js b/components/DataView/index.js index f76066a..698967a 100644 --- a/components/DataView/index.js +++ b/components/DataView/index.js @@ -1,20 +1,20 @@ -/* eslint-disable */ // 库/框架 -import React, { Component } from 'react'; -// 组件 +import React from 'react'; +// 第三方库 import { Modal, message } from 'antd'; -import _ from 'lodash'; import moment from 'moment'; -import SearchView from '@/components/SearchView'; -import FormFilterBtn from '@/components/form-FilterButton2'; -import SelfPagination from '@/components/SelfPagination'; +import _ from 'lodash'; +// ant_components 组件 import BITable from '@/ant_components/BITable'; import BIButton from '@/ant_components/BIButton'; +// 自定义组件 +import SearchView from '@/submodule/components/SearchView'; +import FormFilterBtn from '@/components/form-FilterButton2'; +import SelfPagination from '@/components/SelfPagination'; import ButtonAuth from '@/components/AuthButton'; import IconFont from '@/components/CustomIcon/IconFont'; - // 样式 -import s from './index.less'; +import styles from './index.less'; // 工具 import antiAssign from '@/utils/anti-assign'; import { DATE_FORMAT, PAGINATION } from '@/utils/constants'; @@ -254,7 +254,7 @@ function removeItem(formData, removedItem) { } // 基础数据视图 -export default class DataView extends Component { +export default class DataView extends React.Component { constructor(props) { super(props); const { @@ -640,7 +640,7 @@ export default class DataView extends Component { const { tips } = this.props; if (tips) { return ( -
+
{tips} {this._renderBtns()}
@@ -658,7 +658,7 @@ export default class DataView extends Component { btns = btns.concat([{ label: '删除', onClick: this.del.bind(this) }]); } return ( -
+
{btns.map((item, i) => { const { label, onClick, authority, download, iconBtnSrc, type } = item; const style = { @@ -675,16 +675,16 @@ export default class DataView extends Component { {iconBtnSrc && iconBtnSrc !== '' ? ( - + ) : ( - + )} - {label} + {label} )} @@ -723,7 +723,7 @@ export default class DataView extends Component { rowSelection = rowSelectionConfig; } const commonProps = { - className: s.table, + className: styles.table, rowKey, rowSelection, columns: cols, @@ -776,11 +776,11 @@ export default class DataView extends Component { const { style, hideForm, tips } = this.props; const { loading } = this.state; return ( -
+
{hideForm ? null : ( <> -
+
{/* 筛选条件 */} {this._renderSearchForm()} {/* 高级搜索 */} @@ -788,10 +788,10 @@ export default class DataView extends Component { {/* 已选条件、搜索按钮 */} {this._renderFilterBtn()}
-
+
)} -
+
{tips ? this._renderTips() : this._renderBtns()} {this._renderData()} {this._renderPagination()} diff --git a/components/SearchView/index.js b/components/SearchView/index.js new file mode 100644 index 0000000..9a98e42 --- /dev/null +++ b/components/SearchView/index.js @@ -0,0 +1,386 @@ +// 库/框架 +import React from 'react'; +// 第三方组件 +import { Form, TreeSelect } from 'antd'; +// ant_components +import BIInput from '@/ant_components/BIInput'; +import BISelect from '@/ant_components/BISelect'; +import BIButton from '@/ant_components/BIButton'; +import BIRadio from '@/ant_components/BIRadio'; +import BIDatePicker from '@/ant_components/BIDatePicker'; +import BICheckbox from '@/ant_components/BICheckbox'; +import BIForm from '@/ant_components/BIForm'; +// components +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 styles from './index.less'; +// 工具 +/* eslint-disable no-underscore-dangle */ +// 基础搜索组件 +class SearchView extends React.Component { + _renderItem = (col) => { + const { type, placeholder, options = [], style, disabled, className, render, componentAttr = {}, key } = col; + switch (type) { + case 'select': + return ( + { + return ( +
+
+ { + this.props.form.setFieldsValue({ + [`${key}`]: options.map((item) => { + return `${item.id}`; + }), + }); + }} + onMouseDown={(e) => { + e.preventDefault(); + }} + > + 全选 + + {/* 反选功能 */} + {/* { + const result = + this.props.searchForm[`${key}`] || []; + const resultArr = options.filter( + item => result.indexOf(`${item.id}`) < 0, + ); + this.props.form.setFieldsValue({ + [`${key}`]: resultArr.map( + item => `${item.id}`, + ), + }); + }} + onMouseDown={e => { + e.preventDefault(); + }} + > + 反选 + */} +
+ {menu} +
+ ); + } + : undefined + } + dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null} + > + {options.map((option) => { + return ( + + {option.name} + + ); + })} + + ); + case 'selectMult': + return ( + + {options.map((option) => { + return ( + + {option.name} + + ); + })} + + ); + case 'radio': + return ( + + {options.map((option) => { + return ( + + {option.name} + + ); + })} + + ); + case 'checkbox': + return ( + + {options.map((option) => { + return ( +
+ + {option.name} + +
+ ); + })} + + ); + case 'date': + return ( + + ); + case 'datetime': + return ( + + ); + case 'daterange': + return ( + + ); + case 'daterangetime': + return ( + + ); + case 'orgtree': + return ( + + ); + case 'usertree': + return ( + + ); + case 'associationSearch': + return ( + { + return ( +
+
+ { + const res = await componentAttr.request(); + const result = res.data.list.map((item) => { + return { + value: item.index, + label: item.value, + }; + }); + this.props.form.setFieldsValue({ + [`${key}`]: result, + }); + }} + onMouseDown={(e) => { + e.preventDefault(); + }} + > + 全选 + +
+ {menu} +
+ ); + } + : undefined + } + dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null} + /> + ); + case 'associationSearchFilter': + return ( + { + return triggerNode.parentNode; + }} + className={className || styles.itemContent} + disabled={disabled} + /> + ); + case 'numberRange': + return ( + + ); + case 'custom': + return render(this.props.form); + case 'tag': + return ( + + ); + case 'search': + return ( + + ); + // case 'advancedSearch': + // return ( + // + // ); + default: + return ( + + ); + } + }; + + changeRange = (key, dates) => { + if (dates.length !== 2) { + return; + } + const newData = {}; + newData[key] = dates; + this.props.form.setFieldsValue(newData); + }; + + _renderCol = (col) => { + const { label, type, key, checkOption, className } = col; + const { getFieldDecorator } = this.props.form; + if (!key && type !== 'custom') { + return null; + } + return ( +
+ {!!label &&
{label}
} +
+
+ {type === 'custom' + ? this._renderItem(col) + : getFieldDecorator(key, checkOption)(this._renderItem(col))} +
+
+
+ ); + }; + + _renderRow = (arr, index) => { + const len = arr.length; + let colClass = styles.colWrap; + if (len > 1) { + colClass += ` ${styles[`_${len}`]}`; + } + return ( +
+ {arr.map((col, i) => { + return ( +
+ {this._renderCol(col)} +
+ ); + })} +
+ ); + }; + + render() { + const { style, searchCols = [] } = this.props; + return ( + + {searchCols.map((arr, index) => { + return this._renderRow(arr, index); + })} + + ); + } +} + +function mapPropsToFields(props) { + const { searchForm } = props; + const returnObj = {}; + if (!searchForm || typeof searchForm !== 'object') return returnObj; + Object.keys(searchForm).forEach((item) => { + let value = searchForm[item]; + if (Array.isArray(searchForm[item])) { + value = searchForm[item].slice(); + } + returnObj[item] = Form.createFormField({ + value, + }); + }); + return returnObj; +} + +function onValuesChange(props, changedValues, allValues) { + props.onChangeParams(props, changedValues, allValues); +} + +export default Form.create({ name: 'search_view', mapPropsToFields, onValuesChange })(SearchView); diff --git a/components/SearchView/index.less b/components/SearchView/index.less new file mode 100644 index 0000000..54371fa --- /dev/null +++ b/components/SearchView/index.less @@ -0,0 +1,91 @@ +@import '~@/theme/common'; + +@smallSpace: 4px; +@normalSpace: 16px; +.view { + :global(.ant-checkbox-wrapper) { + min-width: 116px; + margin-right: 10px; + color: @textSupplyColor; + } + + :global(.ant-select-selection) { + height: 32px; + overflow-y: auto; + } + + .rowWrap { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + + .colWrap { + display: inline-block; + vertical-align: middle; + + &._2 { + width: 50%; + } + + &._3 { + width: 33.33%; + } + + &._4 { + width: 25%; + } + + &._5 { + width: 20%; + } + + .colInner { + display: flex; + justify-content: flex-start; + align-items: flex-start; + + .label { + color: @textPrimaryColor; + margin-right: 25px; + width: 66px; + text-align: right; + } + + .itemWrap { + flex: 1; + + .itemContent { + //min-width: 230px; + //display: inline-block; + width: 100%; + margin-right: 20px; + } + .checkboxContainer { + display: flex; + flex-wrap: wrap; + margin-bottom: -20px; + } + .checkbox { + margin-bottom: 20px; + } + .searchBtnWrap { + display: inline-block; + + .searchBtn { + background: @primaryColor; + } + } + } + } + } + } +} + +.chooseAll { + //padding: 5px 0; + //display: block; + //background-color: blue; + //border-top: 1px solid red; +} -- 2.21.0