Skip to content

S
submodule
Commit b6ccbba4 authored by caichuanming's avatar caichuanming
Browse files
Options

将searchview移动到submodule

parent 55e511f0
Hide whitespace changes
Inline Side-by-side
Showing with 498 additions and 21 deletions
components/DataView/index.js
View file @ b6ccbba4
/* eslint-disable */
// 库/框架 // 库/框架
import React, { Component } from 'react'; import React from 'react';
// 组件 // 第三方库
import { Modal, message } from 'antd'; import { Modal, message } from 'antd';
import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import SearchView from '@/components/SearchView'; import _ from 'lodash';
import FormFilterBtn from '@/components/form-FilterButton2'; // ant_components 组件
import SelfPagination from '@/components/SelfPagination';
import BITable from '@/ant_components/BITable'; import BITable from '@/ant_components/BITable';
import BIButton from '@/ant_components/BIButton'; 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 ButtonAuth from '@/components/AuthButton';
import IconFont from '@/components/CustomIcon/IconFont'; import IconFont from '@/components/CustomIcon/IconFont';
// 样式 // 样式
import s from './index.less'; import styles from './index.less';
// 工具 // 工具
import antiAssign from '@/utils/anti-assign'; import antiAssign from '@/utils/anti-assign';
import { DATE_FORMAT, PAGINATION } from '@/utils/constants'; import { DATE_FORMAT, PAGINATION } from '@/utils/constants';
...@@ -254,7 +254,7 @@ function removeItem(formData, removedItem) { ...@@ -254,7 +254,7 @@ function removeItem(formData, removedItem) {
} }
// 基础数据视图 // 基础数据视图
export default class DataView extends Component { export default class DataView extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const { const {
...@@ -640,7 +640,7 @@ export default class DataView extends Component { ...@@ -640,7 +640,7 @@ export default class DataView extends Component {
const { tips } = this.props; const { tips } = this.props;
if (tips) { if (tips) {
return ( return (
<div className={s.tips}> <div className={styles.tips}>
{tips} {tips}
{this._renderBtns()} {this._renderBtns()}
</div> </div>
...@@ -658,7 +658,7 @@ export default class DataView extends Component { ...@@ -658,7 +658,7 @@ export default class DataView extends Component {
btns = btns.concat([{ label: '删除', onClick: this.del.bind(this) }]); btns = btns.concat([{ label: '删除', onClick: this.del.bind(this) }]);
} }
return ( return (
<div className={s.row}> <div className={styles.row}>
{btns.map((item, i) => { {btns.map((item, i) => {
const { label, onClick, authority, download, iconBtnSrc, type } = item; const { label, onClick, authority, download, iconBtnSrc, type } = item;
const style = { const style = {
...@@ -675,16 +675,16 @@ export default class DataView extends Component { ...@@ -675,16 +675,16 @@ export default class DataView extends Component {
<BIButton <BIButton
style={style} style={style}
key={i} key={i}
className={s.btn} className={styles.btn}
onClick={item.type === 'del' ? this.del.bind(this, label, onClick) : onClick} onClick={item.type === 'del' ? this.del.bind(this, label, onClick) : onClick}
{...antiAssign(item, 'label,onClick,type,iconBtnSrc')} {...antiAssign(item, 'label,onClick,type,iconBtnSrc')}
> >
{iconBtnSrc && iconBtnSrc !== '' ? ( {iconBtnSrc && iconBtnSrc !== '' ? (
<IconFont className={s.iconCls} type={iconBtnSrc} /> <IconFont className={styles.iconCls} type={iconBtnSrc} />
) : ( ) : (
<IconFont className={s.iconCls} type="iconxinzeng" /> <IconFont className={styles.iconCls} type="iconxinzeng" />
)} )}
<span className={s.titleCls}>{label}</span> <span className={styles.titleCls}>{label}</span>
</BIButton> </BIButton>
)} )}
</ButtonAuth> </ButtonAuth>
...@@ -723,7 +723,7 @@ export default class DataView extends Component { ...@@ -723,7 +723,7 @@ export default class DataView extends Component {
rowSelection = rowSelectionConfig; rowSelection = rowSelectionConfig;
} }
const commonProps = { const commonProps = {
className: s.table, className: styles.table,
rowKey, rowKey,
rowSelection, rowSelection,
columns: cols, columns: cols,
...@@ -776,11 +776,11 @@ export default class DataView extends Component { ...@@ -776,11 +776,11 @@ export default class DataView extends Component {
const { style, hideForm, tips } = this.props; const { style, hideForm, tips } = this.props;
const { loading } = this.state; const { loading } = this.state;
return ( return (
<div className={s.view} style={style}> <div className={styles.view} style={style}>
<BISpin spinning={loading}> <BISpin spinning={loading}>
{hideForm ? null : ( {hideForm ? null : (
<> <>
<div className={s.formWrap}> <div className={styles.formWrap}>
{/* 筛选条件 */} {/* 筛选条件 */}
{this._renderSearchForm()} {this._renderSearchForm()}
{/* 高级搜索 */} {/* 高级搜索 */}
...@@ -788,10 +788,10 @@ export default class DataView extends Component { ...@@ -788,10 +788,10 @@ export default class DataView extends Component {
{/* 已选条件、搜索按钮 */} {/* 已选条件、搜索按钮 */}
{this._renderFilterBtn()} {this._renderFilterBtn()}
</div> </div>
<div className={s.split} /> <div className={styles.split} />
</> </>
)} )}
<div className={s.tableWrap}> <div className={styles.tableWrap}>
{tips ? this._renderTips() : this._renderBtns()} {tips ? this._renderTips() : this._renderBtns()}
{this._renderData()} {this._renderData()}
{this._renderPagination()} {this._renderPagination()}
......
components/SearchView/index.js 0 → 100644
View file @ b6ccbba4
// 库/框架
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 (
<BISelect
{...componentAttr}
className={className || styles.itemContent}
style={style || { width: '250px' }}
placeholder={placeholder || '请选择'}
disabled={disabled}
dropdownRender={
componentAttr.dropdownStatus
? (menu) => {
return (
<div>
<div>
<BIButton
type="link"
onClick={() => {
this.props.form.setFieldsValue({
[`${key}`]: options.map((item) => {
return `${item.id}`;
}),
});
}}
onMouseDown={(e) => {
e.preventDefault();
}}
>
全选
</BIButton>
{/* 反选功能 */}
{/* <BIButton
type="link"
onClick={e => {
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();
}}
>
反选
</BIButton> */}
</div>
{menu}
</div>
);
}
: undefined
}
dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null}
>
{options.map((option) => {
return (
<BISelect.Option value={option.id} key={option.id}>
{option.name}
</BISelect.Option>
);
})}
</BISelect>
);
case 'selectMult':
return (
<BISelect
{...componentAttr}
className={className || styles.itemContent}
mode="multiple"
placeholder={placeholder || '请选择'}
disabled={disabled}
>
{options.map((option) => {
return (
<BISelect.Option value={option.id} key={option.id}>
{option.name}
</BISelect.Option>
);
})}
</BISelect>
);
case 'radio':
return (
<BIRadio {...componentAttr} className={className || styles.itemContent} disabled={disabled}>
{options.map((option) => {
return (
<BIRadio.Radio value={option.id} key={option.id}>
{option.name}
</BIRadio.Radio>
);
})}
</BIRadio>
);
case 'checkbox':
return (
<BICheckbox
{...componentAttr}
className={[className || styles.itemContent, styles.checkboxContainer]}
disabled={disabled}
>
{options.map((option) => {
return (
<div className={styles.checkbox} key={option.id}>
<BICheckbox.Checkbox value={option.id} key={option.id}>
{option.name}
</BICheckbox.Checkbox>
</div>
);
})}
</BICheckbox>
);
case 'date':
return (
<BIDatePicker
{...componentAttr}
className={className || styles.itemContent}
placeholder={placeholder}
disabled={disabled}
/>
);
case 'datetime':
return (
<BIDatePicker
{...componentAttr}
placeholder={placeholder}
className={className || styles.itemContent}
showTime
disabled={disabled}
/>
);
case 'daterange':
return (
<BIDatePicker.BIRangePicker
{...componentAttr}
placeholder={placeholder}
onCalendarChange={this.changeRange.bind(this, col.key)}
className={className || styles.itemContent}
disabled={disabled}
/>
);
case 'daterangetime':
return (
<BIDatePicker.BIRangePicker
{...componentAttr}
placeholder={placeholder}
onCalendarChange={this.changeRange.bind(this, col.key)}
showTime
className={className || styles.itemContent}
disabled={disabled}
/>
);
case 'orgtree':
return (
<OrgTreeSelect
{...componentAttr}
placeholder={placeholder}
className={className || styles.itemContent}
disabled={disabled}
mode="org"
/>
);
case 'usertree':
return (
<OrgTreeSelect
{...componentAttr}
placeholder={placeholder}
className={className || styles.itemContent}
disabled={disabled}
mode="user"
/>
);
case 'associationSearch':
return (
<AssociationSearch
{...componentAttr}
placeholder={placeholder}
className={className || styles.itemContent}
disabled={disabled}
dropdownRender={
componentAttr.dropdownStatus
? (menu) => {
return (
<div>
<div>
<BIButton
type="link"
onClick={async () => {
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();
}}
>
全选
</BIButton>
</div>
{menu}
</div>
);
}
: undefined
}
dropdownMenuStyle={componentAttr.dropdownStatus ? { borderTop: '1px solid #E1E1E1' } : null}
/>
);
case 'associationSearchFilter':
return (
<AssociationSearchFilter
{...componentAttr}
placeholder={placeholder}
getPopupContainer={(triggerNode) => {
return triggerNode.parentNode;
}}
className={className || styles.itemContent}
disabled={disabled}
/>
);
case 'numberRange':
return (
<NumberRange
{...componentAttr}
placeholder={placeholder}
className={className || styles.itemContent}
disabled={disabled}
/>
);
case 'custom':
return render(this.props.form);
case 'tag':
return (
<TreeSelect
{...componentAttr}
placeholder={placeholder}
className={className || styles.itemContent}
treeDefaultExpandAll
/>
);
case 'search':
return (
<BIInput.Search
{...componentAttr}
className={className || styles.itemContent}
placeholder={placeholder}
disabled={disabled}
/>
);
// case 'advancedSearch':
// return (
// <AdvancedSearch
// {...componentAttr}
// className={className || styles.itemContent}
// />
// );
default:
return (
<BIInput
{...componentAttr}
className={className || styles.itemContent}
placeholder={placeholder}
disabled={disabled}
/>
);
}
};
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 (
<div className={styles.colInner}>
{!!label && <div className={styles.label}>{label}</div>}
<div className={styles.itemWrap}>
<div className={className || styles.itemContent}>
{type === 'custom'
? this._renderItem(col)
: getFieldDecorator(key, checkOption)(this._renderItem(col))}
</div>
</div>
</div>
);
};
_renderRow = (arr, index) => {
const len = arr.length;
let colClass = styles.colWrap;
if (len > 1) {
colClass += ` ${styles[`_${len}`]}`;
}
return (
<div className={styles.rowWrap} key={index}>
{arr.map((col, i) => {
return (
<div className={colClass} key={i}>
{this._renderCol(col)}
</div>
);
})}
</div>
);
};
render() {
const { style, searchCols = [] } = this.props;
return (
<BIForm className={styles.view} style={style}>
{searchCols.map((arr, index) => {
return this._renderRow(arr, index);
})}
</BIForm>
);
}
}
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);
components/SearchView/index.less 0 → 100644
View file @ b6ccbba4
@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;
}
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