Commit a53a6b2f authored by 田翔's avatar 田翔

fix: 增加排序与搜索功能

parent 55bd16b7
import React, { useEffect, useMemo, useRef, useState } from 'react' import React, { useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.less' import styles from './index.less'
import { Table, Tooltip, message, Button, Pagination, Popconfirm } from 'antd' import { Table, Tooltip, message, Button, Pagination, Popconfirm, Space, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import SearchGroup from './components/SearchGroup' import SearchGroup from './components/SearchGroup'
import TablePack from './components/TablePack' import TablePack from './components/TablePack'
import { import {
...@@ -39,7 +40,15 @@ const Account = (props) => { ...@@ -39,7 +40,15 @@ const Account = (props) => {
const userID = window?.globalConfig?.userInfo?.OID || 1 const userID = window?.globalConfig?.userInfo?.OID || 1
const { accountName } = props const { accountName } = props
const [detailShow, setDetailShow] = useState(false) const [detailShow, setDetailShow] = useState(false)
const [params, setParams] = useState({ userID: userID, accountName, direction: 'desc', timeField: '录入时间', total: 0, pageIndex: 1, pageSize: 100 }) const [params, setParams] = useState({
userID: userID,
accountName,
sortFields: '录入时间',
direction: 'desc',
total: 0,
pageIndex: 1,
pageSize: 100
})
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [dataSource, setDataSource] = useState([]) const [dataSource, setDataSource] = useState([])
const [config, setConfig] = useState({ webShowFieldGroup: '', addFieldGroup: '', formJson: {} }) const [config, setConfig] = useState({ webShowFieldGroup: '', addFieldGroup: '', formJson: {} })
...@@ -47,6 +56,102 @@ const Account = (props) => { ...@@ -47,6 +56,102 @@ const Account = (props) => {
const [submitLoading, setSubmitLoading] = useState(false) const [submitLoading, setSubmitLoading] = useState(false)
const [operation, setOperation] = useState({ id: null, state: '添加' }) const [operation, setOperation] = useState({ id: null, state: '添加' })
const formRenderRef = useRef() const formRenderRef = useRef()
const searchInput = useRef(null)
// const handleSearch = (selectedKeys, confirm, dataIndex) => {
// confirm(selectedKeys[0], dataIndex);
// // setSearchText(selectedKeys[0]);
// // setSearchedColumn(dataIndex);
// }
const handleReset = (clearFilters, confirm) => {
clearFilters()
confirm({ closeDropdown: true })
}
const getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
<div
style={{
padding: 8,
}}
onKeyDown={(e) => e.stopPropagation()}
>
<Input
ref={searchInput}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
// onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
// onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{
marginBottom: 8,
display: 'block',
width: '280px',
}}
/>
<Space>
<Button
type="primary"
// onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
onClick={() => confirm({ closeDropdown: true })}
icon={<SearchOutlined />}
size="small"
style={{
width: 90,
}}
>
搜索
</Button>
<Button
onClick={() => handleReset(clearFilters, confirm)}
size="small"
style={{
width: 90,
}}
>
重置
</Button>
{/* <Button
type="link"
size="small"
onClick={() => {
confirm({
closeDropdown: false,
});
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
}}
>
Filter
</Button>
<Button
type="link"
size="small"
onClick={() => {
close();
}}
>
close
</Button> */}
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined
style={{
color: filtered ? '#1890ff' : undefined,
}}
/>
),
// onFilter: (value, record) =>
// record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
// onFilterDropdownOpenChange: (visible) => {
// if (visible) {
// setTimeout(() => searchInput.current?.select(), 100);
// }
// },
})
const fileColumns = useMemo(() => { const fileColumns = useMemo(() => {
const { webShowFieldGroup, formJson } = config const { webShowFieldGroup, formJson } = config
...@@ -59,6 +164,9 @@ const Account = (props) => { ...@@ -59,6 +164,9 @@ const Account = (props) => {
dataIndex: v, dataIndex: v,
width: 120, width: 120,
ellipsis: true, ellipsis: true,
sorter: true,
filterSearch: true,
...getColumnSearchProps(v),
render: (value, r) => { render: (value, r) => {
let props = { ...json[v], value } let props = { ...json[v], value }
return ( return (
...@@ -244,7 +352,7 @@ const Account = (props) => { ...@@ -244,7 +352,7 @@ const Account = (props) => {
setLoading(true) setLoading(true)
const { code, data, msg } = await GetAccountPageList({ ...params, ...param }) const { code, data, msg } = await GetAccountPageList({ ...params, ...param })
if (code === 0) { if (code === 0) {
setDataSource(JSON.parse(data.jsonData)) setDataSource(isJson(data.jsonData) ? JSON.parse(data.jsonData) : [])
setParams({ ...params, total: data.totalCount, pageIndex: data.pageIndex, pageSize: data.pageSize }) setParams({ ...params, total: data.totalCount, pageIndex: data.pageIndex, pageSize: data.pageSize })
} else { } else {
setDataSource([]) setDataSource([])
...@@ -262,6 +370,22 @@ const Account = (props) => { ...@@ -262,6 +370,22 @@ const Account = (props) => {
getDataSource() getDataSource()
} }
const tableChange = (page, filters, sorter) => {
let queryWheres = []
Object.keys(filters).forEach(k => {
if (filters[k]?.[0]) {
queryWheres.push({ field: k, type: '包括', value: filters[k][0] })
}
})
let param = {
sortFields: sorter.order ? sorter.field : '录入时间',
direction: sorter.order !== 'ascend' ? 'desc' : 'asc',
queryWheres
}
setParams({ ...params, ...param })
getDataSource(param)
}
useEffect(() => { useEffect(() => {
getData() getData()
}, []) }, [])
...@@ -286,6 +410,7 @@ const Account = (props) => { ...@@ -286,6 +410,7 @@ const Account = (props) => {
dataSource={dataSource} dataSource={dataSource}
pagination={false} pagination={false}
scroll={{ y: '100%' }} scroll={{ y: '100%' }}
onChange={tableChange}
/> />
</div> </div>
</div> </div>
......
/** /**
* 表单组件 * 表单组件
* @author tianxiang * @author tianxiang
* @params schemaValues:表单结构与数据,disabledFields:需要只读的字段, disabled:所有字段只读 * @params schemaValues:表单结构与数据, disabledFields:需要只读的字段, disabled:所有字段只读
* 2023年2月23日 增加参数 * 2023年2月23日 增加参数
*/ */
import React, { useMemo, useContext, forwardRef, useImperativeHandle, createContext, useState } from 'react' import React, { useMemo, useContext, forwardRef, useImperativeHandle, createContext, useState } from 'react'
......
...@@ -117,7 +117,6 @@ const AccountSelector = (props) => { ...@@ -117,7 +117,6 @@ const AccountSelector = (props) => {
const rowClick = (row) => { const rowClick = (row) => {
if (isMultiple) { if (isMultiple) {
console.log(row.ID, keys, keys.includes(row.ID))
if (keys.includes(row.ID)) { if (keys.includes(row.ID)) {
let values = keys.filter(v => v !== row.ID) let values = keys.filter(v => v !== row.ID)
setKeys(values) setKeys(values)
......
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