Skip to content

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

修改组件

parent 9519098f
Hide whitespace changes
Inline Side-by-side
Showing with 1 addition and 457 deletions
components/DataView/filterModal/index.js deleted 100644 → 0
View file @ 9519098f
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 deleted 100644 → 0
View file @ 9519098f
.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 deleted 100644 → 0
View file @ 9519098f
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 deleted 100644 → 0
View file @ 9519098f
@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 deleted 100644 → 0
View file @ 9519098f
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 deleted 100644 → 0
View file @ 9519098f
@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/SearchView/index.js
View file @ e09c80d6
...@@ -331,9 +331,7 @@ class SearchView extends React.Component { ...@@ -331,9 +331,7 @@ class SearchView extends React.Component {
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
return ( return (
<Form.Item label={label} className={styles.formItem} key={key}> <Form.Item label={label} className={styles.formItem} key={key}>
{type === 'custom' {getFieldDecorator(key, checkOption)(this._renderItem(col))}
? this._renderItem(col)
: getFieldDecorator(key, checkOption)(this._renderItem(col))}
</Form.Item> </Form.Item>
) )
......
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