|
@ -3,8 +3,10 @@ import React from 'react'; |
|
|
import 'antd/es/modal/style'; |
|
|
import 'antd/es/modal/style'; |
|
|
import styles from './index.module.less'; |
|
|
import styles from './index.module.less'; |
|
|
|
|
|
|
|
|
|
|
|
import JSZip from 'jszip'; |
|
|
import { Modal } from 'antd'; |
|
|
import { Modal } from 'antd'; |
|
|
import { Graph } from '@antv/x6'; |
|
|
import { Graph } from '@antv/x6'; |
|
|
|
|
|
import compileCode from '@imove/compile-code'; |
|
|
import { base64Url2Blob, downloadFile } from '../../../utils'; |
|
|
import { base64Url2Blob, downloadFile } from '../../../utils'; |
|
|
|
|
|
|
|
|
interface IExportModalProps { |
|
|
interface IExportModalProps { |
|
@ -21,6 +23,15 @@ const ExportModal: React.FC<IExportModalProps> = (props) => { |
|
|
const blob = new Blob([dsl], { type: 'text/plain' }); |
|
|
const blob = new Blob([dsl], { type: 'text/plain' }); |
|
|
downloadFile('imove.dsl.json', blob); |
|
|
downloadFile('imove.dsl.json', blob); |
|
|
}; |
|
|
}; |
|
|
|
|
|
const onExportCode = () => { |
|
|
|
|
|
const zip = new JSZip(); |
|
|
|
|
|
const dsl = flowChart.toJSON(); |
|
|
|
|
|
const output = compileCode(dsl); |
|
|
|
|
|
Helper.recursiveZip(zip, output); |
|
|
|
|
|
zip.generateAsync({ type: 'blob' }).then((blob) => { |
|
|
|
|
|
downloadFile('logic.zip', blob); |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
const onExportFlowChart = () => { |
|
|
const onExportFlowChart = () => { |
|
|
flowChart.toJPEG((dataUri: string) => { |
|
|
flowChart.toJPEG((dataUri: string) => { |
|
|
const blob = base64Url2Blob(dataUri); |
|
|
const blob = base64Url2Blob(dataUri); |
|
@ -30,7 +41,7 @@ const ExportModal: React.FC<IExportModalProps> = (props) => { |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<Modal |
|
|
<Modal |
|
|
className={styles.editModal} |
|
|
width={700} |
|
|
visible={visible} |
|
|
visible={visible} |
|
|
footer={null} |
|
|
footer={null} |
|
|
title={'导出'} |
|
|
title={'导出'} |
|
@ -39,11 +50,15 @@ const ExportModal: React.FC<IExportModalProps> = (props) => { |
|
|
> |
|
|
> |
|
|
<div className={styles.modalContent}> |
|
|
<div className={styles.modalContent}> |
|
|
<div className={styles.downloadWrap} onClick={onExportDSL}> |
|
|
<div className={styles.downloadWrap} onClick={onExportDSL}> |
|
|
<img src="//gw.alicdn.com/tfs/TB1FaTkuqNj0u4jSZFyXXXgMVXa-128-128.png" /> |
|
|
<img className={styles.picPreview} src="//img.alicdn.com/imgextra/i2/O1CN01lvanDL1YKp54hGgMS_!!6000000003041-2-tps-247-247.png" /> |
|
|
<span>DSL</span> |
|
|
<span>DSL</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className={styles.downloadWrap} onClick={onExportCode}> |
|
|
|
|
|
<img className={styles.picPreview} src="//img.alicdn.com/imgextra/i3/O1CN01V3wg6S27JuqePTXZv_!!6000000007777-2-tps-247-247.png" /> |
|
|
|
|
|
<span>代码</span> |
|
|
|
|
|
</div> |
|
|
<div className={styles.downloadWrap} onClick={onExportFlowChart}> |
|
|
<div className={styles.downloadWrap} onClick={onExportFlowChart}> |
|
|
<img src="//gw.alicdn.com/tfs/TB1WZeT4Hr1gK0jSZFDXXb9yVXa-128-128.png" /> |
|
|
<img className={styles.picPreview} src="//img.alicdn.com/imgextra/i1/O1CN01sVItyC1exeLraUhf6_!!6000000003938-2-tps-247-247.png" /> |
|
|
<span>流程图</span> |
|
|
<span>流程图</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -51,4 +66,21 @@ const ExportModal: React.FC<IExportModalProps> = (props) => { |
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const Helper = { |
|
|
|
|
|
recursiveZip(root: JSZip, json: any) { |
|
|
|
|
|
if (typeof json !== 'object' || json === null) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
for (const key in json) { |
|
|
|
|
|
const val = json[key]; |
|
|
|
|
|
if (typeof val === 'string') { |
|
|
|
|
|
root.file(key, val); |
|
|
|
|
|
} else { |
|
|
|
|
|
const dir = root.folder(key) as JSZip; |
|
|
|
|
|
Helper.recursiveZip(dir, val); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
export default ExportModal; |
|
|
export default ExportModal; |
|
|