Skip to content

S
submodule
Commit 951b8691 authored by 满振华's avatar 满振华
Browse files
Options

修改组件

parent 8bb96a89
Hide whitespace changes
Inline Side-by-side
Showing with 591 additions and 59 deletions
components/DataView/filterModal/index.js 0 → 100644
View file @ 951b8691
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 0 → 100644
View file @ 951b8691
.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 0 → 100644
View file @ 951b8691
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 0 → 100644
View file @ 951b8691
@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 0 → 100644
View file @ 951b8691
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 0 → 100644
View file @ 951b8691
@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 0 → 100755
View file @ 951b8691
import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1509781_pkjtz0jd3g.js',
});
export default IconFont;
components/IconFont/index.js 0 → 100644
View file @ 951b8691
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 0 → 100644
View file @ 951b8691
.iconCls{
// width: 20px;
height: 20px;
line-height: 20px;
}
components/SearchView/index.js
View file @ 951b8691
// 库/框架 // 库/框架
import React from 'react'; import React from 'react';
import classnames from 'classnames';
// 第三方组件 // 第三方组件
import { Form, TreeSelect } from 'antd'; import { Form, TreeSelect, Row, Col } from 'antd';
// ant_components // ant_components
import BIInput from '@/ant_components/BIInput'; import BIInput from '@/ant_components/BIInput';
import BISelect from '@/ant_components/BISelect'; import BISelect from '@/ant_components/BISelect';
...@@ -21,6 +22,19 @@ import styles from './index.less'; ...@@ -21,6 +22,19 @@ import styles from './index.less';
// 工具 // 工具
/* eslint-disable no-underscore-dangle */ /* eslint-disable no-underscore-dangle */
// 基础搜索组件 // 基础搜索组件
// mode分为page 为页面模式下的搜索框, modal 弹框模式下搜索组件
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
};
class SearchView extends React.Component { class SearchView extends React.Component {
_renderItem = (col) => { _renderItem = (col) => {
const { type, placeholder, options = [], style, disabled, className, render, componentAttr = {}, key } = col; const { type, placeholder, options = [], style, disabled, className, render, componentAttr = {}, key } = col;
...@@ -36,26 +50,26 @@ class SearchView extends React.Component { ...@@ -36,26 +50,26 @@ class SearchView extends React.Component {
dropdownRender={ dropdownRender={
componentAttr.dropdownStatus componentAttr.dropdownStatus
? (menu) => { ? (menu) => {
return ( return (
<div> <div>
<div> <div>
<BIButton <BIButton
type="link" type="link"
onClick={() => { onClick={() => {
this.props.form.setFieldsValue({ this.props.form.setFieldsValue({
[`${key}`]: options.map((item) => { [`${key}`]: options.map((item) => {
return `${item.id}`; return `${item.id}`;
}), }),
}); });
}} }}
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
> >
全选 全选
</BIButton> </BIButton>
{/* 反选功能 */} {/* 反选功能 */}
{/* <BIButton {/* <BIButton
type="link" type="link"
onClick={e => { onClick={e => {
const result = const result =
...@@ -75,11 +89,11 @@ class SearchView extends React.Component { ...@@ -75,11 +89,11 @@ class SearchView extends React.Component {
> >
反选 反选
</BIButton> */} </BIButton> */}
</div> </div>
{menu} {menu}
</div> </div>
); );
} }
: undefined : undefined
} }
dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null} dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null}
...@@ -211,34 +225,34 @@ class SearchView extends React.Component { ...@@ -211,34 +225,34 @@ class SearchView extends React.Component {
dropdownRender={ dropdownRender={
componentAttr.dropdownStatus componentAttr.dropdownStatus
? (menu) => { ? (menu) => {
return ( return (
<div> <div>
<div> <div>
<BIButton <BIButton
type="link" type="link"
onClick={async () => { onClick={async () => {
const res = await componentAttr.request(); const res = await componentAttr.request();
const result = res.data.list.map((item) => { const result = res.data.list.map((item) => {
return { return {
value: item.index, value: item.index,
label: item.value, label: item.value,
}; };
}); });
this.props.form.setFieldsValue({ this.props.form.setFieldsValue({
[`${key}`]: result, [`${key}`]: result,
}); });
}} }}
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
> >
全选 全选
</BIButton> </BIButton>
</div> </div>
{menu} {menu}
</div> </div>
); );
} }
: undefined : undefined
} }
dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null} dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null}
...@@ -312,6 +326,18 @@ class SearchView extends React.Component { ...@@ -312,6 +326,18 @@ class SearchView extends React.Component {
newData[key] = dates; newData[key] = dates;
this.props.form.setFieldsValue(newData); this.props.form.setFieldsValue(newData);
}; };
_renderModalForm = (col) => {
const { label, type, key, checkOption = [], className } = col;
const { getFieldDecorator } = this.props.form;
return (
<Form.Item label={label} className={styles.formItem} key={key}>
{type === 'custom'
? this._renderItem(col)
: getFieldDecorator(key, checkOption)(this._renderItem(col))}
</Form.Item>
)
}
_renderCol = (col) => { _renderCol = (col) => {
const { label, type, key, checkOption, className } = col; const { label, type, key, checkOption, className } = col;
...@@ -319,6 +345,10 @@ class SearchView extends React.Component { ...@@ -319,6 +345,10 @@ class SearchView extends React.Component {
if (!key && type !== 'custom') { if (!key && type !== 'custom') {
return null; return null;
} }
if (this.props.modal === 'modal') {
return this._renderModalForm(col);
}
return ( return (
<div className={styles.colInner}> <div className={styles.colInner}>
{!!label && <div className={styles.label}>{label}</div>} {!!label && <div className={styles.label}>{label}</div>}
...@@ -336,11 +366,11 @@ class SearchView extends React.Component { ...@@ -336,11 +366,11 @@ class SearchView extends React.Component {
_renderRow = (arr, index) => { _renderRow = (arr, index) => {
const len = arr.length; const len = arr.length;
let colClass = styles.colWrap; let colClass = styles.colWrap;
if (len > 1) { if (len > 0) {
colClass += ` ${styles[`_${len}`]}`; colClass += ` ${styles[`_${len}`]}`;
} }
return ( return (
<div className={styles.rowWrap} key={index}> <div className={classnames(styles.rowWrap, this.props.modal === 'modal' ? styles.modalRowWrap : '')} key={index}>
{arr.map((col, i) => { {arr.map((col, i) => {
return ( return (
<div className={colClass} key={i}> <div className={colClass} key={i}>
...@@ -351,14 +381,22 @@ class SearchView extends React.Component { ...@@ -351,14 +381,22 @@ class SearchView extends React.Component {
</div> </div>
); );
}; };
/**
* 弹框模式下渲染数据,使用以为数组,平铺展示
*/
_renderModalItem = (col = {}) => {
if (Object.prototype.toString.call(col) !== '[object Object]') return null;
return this._renderModalForm(col)
}
render() { render() {
const { style, searchCols = [], advancedSearchCols = [] } = this.props; const { style, searchCols = [], advancedSearchCols = [], modal } = this.props;
return ( return (
<BIForm className={styles.view} style={style}> <BIForm className={styles.view} {...(this.props.formItemLayout || formItemLayout)} style={style}>
{/* 基础搜索 */} {/* 基础搜索 modal模式下为对象,非modal下为数组 */}
{searchCols.map((arr, index) => { {searchCols.map((arr, index) => {
return this._renderRow(arr, index); return modal === 'modal' ? this._renderModalItem(arr) : this._renderRow(arr, index);
})} })}
{/* 高级搜索 */} {/* 高级搜索 */}
{Array.isArray(advancedSearchCols) && advancedSearchCols.length > 0 ? ( {Array.isArray(advancedSearchCols) && advancedSearchCols.length > 0 ? (
......
components/SearchView/index.less
View file @ 951b8691
...@@ -24,7 +24,9 @@ ...@@ -24,7 +24,9 @@
.colWrap { .colWrap {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&._1 {
width: 100%;
}
&._2 { &._2 {
width: 50%; width: 50%;
} }
...@@ -81,6 +83,9 @@ ...@@ -81,6 +83,9 @@
} }
} }
} }
.modalRowWrap{
margin-bottom: 0px;
}
} }
.chooseAll { .chooseAll {
...@@ -89,3 +94,11 @@ ...@@ -89,3 +94,11 @@
//background-color: blue; //background-color: blue;
//border-top: 1px solid red; //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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment