Skip to content

X
xform
Commit 476da5c3 authored by 涂伟's avatar 涂伟
Browse files
Options

fix: 'tableRender条件筛选组件添加'

parent efac719e
Hide whitespace changes
Inline Side-by-side
Showing with 403 additions and 6 deletions
src/core/TableRender/components/Search/index.js
View file @ 476da5c3
import React from 'react'
import React, { useCallback, useEffect, useMemo, useRef, useState,forwardRef,useImperativeHandle } from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Row,
DatePicker,
Select,
Button,
Input,
Tooltip,
Space,
Popconfirm,
message,
Upload,
ConfigProvider,
Modal,
Image,
Dropdown,
Menu,
Popover,
Form, } from 'antd';
const Search = () => {
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import {
SnippetsOutlined,
PlusOutlined,
FormOutlined,
DeleteOutlined,
ImportOutlined,
ExportOutlined,
FileZipOutlined,
FileImageOutlined,
CustomerServiceOutlined,
VideoCameraOutlined,
ExclamationCircleOutlined,
QuestionCircleOutlined,
EditOutlined,
DownOutlined
} from '@ant-design/icons';
import styles from './search.less';
import moment from 'moment';
const { Search } = Input;
const { RangePicker } = DatePicker;
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';
const SearchGroup = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
getQueryInfo
}));
// const {
// fieldSearch
// } = props.params;
const [showPicker,setShowPicker] = useState(true)
const [dateArray, setDateArray] = useState([
// moment(moment().format('YYYY-MM-DD 00:00:00')).subtract(1, 'years'),
// moment(moment().format('YYYY-MM-DD 23:59:59')),
])
const [formatterStr, setFormatterStr] = useState('YYYY-MM-DD HH:mm:ss')
const [searchValues, setSearchValues] = useState('')
// const [queryWheres, setQueryWheres] = useState([
// props.params.tempQueryWhere || {},
// ])
const [queryWheres, setQueryWheres] = useState([{}])
const [searchKey, setSearchKey] = useState(''); // 快速搜索字段名称
const [queryInfo,setQueryInfo] = useState({info: '',timeFrom: '',timeTo: ''})
const rangerOptions = useMemo(() => {
const todayRanger = [
moment(moment().format(`${dateFormat} 00:00:00`)),
moment(moment().format(`${dateFormat} 23:59:59`)),
];
const yesterdayRanger = [
moment(
moment()
.subtract(1, 'days')
.format(`${dateFormat} 00:00:00`),
),
moment(
moment()
.subtract(1, 'days')
.format(`${dateFormat} 23:59:59`),
),
];
const currentWeekRanger = [
moment(
moment()
.startOf('week')
.format(`${dateFormat} 00:00:00`),
),
moment(
moment()
.endOf('week')
.format(`${dateFormat} 23:59:59`),
),
];
const lastWeekRanger = [
moment(
moment()
.subtract(1, 'week')
.startOf('week')
.format(`${dateFormat} 00:00:00`),
),
moment(
moment()
.subtract(1, 'week')
.endOf('week')
.format(`${dateFormat} 23:59:59`),
),
];
const lastMonthRanger = [
moment(
moment()
.subtract(1, 'month')
.startOf('month')
.format(`${dateFormat} 00:00:00`),
),
moment(
moment()
.subtract(1, 'month')
.endOf('month')
.format(`${dateFormat} 23:59:59`),
),
];
const currentMonthRanger = [
moment(
moment()
.startOf('month')
.format(`${dateFormat} 00:00:00`),
),
moment(
moment()
.endOf('month')
.format(`${dateFormat} 23:59:59`),
),
];
const last30DaysRanger = [
moment(
moment()
.subtract(30, 'days')
.format(`${dateFormat} 00:00:00`),
),
moment(moment().format(`${dateFormat} 23:59:59`)),
];
const lastOneYearRanger = [
moment(
moment()
.subtract(1, 'years')
.format(`${dateFormat} 00:00:00`),
),
moment(moment().format(`${dateFormat} 23:59:59`)),
];
return {
昨天: yesterdayRanger,
今天: todayRanger,
本周: currentWeekRanger,
上周: lastWeekRanger,
本月: currentMonthRanger,
上月: lastMonthRanger,
近30天: last30DaysRanger,
近一年: lastOneYearRanger,
};
}, []);
const dateChange = (dateObj, dateString) => {
setDateArray(dateObj || ['', '']);
setQueryInfo({...queryInfo, timeFrom: dateObj[0].format('YYYY-MM-DD HH:mm:ss') || '',timeTo: dateObj[1].format('YYYY-MM-DD HH:mm:ss') || ''})
};
const onSearch = e => {
// if (fieldSearch) {
// setQueryWheres([{
// "field": searchKey,
// "value": e,
// "type": "模糊查询"
// }])
// } else {
// getAccountData();
// }
setQueryInfo({...queryInfo,info: e})
};
const getQueryInfo = () => {
return queryInfo
}
return (
<div></div>
<div className={styles.accountFlexWrapper}>
<Row className={styles.controlRow}>
<Form layout={'horizontal'}>
<Space className={styles.controlRowLeft} wrap>
{showPicker ? (
<Form.Item label={`录入时间`} className={styles.noMarginBottom}>
<RangePicker
size='middle'
value={[...dateArray]}
locale={locale}
// defaultValue={rangerOptions[timeQuantumStr]}
showTime={formatterStr === 'YYYY-MM-DD HH:mm:ss'}
ranges={{ ...rangerOptions }}
format={formatterStr}
style={{ width: 300 }}
onChange={dateChange}
/>
</Form.Item>
) : (
''
)}
{/* {filterColumnsList.map((item, index) => (
<Form.Item key={item.name + index} label={item.alias} className={styles.noMarginBottom}>
<Select
size='middle'
defaultValue='全部'
onChange={e => storeFilterListValue(e, item.name)}
style={{ width: 120 }}
>
{item.list.map(obj => (
<Option key={obj} value={obj}>
{obj}
</Option>
))}
</Select>
</Form.Item>
))} */}
<Form.Item label={'快捷搜索'} className={styles.noMarginBottom}>
{/* {searchKey && fieldSearch ? <Select
style={{ maxWidth: '112px' }}
placeholder='请选择字段'
showArrow
showSearch
allowClear
onSelect={e => setSearchKey(e)}
defaultValue={searchKey}
>
{accountConfig?.searchFieldGroup?.slice(
1,
-1,
).split(',').map(v => <Select.Option key={v} value={v}>{v}</Select.Option>)}
</Select> : null} */}
<Search
// title={`请输入${accountConfig?.searchFieldGroup?.slice(
// 1,
// -1,
// ) || ''}搜索`}
size='middle'
// placeholder={`请输入${accountConfig?.searchFieldGroup?.slice(
// 1,
// -1,
// ) || ''}搜索`}
style={{
width: 320,
verticalAlign: 'middle',
marginLeft: '10px'
}}
placeholder='请输入值'
value={searchValues}
onChange={e => setSearchValues(e.target.value)}
onSearch={onSearch}
/>
</Form.Item>
</Space>
</Form>
{/* 按钮区域 */}
{/* <div className={styles.controlRowRight}>
{
state !== 'special' ? <Dropdown.Button type={permission.includes('addBtn') ? '' : 'primary'} icon={<DownOutlined />}
overlay={menu}>其他操作</Dropdown.Button> : ''
}
{
bulkButton ? <Dropdown.Button style={{ "marginLeft": "20px" }} type={permission.includes('addBtn') ? '' : 'primary'} icon={<DownOutlined />}
overlay={batchMenu}>批量操作</Dropdown.Button> : ''
}
<div className={styles.controlBtns}>
{permission.includes('editBtn') && !bulkButton ? (
<Button
type="primary" ghost
size='middle'
onClick={() => bulkEditing()}
icon={<EditOutlined />}
style={{ marginLeft: 20 }}
>
批量修改
</Button>
) : (
''
)}
{permission.includes('deleteBtn') && !bulkButton ? (
<Button
type='primary' ghost
size='middle'
onClick={() => deleteInBatch()}
icon={<DeleteOutlined />}
style={{ marginLeft: 20 }}
>
批量删除
</Button>
) : (
''
)}
{permission.includes('addBtn') ? (
<Button
type='primary'
size='middle'
onClick={() => addNewRecord()}
icon={<PlusOutlined />}
style={{ marginLeft: 20 }}
>
添加
</Button>
) : (
''
)}
</div>
</div> */}
</Row>
</div>
)
}
})
export default Search
\ No newline at end of file
export default SearchGroup
\ No newline at end of file
src/core/TableRender/components/Search/search.less 0 → 100644
View file @ 476da5c3
.accountFlexWrapper {
width: 100%;
height: 100%; //min-height: 630px;
display: flex;
flex-direction: column;
.controlRow {
display: flex;
justify-content: space-between;
background: #ffffff;
margin: 8px;
// padding: 8px;
gap: 10px;
:global {
.panda-civ-water-form-horizontal {
max-width: 68%;
}
}
.controlRowLeft {
flex: 1;
}
.controlRowRight {
// max-width: 230px;
max-width: 30%;
display: flex;
align-items: flex-end;
.controlBtns {
display: flex;
justify-content: flex-end;
}
:global {
.panda-civ-water-dropdown-button {
display: flex;
justify-content: flex-end;
}
}
}
.noMarginBottom {
margin-bottom: 0;
:global {
.panda-civ-water-form-item-control-input-content {
display: flex;
}
}
}
}
.accountManageControlWrapper {
position: relative;
padding: 6px 10px;
margin: 8px 8px 10px;
background: #fff;
.firstRow {
.searchBtn {
margin-left: 10px;
margin-right: 10px;
}
}
.collapseButton {
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
color: rgba(0, 0, 0, .65);
padding: 0;
position: absolute;
height: 10px;
width: 25px;
left: 0;
bottom: -10px;
border: 1px solid rgba(0, 0, 0, .2);
border-top: none;
cursor: pointer;
}
}
.accountTableWrapper {
flex: 1;
padding: 8px 8px 0px 8px;
margin: 0px 8px 8px;
background: #fff;
overflow: hidden;
.buttonHover:hover {
opacity: 0.6;
}
}
}
\ 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