sparrow-js·场景化低代码搭建-编辑区块篇

前言

sparrow-js 提供两个重要提升研发效率的设计：一个是编辑区块，一个是搜索组件，本次主要介绍编辑区块部分的设计思路；采用自问自答的方式说明编辑区块的由来。

编辑区块是什么？

特定场景功能的代码片段，通过基础组件和有特定功能的逻辑组件组合而成，可增删改；可生成可读性强的源代码。

为什么会有编辑区块？

编辑区块是为sparrow-js的核心目标提效量身定做的，sparrow本身有基本可视化搭建的能力，但是通用的可视化方案提效能力有限，可能只是基础组件的拼接，操作繁杂，输出的代码更侧重UI层面的代码。前端开发由UI部分和逻辑部分组成，UI部分通过基础组件的可视化搭建就可以完成，逻辑部分比如表单上面的删除、编辑、上下线等操作，这些带有特定功能逻辑的代码需找到个介质来承载，编辑区块就是为了承载基础UI和特定逻辑功能的容器。

编辑区块是怎样使用的？

先来张图片：

image

选择界面右边的工具盒-》编辑区块，点击或者拖拽需要的区块即可，点击视图区域即可以配置，删除，新增等操作。

编辑区块是怎样制作出来的？

编辑区块,已高级表单为例：

image

文件结构

├── AdvancedTable
│   ├── AddButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── CancelButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── DeleteButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── EditButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── NewButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── SaveButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── index.ts
│   └── init.ts

1.首先需要先写出完整的静态功能区块，如下简化代码

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column label="Title">
        <template slot-scope="scope">
          <el-input></el-input>
          <template v-else> {{ scope.row.title }}</template>
        </template>
      </el-table-column>

       <el-table-column label="操作" width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.editable">
            <span v-if="scope.row.isNew">
              <a @click="saveRow(scope.row)">添加</a>
              <el-button slot="reference">删除</el-button>
            </span>
            <span v-else>
              <a @click="saveRow(scope.row)">保存</a>
              <a @click="cancel(scope.row.id)">取消</a>
            </span>
          </span>
          <span v-else>
            <a @click="toggle(scope.row.id)">编辑</a>
            <el-button slot="reference">删除</el-button>
          </span>
      
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="newMember">新增</el-button>

  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      tableItem: {
        id: '7100001',
        title: 'hello world',
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 获取数据
    },
    newMember () {
      // 新增
    },
    toggle (id) {
      // 编辑
    },
    cancel (id) {
      // 取消
    },
    remove (id) {
      // 移除
    },
    saveRow (row) {
      // 保存
    },
  }
}
</script>

将1代码拆解成如上目录结构，
如编辑按钮，继承基础按钮，定制化配置，在从vue文件取出方法、数据、引用等内容，为后续组装提供信息。

// 动态化按钮
export default class EditButton extends Button{
  name: string = 'EditButton';
  vueParse: any;
  constructor (params: any) {
    super(params)
    this.config.model.custom.label = '编辑';
    this.config.model.attr.size = 'mini';
    this.config.model.attr.type = 'primary';
    this.config.model.attr['@click'] = 'toggle(row.id)';
    this.setAttrsToStr();
    this.init();
  }
  
  private init () {
    const fileStr = fsExtra.readFileSync(path.join(Config.templatePath, 'EditBlock/AdvancedTable/EditButton',  'index.vue'), 'utf8');
    this.vueParse = new VueParse(this.uuid, fileStr);
  }
}


// 按钮VUE 文件，存放逻辑
<template>
  <div>
    <el-button class="filter-item" style="margin-left: 10px;" typ  e="primary" icon="el-icon-edit" @click="handleCreate">
      新增
    </el-button>
  </div>
</template>
<script>
export default {
  methods: {
    toggle (id) {
      const target = this.list.find(item => item.id === id)
      target._originalData = { ...target };
      target.editable = !target.editable
    },
  }
}
</script>

