Commit b94a57d2 authored by 田翔's avatar 田翔

fix: 选项筛选表头优化

parent 87353f90
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "4.1.8", "version": "4.1.9",
"description": "4.1.8 重置时增加排序重置", "description": "4.1.9 选项筛选表头优化",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
......
...@@ -35,66 +35,73 @@ const TablePack = (props, ref) => { ...@@ -35,66 +35,73 @@ const TablePack = (props, ref) => {
const [sortedInfo, setSortedInfo] = useState({}) const [sortedInfo, setSortedInfo] = useState({})
const inputRef = useRef() const inputRef = useRef()
const getColumnSearchProps = (dataIndex) => ({ const getColumnSearchProps = (widgetInfo, dataIndex) => {
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => { const { widget, sourceType, options } = widgetInfo
return ( if (['CheckBox', 'ComboBox', 'RadioButton'].includes(widget)) {
<div if (sourceType === '手动输入') {
style={{ padding: 8 }} return {
onKeyDown={(e) => e.stopPropagation()} filters: options.map(v => { return { text: v.value, value: v.value, } }),
> }
<Input }
ref={inputRef} }
placeholder={`搜索 ${dataIndex}`} return {
value={selectedKeys[0]} filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => {
onChange={e => { return (
setSelectedKeys(e.target.value ? [e.target.value] : []) <div
}} style={{ padding: 8 }}
onPressEnter={() => { onKeyDown={(e) => e.stopPropagation()}
setFilteredInfo({ ...filteredInfo, [dataIndex]: selectedKeys[0] }) >
confirm({ closeDropdown: true }) <Input
}} ref={inputRef}
style={{ placeholder={`搜索 ${dataIndex}`}
marginBottom: 8, value={selectedKeys[0]}
display: 'block', onChange={e => {
width: '280px', setSelectedKeys(e.target.value ? [e.target.value] : [])
}}
/>
<Space>
<Button
type="primary"
onClick={() => {
setFilteredInfo({ ...filteredInfo, [dataIndex]: selectedKeys[0] })
confirm({ closeDropdown: true })
}} }}
icon={<SearchOutlined />} onPressEnter={() => {
size="small"
style={{ width: 90 }}
>
搜索
</Button>
<Button
onClick={() => {
setFilteredInfo({ ...filteredInfo, [dataIndex]: [] })
clearFilters()
confirm({ closeDropdown: true }) confirm({ closeDropdown: true })
}} }}
size="small" style={{
style={{ width: 90 }} marginBottom: 8,
> display: 'block',
重置 width: '280px',
</Button> }}
</Space> />
</div> <Space>
) <Button
}, type="primary"
filterIcon: (filtered) => ( onClick={() => {
<SearchOutlined confirm({ closeDropdown: true })
style={{ }}
color: filtered ? '#1890ff' : undefined, icon={<SearchOutlined />}
}} size="small"
/> style={{ width: 90 }}
), >
}) 搜索
</Button>
<Button
onClick={() => {
clearFilters()
confirm({ closeDropdown: true })
}}
size="small"
style={{ width: 90 }}
>
重置
</Button>
</Space>
</div>
)
},
filterIcon: (filtered) => (
<SearchOutlined
style={{
color: filtered ? '#1890ff' : undefined,
}}
/>
),
}
}
const btns = useMemo(() => { const btns = useMemo(() => {
if (readOnly) { if (readOnly) {
...@@ -132,6 +139,7 @@ const TablePack = (props, ref) => { ...@@ -132,6 +139,7 @@ const TablePack = (props, ref) => {
let json = getFileInfo(formJson) let json = getFileInfo(formJson)
let array = [] let array = []
showField.forEach(v => { showField.forEach(v => {
const { widget } = json[v]
array.push({ array.push({
title: json[v]?.title || v, title: json[v]?.title || v,
dataIndex: v, dataIndex: v,
...@@ -140,10 +148,9 @@ const TablePack = (props, ref) => { ...@@ -140,10 +148,9 @@ const TablePack = (props, ref) => {
sorter: true, sorter: true,
sortOrder: sortedInfo.columnKey === v ? sortedInfo.order : null, sortOrder: sortedInfo.columnKey === v ? sortedInfo.order : null,
filteredValue: filteredInfo[v] || null, filteredValue: filteredInfo[v] || null,
...getColumnSearchProps(v), ...getColumnSearchProps(json[v], v),
render: (value, r) => { render: (value, r) => {
let props = { ...json[v], value } let props = { ...json[v], value }
const { widget } = props
if (widget === 'FileUpload') { if (widget === 'FileUpload') {
return <FileView {...props} /> return <FileView {...props} />
} }
...@@ -225,6 +232,13 @@ const TablePack = (props, ref) => { ...@@ -225,6 +232,13 @@ const TablePack = (props, ref) => {
return columns return columns
}, [parent, btns, fileColumns]) }, [parent, btns, fileColumns])
const onChange = (page, filters, sorter) => {
console.log('filters', filters)
setFilteredInfo(filters)
setSortedInfo({ order: sorter.order, columnKey: sorter.field })
tableChange(page, filters, sorter)
}
return ( return (
<Table <Table
size='small' size='small'
...@@ -237,7 +251,7 @@ const TablePack = (props, ref) => { ...@@ -237,7 +251,7 @@ const TablePack = (props, ref) => {
onRow={onRow} onRow={onRow}
pagination={false} pagination={false}
scroll={{ y: 'calc(100% - 40px)' }} scroll={{ y: 'calc(100% - 40px)' }}
onChange={tableChange} onChange={onChange}
/> />
) )
......
...@@ -148,6 +148,7 @@ const Account = (props) => { ...@@ -148,6 +148,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) {
console.log(1, isJson(data.jsonData) ? JSON.parse(data.jsonData) : [])
setDataSource(isJson(data.jsonData) ? JSON.parse(data.jsonData) : []) setDataSource(isJson(data.jsonData) ? JSON.parse(data.jsonData) : [])
setParams({ ...params, ...param, total: data.totalCount, pageIndex: data.pageIndex, pageSize: data.pageSize }) setParams({ ...params, ...param, total: data.totalCount, pageIndex: data.pageIndex, pageSize: data.pageSize })
} else { } else {
...@@ -167,11 +168,10 @@ const Account = (props) => { ...@@ -167,11 +168,10 @@ const Account = (props) => {
} }
const tableChange = (page, filters, sorter) => { const tableChange = (page, filters, sorter) => {
tablePackRef.current.setSortedInfo({ order: sorter.order, columnKey: sorter.field })
let queryWheres = [] let queryWheres = []
Object.keys(filters).forEach(k => { Object.keys(filters).forEach(k => {
if (filters[k]?.[0]) { if (filters[k]?.[0]) {
queryWheres.push({ field: k, type: '包括', value: filters[k][0] }) queryWheres.push({ field: k, type: '包括', value: filters[k].join(',') })
} }
}) })
let param = { let param = {
...@@ -183,8 +183,6 @@ const Account = (props) => { ...@@ -183,8 +183,6 @@ const Account = (props) => {
getDataSource(param) getDataSource(param)
} }
console.log('params', params)
useEffect(() => { useEffect(() => {
getData() getData()
}, []) }, [])
......
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