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