GT.plugin

自动生成基于'element-ui'组件的模版

Create Model

在资源管理器中选择文件或文件夹，右击菜单选择Create Model后弹出输入框，输入模块名(默认为model)可生成一套模版，表单通过在列表中定义抽屉组件调用显示。文件明细如下：

list.vue: 列表组件
components/form.vue: 表单组件
page.config.js: 生成列表和搜索的配置文件
xxx.router.js: 该模块的路由文件，默认只有一个/xxx/list路由
xxx.js: api 文件，默认在/src/api/目录下

路由文件可 copy 到/src/router/目录下，也可通过require.context检索

// src/router/index.js
const routes = [];
function importAll(r) {
  r.keys().forEach((key) => {
    routes.push(r(key).default);
  });
}
importAll(require.context('../views', true, /\.router.js$/));
export default [...routes];

page.config.js 默认内容如下

export const tableConfig = {
  columnObj: [
    {
      type: 'selection'
    },
    {
      type: 'index'
    },
    {
      label: '名称',
      props: 'name'
    },
    {
      label: '状态',
      slot: 'status'
    },
    {
      label: '操作',
      slot: 'operation'
    }
  ]
};

export const searchConfig = [
  {
    type: 'input',
    modelname: 'name',
    label: '名称',
    clearable: true,
    isfilter: true
  },
  {
    type: 'select',
    modelname: 'status',
    label: '状态',
    defaultValue: null,
    options: [
      {
        label: '全部',
        value: null
      },
      {
        label: '正常',
        value: 1
      },
      {
        label: '关',
        value: 0
      }
    ]
  }
];

Generate Project

传入YApi中接口对应的token(项目->设置->token 配置)，以接口的根节点为模块创建模版。

Generate Interface

传入YApi中接口对应的id，如http://0.0.0.0:0000/project/69/interface/api/7405中的7405，根据接口的类型生成不同的模版

模版生成样例

export function getRequestType(obj: any) {
  let type = '';
  switch (obj.method.toLowerCase()) {
    case 'get':
      // 不带  /xxx/{} 的都默认为list
      type = /^\/[^{]+$/.test(obj.path) ? RequestType.List : RequestType.Detail;
      break;
    case 'post':
      type = RequestType.Inert;
      break;
    case 'put':
      // /xxx/{xx} 默认为修改
      type = /(?=)\{.+\}/.test(obj.path) ? RequestType.Update : RequestType.Other;
      break;
    case 'delete':
      type = RequestType.Delete;
      break;
    default:
      type = RequestType.Other;
  }
  return type;
}

列表 method == get 并且 path 不带 params 视为 RequestType.List(列表) 生成-个.gt文件模版和一套vue模版 文件明细如下：
- list.vue: 列表组件
- page.config.js: 生成列表和搜索的配置文件(默认带序号、全选和操作)
- xxx.router.js: 该模块的路由文件，默认只有一个/xxx/list路由
- xxx.js: api 文件，默认在/src/api/目录下，如果是Generate Project命令，会根据所有的接口生成 api 函数
page.config.js 内容根据接口返回的 res_query(检索条件) 和 res_body(表格字段) 生成

默认引用了表单文件，如果没有需要手动删除
form method == get 并且 path 带 params 视为 RequestType.Detail(详情) 生成-个.gt文件模版和一个表单文件文件明细如下：
- components/form.vue: 表单组件
api

如项目有接口列表如下

接口名称	-	接口路径
城市列表	GET	/city
新增球馆	POST	/shop
球馆详情	GET	/shop/{id}
更新球馆	PUT	/shop/{id}
球馆列表	GET	shop

生成代码如下

method + model + ByXxx|List|Data

// city.js

import request from '@/utils/request';

// 城市列表
export const getCityList = () => {
  return request({
    url: `/city`,
    method: 'get'
  });
};

// shop.js

import request from '@/utils/request';

// 新增球馆
export const postShopData = (data) => {
  return request({
    url: `/shop`,
    method: 'post',
    data
  });
};

// 球馆详情
export const getShopById = (id) => {
  return request({
    url: `/shop/${id}`,
    method: 'get'
  });
};

// 更新球馆
export const putShopById = (id, data) => {
  return request({
    url: `/shop/${id}`,
    method: 'put',
    data
  });
};

// 球馆列表
export const getShopList = (params = {}) => {
  return request({
    url: `/shop`,
    method: 'get',
    params
  });
};

Generate form

根据.gt文件模版生成对于的代码片段

gt 模版语法

标识

# gt 表示是个模版，可以解析, 没有的话不会做解析工作
# form form表单，生成对应的el-form-item标签和formData对象
# table 列表相关，生成 tableConfig对象
# search 检索相关，生成 searchConfig对象
# params 没有啥用

格式

prop:type:label:required?:options?:defaultValue?

filed	默认值	可空	说明
prop	-	N	字段
type	-	N	类型，可选值为：`string`, `number`, `float`, `select`, `checkbox`, `radio`
label	-	N	字段名
required	r	Y	是否必须，默认值为 `r(必须)`, `nr(非必须)`
options	-	Y	当类型为`select`, `checkbox`, `radio`之一时，配置`options`用
defaultValue	-	Y	默认值

例：模版

# gt

# form

id:string

# search

id:string

# table

id:string

生成

### elFromItem

<el-form-item prop="id" :rules="[{ required: true, message: '请输入id', trigger:'blur' }]">
  <el-input v-model="formData.id" :maxlength="50"></el-input>
</el-form-item>

### formData

{"id":null}

### tableConfig

[{"props":"id"}]

### searchConfig

[{"modelname":"id","clearable":true,"isfilter":true,"type":"input"}]

type = number
```
# form

num:number:数字
```
elFromItem

formData

{"num":null}
defaultValue
```
# form

num:number:数字:666
```
elFromItem

formData

{"num":"666"}

required

# gt

# form

num:number:数字:r:666
name:string:字符:nr:啊啊啊

### elFromItem

<el-form-item label="数字" prop="num" :rules="[{ required: true, message: '请输入数字', trigger:'blur' }]">
 <el-input v-model.number="formData.num" ></el-input>
</el-form-item>
<el-form-item label="字符" prop="name">
 <el-input v-model="formData.name" :maxlength="50" ></el-input>
</el-form-item>

### formData

{"num":"666","name":"啊啊啊"}

options

# form
<!-- 1 开启  默认数字为value，汉字为label， 中间有没有空格没关系，  选项以 | 隔开 -->
name:checkbox:字符:nr:1 开启|2 关闭|3 未知|4 额额
name2:radio:字符 2:1 开启|2 关闭|3 未知|4 额额

### elFromItem
 <el-form-item label="字符" prop="name">
   <el-checkbox-group v-model="formData.name">
     <el-checkbox :label="1">开启</el-checkbox>
     <el-checkbox :label="2">关闭</el-checkbox>
     <el-checkbox :label="3">未知</el-checkbox>
     <el-checkbox :label="4">额额</el-checkbox>
   </el-checkbox-group>
 </el-form-item>
 <el-form-item label="字符2" prop="name2" :rules="[{ required: true, message: '请选择字符2', trigger:'blur' }]">
   <el-radio-group v-model="formData.name2"><el-radio :label="1">开启</el-radio>
     <el-radio :label="2">关闭</el-radio>
     <el-radio :label="3">未知</el-radio>
     <el-radio :label="4">额额</el-radio>
   </el-radio-group>
 </el-form-item>

### formData
{"name":null,"name2":null}}

