free-sun
/
HumanResource
18
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

培训资源存储库框架调整

master
周沫沫历险记 2 years ago
parent
ae3c2d6581
commit
27c157775e
2 changed files with 143 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      web/client/src/sections/humanAffairs/containers/resourceRepository.jsx
  2. 23
      web/client/src/sections/humanAffairs/style.less

138
web/client/src/sections/humanAffairs/containers/resourceRepository.jsx
View File

@ -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>

23
web/client/src/sections/humanAffairs/style.less
View File

@ -9,13 +9,24 @@
}
.resourceRepository{
margin-top: 20px;
.semi-button{
margin-bottom: 20px;
.left{
.semi-input-wrapper{
width: 260px;
}
.semi-tree-wrapper{
margin-top: 20px;
}
}
.semi-input-wrapper{
width: 260px;
.right{
.path-lable{
margin-bottom: 20px;
}
.semi-input-wrapper{
margin-bottom: 20px;
}
}
.semi-tree-wrapper{
margin-top: 20px;
.semi-button{
margin-bottom: 20px;
}
}

Write Preview
Loading…
Cancel
Save