smallstonesk
4 years ago
5 changed files with 136 additions and 0 deletions
@ -0,0 +1,54 @@ |
|||
import React from 'react'; |
|||
|
|||
import 'antd/es/modal/style'; |
|||
import styles from './index.module.less'; |
|||
|
|||
import { Modal } from 'antd'; |
|||
import { Graph } from '@antv/x6'; |
|||
import { base64Url2Blob, downloadFile } from '../../../utils'; |
|||
|
|||
interface IExportModalProps { |
|||
flowChart: Graph; |
|||
visible: boolean; |
|||
onClose: () => void; |
|||
} |
|||
|
|||
const ExportModal: React.FC<IExportModalProps> = (props) => { |
|||
|
|||
const { flowChart, visible, onClose } = props; |
|||
const onExportDSL = () => { |
|||
const dsl = JSON.stringify(flowChart.toJSON(), null, 2); |
|||
const blob = new Blob([dsl], { type: 'text/plain' }); |
|||
downloadFile('imove.dsl.json', blob); |
|||
}; |
|||
const onExportFlowChart = () => { |
|||
flowChart.toJPEG((dataUri: string) => { |
|||
const blob = base64Url2Blob(dataUri); |
|||
downloadFile('flowChart.png', blob); |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<Modal |
|||
className={styles.editModal} |
|||
visible={visible} |
|||
footer={null} |
|||
title={'导出'} |
|||
onOk={onClose} |
|||
onCancel={onClose} |
|||
> |
|||
<div className={styles.modalContent}> |
|||
<div className={styles.downloadWrap} onClick={onExportDSL}> |
|||
<img src="//gw.alicdn.com/tfs/TB1FaTkuqNj0u4jSZFyXXXgMVXa-128-128.png" /> |
|||
<span>DSL</span> |
|||
</div> |
|||
<div className={styles.downloadWrap} onClick={onExportFlowChart}> |
|||
<img src="//gw.alicdn.com/tfs/TB1WZeT4Hr1gK0jSZFDXXb9yVXa-128-128.png" /> |
|||
<span>流程图</span> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
); |
|||
}; |
|||
|
|||
export default ExportModal; |
@ -0,0 +1,27 @@ |
|||
.container { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.modalContent { |
|||
|
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
width: 100%; |
|||
padding: 30px 0; |
|||
|
|||
.downloadWrap { |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 15px 20px 5px; |
|||
border: 0.5px solid #EFEFEF; |
|||
|
|||
&:hover { |
|||
cursor: pointer; |
|||
background-color: #EFEFEF; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,33 @@ |
|||
import React, {useState} from 'react'; |
|||
|
|||
import styles from './index.module.less'; |
|||
|
|||
import { Button } from 'antd'; |
|||
import { Graph } from '@antv/x6'; |
|||
import ExportModal from './exportModal'; |
|||
|
|||
interface IProps { |
|||
flowChart: Graph; |
|||
} |
|||
|
|||
const Export: React.FC<IProps> = props => { |
|||
|
|||
const {flowChart} = props; |
|||
const [modalVisible, setModalVisible] = useState<boolean>(false); |
|||
|
|||
const onOpenModal = () => setModalVisible(true); |
|||
const onCloseModal = () => setModalVisible(false); |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<Button type={'primary'} size={'small'} onClick={onOpenModal}>导出</Button> |
|||
<ExportModal |
|||
flowChart={flowChart} |
|||
visible={modalVisible} |
|||
onClose={onCloseModal} |
|||
/> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default Export; |
Loading…
Reference in new issue