From 3f22b54d1f8c4ad5fa10df3530c25128de633e36 Mon Sep 17 00:00:00 2001
From: rwx <8823632+rwx666888@user.noreply.gitee.com>
Date: Sun, 3 Mar 2024 11:26:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 391 +-
server/create_cfg_tmpl/vue2/config/config.js | 22 +-
server/package-lock.json | 104 +-
server/package.json | 4 +-
server/www/index.html | 2 +-
.../{app.4772c9e8.css => app.ec1f2169.css} | 2 +-
server/www/static/js/app.025457f5.js | 1 +
server/www/static/js/app.7f6fdb5d.js | 1 -
.../www/static/js/chunk-elementUI.38c43a39.js | 1 -
.../www/static/js/chunk-elementUI.c7a717fb.js | 1 +
server/www/static/js/chunk-libs.2dfc8dea.js | 1767 ---------
server/www/static/js/chunk-libs.814576bc.js | 3458 +++++++++++++++++
.../readme-imgs/img-01.png | Bin
.../readme-imgs/img-02.png | Bin
.../readme-imgs/img-03.png | Bin
.../readme-imgs/img-04.png | Bin
web-project/README.md | 444 +--
web-project/package-lock.json | 72 +-
web-project/package.json | 2 +-
19 files changed, 3972 insertions(+), 2300 deletions(-)
rename server/www/static/css/{app.4772c9e8.css => app.ec1f2169.css} (99%)
create mode 100644 server/www/static/js/app.025457f5.js
delete mode 100644 server/www/static/js/app.7f6fdb5d.js
delete mode 100644 server/www/static/js/chunk-elementUI.38c43a39.js
create mode 100644 server/www/static/js/chunk-elementUI.c7a717fb.js
delete mode 100644 server/www/static/js/chunk-libs.2dfc8dea.js
create mode 100644 server/www/static/js/chunk-libs.814576bc.js
rename server/www/static/img/img-01.f6ef01c9.png => static/readme-imgs/img-01.png (100%)
rename server/www/static/img/img-02.95207d90.png => static/readme-imgs/img-02.png (100%)
rename server/www/static/img/img-03.5b8abab2.png => static/readme-imgs/img-03.png (100%)
rename server/www/static/img/img-04.e73a5ca6.png => static/readme-imgs/img-04.png (100%)
diff --git a/README.md b/README.md
index 5f2450b..35e5a79 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,24 @@
-# create-page-common
+# 基于 swagger 的 VUE 代码生成器
-#### 介绍
-通过swagger文档创建页面
+根据 Swagger 文档定义,自动生成视图页面、API、路由、mock等。新页面可热更新直接运行。根据目标项目根目录(工作空间)中的 ESLint 环境配置信息,对文件进行 --fix 修复,保障文件代码格式与目标项目统一。
-#### 安装教程
+## 主要功能
+* 支持 Swagger 文件数据及目标项目数据离线缓存,无需重复初始化项目;
+* 支持按需自动注入、注册自定义组件;
+* API文件支持按需增量更新,自动按需引入依赖函数,no never-used; (Tips:需框架及配套组件支持)
+* 路由文件支持新增一级路由,自动合并二级路由(依据swagger tag 分组);开启路由分组后支持将路由按tag分割成子路由文件;(Tips:目前仅适配了vue的路由模式)
+* 采用 art-template 字符串模板引擎,简单易用,并使用自定义规则解决与 Vue、ES5 模板语法冲突问题;
+* 支持自动匹配列名与列描述信息,并根据字段类型尝试自动匹配input-form-item
+* 支持自定义模板与模板数据(内置多种常用数据及格式);支持配置默认模板;(Tips:需框架及配套组件支持)
+* 支持配置同名文件存在时,自动覆盖或跳过,默认页面文件自动覆盖,路由及 API 自动跳过;
+* 支持配置自动生成的页面、目录、API 的文件名后缀连接符,例如:列表页默认为 filename-[list].vue,并且默认过滤文件名中的 (^query|list$)(可选,强迫症患者福音)
+* 支持配置列表字段默认对齐方式,默认数值型居中,其它类型居左;
+* 支持配置表单元素在各类型模板中是否可用【boolean | 正则:'list|form'】
+* 支持字典数据(Tips:需框架及配套组件支持);
+* 支持设置不参与用户交互的参数列表,例如:每页条数,当前页码等;
+* 支持自动识别匹配复合组件,例如双日历组件 data[Time]Range,同时支持手动配置,并高亮显示匹配关系;(Tips:其中包含配套的自定义组件)
+
+## 安装说明
1. 克隆或下载项目
```
@@ -23,9 +38,373 @@ npm i
npm run vue2
```
-#### 使用说明
+## 使用说明
-[使用文档](./web-project/README.md)
+[开发文档](./web-project/README.md)
[体验demo](https://lianglei.site/)
+1. 初始化项目
+填写swagger或catalog项目地址(格式如下图)、和本地目标项目根路径;初始化项目,成功后返回项目及接口信息,检查信息是否有误!
+![初始化项目](./static/readme-imgs/img-01.png)
+2. 生成页面
+选择需要生成的页面对应的接口API,按需修改下方配置项目后,点击【生成】按钮,批量生成相关页面;如果目标项目服务已启动,此时可直接访问新页面;
+![初始化项目](./static/readme-imgs/img-02.png)
+
+> Tips: 列表API下拉框中只展示包含list的API;
+
+> 拖动检索条件、列表项区域中的图标( ),可改变字段显示顺序;
+
+> 列表项 -> 气泡:对应 show-overflow-tooltip ,暂不支持 table-header 使用气泡;
+
+> 列表项 -> 显示:设置是否在列表中显示该字段;
+
+## 配置
+> 配置文件在 server/create_cfg_tmpl/**/config/ 目录下;
+
+> 注意:修改配置文件后,需要在 server 目录下重启 npm run vue2 服务;并且刷新页面(ctrl + F5, 强制刷新浏览器缓存,或开启开发者模式中的禁用缓存)才能生效;
+
+> 注意:web-project/public/tmpl_cfg 及 server/www/tmpl_cfg 目录下的配置文件及模板均为临时文件,修改无效,npm run xx 启动时,这部分会被server/create_cfg_tmpl 中与 xx 匹配的文件完全覆盖;
+
+以下为配置文件部分示例,详细请查看 server/create_cfg_tmpl/**/config/config.js
+```
+{
+ // 分页参数,例如每页条数,当前页码等非用户输入的参数
+ pageListParams: [
+ 'pageSize', 'currentPage'
+ ],
+ makeFile: { // 生成文件的配置
+ isMakeView: true, // 是否生成视图文件
+ isMakeApi: true, // 是否生成api文件
+ isMakeRouter: true, // 是否生成路由文件
+ isMakeMock: false, // 是否生成mock数据文件
+ useRouterGroup: false // 是否启用路由分组,启用后,将会生成子路由文件,例如:src/router/park/user.js ,存储路径由 template.routerFile.savePath 决定, 文件后缀名始终与主路由文件一致
+ },
+ /**
+ * 缓存配置
+ * 目前只项目、api、版本三个维度同时匹配才会返回缓存数据,场景为:本次小迭代周内,不考虑历史版本的数据变更
+ */
+ cache: {
+ disabled: true // 是否禁用缓存
+ },
+ author: 'lianglei-2-1', // 作者
+ reWrite: { // 存在重名文件是否直接覆盖, true:覆盖; false:跳过; key值需与 template 中的key值一致,未设置的文件默认为true;
+ listPage: true, // 列表页
+ infoPage: true, // 详情页
+ formPage: true // 表单页
+ },
+ listPage: { // 列表页 表格列对齐方式
+ colAlignDefault: 'left', // 默认居左对齐
+ colAlignInt: 'center' // 数字型默认居中对齐
+ },
+ // 项目文件结构路径配置
+ projectPath: {
+ apisFilePath: 'src/apis', // api文件目录
+ httpFile: '@/apis/request.js', // 网络请求库,例如 axios;必须 export 导出 (post get del put)方法
+ routerFile: 'src/router/index.js', // 路由文件
+ routerMatchMark: '@/views/' // 路由文件中路由匹配标记, 可匹配路由文件中 component: () => import('@/views/icons/index'), 的 @/views/部分,
+ },
+ // 生成文件的配置, 其中base开头的为基础模板配置,不可修改属性名称
+ template: {
+ listPage: { // 列表页
+ savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views
+ suffix: '-list',
+ dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page
+ template: 'page/list-page.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
+ },
+ infoPage: { // 详情页
+ savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views
+ suffix: '-info',
+ dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page
+ template: 'page/info-page.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
+ },
+ routerFile: { // 路由文件;名称不可修改; 暂不支持外部多路由文件,只支持单路由文件,也不支持路由的命名视图、动态加载等
+ template: 'base/base-router.art', // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
+ templateLayout: 'base/base-router-layout.art',
+ savePath: './park' // 路由分组文件保存目录,相对于主路由文件的路径 ,例如 projectPath.routerFile, 仅当 projectPath.useRouterGroup 为true时生效
+ },
+ baseMockData: { // mock数据 baseMockData 名称不可修改
+ savePath: 'mock/json', // 生成的位置目录 相对于项目根目录 /mock/json/data
+ templateLayout: 'base/base-mock-layout.art', // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
+ template: 'base/base-mock-item.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
+ }
+ ......
+ },
+ // mock数据配置
+ mockCig: {
+ // 模式数据类型映射
+ columnTypeMap: {
+ /**
+ * 同正则匹配字段名称,从而返回猜测类型的数据,预设的数据在/mock/json/data/example-data.js 文件中 makeDemoMockData
+ * 匹配不到的所有模拟字段均返回 makeDemoMockData.randomStr 即1-5位随机字符
+ * 同一类型均有数量限制,限制为makeDemoMockData中key的后缀最大值:超过数量上限后返回随机数;
+ * 例如: name1:XX; name2:xx; 则name类型最多可用3次,可用增加次数,例如name3\name4,但后缀必须是同前缀分组下的连续的整数;
+ * 这里的key对应 /mock/json/data/example-data.js 文件中 makeDemoMockData 对象的key 的前缀
+ * 属性值只支持 正则表达式 或 false
+ * 生成器中使用了 Object.assign 对配置信息进行合并,所以可随意扩展,如果想禁用预设字段的映射,将对应key值设置为false,例如: name:false
+ * 注意后续版本中可能会移除预设的映射规则
+ */
+ integer: /integer/,
+ name: /(title|name$)/i,
+ city: /(^city|city$)/i,
+ province: /(^province|province$)/i,
+ email: /email/i,
+ uid: /(code|id)/i,
+ datetime: /(^datetime|datetime$)/i,
+ date: /(^date|date$)|birthday/i,
+ phone: /(^(phone|mobile)|(phone|mobile)$)/i,
+ demoSex: /sex/i, // 演示demo数据
+ demoEdu: /edu/i // 演示demo数据
+ }
+ },
+ // 表单元素配置
+ formItemCig: {
+ dataTimeRangeRegExp: '^(start|end|begin)|(start|end|begin)$', // 不区分大小写
+ isStartRegExp: '^(start|begin)|(start|begin)$' // 不区分大小写
+ },
+ /**
+ * 路由前缀连接词
+ * 可为空,如果设置则必须首字母大写,否则可能导致路由缓存不生效;
+ * 用于构造 路由中的 name,及页面中 export default.name
+ * 最终格式为: [lever2]xxxx ,例如:PageUserList, 其中page 为lever2路由前缀连接词,UserList为API名称
+ * 详见 /mock/json/createPage.js
+ */
+ routerSuffix: {
+ lever1: 'Menu',
+ lever2: 'Page'
+ },
+ /**
+ * 表单元素类型
+ * disabled : 在构造模板中,不可使用(暂不支持)的元素
+ * [undefined] : 不禁用, 默认值;
+ * [boolean] true : 全部禁用;
+ * [string] 只有完全匹配的才禁用,例如:'list|form' 则表示为 list 或 form 禁用;
+ * path : 可选,自定义组件的路径 例如:'@/components/cusDatePicker/index.vue'
+ * valid : 必须,表单验证配置
+ * -- trigger: 必须,触发方式 'blur' 、'change' 等
+ * -- type: 可选,数据类型 'string'(默认)、'date'、'array' 等
+ * dataSource : 可选,数据源配置,例如:下拉选择框的选项
+ * -- dataType: 必须,数据格式,默认array,可选:array、object
+ * -- default: 可选,数据源默认值,例如:下拉选择框的默认值 [{value: null, label: '全部'}] ; 如果没有对组件进行配置,则使用默认值
+ */
+ formItemOpts: [
+ {
+ value: 'input',
+ label: '单行文本框',
+ valid: {
+ trigger: 'blur'
+ }
+ },
+ {
+ value: 'checkboxGroup',
+ label: '多选框组',
+ valid: {
+ trigger: 'change',
+ type: 'array'
+ },
+ dataSource: {
+ dataType: 'array',
+ default: [ { value: '-1', label: '选项一' }, { value: '-2', label: '选项二' } ]
+ }
+ },
+ {
+ value: 'datePicker',
+ label: '日期选择器',
+ valid: {
+ trigger: 'change',
+ type: 'date'
+ }
+ },
+ {
+ value: 'cusDatePicker',
+ label: '日期选择器(双)',
+ path: '@/components/cusDatePicker/index.vue',
+ valid: {
+ trigger: 'change',
+ type: 'date'
+ }
+ }
+ ......
+ ],
+ formFieldDetection: { // 根据字段名称及类型尝试匹配表单元素类型,处理方法在 mixins/create.js -> formItemTypeChoice方法中
+ findDate: true, // 是否检测日期,并适配为日期组件
+ findArray: true // 是否检测数组,并适配为下拉多选框
+ }
+}
+
+```
+
+## 预设模板变量
+> 模板文件在 server/create_cfg_tmpl 目录下; 注意:web-project/public/tmpl_cfg 及 server/www/tmpl_cfg 目录下的模板均为临时文件,修改无效,npm run xx 启动时,这部分会被server/create_cfg_tmpl 中与 xx 匹配的文件完全覆盖;
+
+> 预设模板变量不可直接修改,只能扩展,或通过配置文件修改;
+### 路由
+```
+{
+ path: '/${{lever1Path}}',
+ component: Layout,
+ name:'${{lever1RouterName}}',
+ meta: {
+ title: '${{lever1PageName}}',
+ icon: 'el-icon-orange',
+ code: '' // 设置code即可启用权限控制
+ },
+ redirect: '${{lever2Path}}',
+ children: [
+ {
+ path: '${{lever2Path}}',
+ component: () => import('@/views/${{filePath}}'),
+ name: '${{lever2RouterName}}',
+ meta: { title: '${{lever2PageName}}', code: '' }
+ }
+ ]
+}
+```
+### API (内置方法,API、路由与页面生成均依赖此对象)
+```
+{
+ name, // api名称
+ nameHump, // api名称, 大驼峰格式
+ nameToPathfilter, // 过滤后的api名称,主要用于生成 view 页面
+ nameToPath, // 连接符(-)的 api名称
+ desc, // 接口描述
+ type, // 请求类型 get|post|del|put, 注意delete统一转换为del
+ uri, // 接口地址
+ fileName, // API 所属分组 tags,连接符(-)格式,用于生成api文件名
+ fileNameHump, // API 所属分组 tags, 大驼峰格式
+ fileDesc // API 所属分组的描述
+}
+```
+### 页面
+```
+{
+ rootPath, // 项目根路径
+ formData: [ // 列表页检索项
+ {
+ column, // 列名 示例:username
+ isShow, // 是否显示
+ opts: {
+ range: range_, // 双日历配置项
+ valid: null, // 表单验证配置项
+ attr: null // 可选,表单组件配置属性
+ }, // 配置项
+ needValidateOpts: false, // 是否需要验证配置项
+ label, // 示例:用户名
+ labelDesc, // 字段描述 示例:用户名,英文字母
+ columnType, // 类型 string|integer|array
+ formItemType, // 表单元素类型 input|dataPicker 对应配置文件中 formItemOpts
+ range: { // 默认: null , 仅当是双日历表单组件时返回
+ f_: '__DateTime', // 所执行的自动匹配模式 ,注意仅 'startDateTime' 与 'endDateTime' 可自动匹配为 '__DateTime';'startDateTime' 与 'dateTimeEnd' 不会自动匹配
+ to_: 'endDateTime', // 自动匹配到的对象列名称
+ isDatePickerRange: 'true|false', // 是否是双日历
+ isStart: 'true|false' // 是否是start 否则为end
+ }
+ }
+ ],
+ tableData: [ // 列表项
+ {
+ column,
+ label,
+ columnType,
+ isShow,
+ showTips, // 单元格内容溢出后是否显示气泡
+ alignType // 列文本对齐方式 ,默认数字居中,文本居左;参照配置文件中 listPage 的配置
+ }
+ ],
+ otherConfig: { // 额外的扩展配置
+ showBtnCol: false, // 显示按钮列
+ showNumCol: true, // 显示序号列
+ showFormRightBtns: false // 显示表单右侧按钮区域
+ 。。。
+ },
+ apiConfig, // 参照 模板预设变量中 《API》的说明
+}
+```
+### 表单元素配置
+```
+1、支持表单验证(validate)
+2、部分组件支持自定义配置;详见目录 server/create_cfg_tmpl/vue2/template/base/form; 可自行修改或扩展,注意文件名称必须与 config.js 中 formItemOpts 声明的属性匹配;
+```
+![表单元素配置](./static/readme-imgs/img-03.png)
+![表单元素配置](./static/readme-imgs/img-04.png)
+
+### 全局变量
+#### 访问配置文件 config
+```
+方法 :$imports.comConfig
+示例 :输出作者 ${{$imports.comConfig.author}}
+```
+
+#### 获取需要注册的自定义组件列表(该方法只返回被实际使用到的组件,即按需注入)
+```
+方法 :$imports.getCusPluginsListImport(formData) ; 其中 formData 为预设页面模板变量
+示例 :
+# 1、声明变量
+<% var _CusPluginsList_ = $imports.getCusPluginsListImport(formData) %>
+
+# 2、注入自定义组件
+${{each _CusPluginsList_}}
+import ${{$value.name}} from '${{$value.path}}'
+${{/each}}
+> Tips: $value.name 与 $value.path 分别对应配置文件中 formItemOpts 对象的 value 与 path
+
+# 3、注册自定义组件
+export default {
+ components: {
+ ${{each _CusPluginsList_}}${{$value.name}},${{/each}}
+ }
+}
+```
+
+#### 获取表单验证配置信息
+```
+方法 :$imports.getValidationListImport(formData) ; 其中 formData 为预设页面模板变量
+示例 :
+# 1、声明变量
+<% var _ValidationList_ = $imports.getValidationListImport(formData) %>
+
+# 2、绑定到form组件
+
+> 参照 server/create_cfg_tmpl/vue2/template/base/base-mock-item.art
+```
+{
+ url: '${{apiConfig.uri | getMockRouterUrl}}',
+ type: '${{apiConfig.type}}',
+ response: config => {
+ if (!demo.__cacheKey__['${{apiConfig.name}}']) {
+ const tobj = {
+ ${{@ tableData | getMockRouterResData}}
+ }
+ demo.demoFnGetTheListKey(tobj)
+ demo.__cacheKey__['${{apiConfig.name}}'] = { ...tobj }
+ }
+
+ return demo.demoFnMakeListPageData('${{apiConfig.name}}', config.query)
+ }
+}
+```
\ No newline at end of file
diff --git a/server/create_cfg_tmpl/vue2/config/config.js b/server/create_cfg_tmpl/vue2/config/config.js
index 003bffc..e79f1aa 100644
--- a/server/create_cfg_tmpl/vue2/config/config.js
+++ b/server/create_cfg_tmpl/vue2/config/config.js
@@ -7,7 +7,8 @@ const _$cusConfig$_ = {
isMakeView: true, // 是否生成视图文件
isMakeApi: true, // 是否生成api文件
isMakeRouter: true, // 是否生成路由文件
- isMakeMock: false // 是否生成mock数据文件
+ isMakeMock: false, // 是否生成mock数据文件
+ useRouterGroup: false // 是否启用路由分组,启用后,将会生成子路由文件,例如:src/router/park/user.js ,存储路径由 template.routerFile.savePath 决定, 文件后缀名始终与主路由文件一致
},
/**
* 缓存配置
@@ -31,8 +32,7 @@ const _$cusConfig$_ = {
apisFilePath: 'src/apis', // api文件目录
httpFile: '@/apis/request.js', // 网络请求库,例如 axios;必须 export 导出 (post get del put)方法
routerFile: 'src/router/index.js', // 路由文件
- routerMatchMark: '@/views/', // 路由文件中路由匹配标记, 可匹配路由文件中 component: () => import('@/views/icons/index'), 的 @/views/部分,
- useRouterGroup: false // 是否启用路由分组,启用后,将会在路由文件中生成分组路由文件,例如:src/router/park/user.js ,存储路径由 template.routerFile.savePath 决定, 文件后缀名始终与主路由文件一致
+ routerMatchMark: '@/views/' // 路由文件中路由匹配标记, 可匹配路由文件中 component: () => import('@/views/icons/index'), 的 @/views/部分,
},
// 生成文件的配置, 其中base开头的为基础模板配置,不可修改属性名称
template: {
@@ -40,41 +40,41 @@ const _$cusConfig$_ = {
savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views
suffix: '-list',
dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page
- template: 'page/list-page.art' // 模板名称 相对于 /art-template 目录
+ template: 'page/list-page.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
},
infoPage: { // 详情页
savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views
suffix: '-info',
dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page
- template: 'page/info-page.art' // 模板名称 相对于 /art-template 目录
+ template: 'page/info-page.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
},
infoDialog: { // 详情页弹窗 dialog
savePath: 'src/components', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views
suffix: '-info-dialog',
dirSuffix: '', // 视图目录后缀连接词, 例如 /user-page
- template: 'dialog/base-info.art' // 模板名称 相对于 /art-template 目录
+ template: 'dialog/base-info.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
},
formPage: { // 表单页
savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views
suffix: '-form',
dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page
- template: 'page/form-page.art' // 模板名称 相对于 /art-template 目录
+ template: 'page/form-page.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
},
formDialog: { // 表单页弹窗 dialog
savePath: 'src/components', // 生成的位置目录 相对于项目根目录的路径, 例如: src/components
suffix: '-form-dialog',
dirSuffix: '', // 视图目录后缀连接词, 例如 /user-page
- template: 'dialog/base-form.art' // 模板名称 相对于 /art-template 目录
+ template: 'dialog/base-form.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
},
routerFile: { // 路由文件;名称不可修改; 暂不支持外部多路由文件,只支持单路由文件,也不支持路由的命名视图、动态加载等
- template: 'base/base-router.art', // 模板名称 相对于 /art-template 目录
+ template: 'base/base-router.art', // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
templateLayout: 'base/base-router-layout.art',
savePath: './park' // 路由分组文件保存目录,相对于主路由文件的路径 ,例如 projectPath.routerFile, 仅当 projectPath.useRouterGroup 为true时生效
},
baseMockData: { // mock数据 baseMockData 名称不可修改
savePath: 'mock/json', // 生成的位置目录 相对于项目根目录 /mock/json/data
- templateLayout: 'base/base-mock-layout.art', // 模板名称 相对于 /art-template 目录
- template: 'base/base-mock-item.art' // 模板名称 相对于 /art-template 目录
+ templateLayout: 'base/base-mock-layout.art', // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
+ template: 'base/base-mock-item.art' // 模板名称 相对于 /create_cfg_tmpl/*/template 目录
}
},
// mock数据配置
diff --git a/server/package-lock.json b/server/package-lock.json
index 6981bab..02fe024 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -11,12 +11,12 @@
"dev": true
},
"@ampproject/remapping": {
- "version": "2.2.1",
- "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
- "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
+ "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
"requires": {
- "@jridgewell/gen-mapping": "^0.3.0",
- "@jridgewell/trace-mapping": "^0.3.9"
+ "@jridgewell/gen-mapping": "^0.3.5",
+ "@jridgewell/trace-mapping": "^0.3.24"
}
},
"@babel/code-frame": {
@@ -85,20 +85,20 @@
"integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw=="
},
"@babel/core": {
- "version": "7.23.9",
- "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.23.9.tgz",
- "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.24.0.tgz",
+ "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
"requires": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.23.5",
"@babel/generator": "^7.23.6",
"@babel/helper-compilation-targets": "^7.23.6",
"@babel/helper-module-transforms": "^7.23.3",
- "@babel/helpers": "^7.23.9",
- "@babel/parser": "^7.23.9",
- "@babel/template": "^7.23.9",
- "@babel/traverse": "^7.23.9",
- "@babel/types": "^7.23.9",
+ "@babel/helpers": "^7.24.0",
+ "@babel/parser": "^7.24.0",
+ "@babel/template": "^7.24.0",
+ "@babel/traverse": "^7.24.0",
+ "@babel/types": "^7.24.0",
"convert-source-map": "^2.0.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.2",
@@ -218,13 +218,13 @@
"integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw=="
},
"@babel/helpers": {
- "version": "7.23.9",
- "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.23.9.tgz",
- "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.24.0.tgz",
+ "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
"requires": {
- "@babel/template": "^7.23.9",
- "@babel/traverse": "^7.23.9",
- "@babel/types": "^7.23.9"
+ "@babel/template": "^7.24.0",
+ "@babel/traverse": "^7.24.0",
+ "@babel/types": "^7.24.0"
}
},
"@babel/highlight": {
@@ -294,24 +294,24 @@
}
},
"@babel/parser": {
- "version": "7.23.9",
- "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.9.tgz",
- "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA=="
+ "version": "7.24.0",
+ "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.0.tgz",
+ "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg=="
},
"@babel/template": {
- "version": "7.23.9",
- "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.23.9.tgz",
- "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz",
+ "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
"requires": {
"@babel/code-frame": "^7.23.5",
- "@babel/parser": "^7.23.9",
- "@babel/types": "^7.23.9"
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0"
}
},
"@babel/traverse": {
- "version": "7.23.9",
- "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.9.tgz",
- "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.24.0.tgz",
+ "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
"requires": {
"@babel/code-frame": "^7.23.5",
"@babel/generator": "^7.23.6",
@@ -319,8 +319,8 @@
"@babel/helper-function-name": "^7.23.0",
"@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.6",
- "@babel/parser": "^7.23.9",
- "@babel/types": "^7.23.9",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0",
"debug": "^4.3.1",
"globals": "^11.1.0"
},
@@ -346,9 +346,9 @@
}
},
"@babel/types": {
- "version": "7.23.9",
- "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.23.9.tgz",
- "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.24.0.tgz",
+ "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
"requires": {
"@babel/helper-string-parser": "^7.23.4",
"@babel/helper-validator-identifier": "^7.22.20",
@@ -451,13 +451,13 @@
"dev": true
},
"@jridgewell/gen-mapping": {
- "version": "0.3.4",
- "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.4.tgz",
- "integrity": "sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==",
+ "version": "0.3.5",
+ "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+ "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"requires": {
- "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
- "@jridgewell/trace-mapping": "^0.3.9"
+ "@jridgewell/trace-mapping": "^0.3.24"
}
},
"@jridgewell/resolve-uri": {
@@ -466,9 +466,9 @@
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="
},
"@jridgewell/set-array": {
- "version": "1.1.2",
- "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz",
- "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+ "version": "1.2.1",
+ "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+ "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="
},
"@jridgewell/sourcemap-codec": {
"version": "1.4.15",
@@ -476,9 +476,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"@jridgewell/trace-mapping": {
- "version": "0.3.23",
- "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.23.tgz",
- "integrity": "sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==",
+ "version": "0.3.25",
+ "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+ "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"requires": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -787,9 +787,9 @@
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
},
"create-vue-page-npm": {
- "version": "2.3.2",
- "resolved": "https://registry.npmmirror.com/create-vue-page-npm/-/create-vue-page-npm-2.3.2.tgz",
- "integrity": "sha512-mD1axVNpQLSbn9JZ0TGC4OPr5iYfvh2hey6ZA4a0FtZcnvbumaqsZgIRrpibxIXKOgm1IMYP5k3KDJMoKauIYQ==",
+ "version": "2.3.4",
+ "resolved": "https://registry.npmmirror.com/create-vue-page-npm/-/create-vue-page-npm-2.3.4.tgz",
+ "integrity": "sha512-Bl8cCycFjnsamUm8+FbgGjtxS4scoEnmpQ2e01AfExEobSSzFKlwUn1AcFauxyW6NOFTJ0+5j3o/pSZxJ9u5uA==",
"requires": {
"@babel/core": "^7.23.6",
"@babel/generator": "^7.23.6",
@@ -863,9 +863,9 @@
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
},
"electron-to-chromium": {
- "version": "1.4.685",
- "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.685.tgz",
- "integrity": "sha512-yDYeobbTEe4TNooEzOQO6xFqg9XnAkVy2Lod1C1B2it8u47JNLYvl9nLDWBamqUakWB8Jc1hhS1uHUNYTNQdfw=="
+ "version": "1.4.690",
+ "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz",
+ "integrity": "sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA=="
},
"encodeurl": {
"version": "1.0.2",
diff --git a/server/package.json b/server/package.json
index 3da9949..1ecac84 100644
--- a/server/package.json
+++ b/server/package.json
@@ -12,7 +12,7 @@
"dependencies": {
"art-template": "^4.13.2",
"axios": "^1.6.7",
- "create-vue-page-npm": "^2.3.2",
+ "create-vue-page-npm": "^2.3.4",
"express": "^4.18.2",
"fs-extra": "^11.2.0"
},
@@ -24,4 +24,4 @@
"node": ">=14",
"npm": ">=6"
}
-}
\ No newline at end of file
+}
diff --git a/server/www/index.html b/server/www/index.html
index fd610d1..e6e18cd 100644
--- a/server/www/index.html
+++ b/server/www/index.html
@@ -1 +1 @@
-
注意这里源码,二次扩展开发时才需要使用,生产使用请访问这里
提示:修改配置文件及模板不需要重新编译本项目,重启server服务并无缓存刷新页面即可生效;(配置文件及模板在 server/create_cfg_tmpl 目录下)
根据 Swagger 文档定义,自动生成视图页面、API、路由、mock等。新页面可热更新直接运行。根据目标项目根目录(工作空间)中的 ESLint 环境配置信息,对文件进行 --fix 修复,保障文件代码格式与目标项目统一。
建议运行在 nodejs v14.21.3 与 npm 6.14.18 版本及邻近版本上;其它版本编译过程中可能会有异常; 建议使用nvm等node版本管理工具;
高版本nodejs 建议使用 npm i -f 命令安装项目;经测试 nodejs 16.17.1 与 18.16.1 是可以兼容的;
建议使用编辑器(如 vsCode)直接打开本目录(web-project)作为独立的项目启动,以防出现插件找不到项目根目录中配置文件的情况,或者使用vsCode的工作区模式,将 web-project 和 server 加入到同一个工作区中;
浏览器下载并解压缩文件\nhttps://gitee.com/rwx666888/create-page-common/repository/archive/dev.zip\n或\ngit clone https://gitee.com/rwx666888/create-page-common.git\n
cd create-page-common/web-project\n
npm i\n
npm run local\n
npm run build\n
编译后的项目在 server/www 目录下;
注意:配置文件及模板在 server/create_cfg_tmpl 目录下(vue2、vue3),修改后需要刷新页面(ctrl + F5, 强制刷新浏览器缓存,或开启开发者模式中的禁用缓存)才能生效;如果是生产模式(即使用的server服务),还需要额外的重启server服务;
注意:web-project/public/tmpl_cfg 及 server/www/tmpl_cfg 目录下的配置文件及模板均为临时文件,修改无效,npm run xx 启动时,这部分会被server/create_cfg_tmpl 中与 xx 匹配的文件完全覆盖;
根据 Swagger 文档定义,自动生成视图页面、API、路由、mock等。新页面可热更新直接运行。根据目标项目根目录(工作空间)中的 ESLint 环境配置信息,对文件进行 --fix 修复,保障文件代码格式与目标项目统一。
建议运行在 nodejs v14.21.3 与 npm 6.14.18 版本及邻近版本上;其它版本编译过程中可能会有异常; 建议使用nvm等node版本管理工具;
高版本nodejs 建议使用 npm i -f 命令安装项目;经测试 nodejs 16.17.1 与 18.16.1 是可以兼容的;
如果你的项目与本项目工作在不同node环境中,且本项目无法在当前版本下启动,建议使用nvm等工具切换到 v14.21.3,运行本项目,创建完所需页面后,再切换到你的node版本,运行你的项目;后续有时间可能考虑使用 electron 隔离node版本;
# npm install\nnpm run local\n
建议在 cmd命令行中运行;
Tips: 列表API下拉框中只展示包含list的API;
拖动检索条件、列表项区域中的图标( ),可改变字段显示顺序;
列表项 -> 气泡:对应 show-overflow-tooltip ,暂不支持 table-header 使用气泡;
列表项 -> 显示:设置是否在列表中显示该字段;
注意:修改配置文件后,必须重启本项目;
{\n // 分页参数,例如每页条数,当前页码等非用户输入的参数\n pageListParams: [\n 'pageSize', 'currentPage'\n ],\n makeFile: { // 生成文件的配置\n isMakeView: true, // 是否生成视图文件\n isMakeApi: true, // 是否生成api文件\n isMakeRouter: true, // 是否生成路由文件\n isMakeMock: false // 是否生成mock数据文件\n },\n author: 'lianglei', // 作者\n reWrite: { // 存在重名文件是否直接覆盖, true:覆盖; false:跳过; key值需与 template 中的key值一致,未设置的文件默认为true;\n listPage: true, // 列表页\n infoPage: true, // 详情页\n formPage: true // 表单页\n },\n listPage: { // 列表页 表格列对齐方式\n colAlignDefault: 'left', // 默认居左对齐\n colAlignInt: 'center' // 数字型默认居中对齐\n },\n // 项目文件结构路径配置\n projectPath: {\n apisFilePath: 'src/apis', // api文件目录\n httpFile: '@/apis/request.js', // 网络请求库,例如 axios;必须 export 导出 (post get del put)方法\n routerFile: 'src/router/index.js', // 路由文件\n routerMatchMark: '@/views/' // 路由文件中路由匹配标记, 可匹配路由文件中 component: () => import('@/views/icons/index'), 的 @/views/部分,\n },\n // 生成文件的配置, 其中base开头的为基础模板配置,不可修改属性名称\n template: {\n listPage: { // 列表页\n savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views\n suffix: '-list',\n dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page\n template: 'page/list-page.art' // 模板名称 相对于 /art-template 目录\n },\n infoPage: { // 详情页\n savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views\n suffix: '-info',\n dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page\n template: 'page/info-page.art' // 模板名称 相对于 /art-template 目录\n },\n infoDialog: { // 详情页弹窗 dialog\n savePath: 'src/components', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views\n suffix: '-info-dialog',\n dirSuffix: '', // 视图目录后缀连接词, 例如 /user-page\n template: 'dialog/base-info.art' // 模板名称 相对于 /art-template 目录\n },\n formPage: { // 表单页\n savePath: 'src/views', // 生成的位置目录 相对于项目根目录的路径, 例如: src/views\n suffix: '-form',\n dirSuffix: '-page', // 视图目录后缀连接词, 例如 /user-page\n template: 'page/form-page.art' // 模板名称 相对于 /art-template 目录\n },\n routerFile: { // 路由文件;名称不可修改; 暂不支持外部多路由文件,只支持单路由文件,也不支持路由的命名视图、动态加载等\n template: 'base/base-router.art' // 模板名称 相对于 /art-template 目录\n },\n baseMockData: { // mock数据 baseMockData 名称不可修改\n savePath: 'mock/json', // 生成的位置目录 相对于项目根目录 /mock/json/data\n templateLayout: 'base/base-mock-layout.art', // 模板名称 相对于 /art-template 目录\n template: 'base/base-mock-item.art' // 模板名称 相对于 /art-template 目录\n }\n },\n // mock数据配置\n mockCig: {\n // 模式数据类型映射\n columnTypeMap: {\n /**\n * 同正则匹配字段名称,从而返回猜测类型的数据,预设的数据在/mock/json/data/example-data.js 文件中 makeDemoMockData\n * 匹配不到的所有模拟字段均返回 makeDemoMockData.randomStr 即1-5位随机字符\n * 同一类型均有数量限制,限制为makeDemoMockData中key的后缀最大值:超过数量上限后返回随机数;\n * 例如: name1:XX; name2:xx; 则name类型最多可用3次,可用增加次数,例如name3\\name4,但后缀必须是同前缀分组下的连续的整数;\n * 这里的key对应 /mock/json/data/example-data.js 文件中 makeDemoMockData 对象的key 的前缀\n * 属性值只支持 正则表达式 或 false\n * 生成器中使用了 Object.assign 对配置信息进行合并,所以可随意扩展,如果想禁用预设字段的映射,将对应key值设置为false,例如: name:false\n * 注意后续版本中可能会移除预设的映射规则\n */\n integer: /integer/,\n name: /(title|name$)/i,\n city: /(^city|city$)/i,\n province: /(^province|province$)/i,\n email: /email/i,\n uid: /(code|id)/i,\n datetime: /(^datetime|datetime$)/i,\n date: /(^date|date$)/i,\n phone: /(^(phone|mobile)|(phone|mobile)$)/i\n }\n },\n formItemCig: {\n dataTimeRangeRegExp: '^(start|end|begin)|(start|end|begin)$', // 不区分大小写\n isStartRegExp: '^(start|begin)|(start|begin)$' // 不区分大小写\n },\n /**\n * 路由前缀连接词\n * 可为空,如果设置则必须首字母大写,否则可能导致路由缓存不生效;\n * 用于构造 路由中的 name,及页面中 export default.name\n * 最终格式为: [lever2]xxxx ,例如:PageUserList, 其中page 为lever2路由前缀连接词,UserList为API名称\n * 详见 /mock/json/createPage.js\n */\n routerSuffix: {\n lever1: 'Menu',\n lever2: 'Page'\n },\n /**\n * 表单元素类型\n * disabled : 在构造模板中,不可使用(暂不支持)的元素\n * [undefined] : 不禁用, 默认值;\n * [boolean] true : 全部禁用;\n * [string] 只有完全匹配的才禁用,例如:'list|form' 则表示为 list 或 form 禁用;\n * path : 可选,自定义组件的路径 例如:'@/components/cusDatePicker/index.vue'\n * valid : 必须,表单验证配置\n * -- trigger: 必须,触发方式 'blur' 、'change' 等\n * -- type: 可选,数据类型 'string'(默认)、'date'、'array' 等\n * dataSource : 可选,数据源配置,例如:下拉选择框的选项\n * -- dataType: 必须,数据格式,默认array,可选:array、object\n * -- default: 可选,数据源默认值,例如:下拉选择框的默认值 [{value: null, label: '全部'}] ; 如果没有对组件进行配置,则使用默认值\n */\n formItemOpts: [\n {\n value: 'input',\n label: '单行文本框',\n valid: {\n trigger: 'blur'\n }\n },\n {\n value: 'textarea',\n label: '多行文本框',\n disabled: 'list',\n valid: {\n trigger: 'blur'\n }\n },\n {\n value: 'select',\n label: '下拉选择框',\n valid: {\n trigger: 'change'\n },\n dataSource: {\n dataType: 'array',\n default: [{ value: null, label: '全部' }]\n }\n },\n {\n value: 'radioGroup',\n label: '单选框组',\n disabled: 'list',\n valid: {\n trigger: 'change'\n },\n dataSource: {\n dataType: 'array',\n default: [{ value: '-1', label: '选项一' }, { value: '-2', label: '选项二' }]\n }\n },\n {\n value: 'radio', // 暂不支持,因为基本没有单独使用单选框的场景\n label: '单选框',\n disabled: true,\n valid: {\n trigger: 'change'\n }\n },\n {\n value: 'checkboxGroup',\n label: '多选框组',\n valid: {\n trigger: 'change',\n type: 'array'\n },\n dataSource: {\n dataType: 'array',\n default: [{ value: '-1', label: '选项一' }, { value: '-2', label: '选项二' }]\n }\n },\n {\n value: 'checkbox',\n label: '多选框',\n valid: {\n trigger: 'change'\n }\n },\n {\n value: 'timePicker',\n label: '时间选择器',\n disabled: true,\n valid: {\n trigger: 'change',\n type: 'date'\n }\n },\n {\n value: 'datePicker',\n label: '日期选择器',\n valid: {\n trigger: 'change',\n type: 'date'\n }\n },\n {\n value: 'cusDatePicker',\n label: '日期选择器(双)',\n path: '@/components/cusDatePicker/index.vue',\n valid: {\n trigger: 'change',\n type: 'date'\n }\n }\n ],\n tableRowBgColor: [\n 'table-row-success',\n 'table-row-brand',\n 'table-row-warning',\n 'table-row-danger'\n ]\n}\n\n
预设模板变量不可直接修改,只能扩展,或通过配置文件修改
{ \n path: '/${{lever1Path}}', \n component: Layout, \n name:'${{lever1RouterName}}',\n meta: { \n title: '${{lever1PageName}}', \n icon: 'el-icon-orange',\n code: '' // 设置code即可启用权限控制 \n }, \n redirect: '${{lever2Path}}', \n children: [ \n {\n path: '${{lever2Path}}',\n component: () => import('@/views/${{filePath}}'),\n name: '${{lever2RouterName}}',\n meta: { title: '${{lever2PageName}}', code: '' }\n }\n ]\n}\n
{\n name, // api名称\n nameHump, // api名称, 大驼峰格式\n nameToPathfilter, // 过滤后的api名称,主要用于生成 view 页面\n nameToPath, // 连接符(-)的 api名称\n desc, // 接口描述\n type, // 请求类型 get|post|del|put, 注意delete统一转换为del\n uri, // 接口地址\n fileName, // API 所属分组 tags,连接符(-)格式,用于生成api文件名\n fileNameHump, // API 所属分组 tags, 大驼峰格式\n fileDesc // API 所属分组的描述\n}\n
{\n rootPath, // 项目根路径\n formData: [ // 列表页检索项\n {\n column, // 列名 示例:username\n isShow, // 是否显示\n opts: {\n range: range_, // 双日历配置项\n valid: null, // 表单验证配置项\n attr: null // 可选,表单组件配置属性\n }, // 配置项\n needValidateOpts: false, // 是否需要验证配置项\n label, // 示例:用户名\n labelDesc, // 字段描述 示例:用户名,英文字母\n columnType, // 类型 string|integer|array\n formItemType, // 表单元素类型 input|dataPicker 对应配置文件中 formItemOpts\n range: { // 默认: null , 仅当是双日历表单组件时返回 \n f_: '__DateTime', // 所执行的自动匹配模式 ,注意仅 'startDateTime' 与 'endDateTime' 可自动匹配为 '__DateTime';'startDateTime' 与 'dateTimeEnd' 不会自动匹配\n to_: 'endDateTime', // 自动匹配到的对象列名称\n isDatePickerRange: 'true|false', // 是否是双日历\n isStart: 'true|false' // 是否是start 否则为end\n } \n }\n ],\n tableData: [ // 列表项\n {\n column,\n label,\n columnType,\n isShow,\n showTips, // 单元格内容溢出后是否显示气泡\n alignType // 列文本对齐方式 ,默认数字居中,文本居左;参照配置文件中 listPage 的配置\n }\n ],\n otherConfig: { // 额外的扩展配置\n showBtnCol: false, // 显示按钮列\n showNumCol: true, // 显示序号列\n showFormRightBtns: false // 显示表单右侧按钮区域\n 。。。\n },\n apiConfig, // 参照 模板预设变量中 《API》的说明 \n}\n
1、支持表单验证(validate)\n2、部分组件支持自定义配置;详见目录 /art-template/base/form; 可自行修改或扩展,注意文件名称必须与 config.js 中 formItemOpts 声明的属性匹配;\n
方法 :$imports.comConfig\n示例 :输出作者 ${{$imports.comConfig.author}}\n
方法 :$imports.getCusPluginsListImport(formData) ; 其中 formData 为预设页面模板变量\n示例 :\n# 1、声明变量\n<% var _CusPluginsList_ = $imports.getCusPluginsListImport(formData) %>\n\n# 2、注入自定义组件\n${{each _CusPluginsList_}}\nimport ${{$value.name}} from \'${{$value.path}}\'\n${{/each}}\n> Tips: $value.name 与 $value.path 分别对应配置文件中 formItemOpts 对象的 value 与 path\n\n# 3、注册自定义组件\nexport default {\n components: {\n ${{each _CusPluginsList_}}${{$value.name}},${{/each}}\n }\n}\n
方法 :$imports.getValidationListImport(formData) ; 其中 formData 为预设页面模板变量\n示例 :\n# 1、声明变量\n<% var _ValidationList_ = $imports.getValidationListImport(formData) %>\n\n# 2、绑定到form组件\n<el-form ref="claFrom" :model="claForm" \n ${{if _ValidationList_.length}} :rules="rules" ${{/if}}\n label-width="auto" />\n \n# 3、在data()中声明 rules\n${{if _ValidationList_.length}}\n rules:{\n ${{include \'base/base-form-rule.art\' _ValidationList_}}\n },\n${{/if}}\n
方法 :$imports.getFormItemAttr(itemOpts) ; 其中 itemOpts 为预设页面模板变量: opts.attr\n描述:返回属性的键值对字符串,注意此方法不会返回以\'_\'开头并且以 \'_\'结尾 (/^_[\\w-]+_$/)的私有属性或临时变量\n示例 :\n<el-input\n v-model="claForm.${{column}}"\n placeholder="${{label}}"\n ${{@ opts.attr | getFormItemAttr}}\n/>\n
有接口的请忽略,默认也未开启; 配置路径:config.js -> makeFile -> isMakeMock (是否生成mock数据文件)
参照 /art-template/base/base-mock-item.art
{\n url: \'${{apiConfig.uri | getMockRouterUrl}}\',\n type: \'${{apiConfig.type}}\',\n response: config => {\n if (!demo.__cacheKey__[\'${{apiConfig.name}}\']) {\n const tobj = {\n ${{@ tableData | getMockRouterResData}}\n }\n demo.demoFnGetTheListKey(tobj)\n demo.__cacheKey__[\'${{apiConfig.name}}\'] = { ...tobj }\n }\n\n return demo.demoFnMakeListPageData(\'${{apiConfig.name}}\', config.query)\n }\n}\n