5 changed files with 0 additions and 188 deletions
@ -1,188 +0,0 @@ |
|||||
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