@ant-design/icons#FileExcelOutlined JavaScript Examples

sidebar = () => {
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">
        <Link to={{ pathname: "/" }}>
          <HomeOutlined />
          <span>首页</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="5">
        <Link to={{ pathname: "/user-management" }}>
          <UserOutlined />
          <span>用户管理</span>
        </Link>
      </Menu.Item>
      <SubMenu
        key="sub1"
        title={
          <span>
            <FileOutlined />
            <span>文件管理</span>
          </span>
        }
      >
        <Menu.Item key="sub1-1">
          <Link to={{ pathname: "/file/list" }}>
            <OrderedListOutlined />
            <span>文件列表</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub1-2">
          <Link to={{ pathname: "/file/add" }}>
            <UploadOutlined />
            <span>文件上传</span>
          </Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <DashboardOutlined />
            <span>可视化图表</span>
          </span>
        }
      >
        <Menu.Item key="sub2-1">
          <Link to={{ pathname: "/charts/line-chart" }}>
            <LineChartOutlined />
            <span>折线图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-2">
          <Link to={{ pathname: "/charts/bar-chart" }}>
            <BarChartOutlined />
            <span>柱状图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-3">
          <Link to={{ pathname: "/charts/pie-chart" }}>
            <PieChartOutlined />
            <span>饼状图</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub5"
        title={
          <span>
            <FileExcelOutlined />
            <span>Excel表格</span>
          </span>
        }
      >
        <Menu.Item key="sub5-1">
          <Link to={{ pathname: "/excel/export-csv" }}>
            <ExportOutlined />
            <span>Export csv</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub4"
        title={
          <span>
            <EditOutlined />
            <span>文本编辑器</span>
          </span>
        }
      >
        <Menu.Item key="sub4-1">
          <Link to={{ pathname: "/rich-text-editor" }}>
            <Html5Outlined />
            <span>富文本编辑器</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub4-2">
          <Link to={{ pathname: "/md-editor" }}>
            <FileMarkdownOutlined />
            <span>Markdown编辑器</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub3"
        title={
          <span>
            <BugOutlined />
            <span>错误页面</span>
          </span>
        }
      >
        <Menu.Item key="sub3-1">
          <Link to={{ pathname: "/not-found" }}>
            <InboxOutlined />
            <span>404</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub3-2">
          <Link to={{ pathname: "/not-allow" }}>
            <StopOutlined />
            <span>403</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <Menu.Item key="6">
        <a
          href="https://github.com/cnscorpions/React-Nest-Admin"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GithubOutlined />
          <span>Github</span>
        </a>
      </Menu.Item>
    </Menu>
  );
}

