Skip to content

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

fix: '1.表格样式优化2.添加按钮'

parent 955156cc
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 124 deletions
src/core/TableRender/components/SearchGroup/index.js
View file @ a1ea1f83
import React, { useCallback, useEffect, useMemo, useRef, useState,forwardRef,useImperativeHandle } from 'react';
import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Row,
import {
Row,
DatePicker,
Select,
Button,
......@@ -16,38 +17,38 @@ import { Row,
Dropdown,
Menu,
Popover,
Form, } from 'antd';
Form,
} from 'antd';
import 'dayjs/locale/zh-cn';
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';
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
getQueryInfo,
}));
const [form] = Form.useForm();
......@@ -55,20 +56,19 @@ const SearchGroup = forwardRef((props, ref) => {
// fieldSearch
// } = props.params;
const [showPicker,setShowPicker] = useState(true)
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 [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 [queryWheres, setQueryWheres] = useState([{}]);
const [searchKey, setSearchKey] = useState(''); // 快速搜索字段名称
const [queryInfo,setQueryInfo] = useState({info: '',timeFrom: '',timeTo: ''})
const [queryInfo, setQueryInfo] = useState({ info: '', timeFrom: '', timeTo: '' });
const rangerOptions = useMemo(() => {
const todayRanger = [
......@@ -168,7 +168,11 @@ const SearchGroup = forwardRef((props, ref) => {
}, []);
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') || ''})
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) {
......@@ -180,49 +184,52 @@ const SearchGroup = forwardRef((props, ref) => {
// } else {
// getAccountData();
// }
setQueryInfo({...queryInfo,info: e})
getQueryInfo(form.getFieldsValue())
setQueryInfo({ ...queryInfo, info: e });
getQueryInfo(form.getFieldsValue());
};
const onValuesChange = (values) => {
let keys = Object.keys(values)
if (keys.includes('info')) return
getQueryInfo(form.getFieldsValue())
}
const onValuesChange = values => {
let keys = Object.keys(values);
if (keys.includes('info')) return;
getQueryInfo(form.getFieldsValue());
};
const getQueryInfo = data => {
let params = {};
params.timeFrom = (data.time && data.time[0].format('YYYY-MM-DD HH:mm:ss')) || '';
params.timeTo = (data.time && data.time[1].format('YYYY-MM-DD HH:mm:ss')) || '';
params.info = data.info;
props && props.onChange(params);
return params;
};
const getQueryInfo = (data) => {
let params = {}
params.timeFrom = data.time&&data.time[0].format('YYYY-MM-DD HH:mm:ss') || ''
params.timeTo = data.time&&data.time[1].format('YYYY-MM-DD HH:mm:ss') || ''
params.info = data.info
console.log(params,'666666666666666');
props&&props.onChange(params)
return params
}
const btnsClick = type => {
props && props.btnsClick(type);
};
return (
<div className={styles.accountFlexWrapper}>
<Row className={styles.controlRow}>
<Form layout={'horizontal'} form={form} onValuesChange={onValuesChange}>
<Space className={styles.controlRowLeft} wrap>
{showPicker ? (
<Form.Item label={`录入时间`} name='time' 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 layout={'horizontal'} form={form} onValuesChange={onValuesChange}>
<Space className={styles.controlRowLeft} wrap>
{showPicker ? (
<Form.Item label={`录入时间`} name="time" 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'
......@@ -238,8 +245,8 @@ const SearchGroup = forwardRef((props, ref) => {
</Select>
</Form.Item>
))} */}
<Form.Item label={'快捷搜索'} name='info' className={styles.noMarginBottom}>
{/* {searchKey && fieldSearch ? <Select
<Form.Item label={'快捷搜索'} name="info" className={styles.noMarginBottom}>
{/* {searchKey && fieldSearch ? <Select
style={{ maxWidth: '112px' }}
placeholder='请选择字段'
showArrow
......@@ -253,41 +260,41 @@ const SearchGroup = forwardRef((props, ref) => {
-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}>
{
<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 ? (
} */}
<div className={styles.controlBtns}>
{/* {permission.includes('editBtn') && !bulkButton ? (
<Button
type="primary" ghost
size='middle'
......@@ -299,8 +306,8 @@ const SearchGroup = forwardRef((props, ref) => {
</Button>
) : (
''
)}
{permission.includes('deleteBtn') && !bulkButton ? (
)} */}
{/* {permission.includes('deleteBtn') && !bulkButton ? (
<Button
type='primary' ghost
size='middle'
......@@ -312,26 +319,25 @@ const SearchGroup = forwardRef((props, ref) => {
</Button>
) : (
''
)}
{permission.includes('addBtn') ? (
<Button
type='primary'
size='middle'
onClick={() => addNewRecord()}
icon={<PlusOutlined />}
style={{ marginLeft: 20 }}
>
添加
</Button>
) : (
)} */}
{/* {permission.includes('addBtn') ? ( */}
<Button
type="primary"
size="middle"
onClick={() => btnsClick('add')}
icon={<PlusOutlined />}
style={{ marginLeft: 20 }}
>
添加
</Button>
{/* ) : (
''
)}
</div>
</div> */}
</Row>
)} */}
</div>
</div>
</Row>
</div>
)
})
);
});
export default SearchGroup
\ No newline at end of file
export default SearchGroup;
src/core/TableRender/index.less
View file @ a1ea1f83
......@@ -24,5 +24,63 @@
}
}
}
.ant-table.ant-table-bordered > .ant-table-container {
border-left: 1px solid #dbe7fb;
.ant-table-header > table {
border-top: 1px solid #dbe7fb;
}
}
// .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
// border-top: 1px solid #dbe7fb;
// }
.@{ant-prefix}-table-thead > tr {
height: 40px;
th {
border-right: 1px solid #dbe7fb!important;
border-bottom: 1px solid #dbe7fb;
background: white;
}
th:last-child {
border-left: 1px solid #dbe7fb;
}
}
.ant-table-tbody > tr {
&:nth-child(2n-1) {
td {
background: #f6f9fe;
}
}
td {
border-bottom: 1px solid #dbe7fb;
border-right: 1px solid #dbe7fb!important;
&:last-child {
border-left: 1px solid #dbe7fb;
}
}
}
// .ant-table-tbody > tr > td:last-child {
// border-left: 1px solid #dbe7fb;
// }
.@{ant-prefix}-table-body {
overflow-x: scroll;
&::-webkit-scrollbar {
width: 0;
height: 12px;
}
&::-webkit-scrollbar {
width: 0; // height: 12px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
// background: #c8c8c8;
background: rgb(41, 166, 255);
}
&::-webkit-scrollbar-track {
background: #f7f4f5;
padding: 0 3px;
}
}
}
}
\ 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