Skip to content

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

高级搜索迁移

parent b6ccbba4
Show whitespace changes
Inline Side-by-side
Showing with 431 additions and 0 deletions
components/AdvancedSearch/index.js 0 → 100644
View file @ c55d6a03
/* 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 (
<Collapse bordered={false} defaultActiveKey={['1']}>
<Collapse.Panel
key="1"
style={{ border: 'none', paddingBottom: '20px' }}
showArrow={false}
header={
<div
className={styles.collapseTitle}
onClick={() => {
return this.changeCollapse();
}}
>
高级搜索
<IconFont
type="iconzhankaiicon"
className={`${styles.collapseIcon} ${collapseStatus ? styles.show : null}`}
/>
</div>
}
>
<div>
{/* 审批事项 */}
{approval && (
<div>
<div className={styles.termLine}>
<div className={styles.termLabel}>审批事项:</div>
<div className={styles.termCont}>
<AssociationSearch placeholder="请选择审批事项" className={styles.termHead} />
</div>
</div>
</div>
)}
{/* 搜索字段 */}
<div>
<div className={styles.termLine}>
<div className={styles.termLabel}>搜索字段:</div>
<div className={styles.termCont}>
<AdvancedSearchItem
ref={this.advancedItem}
advancedForm={advancedForm}
onChangeTermFn={this.onChangeTerm}
/>
</div>
</div>
<span
className={styles.btnAddTerm}
onClick={() => {
return this.addTerm();
}}
>
<IconFont type="iconxinzeng" className={styles.btnAddTermIcon} />
添加
</span>
</div>
</div>
</Collapse.Panel>
</Collapse>
);
}
}
export default AdvancedSearch;
components/AdvancedSearch/index.less 0 → 100644
View file @ c55d6a03
.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;
}
}
components/AdvancedSearchItem/index.js 0 → 100644
View file @ c55d6a03
/* 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 <BIInput className={styles.termBody} placeholder="请填写搜索条件" />;
case 'search':
return 'search';
case 'checkbox':
return 'checkbox';
case 'radio':
return 'radio';
case 'data':
return <BIDatePicker placeholder="请选择时间" showTime />;
default:
return null;
}
};
advancedRender = () => {
const { advancedForm } = this.props;
return advancedForm.map((item, index) => (
<div className={styles.termContext} key={index}>
{/* 搜索条件 */}
<BISelect
showSearch
className={styles.termHead}
placeholder="请选择搜索字段"
onChange={this.onChange}
onSearch={this.onSearch}
labelInValue={true}
value={item.type}
allowClear={true}
onChange={(values) => {
this.onChangeTerm(values, item, index);
}}
>
{searchEnum.map((cItem) => {
return <BISelect.Option value={cItem.value}>{cItem.label}</BISelect.Option>;
})}
</BISelect>
{this.advancedItem(item.advancedType)}
{/* 删除 */}
{advancedForm.length > 1 && (
<div
onClick={() => {
return this.removeTerm(index);
}}
className={styles.termDelete}
/>
)}
</div>
));
};
render() {
return <div>{this.advancedRender()}</div>;
}
}
export default AdvancedSearchItem;
components/AdvancedSearchItem/index.less 0 → 100644
View file @ c55d6a03
.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%;
}
}
components/AdvancedSearchLine/index.js 0 → 100644
View file @ c55d6a03
/* 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 <div>111</div>;
}
}
export default AdvancedSearchLine;
components/SearchView/index.js
View file @ c55d6a03
...@@ -358,6 +358,7 @@ class SearchView extends React.Component { ...@@ -358,6 +358,7 @@ class SearchView extends React.Component {
{searchCols.map((arr, index) => { {searchCols.map((arr, index) => {
return this._renderRow(arr, index); return this._renderRow(arr, index);
})} })}
<p>高级搜索</p>
</BIForm> </BIForm>
); );
} }
......
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