|
@ -1,10 +1,114 @@ |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import Empty from '../components/empty'; |
|
|
import { Button, Col, Row, Input, Tree, Space } from '@douyinfe/semi-ui'; |
|
|
|
|
|
import { IconSearch } from '@douyinfe/semi-icons'; |
|
|
import '../style.less' |
|
|
import '../style.less' |
|
|
|
|
|
|
|
|
const ResourceRepository = (props) => { |
|
|
const ResourceRepository = (props) => { |
|
|
const { dispatch, actions } = props |
|
|
const { dispatch, actions } = props; |
|
|
|
|
|
const treeData = [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '亚洲', |
|
|
|
|
|
value: 'Asia', |
|
|
|
|
|
key: '0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '中国', |
|
|
|
|
|
value: 'China', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '北京', |
|
|
|
|
|
value: 'Beijing', |
|
|
|
|
|
key: '0-0-0', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '上海', |
|
|
|
|
|
value: 'Shanghai', |
|
|
|
|
|
key: '0-0-1', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '北美洲', |
|
|
|
|
|
value: 'North America', |
|
|
|
|
|
key: '1', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '中国', |
|
|
|
|
|
value: 'China', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '北京', |
|
|
|
|
|
value: 'Beijing', |
|
|
|
|
|
key: '0-0-0', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '上海', |
|
|
|
|
|
value: 'Shanghai', |
|
|
|
|
|
key: '0-0-1', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, { |
|
|
|
|
|
label: '亚洲', |
|
|
|
|
|
value: 'Asia', |
|
|
|
|
|
key: '3', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '中国', |
|
|
|
|
|
value: 'China', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '北京', |
|
|
|
|
|
value: 'Beijing', |
|
|
|
|
|
key: '0-0-0', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '上海', |
|
|
|
|
|
value: 'Shanghai', |
|
|
|
|
|
key: '0-0-1', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '北美洲', |
|
|
|
|
|
value: 'North America', |
|
|
|
|
|
key: '4', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '中国', |
|
|
|
|
|
value: 'China', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '北京', |
|
|
|
|
|
value: 'Beijing', |
|
|
|
|
|
key: '0-0-0', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '上海', |
|
|
|
|
|
value: 'Shanghai', |
|
|
|
|
|
key: '0-0-1', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const style = { |
|
|
|
|
|
width: 260, |
|
|
|
|
|
height: 420, |
|
|
|
|
|
border: '1px solid var(--semi-color-border)' |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
@ -24,7 +128,35 @@ const ResourceRepository = (props) => { |
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>RESOURCE REPOSITORY</div> |
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>RESOURCE REPOSITORY</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<Empty /> |
|
|
<Row className='resourceRepository'> |
|
|
|
|
|
{/* 左侧 */} |
|
|
|
|
|
<Col span={6}> |
|
|
|
|
|
<Button theme='solid' type='primary' >新建文件夹</Button> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<Input suffix={<IconSearch />} showClear placeholder="请输入"></Input> |
|
|
|
|
|
<Tree |
|
|
|
|
|
treeData={treeData} |
|
|
|
|
|
defaultExpandAll |
|
|
|
|
|
style={style} |
|
|
|
|
|
/> |
|
|
|
|
|
</Col> |
|
|
|
|
|
{/* 右侧内容 */} |
|
|
|
|
|
<Col span={18}> |
|
|
|
|
|
<Row gutter={16}> |
|
|
|
|
|
<Col span={12}> |
|
|
|
|
|
<Space> |
|
|
|
|
|
<Button theme='solid' type='primary' >上传文件</Button> |
|
|
|
|
|
<span><strong>当前文件夹:公司培训资源/人力资源部2/2022-11</strong></span> |
|
|
|
|
|
</Space> |
|
|
|
|
|
</Col> |
|
|
|
|
|
<Col span={12} justify="end"> |
|
|
|
|
|
<Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input> |
|
|
|
|
|
</Col> |
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
</Col> |
|
|
|
|
|
</Row> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</> |
|
|
</> |
|
@ -36,6 +168,7 @@ function mapStateToProps(state) { |
|
|
return { |
|
|
return { |
|
|
user: auth.user, |
|
|
user: auth.user, |
|
|
actions: global.actions, |
|
|
actions: global.actions, |
|
|
|
|
|
clientHeight: global.clientHeight, |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|