umi-plugin-tsql插件可以快速的帮您在项目中把您的菜单转换成sql语句。

业务背景

在项目开发进入后期阶段，大部分项目的菜单获取方式会通过远程接口方式返回菜单数据，这时就会涉及到菜单json数据需要转换成sql菜单语句写入数据库，但常常在这个过程中双方人员皆存在短板区域，导致这个转换过程效率不高，所以在此业务背景场景下，我们提供了umi-plugin-tsql插件可以快速的帮您在项目中把您的菜单转换成sql语句。

支持特性

输入

  1. {
  2.   "id": 100,
  3.   "applCode": "antdesign",
  4.   "iconCls": "glyphicon-account1",
  5.   "attributes": {
  6.   "client": {
  7.   "loadMode": "component",
  8.   "path": "/welcome"
  9.   }
  10.   },
  11.   "groupId": "antdesign",
  12.   "text": "欢迎"
  13. }

输出

  1. insert into ecas_menu (
  2.     APPLID, MENUID, NAME, LVL, URL, PARENT, IMG, ISCHILD, GROUPID, ATTRIBUTES
  3. ) values (
  4.     'antdesign', 100, '欢迎', null, null, null, null, null, 'antdesign', '{"client":{"loadMode":"component","path":"/welcome"}}'
  5. );

快速集成

安装依赖

我们的插件包现阶段需要nrm源切换到152源进行下载。

检查nrm源链接

  1. nrm ls

设置nrm源为152源

  1. nrm use http://192.168.10.152:7001/

接下来执行以下命令安装插件依赖

  1. npm install @erajs/umi-ui-tsql || yarn add @erajs/umi-ui-tsql


引入配置

需要在项目config目录下的config.js文件中plugins下增加[‘@erajs/umi-ui-tsql’],如：

  1.  plugins: [
  2.     ['@erajs/umi-ui-tsql'],
  3.  ],

启动命令

在项目中执行zebra ui命令即可启动：

  1. zebra ui

备注：本地启动好会自动浏览器弹出，如未弹出手动输入http://localhost:3000/project/select尝试打开。

可视化使用

初始化导入项目

经过上述命令zebra ui 启动成功以后，您将会看到以下主界面，在右上角您可以点击导入项目来导入您的项目。如下图：
sql1.png

点击打开项目

点击导入项目，导入成功后您就可以在此界面看到您的项目，点击项目进入。如下图：
image.png

TSQL功能

当打开项目以后，如果您严格按照上述快速集成二部曲安装依赖、引入配置的话，您可以在可视化工具左侧工具栏中看到一个TSQL选择项，点击TSQL打开。

基础区域

在右侧区域分为两个区域：

  • 资源目录 - 加载菜单结构，让您可以更直观的查看菜单层级等。
  • SQL转换区域 - 包含SQL跟菜单两个部分切换。

sql2.png
sql4.png


SQL右上角操作功能

如上图在SQL跟菜单区域内，右上角分别有操作按钮，接下来我们讲解下按钮的作用分别是什么：

SQL：**

  • 复制：点击即可复制SQL文件。
  • 导出：点击即可导出写有SQL的txt格式的文件。

菜单：

  • 重载：此菜单文件可以在插件中更改编写，如果您在保存前想还原之前的，点击重载按钮即可还原。
  • 检测有效性：敬请期待。
  • 保存：点击保存按钮，同步保存本地项目中的菜单文件，同时会自动加载改变菜单以后的SQL稳健输出。

    备注：点击保存以后再想重载还原是无法还原的哦 ，因为已经更改了本地项目的菜单文件。