流程表单的导入导出替换方案--源代码模式

最近要做流程表单的导入导出功能,但总觉得这个功能有点多余。 这个功能只是为了方便迁移配置到环境,为什么需要搞这么复杂呢。 后面想想,觉得没必要这么做,我只作一个源代码示例的功能即可。 意思是说,有一个页面有两个Tab,一个是设计模式,一个是源代码模式。 效果如下:

设计器模式

源代码模式

该实现只需要前端参与实现即可,后端不需要再参与进来, 示例代码如下:

<template>
    <div>

        <el-tabs tab-position="top"  v-model="activeTabName" type="card" @tab-click="handleClick">
            <el-tab-pane label="设计器" name="design">
                ///设计器内容
            </el-tab-pane>
            <el-tab-pane label="源代码" name="sourceCode">
                <el-row>
                    <el-col :span=24 class="sortable_container">
                        <el-input type="textarea" v-model="formAdd.formContext" :autosize="true"></el-input>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
 

    export default {
        
        data() {
            return {
                 
                activeTabName:"design"
            };
        },
        methods: {
            handleClick(tab) {
                if(tab.name==='design') {
                    //加载表单内容,让源代码生效
                    this.sortable_item = JSON.parse(this.formAdd.formContext || '[]');

                }else if(tab.name==='sourceCode') {
        //输出表单的源代码
                    this.formAdd.formContext = JSON.stringify(this.sortable_item.filter(v => {
                        return !!v.obj.name
                    }));
                }
            },

这样,只要修改了源代码,切换到设计器模式,源代码修改的内容就已经生效了,不需要再做后端的开发了。更省事,也更直观了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励