122 lines
3.2 KiB
Markdown
122 lines
3.2 KiB
Markdown
# 移动端页面文件生成器使用说明
|
||
|
||
## 概述
|
||
|
||
本功能为代码生成器新增了移动端页面文件生成能力，一个表可以生成4个移动端页面文件：
|
||
|
||
1. `index.config.ts` - 列表页面配置文件
|
||
2. `index.tsx` - 列表页面组件文件
|
||
3. `add.config.ts` - 新增/编辑页面配置文件
|
||
4. `add.tsx` - 新增/编辑页面组件文件
|
||
|
||
## 新增的模板文件
|
||
|
||
在 `src/test/java/com/gxwebsoft/generator/templates/` 目录下新增了以下模板文件：
|
||
|
||
- `index.config.ts.btl` - 列表页面配置模板
|
||
- `index.tsx.btl` - 列表页面组件模板
|
||
- `add.config.ts.btl` - 新增/编辑页面配置模板
|
||
- `add.tsx.btl` - 新增/编辑页面组件模板
|
||
|
||
## 支持的生成器
|
||
|
||
目前已为以下生成器添加了移动端页面文件生成功能：
|
||
|
||
- `ShopGenerator.java` - 商城模块代码生成器
|
||
- `CmsGenerator.java` - CMS模块代码生成器
|
||
|
||
## 使用方法
|
||
|
||
### 1. 配置生成器
|
||
|
||
在对应的生成器类中配置需要生成的表名，例如在 `ShopGenerator.java` 中：
|
||
|
||
```java
|
||
private static final String[] TABLE_NAMES = new String[]{
|
||
"shop_goods", // 商品表
|
||
"shop_category" // 分类表
|
||
};
|
||
```
|
||
|
||
### 2. 运行生成器
|
||
|
||
运行对应的生成器主方法，例如：
|
||
|
||
```bash
|
||
# 运行商城模块生成器
|
||
java com.gxwebsoft.generator.ShopGenerator
|
||
|
||
# 运行CMS模块生成器
|
||
java com.gxwebsoft.generator.CmsGenerator
|
||
```
|
||
|
||
### 3. 生成的文件位置
|
||
|
||
移动端页面文件将生成到以下目录：
|
||
|
||
```
|
||
{OUTPUT_LOCATION_UNIAPP}/src/{模块名}/{表名}/
|
||
├── index.config.ts # 列表页面配置
|
||
├── index.tsx # 列表页面组件
|
||
├── add.config.ts # 新增/编辑页面配置
|
||
└── add.tsx # 新增/编辑页面组件
|
||
```
|
||
|
||
例如，对于 `shop_goods` 表，会生成：
|
||
|
||
```
|
||
/Users/gxwebsoft/VUE/template-10550/src/shop/goods/
|
||
├── index.config.ts
|
||
├── index.tsx
|
||
├── add.config.ts
|
||
└── add.tsx
|
||
```
|
||
|
||
## 模板特性
|
||
|
||
### 列表页面 (index.tsx)
|
||
|
||
- 支持数据列表展示
|
||
- 支持删除操作
|
||
- 支持编辑跳转
|
||
- 支持默认选项设置
|
||
- 空数据状态处理
|
||
|
||
### 新增/编辑页面 (add.tsx)
|
||
|
||
- 自动根据表字段生成表单项
|
||
- 支持新增和编辑两种模式
|
||
- 自动处理字符串类型字段的输入组件选择
|
||
- 表单验证和提交处理
|
||
|
||
### 配置文件
|
||
|
||
- 自动根据表注释生成页面标题
|
||
- 统一的导航栏样式配置
|
||
|
||
## 自定义扩展
|
||
|
||
如需为其他生成器添加移动端页面文件生成功能，可参考 `ShopGenerator.java` 中的实现，在对应生成器的 `focList` 中添加以下配置：
|
||
|
||
```java
|
||
// 移动端页面文件生成配置
|
||
templatePath = TEMPLATES_DIR + "/index.config.ts.btl";
|
||
focList.add(new FileOutConfig(templatePath) {
|
||
@Override
|
||
public String outputFile(TableInfo tableInfo) {
|
||
return OUTPUT_LOCATION_UNIAPP + OUTPUT_DIR_VUE
|
||
+ "/pages/" + pc.getModuleName() + "/"
|
||
+ tableInfo.getEntityPath() + "/" + "index.config.ts";
|
||
}
|
||
});
|
||
|
||
// 其他3个文件的配置...
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. 确保 `OUTPUT_LOCATION_UNIAPP` 路径配置正确
|
||
2. 生成前请备份现有文件，避免覆盖重要代码
|
||
3. 生成的代码可能需要根据具体业务需求进行调整
|
||
4. 模板中的API调用方法需要确保对应的API文件已生成
|