4 changed files with 191 additions and 28 deletions
@ -0,0 +1,188 @@ |
|||
import React, { useEffect, useState, useRef } from 'react' |
|||
import { connect } from 'react-redux'; |
|||
import moment from 'moment'; |
|||
import { RouteRequest } from '@peace/utils'; |
|||
import { RouteTable } from '$utils' |
|||
import SimpleBar from 'simplebar-react'; |
|||
import FileModal from '../components/fileModal'; |
|||
import { Tabs, Form, Input, Space, Button, Table, Checkbox, message, Pagination } from 'antd'; |
|||
const { Search } = Input; |
|||
import { CreditCardFilled, FilePdfOutlined } from '@ant-design/icons'; |
|||
import { agent } from 'superagent'; |
|||
const CheckboxGroup = Checkbox.Group; |
|||
|
|||
|
|||
function SpecificationLibrary ({ loading, clientHeight, actions, dispatch, }) { |
|||
|
|||
const { resourceRetrieval } = actions |
|||
const [checkAll, setCheckAll] = useState(false) |
|||
const [query, setQuery] = useState({ page: 0, limit: 20 }); |
|||
const [fileData, setFileData] = useState({ data: [], count: 0 }) |
|||
const [fileModal, setFileModal] = useState(false) |
|||
|
|||
const [keyword, setKeywords] = useState() |
|||
const [fileIds, setFileIds] = useState([]) |
|||
const fileId = useRef([]) |
|||
|
|||
|
|||
useEffect(() => { |
|||
resourceData() |
|||
}, []) |
|||
|
|||
|
|||
let resourceData = (data) => { |
|||
let params = data || query |
|||
dispatch(resourceRetrieval.getSpecifications({ keyword: keyword, ...params, })).then(res => { |
|||
if (res.success) { |
|||
setFileData({ data: res.payload.data?.rows, count: res.payload.data?.count }) |
|||
|
|||
} |
|||
}) |
|||
} |
|||
|
|||
return <> |
|||
|
|||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}> |
|||
<Space size={'small'}> |
|||
<Button onClick={() => { |
|||
if (!checkAll) { |
|||
let fileAll = fileData?.data?.map(s => s.id) |
|||
fileId.current = fileAll |
|||
setFileIds(fileAll) |
|||
} else { |
|||
fileId.current = [] |
|||
setFileIds([]) |
|||
} |
|||
setCheckAll(!checkAll) |
|||
}}>{checkAll ? "取消全选" : "全选"}</Button> |
|||
<Button type="primary" onClick={() => { |
|||
setFileModal(true) |
|||
}}>上传</Button> |
|||
<Button type="primary">下载</Button> |
|||
<Button type="primary" onClick={() => { |
|||
if (fileId.current?.length) { |
|||
dispatch(resourceRetrieval.delSpecifications(fileId.current)).then(res => { |
|||
if (res.success) { |
|||
let url = [] |
|||
fileData?.data?.map(f => { |
|||
if (fileId.current?.includes(f.id)) { |
|||
url.push(f.path) |
|||
} |
|||
}) |
|||
url.map(d => { |
|||
RouteRequest.delete(RouteTable.cleanUpUploadTrash, { url: d }); |
|||
}) |
|||
resourceData({ page: 0, limit: 20 }) |
|||
fileId.current = [] |
|||
setFileIds([]) |
|||
setFileIds(false) |
|||
setCheckAll(false) |
|||
} |
|||
}) |
|||
} else { |
|||
message.warning({ |
|||
duration: 1, |
|||
content: '未选择文件', |
|||
}); |
|||
} |
|||
}}>删除</Button> |
|||
</Space> |
|||
|
|||
<Search |
|||
placeholder="文件名称关键字" |
|||
value={keyword} |
|||
onChange={e => { |
|||
setKeywords(e?.target?.value) |
|||
}} |
|||
onSearch={(value, event) => { |
|||
setKeywords(value) |
|||
resourceData({ page: 0, limit: 20, keyword: value }) |
|||
}} |
|||
|
|||
style={{ |
|||
width: 266, |
|||
}} |
|||
/> |
|||
</div > |
|||
|
|||
<SimpleBar |
|||
style={{ |
|||
// 容器高度
|
|||
maxHeight: clientHeight - 130, |
|||
}} |
|||
// 允许的滚动方向
|
|||
forceVisible="y" |
|||
> |
|||
{ |
|||
fileData?.data?.map((v, i) => { |
|||
return <div style={{ width: 310, display: 'inline-block', margin:'0 18px 10px 0', }}> |
|||
<div style={{ display: 'flex', padding: '10px 0', border: `1px solid ${fileId.current?.includes(v.id) ? 'rgb(42 207 98)' : '#fff'}` }} onClick={() => { |
|||
if (fileId.current?.includes(v.id)) { |
|||
fileId.current = fileId.current?.filter(c => c != v.id) |
|||
setFileIds(fileId.current?.filter(c => c != v.id)) |
|||
} else { |
|||
fileId.current = [...fileId.current, v.id] |
|||
setFileIds([...fileId.current, v.id]) |
|||
} |
|||
}}> |
|||
<FilePdfOutlined style={{ fontSize: 96, color: 'rgb(33 211 180)', marginRight: 8 }} /> |
|||
<div style={{ width: 200, display: 'flex', flexDirection: 'column', justifyContent: 'space-evenly' }}> |
|||
<div style={{ |
|||
width: 100, whiteSpace: 'nowrap', overflow: 'hidden', fontWeight: 400, |
|||
textOverflow: 'ellipsis', fontSize: 18, color: 'rgb(51 161 34)' |
|||
}}> |
|||
{v.fileName} |
|||
</div> |
|||
<div>标签：{v.tags || '--'}</div> |
|||
<div>创建时间：{v.createAt && moment(v.createAt).format('YYYY-MM-DD HH:mm:ss') || '--'}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
}) |
|||
} |
|||
{fileData?.count > 20 && <div style={{ display: 'flex', justifyContent: 'flex-end' }}> |
|||
<Pagination |
|||
total={fileData?.count || 0} |
|||
showSizeChanger |
|||
showQuickJumper |
|||
current={query?.page + 1 || 1} |
|||
pageSizeOptions={[20, 30, 50]} |
|||
showTotal={(total) => `共 ${total} 个文件`} |
|||
onChange={(page, pageSize) => { |
|||
console.log({ page: page - 1, limit: pageSize, }); |
|||
setQuery({ page: page - 1, limit: pageSize, }) |
|||
resourceData({ page: page - 1, limit: pageSize, keyword: keyword }) |
|||
}} |
|||
/> |
|||
</div>} |
|||
|
|||
</SimpleBar> |
|||
|
|||
{ |
|||
fileModal ? |
|||
<FileModal |
|||
close={() => { |
|||
setFileModal(false); |
|||
}} |
|||
success={() => { |
|||
resourceData({ page: 0, limit: 20, keyword: keyword }) |
|||
}} |
|||
remove={url => { |
|||
RouteRequest.delete(RouteTable.cleanUpUploadTrash, { url: url }); |
|||
}} |
|||
/> : "" |
|||
} |
|||
|
|||
</> |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { global, auth, resourceCatalog } = state; |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
clientHeight: global.clientHeight, |
|||
// resourceCatalog: resourceCatalog?.data || [],
|
|||
// isRequesting: resourceCatalog.isRequesting
|
|||
}; |
|||
} |
|||
export default connect(mapStateToProps)(SpecificationLibrary) |
|||
Loading…
Reference in new issue