wenlele
1 year ago
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