|
|
@ -1,21 +1,35 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space, Tooltip } from '@douyinfe/semi-ui'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin } from '@douyinfe/semi-ui'; |
|
|
|
import { IconSearch, IconEditStroked, IconMinusCircleStroked, IconPlusCircleStroked } from '@douyinfe/semi-icons'; |
|
|
|
import { getResourceClassify } from '../actions/resourceRepository'; |
|
|
|
import '../style.less' |
|
|
|
import { getResourceClassify, getResourceFileList } from '../actions/resourceRepository'; |
|
|
|
import '../style.less'; |
|
|
|
|
|
|
|
const ResourceRepository = (props) => { |
|
|
|
const { dispatch, actions, clientHeight, resourceClassify } = props; |
|
|
|
|
|
|
|
const { dispatch, clientHeight, resourceClassify, resourceFilelist, isRequesting } = props; |
|
|
|
const [treeData, setTreeData] = useState([]); |
|
|
|
const [currentSelect, setCurrentSelect] = useState(); |
|
|
|
const [defaultExpandedKey, setDefaultExpandedKey] = useState(); |
|
|
|
const ref = useRef(); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(getResourceClassify()).then(res => { |
|
|
|
const { success, payload } = res; |
|
|
|
if (success) |
|
|
|
if (success) { |
|
|
|
let defaultKey = ""; |
|
|
|
if (payload.data.length) { |
|
|
|
if (payload.data[0].children && payload.data[0].children.length) { |
|
|
|
defaultKey = payload.data[0].children[0].key; |
|
|
|
setDefaultExpandedKey([payload.data[0].key, payload.data[0].children[0].key]); |
|
|
|
} else { |
|
|
|
defaultKey = payload.data[0].key; |
|
|
|
setDefaultExpandedKey([payload.data[0].key]); |
|
|
|
} |
|
|
|
} |
|
|
|
setCurrentSelect([defaultKey]); |
|
|
|
setTreeData(payload.data); |
|
|
|
getFile(defaultKey); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, []) |
|
|
|
|
|
|
@ -27,117 +41,25 @@ const ResourceRepository = (props) => { |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '文件类型', |
|
|
|
dataIndex: 'name', |
|
|
|
dataIndex: 'fileType', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '文件名称', |
|
|
|
dataIndex: 'size', |
|
|
|
dataIndex: 'fileName', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '大小', |
|
|
|
dataIndex: 'owner', |
|
|
|
dataIndex: 'fileSize', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '更新时间', |
|
|
|
dataIndex: 'updateTime', |
|
|
|
dataIndex: 'updateDate', |
|
|
|
}, { |
|
|
|
title: '操作', |
|
|
|
dataIndex: 'action', |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
const data = [ |
|
|
|
// { |
|
|
|
// key: '1', |
|
|
|
// name: 'Semi Design 设计稿.fig', |
|
|
|
// nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png', |
|
|
|
// size: '2M', |
|
|
|
// owner: '姜鹏志', |
|
|
|
// updateTime: '2020-02-02 05:13', |
|
|
|
// avatarBg: 'grey', |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// key: '2', |
|
|
|
// name: 'Semi Design 分享演示文稿', |
|
|
|
// nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
// size: '2M', |
|
|
|
// owner: '郝宣', |
|
|
|
// updateTime: '2020-01-17 05:31', |
|
|
|
// avatarBg: 'red', |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// key: '3', |
|
|
|
// name: '设计文档', |
|
|
|
// nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
// size: '34KB', |
|
|
|
// owner: 'Zoey Edwards', |
|
|
|
// updateTime: '2020-01-26 11:01', |
|
|
|
// avatarBg: 'light-blue', |
|
|
|
// }, |
|
|
|
{ |
|
|
|
key: '4', |
|
|
|
name: 'Semi Design 设计稿.fig', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png', |
|
|
|
size: '2M', |
|
|
|
owner: '姜鹏志', |
|
|
|
updateTime: '2020-02-02 05:13', |
|
|
|
avatarBg: 'grey', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '5', |
|
|
|
name: 'Semi Design 分享演示文稿', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
size: '2M', |
|
|
|
owner: '郝宣', |
|
|
|
updateTime: '2020-01-17 05:31', |
|
|
|
avatarBg: 'red', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '6', |
|
|
|
name: '设计文档', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
size: '34KB', |
|
|
|
owner: 'Zoey Edwards', |
|
|
|
updateTime: '2020-01-26 11:01', |
|
|
|
avatarBg: 'light-blue', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '7', |
|
|
|
name: 'Semi Design 设计稿.fig', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png', |
|
|
|
size: '2M', |
|
|
|
owner: '姜鹏志', |
|
|
|
updateTime: '2020-02-02 05:13', |
|
|
|
avatarBg: 'grey', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '8', |
|
|
|
name: 'Semi Design 分享演示文稿', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
size: '2M', |
|
|
|
owner: '郝宣', |
|
|
|
updateTime: '2020-01-17 05:31', |
|
|
|
avatarBg: 'red', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '9', |
|
|
|
name: '设计文档', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
size: '34KB', |
|
|
|
owner: 'Zoey Edwards', |
|
|
|
updateTime: '2020-01-26 11:01', |
|
|
|
avatarBg: 'light-blue', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '10', |
|
|
|
name: '设计文档', |
|
|
|
nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', |
|
|
|
size: '34KB', |
|
|
|
owner: 'Zoey Edwards', |
|
|
|
updateTime: '2020-01-26 11:01', |
|
|
|
avatarBg: 'light-blue', |
|
|
|
} |
|
|
|
]; |
|
|
|
const renderLabel = (label, data) => (<div> |
|
|
|
<Tooltip content={label}><span >{label.length > 8 ? label.substring(0, 8) + '...' : label}</span></Tooltip> |
|
|
|
{true == data.operation ? |
|
|
@ -148,7 +70,17 @@ const ResourceRepository = (props) => { |
|
|
|
</span> |
|
|
|
: ''} |
|
|
|
</div> |
|
|
|
) |
|
|
|
); |
|
|
|
const handleSelect = (e) => { |
|
|
|
getFile(e); |
|
|
|
} |
|
|
|
const getFile = (e) => { |
|
|
|
const arr = e.split("/"); |
|
|
|
const query = { type: arr[0] }; |
|
|
|
if (arr[1]) { query.departmentName = arr[1]; } |
|
|
|
if (arr[2]) { query.trainDate = arr[2]; } |
|
|
|
dispatch(getResourceFileList(query)); |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
@ -168,6 +100,7 @@ const ResourceRepository = (props) => { |
|
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>RESOURCE REPOSITORY</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Spin spinning={isRequesting}> |
|
|
|
<Row className='resourceRepository'> |
|
|
|
{/* 左侧 */} |
|
|
|
<Col className='left' span={6}> |
|
|
@ -176,14 +109,17 @@ const ResourceRepository = (props) => { |
|
|
|
<Input suffix={<IconSearch />} showClear onChange={v => ref.current.search(v)} placeholder="请输入"></Input> |
|
|
|
<Tree |
|
|
|
ref={ref} |
|
|
|
defaultExpandAll={true} |
|
|
|
treeData={treeData} |
|
|
|
defaultExpandAll |
|
|
|
filterTreeNode |
|
|
|
searchRender={false} |
|
|
|
blockNode={false} |
|
|
|
directory |
|
|
|
style={style} |
|
|
|
expandedKeys={defaultExpandedKey} |
|
|
|
filterTreeNode={true} |
|
|
|
searchRender={false} |
|
|
|
directory={true} |
|
|
|
showFilteredOnly={true} |
|
|
|
renderLabel={renderLabel} |
|
|
|
onExpand={(e) => setDefaultExpandedKey(e)} |
|
|
|
onSelect={handleSelect} |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
{/* 右侧内容 */} |
|
|
@ -192,16 +128,20 @@ const ResourceRepository = (props) => { |
|
|
|
<Col span={18}> |
|
|
|
<Space> |
|
|
|
<Button theme='solid' type='primary' >上传文件</Button> |
|
|
|
<span className="path-lable"><strong>当前文件夹:公司培训资源/人力资源部2/2022-11</strong></span> |
|
|
|
<span className="path-lable"><strong>当前文件夹:{currentSelect}</strong></span> |
|
|
|
</Space> |
|
|
|
</Col> |
|
|
|
<Col span={6} > |
|
|
|
<Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Table columns={columns} dataSource={data} pagination={false} /> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={resourceFilelist && resourceFilelist.rows || []} |
|
|
|
pagination={false} /> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Spin> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</> |
|
|
@ -209,12 +149,14 @@ const ResourceRepository = (props) => { |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global, resourceClassify } = state; |
|
|
|
const { auth, global, resourceClassify, resourceFilelist } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
clientHeight: global.clientHeight, |
|
|
|
resourceClassify: resourceClassify.data || [] |
|
|
|
resourceClassify: resourceClassify.data || [], |
|
|
|
resourceFilelist: resourceFilelist.data && resourceFilelist.data, |
|
|
|
isRequesting: resourceClassify.isRequesting || resourceFilelist.isRequesting |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|