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