vForm快速入门及postMessage通信

一、vForm引入使用

根据文档完成4.1、4.2内容；

二、封装vFormEdit

<template>
    <el-card style="height: 100vh">
        <div style="height: 92vh; overflow: auto">
            <v-form-designer style="height: 98vh; position: relative; top: -48px"
                             :designer-config="designerConfig"
                             ref="vFormDesigner"></v-form-designer>
        </div>
        <span class="width_center mb10" style="bottom: 0">
            <el-button @click="cancel">关 闭</el-button>
            <el-button type="primary" @click="getFormJson">确 定</el-button>
        </span>
    </el-card>
</template>

<script>
export default {
    name: "vFormEdit",
    data() {
        return {
            designerConfig: {
                //是否显示GitHub、文档等外部链接
                externalLink: false,

                //是否显示导入JSON按钮
                importJsonButton: true,

                //是否显示导出JSON器按钮
                exportJsonButton: false,

                //是否显示导出代码按钮
                exportCodeButton: false,

                //是否显示生成SFC按钮
                generateSFCButton: false,
            },
            obj: {}
        }
    },
    methods: {
        getFormJson() {
            this.obj.type = true
            this.obj.formJson = JSON.stringify(this.$refs.vFormDesigner.getFormJson())
            if (this.$refs.vFormDesigner.getFormJson().widgetList.length) {
                console.log(this.obj)
                window.parent.postMessage(this.obj, '*');
                this.$refs.vFormDesigner.clearDesigner()
            } else {
                this.$message({
                    type: 'error',
                    message: '请编辑报表模板'
                })
            }
        },
        cancel() {
            // 清空画布
            this.$refs.vFormDesigner.clearDesigner()
            this.obj.type = false
            window.parent.postMessage(this.obj, '*');
        }
    },
    mounted() {
        window.addEventListener('message', messageEvent => {
            // console.log(messageEvent,'messageEvent---------------')
            if (messageEvent.source !== window.parent.window.parent) return;
            //    console.log('子收到messageEvent：',messageEvent);
            console.log('儿子收到vue的数据：', messageEvent.data);
            if (messageEvent.data.formJson) {
                this.$refs.vFormDesigner.setFormJson(JSON.parse(messageEvent.data.formJson))
            }

        })
    }
}
</script>

<style scoped>

</style>

三、父组件

1、在你的父组件中引入iframe；
2、使用iframeWin.postMessage发送参数；
3、使用window.addEventListener()获取并监听iframe传递来的数据；

<template>
    <el-drawer :visible.sync="drawer"
               :direction="direction"
               size="85%"
               style="margin-top: -70px"
               :before-close="handleClose">
        <iframe src="http://localhost:80/#/vForm"
                style="width: 100%; height: 100%; border: 0; margin: 0"
                ref="iframe" @load="loader"></iframe>
    </el-drawer>
</template>

<script>
export default {
    name: "reportAdd",
    data(){
        return{
            direction: 'rtl',
            drawer:false,
            form:{
                formJson:''
            }
        }
    },
    methods:{
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        loader() {
            // 传参
            const mapFrame = this.$refs['iframe'];
            const iframeWin = mapFrame.contentWindow;
            iframeWin.postMessage(
                {
                    formJson: this.form.formJson || '',
                },
                '*'
            );
        }
    },
    mounted() {
        // 获取并监听iframe传递来的数据
        let that = this
        window.addEventListener('message', function (e) {
            let res = e.data || {};
            console.log(res)
            if(res.type) {
                that.form.formJson = res.formJson || ''
            }
            that.drawer = false
        })
    }
}
</script>

<style lang="scss">
body {
    margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}

</style>

四、使用postMessage来实现父子通信跨域

1、子向父通信

parent父组件：

window.addEventListener('message', function (e) {
    let res = e.data || {};
    //自己的逻辑业务处理
})

child子组件：

window.parent.postMessage(this.obj, '*');

2、父向子通信

parent父组件：

loader() {
    const mapFrame = this.$refs['iframe'];//获取iframe
    const iframeWin = mapFrame.contentWindow;
    iframeWin.postMessage(
        {
            formJson: this.form.formJson || '',
        },
        '*'
    );//*是子页面的源(协议+主机+端口号)
}

child子组件：

window.addEventListener('message', function(e){
      console.log(e.data.data);
}

注意：
1.子向父，子postMessage,父监听message;
2.父向子，父postMessage,子监听message;
3.测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)

五、vForm表单渲染

<v-form-render :readonly="this.open? false : 'readonly'" :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
</v-form-render>

六、外部链接

<template>
    <div class="app-container">
        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitMyForm" :disabled="disabled">提 交</el-button>
            <el-button @click="close">重 置</el-button>
        </div>
    </div>
</template>

<script>
import {addEditQuest} from "@/api/dailyInfo";
import {queryQuestInfoById} from "@/api/questInfo";
import wx from 'weixin-js-sdk'
export default {
    name: 'AppList',
    data () {
        return {
            formJson: { 'widgetList': [], 'formConfig': { 'modelName': 'formData', 'refName': 'vForm', 'rulesName': 'rules', 'labelWidth': 80, 'labelPosition': 'left', 'size': '', 'labelAlign': 'label-left-align', 'cssCode': '', 'customClass': '', 'functions': '', 'layoutType': 'PC', 'onFormCreated': '', 'onFormMounted': '', 'onFormDataChange': '', 'onFormValidate': '' } },
            formData: {},
            optionData: {},
            formId: '',
            procKey: '',
            formName: '',
            disabled: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                defination: null,
                refProcKey: null,
                createName: null
            },
            // 表单参数
            form: { procKey: null, formId: null, formName: null, data: null },
            // 表单校验
            rules: {}
        }
    },
    created () {
        this.formId = this.$route.params.formId
        queryQuestInfoById(this.formId).then((response) => {
            console.log(response)
            this.$refs.vFormRef.setFormJson(JSON.parse(response.data.data.formJson))
            // this.procKey = response.refProcKey
            // this.formName = response.name
        })
    },
    methods: {
        // 取消按钮
        close () {
            this.$refs.vFormRef.resetForm()
            this.form = {}
            this.formData = {}
        },
        submitMyForm () {
            this.disabled = true;
            this.$refs.vFormRef.getFormData().then(formData => {
                this.form.data = JSON.stringify(formData)
                this.$refs.vFormRef.setFormData(JSON.parse(this.form.data))
                this.form.formJson = JSON.stringify(this.formJson)
                this.form.formData = JSON.stringify(JSON.parse(this.form.data))
                addEditQuest(this.form).then((response) => {
                    console.log(response)
                    if(response.data.code === 0){
                        this.$message({
                            type: 'success',
                            message: response.data.data
                        });
                    }else {
                        this.$message({
                            type: 'info',
                            message: response.data.data
                        });
                    }
                    this.disabled = false;
					// 推送小程序关闭方法
                    wx.miniProgram.navigateBack()
                })
            }).catch(error => {
                this.$message.error(error)
            })
        }
    }
}
</script>
<style>
.app-container{
    padding: 3vh 3vh;
}
</style>