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

星痕

发布于 2019-10-14 15:31:46

5100

发布于 2019-10-14 15:31:46

最近要做流程表单的导入导出功能，但总觉得这个功能有点多余。这个功能只是为了方便迁移配置到环境，为什么需要搞这么复杂呢。后面想想，觉得没必要这么做，我只作一个源代码示例的功能即可。意思是说，有一个页面有两个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
                    }));
                }
            },

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.10.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

迁移