|
|
|
@ -1,7 +1,7 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import moment from 'moment'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin, Popconfirm } from '@douyinfe/semi-ui'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin, Popconfirm, Pagination, DatePicker } from '@douyinfe/semi-ui'; |
|
|
|
import { IconSearch, IconEditStroked, IconMinusCircleStroked, IconPlusCircleStroked } from '@douyinfe/semi-icons'; |
|
|
|
import { |
|
|
|
getResourceFileList, postResourceFile, delResourceFile, |
|
|
|
@ -14,11 +14,14 @@ import '../style.less'; |
|
|
|
const ResourceRepository = (props) => { |
|
|
|
const { dispatch, clientHeight, apiRoot, user, resourceClassify, resourceFilelist, isRequesting } = props; |
|
|
|
const [treeData, setTreeData] = useState([]); |
|
|
|
const [currentSelect, setCurrentSelect] = useState(); |
|
|
|
const [currentSelect, setCurrentSelect] = useState("公司培训资料"); |
|
|
|
const [defaultExpandedKey, setDefaultExpandedKey] = useState(); |
|
|
|
const [modelVisiable, setModelVisiable] = useState(false); |
|
|
|
const [modalData, setModalData] = useState(); |
|
|
|
const [uploadModalVisiable, setUploadModalVisiable] = useState(false); |
|
|
|
const [paginationQuery, setPaginatioQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
const [keyword, setKeyword] = useState();//文件名称过滤 |
|
|
|
const [dataRange, setDataRange] = useState();//更新时间过滤 |
|
|
|
const ref = useRef(); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -93,7 +96,10 @@ const ResourceRepository = (props) => { |
|
|
|
} |
|
|
|
const handleSelect = (e) => { |
|
|
|
setCurrentSelect(e); |
|
|
|
getFile(e); |
|
|
|
setPaginatioQuery({ limit: 10, page: 0 }); |
|
|
|
setKeyword(null); |
|
|
|
setDataRange(null); |
|
|
|
getFile(e, { limit: 10, page: 0 }, { restSearch: true }); |
|
|
|
} |
|
|
|
const handleDataToSave = (add, body) => { |
|
|
|
if (add) { |
|
|
|
@ -154,11 +160,25 @@ const ResourceRepository = (props) => { |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
const getFile = (e) => { |
|
|
|
const arr = e.split("/"); |
|
|
|
const query = { type: arr[0] }; |
|
|
|
const handleSearch = () => { |
|
|
|
setPaginatioQuery({ limit: 10, page: 0 }); |
|
|
|
getFile(null, { limit: 10, page: 0 }); |
|
|
|
} |
|
|
|
const getFile = (e, pagination, opt) => { |
|
|
|
const arr = e ? e.split("/") : currentSelect.split("/"); |
|
|
|
const query = pagination ? { ...pagination, type: arr[0] } : { ...paginationQuery, type: arr[0] }; |
|
|
|
if (opt && opt.restSearch) { |
|
|
|
//选中树节点重置 |
|
|
|
} else { |
|
|
|
if (keyword) { query.keyword = keyword; } |
|
|
|
if (dataRange) { |
|
|
|
query.startTime = moment(dataRange[0]).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
query.endTime = moment(dataRange[1]).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
} |
|
|
|
} |
|
|
|
if (arr[1]) { query.departmentName = arr[1]; } |
|
|
|
if (arr[2]) { query.trainDate = arr[2]; } |
|
|
|
|
|
|
|
dispatch(getResourceFileList(query)); |
|
|
|
} |
|
|
|
const getClassify = () => { |
|
|
|
@ -212,7 +232,7 @@ const ResourceRepository = (props) => { |
|
|
|
defaultExpandAll={true} |
|
|
|
treeData={treeData} |
|
|
|
style={style} |
|
|
|
value={currentSelect} |
|
|
|
value={[currentSelect]} |
|
|
|
expandedKeys={defaultExpandedKey} |
|
|
|
filterTreeNode={true} |
|
|
|
searchRender={false} |
|
|
|
@ -225,21 +245,59 @@ const ResourceRepository = (props) => { |
|
|
|
</Col> |
|
|
|
{/* 右侧内容 */} |
|
|
|
<Col span={18} className='right'> |
|
|
|
<Row type="flex" justify="space-around" align="middle"> |
|
|
|
<Col span={18}> |
|
|
|
<Space> |
|
|
|
{currentSelect && currentSelect.includes("公司培训资料") && currentSelect.split("/").length == 3 ? <Button theme='solid' type='primary' onClick={() => { setUploadModalVisiable(true) }} >上传文件</Button> : null} |
|
|
|
<span className="path-lable"><strong>当前文件夹：{currentSelect}</strong></span> |
|
|
|
</Space> |
|
|
|
</Col> |
|
|
|
<Col span={6} > |
|
|
|
<Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input> |
|
|
|
</Col> |
|
|
|
<Row> <span className="path-lable"><strong>当前文件夹：{currentSelect}</strong></span></Row> |
|
|
|
<Row className='search'> |
|
|
|
<Space> |
|
|
|
{currentSelect && currentSelect.includes("公司培训资料") && currentSelect.split("/").length == 3 ? |
|
|
|
<Button theme='solid' type='primary' onClick={() => { setUploadModalVisiable(true) }} >上传文件</Button> |
|
|
|
: null} |
|
|
|
<span className='search-label'>关键字</span> |
|
|
|
<Input |
|
|
|
style={{ width: 160 }} |
|
|
|
// suffix={<IconSearch />} |
|
|
|
showClear |
|
|
|
placeholder="文件名称" |
|
|
|
value={keyword} |
|
|
|
onChange={(value) => { setKeyword(value) }} |
|
|
|
></Input> |
|
|
|
<span className='search-label'>更新时间范围</span> |
|
|
|
<DatePicker |
|
|
|
style={{ width: 350 }} |
|
|
|
value={dataRange} |
|
|
|
type="dateTimeRange" |
|
|
|
density="compact" |
|
|
|
onChange={(data) => { setDataRange(data) }} |
|
|
|
onClear={() => { setDataRange(null) }} |
|
|
|
/> |
|
|
|
<Button onClick={handleSearch}>搜索</Button> |
|
|
|
</Space> |
|
|
|
</Row> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={resourceFilelist && resourceFilelist.rows || []} |
|
|
|
pagination={false} /> |
|
|
|
<div style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "space-between", |
|
|
|
padding: "20px 20px", |
|
|
|
}}> |
|
|
|
<div></div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
|
|
|
共{resourceFilelist && resourceFilelist.count}条信息 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={resourceFilelist && resourceFilelist.count} |
|
|
|
showSizeChanger |
|
|
|
currentPage={paginationQuery.page + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setPaginatioQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
getFile(currentSelect, { limit: pageSize, page: currentPage - 1 }); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Spin> |
|
|
|
|
