|
|
@ -1,11 +1,11 @@ |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Button, Col, Row, Input, Tree, Space } from '@douyinfe/semi-ui'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space } from '@douyinfe/semi-ui'; |
|
|
|
import { IconSearch } from '@douyinfe/semi-icons'; |
|
|
|
import '../style.less' |
|
|
|
|
|
|
|
const ResourceRepository = (props) => { |
|
|
|
const { dispatch, actions } = props; |
|
|
|
const { dispatch, actions, clientHeight } = props; |
|
|
|
const treeData = [ |
|
|
|
{ |
|
|
|
label: '亚洲', |
|
|
@ -106,9 +106,123 @@ const ResourceRepository = (props) => { |
|
|
|
|
|
|
|
const style = { |
|
|
|
width: 260, |
|
|
|
height: 420, |
|
|
|
height: clientHeight - 294, |
|
|
|
border: '1px solid var(--semi-color-border)' |
|
|
|
}; |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '文件类型', |
|
|
|
dataIndex: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '文件名称', |
|
|
|
dataIndex: 'size', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '大小', |
|
|
|
dataIndex: 'owner', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '更新时间', |
|
|
|
dataIndex: 'updateTime', |
|
|
|
}, { |
|
|
|
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', |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
@ -120,7 +234,7 @@ const ResourceRepository = (props) => { |
|
|
|
<div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div> |
|
|
|
<div style={{ color: '#033C9A', fontSize: 14 }}>培训资源储存库</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 12 }}> |
|
|
|
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px', marginTop: 12 }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}> |
|
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
|
|
@ -130,31 +244,31 @@ const ResourceRepository = (props) => { |
|
|
|
</div> |
|
|
|
<Row className='resourceRepository'> |
|
|
|
{/* 左侧 */} |
|
|
|
<Col span={6}> |
|
|
|
<Col className='left' span={6}> |
|
|
|
<Button theme='solid' type='primary' >新建文件夹</Button> |
|
|
|
<br /> |
|
|
|
<Input suffix={<IconSearch />} showClear placeholder="请输入"></Input> |
|
|
|
<Tree |
|
|
|
treeData={treeData} |
|
|
|
defaultExpandAll |
|
|
|
directory |
|
|
|
style={style} |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
{/* 右侧内容 */} |
|
|
|
<Col span={18}> |
|
|
|
<Row gutter={16}> |
|
|
|
<Col span={12}> |
|
|
|
<Col span={18} className='right'> |
|
|
|
<Row type="flex" justify="space-around" align="middle"> |
|
|
|
<Col span={18}> |
|
|
|
<Space> |
|
|
|
<Button theme='solid' type='primary' >上传文件</Button> |
|
|
|
<span><strong>当前文件夹:公司培训资源/人力资源部2/2022-11</strong></span> |
|
|
|
<span className="path-lable"><strong>当前文件夹:公司培训资源/人力资源部2/2022-11</strong></span> |
|
|
|
</Space> |
|
|
|
</Col> |
|
|
|
<Col span={12} justify="end"> |
|
|
|
<Col span={6} > |
|
|
|
<Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
|
|
|
|
<br /> |
|
|
|
<Table columns={columns} dataSource={data} pagination={false} /> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</div> |
|
|
|