nili
6 months ago
1 changed files with 144 additions and 0 deletions
@ -0,0 +1,144 @@ |
|||
import { SearchOutlined } from '@ant-design/icons'; |
|||
import { ProColumns, ProTable } from '@ant-design/pro-components'; |
|||
import { Button, Input, Modal, Space } from 'antd'; |
|||
import { useEffect, useState } from 'react'; |
|||
|
|||
import { evilAppList } from '@/services/matrix/superAdmin'; |
|||
|
|||
export type LocalAppListProps = { |
|||
data: API.UserBo; |
|||
onClose: () => void; |
|||
}; |
|||
|
|||
interface LocalApp { |
|||
appName?: string; |
|||
packageName?: string; |
|||
evil: boolean; |
|||
} |
|||
|
|||
const LocalAppList: React.FC<LocalAppListProps> = (props) => { |
|||
const [appArr, setAppArr] = useState<LocalApp[]>(); |
|||
const [filteredAppArr, setFilteredAppArr] = useState<LocalApp[]>(); |
|||
|
|||
const columns: ProColumns<LocalApp>[] = [ |
|||
{ |
|||
title: '应用名', |
|||
dataIndex: 'appName', |
|||
ellipsis: true, |
|||
hideInSearch: true, |
|||
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( |
|||
<div style={{ padding: 8 }}> |
|||
<Input |
|||
placeholder="搜索应用" |
|||
value={selectedKeys[0]} |
|||
onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} |
|||
onPressEnter={() => confirm()} |
|||
style={{ marginBottom: 8, display: 'block' }} |
|||
/> |
|||
<Space> |
|||
<Button onClick={() => confirm()} type="primary"> |
|||
搜索 |
|||
</Button> |
|||
<Button onClick={() => clearFilters && clearFilters()} type="link"> |
|||
清除 |
|||
</Button> |
|||
</Space> |
|||
</div> |
|||
), |
|||
onFilter: (value, record) => { |
|||
if (typeof value === 'string' && typeof record?.appName === 'string') { |
|||
return record.appName.includes(value); |
|||
} |
|||
return false; |
|||
}, |
|||
filterIcon: (filtered) => ( |
|||
<SearchOutlined |
|||
style={{ color: filtered ? '#1890ff' : undefined }} |
|||
onPointerOverCapture={undefined} |
|||
onPointerMoveCapture={undefined} |
|||
/> |
|||
), |
|||
}, |
|||
{ |
|||
title: '应用包名', |
|||
dataIndex: 'packageName', |
|||
hideInSearch: true, |
|||
ellipsis: true, |
|||
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( |
|||
<div style={{ padding: 8 }}> |
|||
<Input |
|||
placeholder="搜索包名" |
|||
value={selectedKeys[0]} |
|||
onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} |
|||
onPressEnter={() => confirm()} |
|||
style={{ marginBottom: 8, display: 'block' }} |
|||
/> |
|||
<Space> |
|||
<Button onClick={() => confirm()} type="primary"> |
|||
搜索 |
|||
</Button> |
|||
<Button onClick={() => clearFilters && clearFilters()} type="link"> |
|||
清除 |
|||
</Button> |
|||
</Space> |
|||
</div> |
|||
), |
|||
onFilter: (value, record) => { |
|||
if (typeof value === 'string' && typeof record?.packageName === 'string') { |
|||
return record.packageName.includes(value); |
|||
} |
|||
return false; |
|||
}, |
|||
filterIcon: (filtered) => ( |
|||
<SearchOutlined |
|||
style={{ color: filtered ? '#1890ff' : undefined }} |
|||
onPointerOverCapture={undefined} |
|||
onPointerMoveCapture={undefined} |
|||
/> |
|||
), |
|||
}, |
|||
]; |
|||
|
|||
const fetchApp = async () => { |
|||
const res = await evilAppList(); |
|||
if (res.data) { |
|||
let common: LocalApp[] = []; |
|||
let remain: LocalApp[] = []; |
|||
props.data.localAppList?.forEach((x) => { |
|||
if (res.data?.some((y) => y.packageName === x.packageName)) { |
|||
common.push({ ...x, evil: true }); |
|||
} else { |
|||
remain.push({ ...x, evil: false }); |
|||
} |
|||
}); |
|||
setAppArr([...common, ...remain]); |
|||
setFilteredAppArr([...common, ...remain]); |
|||
} |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
fetchApp(); |
|||
}, []); |
|||
|
|||
return ( |
|||
<Modal style={{ width: 600 }} onCancel={props.onClose} visible={true} footer={[]}> |
|||
<ProTable |
|||
onRow={(record) => { |
|||
return { |
|||
style: { |
|||
backgroundColor: record.evil ? 'red' : 'transparent', |
|||
}, |
|||
}; |
|||
}} |
|||
search={false} |
|||
onReset={() => { |
|||
setFilteredAppArr(appArr); |
|||
}} |
|||
columns={columns} |
|||
dataSource={filteredAppArr} |
|||
/> |
|||
</Modal> |
|||
); |
|||
}; |
|||
|
|||
export default LocalAppList; |
Loading…
Reference in new issue