将数据注册到搜索组件，搜索结果如下图：

image

通过点击、拖拽放到想放的位置即可。

视图区的操作数据传回server
server先生成组件对象树，对2中的template部分、script部分、style部分进行组装，script部分通过babel ast对相应组件进行拆解，最后根据对象树重新组装成想要的代码。拆解代码如下：

import * as cheerio from 'cheerio';
import * as parser from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import * as _ from 'lodash';

export default class VueParse{
  template: string = '';
  data: any = [];
  methods: any = [];
  components: any = [];
  importDeclarations: any = [];
  uuid: string = '';
  vueStr: string = '';
  vueScript: string = '';
  $: any;
  scriptAst: any;
  style: string = '';
  created: any;


  constructor (uuid: string, vueStr: string) {
    this.uuid = uuid;
    this.vueStr = vueStr.replace(/_unique/g, this.uuid);
    this.init();
  }

  private init () {
    const template = this.vueStr.match(/<template>([\s\S])*<\/template>/g)[0];
    const style = this.vueStr.match(/(?<=<style[\s\S]*>)[\s\S]*(?=<\/style>)/g);
    if (style) {
      this.style = style[0];
    }

    this.$ = cheerio.load(template, {
      xmlMode: true,
      decodeEntities: false
    });

    this.template = this.$('.root').html();


    this.vueScript = this.vueStr.match(/(?<=<script>)[\s\S]*(?=<\/script>)/g)[0];
    this.scriptAst = parser.parse(this.vueScript, {
      sourceType: 'module',
      plugins: [
        "jsx",
      ]
    });

    this.data = this.getData() || [];
    this.methods = this.getMethods() || [];
    this.components = this.getComponents() || [];
    this.getImport();
    this.created = this.getCreated();
  }


  public getData () {
    let data = [];
    traverse(this.scriptAst, {
      ObjectMethod: (path) => {
        const { node } = path;
        if (node.key && node.key.name === 'data') {
          path.traverse({
            ReturnStatement: (pathData) => {
              data = pathData.node.argument.properties
            } 
          })
        }
      }
    });
    return data;
  }

  public setData (data: string) {
    const dataAst = parser.parse(data, {
      sourceType: 'module',
      plugins: [
        "jsx",
      ]
    });

    traverse(dataAst, {
      ObjectExpression: (path) => {
        if (path.parent.type === 'VariableDeclarator') {
          const {node} = path;
          this.data = node.properties;
        }
      }
    });

  }
  
  public getFormatData () {
    const dataAst = parser.parse(`var data = {
      id: []
    }`, {
      sourceType: 'module',
      plugins: [
        "jsx",
      ]
    });
    traverse(dataAst, {
      ObjectExpression: (path) => {
        if (path.parent.type === 'VariableDeclarator') {
          const {node} = path;
          node.properties = this.data;
        }
      }
    })

    return generate(dataAst).code;
  }

  public getMethods () {
    let methods = [];
    traverse(this.scriptAst, {
      ObjectProperty: (path) => {
        const {node} = path;
        if (node.key.name === 'methods') {
          methods = node.value.properties;
        }
      }
    });
    return methods;
  }

  public getComponents () {
    let components = [];
    traverse(this.scriptAst, {
      ObjectProperty: (path) => {
        const {node} = path;
        if (node.key.name === 'components') {
          components = node.value.properties;
        }
      }
    });
    return components;
  }

  public getImport () {
    const body = _.get(this.scriptAst, 'program.body') || [];
    body.forEach(item => {
      if (item.type === 'ImportDeclaration') {
        this.importDeclarations.push({
          path: _.get(item, 'source.value'),
          node: item
        });
      }
    });    
  }

  public getCreated () {
    let created = null;
    traverse(this.scriptAst, {
      ObjectMethod: (path) => {
        const {node} = path;
        if (node.key.name === 'created') {
          created = node;
        }
      }
    });
    return created;
  }
}