@ant-design/icons#FilePdfOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#FilePdfOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: DataTableDropMenu.jsx From erp-crm with MIT License | 6 votes |
|
export default function DataTableDropMenu({ row, entity }) {
const dispatch = useDispatch();
const { erpContextAction } = useErpContext();
const { readPanel, updatePanel, modal } = erpContextAction;
const item = useSelector(selectItemById(row._id));
function Read() {
dispatch(erp.currentItem({ data: item }));
readPanel.open();
}
function Edit() {
dispatch(erp.currentAction({ actionType: 'update', data: item }));
updatePanel.open();
}
function Delete() {
dispatch(erp.currentAction({ actionType: 'delete', data: item }));
modal.open();
}
function Download() {
window.open(`${DOWNLOAD_BASE_URL}${entity}/${entity}-${row._id}.pdf`, '_blank');
}
return (
<Menu style={{ minWidth: 130 }}>
<Menu.Item key={`${uniqueId()}`} icon={<EyeOutlined />} onClick={Read}>
Show
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<EditOutlined />} onClick={Edit}>
Edit
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<FilePdfOutlined />} onClick={Download}>
Download
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<DeleteOutlined />} onClick={Delete}>
Delete
</Menu.Item>
</Menu>
);
}
Example #2
| Source File: ReportWorkspace.jsx From node-project-manager with Apache License 2.0 | 5 votes |
|
ReportWorkspace = ({ component: Component, report,...rest }) => {
const openNotification = result => {
// TODO :
switch (result.type){
case "success":
notification.success({
message: `${result.message}`,
placement:'bottomRight'
});
break;
default:
notification.error({
message: result.message,
placement:'bottomRight'
});
}
};
return (
<Route
{...rest}
render={(props) =>
<div className="reportWorkspace">
<Component {...props} />
<hr/>
<div className="buttonEra">
<Button
className="buttonReport"
ghost={false}
type="default"
icon={<FilePdfOutlined />}
onClick={async ()=>{
const pdfBlob = await Http.postPDF(report,report.reportUrl);
if (pdfBlob.message){
openNotification(pdfBlob);
}else{
const url = URL.createObjectURL(pdfBlob);
window.open(url,'_blank');
}
}}
>Generar Informe</Button>
</div>
</div>
}
/>
);
}
Example #3
| Source File: DataTableDropMenu.jsx From erp-crm with MIT License | 5 votes |
|
export default function DataTableDropMenu({ row, entity }) {
const dispatch = useDispatch();
const { erpContextAction } = useErpContext();
const { readPanel, updatePanel, recordPanel, modal } = erpContextAction;
const item = useSelector(selectItemById(row._id));
function Read() {
dispatch(erp.currentItem({ data: item }));
readPanel.open();
}
function RecordPayment() {
dispatch(erp.currentAction({ actionType: 'recordPayment', data: item }));
recordPanel.open();
dispatch(erp.currentItem({ data: item }));
}
function Edit() {
dispatch(erp.currentAction({ actionType: 'update', data: item }));
updatePanel.open();
}
function Delete() {
dispatch(erp.currentAction({ actionType: 'delete', data: item }));
modal.open();
}
function Download() {
window.open(`${DOWNLOAD_BASE_URL}${entity}/${entity}-${row._id}.pdf`, '_blank');
}
return (
<Menu style={{ minWidth: 130 }}>
<Menu.Item key={`${uniqueId()}`} icon={<EyeOutlined />} onClick={Read}>
Show
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<CreditCardOutlined />} onClick={RecordPayment}>
Record Payment
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<EditOutlined />} onClick={Edit}>
Edit
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<FilePdfOutlined />} onClick={Download}>
Download
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<DeleteOutlined />} onClick={Delete}>
Delete
</Menu.Item>
</Menu>
);
}
Example #4
| Source File: FileSystem.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
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} {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>
);
}
Example #5
| Source File: ReadItem.jsx From erp-crm with MIT License | 4 votes |
|
export default function ReadItem({ config }) {
const { entity, ENTITY_NAME } = config;
const dispatch = useDispatch();
const { erpContextAction } = useErpContext();
const { moneyFormatter } = useMoney();
const { result: currentResult } = useSelector(selectCurrentItem);
const { readPanel, updatePanel } = erpContextAction;
const [itemslist, setItemsList] = useState([]);
const [currentErp, setCurrentErp] = useState({
status: '',
client: {
company: '',
email: '',
phone: '',
address: '',
},
subTotal: 0,
taxTotal: 0,
taxRate: 0,
total: 0,
credit: 0,
number: 0,
year: 0,
});
useEffect(() => {
if (currentResult) {
const { items } = currentResult;
setItemsList(items);
setCurrentErp(currentResult);
}
}, [currentResult]);
useEffect(() => {
console.info('itemslist', itemslist);
}, [itemslist]);
return (
<>
<PageHeader
onBack={() => readPanel.close()}
title={`${ENTITY_NAME} # ${currentErp.number}/${currentErp.year || ''}`}
ghost={false}
tags={<Tag color="volcano">{currentErp.paymentStatus || currentErp.status}</Tag>}
// subTitle="This is cuurent erp page"
extra={[
<Button
key={`${uniqueId()}`}
onClick={() => readPanel.close()}
icon={<CloseCircleOutlined />}
>
Close
</Button>,
<Button
key={`${uniqueId()}`}
onClick={() => {
window.open(
`${DOWNLOAD_BASE_URL}${entity}/${entity}-${currentErp._id}.pdf`,
'_blank'
);
}}
icon={<FilePdfOutlined />}
>
Download PDF
</Button>,
<Button
key={`${uniqueId()}`}
onClick={() => {
dispatch(
erp.currentAction({
actionType: 'update',
data: currentErp,
})
);
updatePanel.open();
}}
type="primary"
icon={<EditOutlined />}
>
Edit Erp
</Button>,
]}
style={{
padding: '20px 0px',
}}
>
<Row>
<Statistic title="Status" value={currentErp.status} />
<Statistic
title="SubTotal"
value={moneyFormatter({ amount: currentErp.subTotal })}
style={{
margin: '0 32px',
}}
/>
<Statistic
title="Total"
value={moneyFormatter({ amount: currentErp.total })}
style={{
margin: '0 32px',
}}
/>
<Statistic
title="Balance"
value={moneyFormatter({ amount: currentErp.credit })}
style={{
margin: '0 32px',
}}
/>
</Row>
</PageHeader>
<Divider dashed />
<Descriptions title={`Client : ${currentErp.client.company}`}>
<Descriptions.Item label="Address">{currentErp.client.address}</Descriptions.Item>
<Descriptions.Item label="E-mail">{currentErp.client.email}</Descriptions.Item>
<Descriptions.Item label="Phone">{currentErp.client.phone}</Descriptions.Item>
</Descriptions>
<Divider />
<Row gutter={[12, 0]}>
<Col className="gutter-row" span={11}>
<p>
<strong>ITEM</strong>
</p>
</Col>
<Col className="gutter-row" span={4}>
<p
style={{
textAlign: 'right',
}}
>
<strong>PRICE</strong>
</p>
</Col>
<Col className="gutter-row" span={4}>
<p
style={{
textAlign: 'right',
}}
>
<strong>QUANTITY</strong>
</p>
</Col>
<Col className="gutter-row" span={5}>
<p
style={{
textAlign: 'right',
}}
>
<strong>TOTAL</strong>
</p>
</Col>
<Divider />
</Row>
{itemslist.map((item) => (
<Item key={item._id} item={item}></Item>
))}
<div
style={{
width: '300px',
float: 'right',
textAlign: 'right',
fontWeight: '700',
}}
>
<Row gutter={[12, -5]}>
<Col className="gutter-row" span={12}>
<p>Sub Total :</p>
</Col>
<Col className="gutter-row" span={12}>
<p>{moneyFormatter({ amount: currentErp.subTotal })}</p>
</Col>
<Col className="gutter-row" span={12}>
<p>Tax Total ({currentErp.taxRate * 100} %) :</p>
</Col>
<Col className="gutter-row" span={12}>
<p>{moneyFormatter({ amount: currentErp.taxTotal })}</p>
</Col>
<Col className="gutter-row" span={12}>
<p>Total :</p>
</Col>
<Col className="gutter-row" span={12}>
<p>{moneyFormatter({ amount: currentErp.total })}</p>
</Col>
</Row>
</div>
</>
);
}
Example #6
| Source File: index.js From bank-client with MIT License | 4 votes |
|
function TransactionHistory({ intl }) {
const { dateFormat, transactions, isLoading, user } = useSelector(
stateSelector,
);
const dispatch = useDispatch();
const onGetTransactionHistory = (currentPage = 1) =>
dispatch(getTransactionHistoryAction(currentPage));
const onGetConfirmationFile = (uuid) =>
dispatch(getConfirmationFileAction(uuid));
useEffect(() => {
onGetTransactionHistory();
}, []);
const tableLoading = {
spinning: isLoading,
indicator: <LoadingIndicator />,
};
const pagination = {
current: transactions?.meta?.page,
pageSize: transactions?.meta?.take,
total: transactions?.meta?.itemCount,
};
const columns = [
{
title: <FormattedMessage {...messages.sender} />,
render: ({ senderBill }) => (
<div>
<StyledUser>
{truncateString(
`${senderBill.user.firstName} ${senderBill.user.lastName}`,
20,
)}
</StyledUser>
<div>{senderBill.accountBillNumber}</div>
</div>
),
},
{
title: <FormattedMessage {...messages.recipient} />,
render: ({ recipientBill }) => (
<div>
<StyledUser>
{truncateString(
`${recipientBill.user.firstName} ${recipientBill.user.lastName}`,
20,
)}
</StyledUser>
<div>{recipientBill.accountBillNumber}</div>
</div>
),
},
{
title: <FormattedMessage {...messages.amountMoney} />,
render: ({ amountMoney, senderBill }) => (
<div>
{senderBill.user.uuid === user.uuid ? (
<StyledSenderAmountMoney>
-{amountMoney} {senderBill.currency.name}
</StyledSenderAmountMoney>
) : (
<>
{amountMoney} {senderBill.currency.name}
</>
)}
</div>
),
},
{
title: <FormattedMessage {...messages.transferTitle} />,
render: ({ transferTitle }) => <div>{transferTitle}</div>,
},
{
title: <FormattedMessage {...messages.date} />,
render: ({ updatedAt }) => (
<div>{format(new Date(updatedAt), dateFormat)}</div>
),
},
{
title: <FormattedMessage {...messages.confirmation} />,
render: ({ uuid }) => (
<StyledTag
onClick={() => onGetConfirmationFile(uuid)}
color="blue"
key={uuid}
>
<FilePdfOutlined /> <FormattedMessage {...messages.downloadPdf} />
</StyledTag>
),
},
];
return (
<StyledTable
sender={intl.formatMessage(messages.sender)}
recipient={intl.formatMessage(messages.recipient)}
amountMoney={intl.formatMessage(messages.amountMoney)}
transferTitle={intl.formatMessage(messages.transferTitle)}
date={intl.formatMessage(messages.date)}
confirmation={intl.formatMessage(messages.confirmation)}
rowKey={({ uuid }) => uuid}
loading={tableLoading}
dataSource={transactions.data}
columns={columns}
pagination={pagination}
onChange={({ current }) => onGetTransactionHistory(current)}
/>
);
}
