最近要做流程表单的导入导出功能，但总觉得这个功能有点多余。 这个功能只是为了方便迁移配置到环境，为什么需要搞这么复杂呢。 后面想想，觉得没必要这么做，我只作一个源代码示例的功能即可。 意思是说，有一个页面有两个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
}));
}
},这样，只要修改了源代码,切换到设计器模式，源代码修改的内容就已经生效了，不需要再做后端的开发了。更省事，也更直观了。