render() {

        const columns = [
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                render: (value, item) => {
                    let icon;
                    if (item['isDir']) {
                        icon = <FolderTwoTone/>;
                    } else {
                        if (item['isLink']) {
                            icon = <LinkOutlined/>;
                        } else {
                            const fileExtension = item['name'].split('.').pop().toLowerCase();
                            switch (fileExtension) {
                                case "doc":
                                case "docx":
                                    icon = <FileWordOutlined/>;
                                    break;
                                case "xls":
                                case "xlsx":
                                    icon = <FileExcelOutlined/>;
                                    break;
                                case "bmp":
                                case "jpg":
                                case "jpeg":
                                case "png":
                                case "tif":
                                case "gif":
                                case "pcx":
                                case "tga":
                                case "exif":
                                case "svg":
                                case "psd":
                                case "ai":
                                case "webp":
                                    icon = <FileImageOutlined/>;
                                    break;
                                case "md":
                                    icon = <FileMarkdownOutlined/>;
                                    break;
                                case "pdf":
                                    icon = <FilePdfOutlined/>;
                                    break;
                                case "txt":
                                    icon = <FileTextOutlined/>;
                                    break;
                                case "zip":
                                case "gz":
                                case "tar":
                                case "tgz":
                                    icon = <FileZipOutlined/>;
                                    break;
                                default:
                                    icon = <FileOutlined/>;
                                    break;
                            }
                        }
                    }

                    return <span className={'dode'}>{icon}&nbsp;&nbsp;{item['name']}</span>;
                },
                sorter: (a, b) => {
                    if (a['key'] === '..') {
                        return 0;
                    }

                    if (b['key'] === '..') {
                        return 0;
                    }
                    return a.name.localeCompare(b.name);
                },
                sortDirections: ['descend', 'ascend'],
            },
            {
                title: '大小',
                dataIndex: 'size',
                key: 'size',
                render: (value, item) => {
                    if (!item['isDir'] && !item['isLink']) {
                        return <span className={'dode'}>{renderSize(value)}</span>;
                    }
                    return <span className={'dode'}/>;
                },
                sorter: (a, b) => {
                    if (a['key'] === '..') {
                        return 0;
                    }

                    if (b['key'] === '..') {
                        return 0;
                    }
                    return a.size - b.size;
                },
            }, {
                title: '修改日期',
                dataIndex: 'modTime',
                key: 'modTime',
                sorter: (a, b) => {
                    if (a['key'] === '..') {
                        return 0;
                    }

                    if (b['key'] === '..') {
                        return 0;
                    }
                    return a.modTime.localeCompare(b.modTime);
                },
                sortDirections: ['descend', 'ascend'],
                render: (value, item) => {
                    return <span className={'dode'}>{value}</span>;
                },
            }, {
                title: '属性',
                dataIndex: 'mode',
                key: 'mode',
                render: (value, item) => {
                    return <span className={'dode'}>{value}</span>;
                },
            }, {
                title: '操作',
                dataIndex: 'action',
                key: 'action',
                width: 210,
                render: (value, item) => {
                    if (item['key'] === '..') {
                        return undefined;
                    }
                    let disableDownload = !this.state.download;
                    let disableEdit = !this.state.edit;
                    if (item['isDir'] || item['isLink']) {
                        disableDownload = true;
                        disableEdit = true
                    }
                    return (
                        <>
                            <Button type="link" size='small' disabled={disableEdit}
                                    onClick={() => this.showEditor(item['name'], item['key'])}>
                                编辑
                            </Button>
                            <Button type="link" size='small' disabled={disableDownload} onClick={async () => {
                                download(`${server}/${this.state.storageType}/${this.state.storageId}/download?file=${window.encodeURIComponent(item['key'])}&X-Auth-Token=${getToken()}&t=${new Date().getTime()}`);
                            }}>
                                下载
                            </Button>
                            <Button type={'link'} size={'small'} disabled={!this.state.rename} onClick={() => {
                                this.setState({
                                    renameVisible: true,
                                    currentFileKey: item['key']
                                })
                            }}>重命名</Button>
                            <Popconfirm
                                title="您确认要删除此文件吗?"
                                onConfirm={async () => {
                                    await this.delete(item['key']);
                                    await this.refresh();
                                }}
                                okText="是"
                                cancelText="否"
                            >
                                <Button type={'link'} size={'small'} disabled={!this.state.delete} danger>删除</Button>
                            </Popconfirm>
                        </>
                    );
                },
            }
        ];


        const {selectedRowKeys} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys) => {
                this.setState({selectedRowKeys});
            },
            getCheckboxProps: (record) => ({
                disabled: record['disabled'],
            }),
        };
        let hasSelected = selectedRowKeys.length > 0;
        if (hasSelected) {
            if (!this.state.delete) {
                hasSelected = false;
            }
        }

        const title = (
            <div className='fs-header'>
                <div className='fs-header-left'>
                    <Input value={this.state.currentDirectoryInput} onChange={this.handleCurrentDirectoryInputChange}
                           onPressEnter={this.handleCurrentDirectoryInputPressEnter}/>
                </div>
                <div className='fs-header-right'>
                    <Space>
                        <div className='fs-header-right-item'>
                            <Tooltip title="创建文件夹">
                                <Button type="primary" size="small"
                                        disabled={!this.state.upload}
                                        icon={<FolderAddOutlined/>}
                                        onClick={() => {
                                            this.setState({
                                                mkdirVisible: true
                                            })
                                        }} ghost/>
                            </Tooltip>
                        </div>

                        <div className='fs-header-right-item'>
                            <Tooltip title="上传文件">
                                <Button type="primary" size="small"
                                        icon={<CloudUploadOutlined/>}
                                        disabled={!this.state.upload}
                                        onClick={() => {
                                            window.document.getElementById('file-upload').click();
                                        }} ghost/>
                                <input type="file" id="file-upload" style={{display: 'none'}}
                                       onChange={this.handleUploadFile} multiple/>
                            </Tooltip>
                        </div>

                        <div className='fs-header-right-item'>
                            <Tooltip title="上传文件夹">
                                <Button type="primary" size="small"
                                        icon={<UploadOutlined/>}
                                        disabled={!this.state.upload}
                                        onClick={() => {
                                            window.document.getElementById('dir-upload').click();
                                        }} ghost/>
                                <input type="file" id="dir-upload" style={{display: 'none'}}
                                       onChange={this.handleUploadDir} webkitdirectory='' multiple/>
                            </Tooltip>
                        </div>

                        <div className='fs-header-right-item'>
                            <Tooltip title="刷新">
                                <Button type="primary" size="small"
                                        icon={<ReloadOutlined/>}
                                        onClick={this.refresh}
                                        ghost/>
                            </Tooltip>
                        </div>

                        <div className='fs-header-right-item'>
                            <Tooltip title="批量删除">
                                <Button type="primary" size="small" ghost danger disabled={!hasSelected}
                                        icon={<DeleteOutlined/>}
                                        loading={this.state.delBtnLoading}
                                        onClick={() => {
                                            let rowKeys = this.state.selectedRowKeys;
                                            const content = <div>
                                                您确定要删除选中的<Text style={{color: '#1890FF'}}
                                                               strong>{rowKeys.length}</Text>条记录吗？
                                            </div>;
                                            confirm({
                                                icon: <ExclamationCircleOutlined/>,
                                                content: content,
                                                onOk: async () => {
                                                    for (let i = 0; i < rowKeys.length; i++) {
                                                        if (rowKeys[i] === '..') {
                                                            continue;
                                                        }
                                                        await this.delete(rowKeys[i]);
                                                    }
                                                    this.refresh();
                                                },
                                                onCancel() {

                                                },
                                            });
                                        }}>

                                </Button>
                            </Tooltip>
                        </div>
                    </Space>
                </div>
            </div>
        );

        return (
            <div>
                <Card title={title} bordered={true} size="small" style={{minHeight: this.state.minHeight}}>

                    <Table columns={columns}
                           rowSelection={rowSelection}
                           dataSource={this.state.files}
                           size={'small'}
                           pagination={false}
                           loading={this.state.loading}

                           onRow={record => {
                               return {
                                   onDoubleClick: event => {
                                       if (record['isDir'] || record['isLink']) {
                                           if (record['path'] === '..') {
                                               // 获取当前目录的上级目录
                                               let currentDirectory = this.state.currentDirectory;
                                               let parentDirectory = currentDirectory.substring(0, currentDirectory.lastIndexOf('/'));
                                               this.loadFiles(parentDirectory);
                                           } else {
                                               this.loadFiles(record['path']);
                                           }
                                       } else {

                                       }
                                   },
                               };
                           }}
                    />
                </Card>

                {
                    this.state.mkdirVisible ?
                        <Modal
                            title="创建文件夹"
                            visible={this.state.mkdirVisible}
                            okButtonProps={{form: 'mkdir-form', key: 'submit', htmlType: 'submit'}}
                            onOk={() => {
                                this.mkdirFormRef.current
                                    .validateFields()
                                    .then(async values => {
                                        this.mkdirFormRef.current.resetFields();
                                        let params = {
                                            'dir': this.state.currentDirectory + '/' + values['dir']
                                        }
                                        let paramStr = qs.stringify(params);

                                        this.setState({
                                            confirmLoading: true
                                        })
                                        let result = await request.post(`/${this.state.storageType}/${this.state.storageId}/mkdir?${paramStr}`);
                                        if (result.code === 1) {
                                            message.success('创建成功');
                                            this.loadFiles(this.state.currentDirectory);
                                        } else {
                                            message.error(result.message);
                                        }

                                        this.setState({
                                            confirmLoading: false,
                                            mkdirVisible: false
                                        })
                                    })
                                    .catch(info => {

                                    });
                            }}
                            confirmLoading={this.state.confirmLoading}
                            onCancel={() => {
                                this.setState({
                                    mkdirVisible: false
                                })
                            }}
                        >
                            <Form ref={this.mkdirFormRef} id={'mkdir-form'}>
                                <Form.Item name='dir' rules={[{required: true, message: '请输入文件夹名称'}]}>
                                    <Input autoComplete="off" placeholder="请输入文件夹名称"/>
                                </Form.Item>
                            </Form>
                        </Modal> : undefined
                }

                {
                    this.state.renameVisible ?
                        <Modal
                            title="重命名"
                            visible={this.state.renameVisible}
                            okButtonProps={{form: 'rename-form', key: 'submit', htmlType: 'submit'}}
                            onOk={() => {
                                this.renameFormRef.current
                                    .validateFields()
                                    .then(async values => {
                                        this.renameFormRef.current.resetFields();

                                        try {
                                            let currentDirectory = this.state.currentDirectory;
                                            if (!currentDirectory.endsWith("/")) {
                                                currentDirectory += '/';
                                            }
                                            let params = {
                                                'oldName': this.state.currentFileKey,
                                                'newName': currentDirectory + values['newName'],
                                            }

                                            if (params['oldName'] === params['newName']) {
                                                message.success('重命名成功');
                                                return;
                                            }

                                            let paramStr = qs.stringify(params);

                                            this.setState({
                                                confirmLoading: true
                                            })
                                            let result = await request.post(`/${this.state.storageType}/${this.state.storageId}/rename?${paramStr}`);
                                            if (result['code'] === 1) {
                                                message.success('重命名成功');
                                                this.refresh();
                                            } else {
                                                message.error(result.message);
                                            }
                                        } finally {
                                            this.setState({
                                                confirmLoading: false,
                                                renameVisible: false
                                            })
                                        }
                                    })
                                    .catch(info => {

                                    });
                            }}
                            confirmLoading={this.state.confirmLoading}
                            onCancel={() => {
                                this.setState({
                                    renameVisible: false
                                })
                            }}
                        >
                            <Form id={'rename-form'}
                                  ref={this.renameFormRef}
                                  initialValues={{newName: getFileName(this.state.currentFileKey)}}>
                                <Form.Item name='newName' rules={[{required: true, message: '请输入新的名称'}]}>
                                    <Input autoComplete="off" placeholder="新的名称"/>
                                </Form.Item>
                            </Form>
                        </Modal> : undefined
                }

                <Modal
                    title={"编辑 " + this.state.fileName}
                    className='modal-no-padding'
                    visible={this.state.editorVisible}
                    destroyOnClose={true}
                    width={window.innerWidth * 0.8}
                    centered={true}
                    okButtonProps={{form: 'rename-form', key: 'submit', htmlType: 'submit'}}
                    onOk={this.edit}
                    confirmLoading={this.state.confirmLoading}
                    onCancel={this.hideEditor}
                >
                    <MonacoEditor
                        language="javascript"
                        height={window.innerHeight * 0.8}
                        theme="vs-dark"
                        value={this.state.fileContent}
                        options={{
                            selectOnLineNumbers: true
                        }}
                        editorDidMount={(editor, monaco) => {
                            console.log('editorDidMount', editor);
                            editor.focus();
                        }}
                        onChange={(newValue, e) => {
                            console.log('onChange', newValue, e);
                            this.setState(
                                {
                                    fileContent: newValue
                                }
                            )
                        }}
                    />
                </Modal>
            </div>
        );
    }