generate Xxxx 命令解析的时候，如果备注字段存在疑似options的字符，会被解析为option 如：

# 一项解析为 checkbox

disabled number 可读 0，禁用
->
disabled:checkbox:可读:0 禁用

# 两项解析为 radio

status number 门店状态:0 正常，1 关闭
->
status:radio:门店状态:0 正常|1 关闭

# 超过两项解析为 select

status number 订单状态，0 待确认、1 待支付，2 已支付,3 已预约、4 已完成、5 已取消
->
status:select:订单状态:0 待确认|1 待支付|2 已支付|3 已预约|4 已完成|5 已取消

float 和 length

# form
price:float(1,2,3):钱
price:string(1,2):钱
price:string(1):钱
price:string:钱

### elFromItem
<el-form-item label="钱" prop="price" :rules="[{ required: true, message: '请输入钱', trigger:'blur' }]">
 <el-input-number v-model="formData.price" :precision="1 :min="2 :max="3></el-input-number>
</el-form-item>
<el-form-item label="钱" prop="price" :rules="[{ required: true, message: '请输入钱', trigger:'blur' },{ max: 2, min: 1, message: '长度在 1 到 2 个字符', target:'blur'}]">
 <el-input v-model="formData.price" :maxlength="2" :minlength="1"></el-input>
</el-form-item>
<el-form-item label="钱" prop="price" :rules="[{ required: true, message: '请输入钱', trigger:'blur' },{ max: 1, message: '长度不能超过 1 个字符', target:'blur'}]">
 <el-input v-model="formData.price" :maxlength="1" ></el-input>
</el-form-item>
<el-form-item label="钱" prop="price" :rules="[{ required: true, message: '请输入钱', trigger:'blur' }]">
 <el-input v-model="formData.price" :maxlength="50" ></el-input>
</el-form-item>

没有传 length 默认长度 50 , float类型时小数点精度默认为 2
1 个值默认为 maxlength, float类型时表示为小数点精度
2 个值默认为 minlength和maxlength, float类型时一致，小数点精度为 0
3 个值默认为 minlength和maxlength,第三个值无效， float类型时表示小数点精度 min max

待续...

gt-plugin-admin-template

qualc