task/resources/assets/js/main/components/docs/flow/index.vue

<template>
    <div class="flow-content">
        <iframe ref="myFlow" class="flow-iframe" :src="url"></iframe>
        <div v-if="loadIng" class="flow-loading"><w-loading></w-loading></div>
        <div v-if="readOnly && zoom > 0" class="zoom-box" :class="{'zoom-ing': zoomIng}">
            <div class="zoom-svg">
                <svg t="1600613502044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1161" width="18" height="18"><path d="M598.646154 401.723077H279.630769c-15.753846 0-27.569231 11.815385-27.569231 31.507692 0 15.753846 11.815385 27.569231 31.507693 27.569231h319.015384c15.753846 0 27.569231-11.815385 27.569231-31.507692 0-15.753846-15.753846-27.569231-31.507692-27.569231z" fill="#666666" p-id="1162"></path><path d="M921.6 850.707692l-204.8-196.923077c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l204.8 196.923077c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-15.753846 11.815385-35.446154 0-43.323077z m-484.430769-126.030769c-161.476923 0-295.384615-133.907692-295.384616-295.384615S275.692308 133.907692 437.169231 133.907692s295.384615 133.907692 295.384615 295.384616-129.969231 295.384615-295.384615 295.384615z" fill="#666666" p-id="1163"></path></svg>
                <svg t="1600613514136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1403" width="18" height="18"><path d="M929.476923 854.646154l-212.676923-200.861539c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l212.676923 200.861539c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-11.815385 11.815385-31.507692 0-43.323077z m-488.369231-126.030769c-161.476923 0-295.384615-133.907692-295.384615-295.384616s133.907692-295.384615 295.384615-295.384615 295.384615 133.907692 295.384616 295.384615-133.907692 295.384615-295.384616 295.384616z" fill="#666666" p-id="1404"></path><path d="M598.646154 401.723077h-129.969231V271.753846c0-15.753846-11.815385-31.507692-31.507692-31.507692s-31.507692 11.815385-31.507693 31.507692v129.969231H279.630769c-15.753846 0-31.507692 11.815385-31.507692 31.507692s11.815385 31.507692 31.507692 31.507693h129.969231V590.769231c0 15.753846 11.815385 31.507692 31.507692 31.507692s31.507692-11.815385 31.507693-31.507692v-129.969231h129.96923c15.753846 0 31.507692-11.815385 31.507693-31.507692s-15.753846-27.569231-35.446154-27.569231z" fill="#666666" p-id="1405"></path></svg>
            </div>
            <Slider class="zoom-slider" v-model="zoom" :min="1" :max="300" :tip-format="formatZoom" @on-change="zoomIng=false" @on-input="zoomIng=true"></Slider>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .flow-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .flow-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 0 0;
            border: 0;
            float: none;
            margin: -1px 0 0;
            max-width: none;
            outline: 0;
            padding: 0;
        }
        .flow-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .zoom-box {
            position: absolute;
            left: 20px;
            bottom: 20px;
            height: 34px;
            max-width: 50%;
            border-radius: 3px;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            background-color: #fff;
            color: #666;
            z-index: 10;
            padding: 0 6px;
            .zoom-svg {
                height: 34px;
                display: flex;
                align-items: center;
                .icon {
                    margin: 0 6px;
                }
            }
            .zoom-slider {
                display: none;
                padding: 0 10px;
                width: 300px;
                max-width: 100%;
            }
            &:hover,
            &.zoom-ing {
                .zoom-svg {
                    display: none;
                }
                .zoom-slider {
                    display: inline-block;
                }
            }
        }
    }
</style>
<script>
    import JSPDF from "jspdf";

    export default {
        name: "Flow",
        props: {
            value: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            readOnly: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                loadIng: true,

                flow: null,
                url: window.location.origin + '/js/grapheditor/' + (this.readOnly ? 'viewer' : 'index') + '.html',

                zoom: -1,
                zoomIng: false,
            }
        },
        mounted() {
            window.addEventListener('message', this.handleMessage)
            this.flow = this.$refs.myFlow.contentWindow;
        },
        activated() {
            window.addEventListener('message', this.handleMessage)
            this.flow = this.$refs.myFlow.contentWindow;
        },
        watch: {
            value: {
                handler() {
                    this.updateContent();
                },
                deep: true
            },
            zoom(val) {
                this.flow.postMessage({
                    act: 'zoom',
                    params: {
                        zoom: val / 100
                    }
                }, '*')
            }
        },
        methods: {
            formatZoom(val) {
                return val + '%';
            },

            updateContent() {
                this.zoom = Math.max(1, (typeof this.value.scale === "number" ? this.value.scale : 1) * 100)
                this.flow.postMessage({
                    act: 'setXml',
                    params: Object.assign(this.value, typeof this.value.xml === "undefined" ? {
                        xml: this.value.content
                    } : {})
                }, '*')
            },

            handleMessage (event) {
                const data = event.data;
                switch (data.act) {
                    case 'ready':
                        this.loadIng = false;
                        this.updateContent();
                        break

                    case 'change':
                        this.$emit('input', data.params);
                        break

                    case 'save':
                        this.$emit('saveData');
                        break

                    case 'imageContent':
                        let pdf = new JSPDF({
                            format: [data.params.width, data.params.height]
                        });
                        pdf.addImage(data.params.content, 'PNG', 0, 0, 0, 0);
                        pdf.save(`${data.params.name}.pdf`);
                        break
                }
            },

            exportPNG(name, scale = 10) {
                this.flow.postMessage({
                    act: 'exportPNG',
                    params: {
                        name: name || this.$L('无标题'),
                        scale: scale,
                        type: 'png',
                    }
                }, '*')
            },

            exportPDF(name, scale = 10) {
                this.flow.postMessage({
                    act: 'exportPNG',
                    params: {
                        name: name || this.$L('无标题'),
                        scale: scale,
                        type: 'imageContent',
                    }
                }, '*')
            }
        },
    }
</script>