一键生成代码
操作步骤
- 点击快速创建

- 编辑内容,选择要生成的模块路径,及被创建的数据结构

- 保存后,页面会刷新一次。这时候你会发现
/src/modules/demo/views
目录下多了一个goods.vue
文件

同时左侧菜单也会添加一个 商品列表

匹配规则
我们会针对一些命名规则,自动生成对应的组件。如 avatar
、image
使用 cl-upload图片上传组件
。
编辑文件 /build/cool/lib/menu/rules.ts
配置:
export default [
{
test: ["avatar", "img", "image", "pic", "photo", "picture", "head", "icon"],
table: {
name: "cl-image",
props: {
size: 60
}
},
form: {
name: "cl-upload"
}
},
...
];
默认规则说明
表单 | 表格 | 类型 | 匹配 |
---|---|---|---|
cl-upload | el-image | 图片 | 结尾:img 、image 、pic 、photo 、picture 、head 、avatar 、icon ,多图上传:上述结尾再加s , 如:imgs |
cl-upload | el-link | 文件 | 结尾:file 、attachment 、attach 、url 、video 、music ,多文件上传:上述再加s ,如:files |
el-switch | el-switch | 开关 | 结尾:enable 、status |
el-radio-group | el-tag | 单类型(选项<=4 个) | 结尾:type 、classify 、category |
el-select | el-tag | 单类型(选项>4 个) | 结尾:type 、classify 、category |
el-checkbox-group | el-tag | 多类型(选项<=4 个) | 结尾:types 、classifys 、categorys |
el-select | el-tag | 多类型(选项>4 个) | 结尾:types 、classifys 、categorys |
el-select | 默认 | 多类型(选项>4 个) | 结尾:types 、classifys 、categorys |
el-date-picker(type='date') | 默认 | 日期 | 结尾:date |
el-date-picker(type='daterange') | 默认 | 日期范围 | 同时存在:startDate 、endDate 两个字段 |
el-date-picker(type='datetime') | 默认 | 时间 | 结尾:time 、dateTime 、dateTime |
el-date-picker(type='datetimerange') | 默认 | 时间范围 | 同时存在 startTime 、endTime 两个字段 |
el-rate | el-rate | 评分 | 结尾:star 、stars |
el-slider | el-progress | 进度 | 结尾:progress 、rate 、ratio |
el-input-number | 默认 | 数量 | 结尾:number 、num 、price 、amount |
el-input(type='textarea') | 默认(带省略) | 文本域 | 结尾:remark |
cl-editor-quill | 不显示 | 富文本 | 结尾:rich 、text 、richText 、html 、content 、introduce 、description 、desc |
cl-codemirror | 不显示 | 代码框 | 结尾:code 、codes |
类型选项解析
选择类型选型解析comment
字段,按空格隔开,按照x-xx
规则,x 为选项值,xx 为选项描述
/**
* 实体类crud demo
*/
@CoolEntityCrud()
@EntityModel("demo_crud")
export class DemoCrudEntity extends BaseEntity {
@Column({ type: "tinyint", comment: "性别 0-未知 1-男 2-女", default: 0 })
type: number;
}