HumanResource/web/client/src/sections/humanAffairs/containers/resourceRepository.jsx

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 { IconSearch, IconEditStroked, IconMinusCircleStroked, IconPlusCircleStroked } from '@douyinfe/semi-icons';
import { getResourceClassify } from '../actions/resourceRepository';
import '../style.less'

const ResourceRepository = (props) => {
    const { dispatch, actions, clientHeight, resourceClassify } = props;

    const [treeData, setTreeData] = useState([]);
    const ref = useRef();

    useEffect(() => {
        dispatch(getResourceClassify()).then(res => {
            const { success, payload } = res;
            if (success)
                setTreeData(payload.data);
        });
    }, [])

    const style = {
        width: 260,
        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',
        }
    ];
    const renderLabel = (label, data) => (<div>
        <Tooltip content={label}><span >{label.length > 8 ? label.substring(0, 8) + '...' : label}</span></Tooltip>
        {true == data.operation ?
            <span className='tree-icon'>
                <IconEditStroked size='default' onClick={() => alert("bianji")} />
                <IconMinusCircleStroked size='default' onClick={() => alert("sahnchu")} />
                {data.children ? <IconPlusCircleStroked size='default' onClick={() => alert("+")} /> : ''}
            </span>
            : ''}
    </div>
    )

    return (
        <>
            <div style={{ padding: '0px 12px' }}>
                <div style={{ display: 'flex' }}>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>培训</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>培训档案</div>
                    <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', 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>
                            <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>培训资源储存库</div>
                            <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>RESOURCE REPOSITORY</div>
                        </div>
                    </div>
                    <Row className='resourceRepository'>
                        {/* 左侧 */}
                        <Col className='left' span={6}>
                            <Button theme='solid' type='primary' >新建文件夹</Button>
                            <br />
                            <Input suffix={<IconSearch />} showClear onChange={v => ref.current.search(v)} placeholder="请输入"></Input>
                            <Tree
                                ref={ref}
                                treeData={treeData}
                                defaultExpandAll
                                filterTreeNode
                                searchRender={false}
                                blockNode={false}
                                directory
                                style={style}
                                renderLabel={renderLabel}
                            />
                        </Col>
                        {/* 右侧内容 */}
                        <Col span={18} className='right'>
                            <Row type="flex" justify="space-around" align="middle">
                                <Col span={18}>
                                    <Space>
                                        <Button theme='solid' type='primary' >上传文件</Button>
                                        <span className="path-lable"><strong>当前文件夹：公司培训资源/人力资源部2/2022-11</strong></span>
                                    </Space>
                                </Col>
                                <Col span={6} >
                                    <Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input>
                                </Col>
                            </Row>
                            <Table columns={columns} dataSource={data} pagination={false} />
                        </Col>
                    </Row>
                </div>
            </div>
        </>
    )
}

function mapStateToProps(state) {
    const { auth, global, resourceClassify } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        resourceClassify: resourceClassify.data || []
    };
}

export default connect(mapStateToProps)(ResourceRepository);