init.json指南

12003

jianghu-init JSON以JSON格式高效地管理页面结构和API接口,从而优化开发流程和提升工作效率,本指南主要介绍jianghu-init JSON的详细教程。

命令行参数

以下是 jianghu-init json 支持的命令行参数:

  • --generateType:可选主命令流程。
    1. ? Please select a json type (Use arrow keys)
    2. init page by json text
    3. init json by table
    4. init example json and page
    5. init example chart component
  • —-pageType :可选页面类型。
    1. ? 请选择类型 (Use arrow keys)
    2. jh-page
    3. jh-component
  • --file :文件名。
  • --pageId :页面/配置文件的pageId。
  • --table :数据table表名。
  • --dev :dev 模式,运行命令后默认进入全局开发模式,开发模式生成 html 和更新 resource
  • -y :默认同意
  • -n :默认拒绝
  • dev :直接开启 dev 模式

命令:dev 开发模式

默认生成 example_classexample_student 数据表、配置文件和页面,方便参考使用

  1. // 直接开启前置 dev 模式
  2. jianghu-init json dev
  3. // 运行指令后开启 dev 模式
  4. jianghu-init json --generateType=page --dev

命令:生成样例文件页面

默认生成 example_classexample_student 数据表、配置文件和页面,方便参考使用

  1. jianghu-init json --generateType=example

命令:生成页面配置文件

  1. jianghu-init json --generateType=json --pageType=1table-page --table=class --pageId=classManagement

命令:配置渲染html

  1. jianghu-init json --generateType=page --pageType=1table-page --file=classManagement

配置文件基础结构

  1. {
  2. pageType: "jh-page", // 类型: jh-page | jh-component
  3. pageId: "pageId",
  4. table: "class",
  5. pageName: "班级页面",
  6. resourceList: [], // 页面resource { actionId, resourceType, resourceData }
  7. common: {}, // vue 原生变量 + uiAction {data, props, watch, methods, computed}
  8. headContent: [], // 面包屑条
  9. pageContent: [], // 页面显示内容、兼容设置对象 {}
  10. actionContent: [], // 触发内容集合
  11. style: '', // 自定义样式
  12. }

includeList 资源引入

  1. includeList: [
  2. { type: 'css', path: "/<$ ctx.app.config.appId $>/public/lib/echarts.min.css" },
  3. { type: 'script', path: "/<$ ctx.app.config.appId $>/public/lib/echarts.min.js" },
  4. { type: 'html', path: "component/exampleChart/lineChart.html" },
  5. { type: 'vueComponent', name: 'v-chart', component: 'VueCHarts' },
  6. ]

resourceList 协议数据

  • 结构同 _resource 表,生成页面后会添加到 _resource 表
属性 类型 必填 描述
resourceHook string
actionId string actionId
desc string resource 描述
resourceType string 操作类型:sql
resourceData string { "table": "class", "operation": "update" }
  • 代码示例
  1. resourceList: [
  2. {
  3. resourceHook: {"before": [], "after": []}
  4. actionId: 'balance-updateItem',
  5. desc: '修改班费余额',
  6. resourceType: 'sql',
  7. resourceData: { "table": "class", "operation": "update" }'
  8. }
  9. ]

common vue相关自定义

  1. common: {
  2. props: { // 组件独有,写法同vue
  3. classId: {
  4. type: String,
  5. required: true,
  6. default: ''
  7. },
  8. },
  9. data: { // 自定义data obj:属性写法同vue
  10. constantObj: {
  11. gender: ["全部", "男", "女"],
  12. },
  13. },
  14. dataExpression: {}, // 表达式单独设置
  15. watch: {}, // 自定义watch:写法同vue
  16. computed: {}, // 自定义computed
  17. methods: {}, // 自定义methods
  18. // 额外 doUiAction
  19. doUiAction: {
  20. startUpdataBalance: ['method1', 'method2'],
  21. }
  22. //-------- doUiAction 实际渲染
  23. // case 'startUpdataBalance':
  24. // await this.method1(uiActionData);
  25. // await this.method2(uiActionData);
  26. // break;
  27. //
  28. }

tag 对象规范

属性 类型 必填 描述
tag string html 标签
value string 标签内body,支持嵌套
attrs string 标签属性
  • 示例应用场景
  1. // page body 页面主题应用
  2. pageContent: {
  3. tag: 'v-row',
  4. attrs:{},
  5. value: [
  6. { tag: 'v-col', attrs: { cols: 12 }, value: '' },
  7. ],
  8. },
  9. // rowActionList 行内按钮
  10. pageContent.rowActionList<jh-table>: [tag1, ...]
  11. // headActionList 表格顶部全局按钮
  12. pageContent.headActionList<jh-table>: [tag1, ...]

formItem 表单规范

属性 类型 必填 描述
label string input上方的label,search 设置无效
model string 绑定变量
tag string html 标签,支持 jh-json-editor 编辑器
rules string 验证规则
attrs object 标签 attr 属性
hidden Boolean 隐藏则在前端不显示

分组,tag可自定义,去除 label 属性将不再渲染

  1. { cols: '12', tag: 'h3', value: '分组1', colsAttrs: { class: 'pb-0' } },
  • 代码示例
  1. {
  2. label: "详细信息", // 区域标题
  3. type: "form", // 表单类型
  4. formItemList: [
  5. {
  6. label: "班级ID",
  7. model: "classId",
  8. tag: "v-text-field", // 输入框类型:v-text-field | v-select | v-date-picker
  9. rules: "validationRules.requireRules", // 验证规则 支持函数及变量写法
  10. attrs: { // tag 标签上的其他属性:small | filled ...
  11. disabled: true
  12. }
  13. }
  14. ],
  15. action: { // 统一tag写法:tag-标签名 | value-内容 | attrs-标签属性
  16. tag: "v-btn",
  17. value: "提交",
  18. attrs: {
  19. color: "success",
  20. ':small': true,
  21. '@click': "doUiAction('updateBalance')"
  22. }
  23. }
  24. }

headContent 面包屑

  1. headContent: [
  2. { tag: 'jh-page-title', value: "班级页面", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  3. { tag: 'v-spacer' },
  4. {
  5. tag: 'jh-search',
  6. attrs: { cols: 12, sm: 6, md:8 },
  7. value: [
  8. { tag: "v-text-field", model: "serverSearchWhereLike.className", attrs: {prefix: '前缀'} },
  9. ],
  10. searchBtn: {}
  11. }
  12. ],

pageContent 页面主体

  • 1table 类型,江湖自定义组件(目前只支持顶层渲染)
  1. pageContent: {
  2. tag: 'jh-table',
  3. attrs:{},
  4. value: [ // v-data-table headers
  5. ...headers
  6. ],
  7. rowActionList: [{tag}],
  8. headActionList: [{tag}]
  9. },
  10. pageContent: [
  11. {
  12. tag: 'jh-table',
  13. attrs:{},
  14. value: [ // v-data-table headers
  15. ...headers
  16. ],
  17. rowActionList: [{tag}],
  18. headActionList: [{tag}]
  19. },
  20. ]
  • 自定义布局
  1. // 自定义布局
  2. pageContent: {
  3. tag: 'v-row',
  4. attrs:{},
  5. value: [
  6. { tag: 'v-col', attrs: { cols: 12 }, value: '' },
  7. ],
  8. },

actionContent 触发内容集合

  • 抽屉内的 contentList 支持多个组件或表单,以 v-tab 的形式进行渲染
属性 类型 必填 描述
tag string 标签,内置的有:jh-create-drawer、jh-update-drawer,非内置可自由设置,如 v-overlay、v-dialog 等
key string 抽屉唯一属性,用来构建 变量自动渲染 isShown 变量: is{{ key }}DrawerShown 和 form ref
title string 抽屉标题
headSlot array 标题后内容的插槽,可添加按钮等
contentList array 抽屉内容list,超过1个时显示 tab切换
—label string input label
—type string form 或 component
—formItemList array form 时 必填,规范参考
—action array object form 提交按钮,规范参考
—componentPath string component 必填组件路径
—bind array object component 参数可选
  • 设置抽屉示例
  1. actionContent: [
  2. {
  3. tag: 'jh-create-drawer',
  4. key: "create", // 自动变量 isCreateDrawerShown createItem createDrawerTab
  5. attrs: {},
  6. title: '新增班级',
  7. headSlot: [],
  8. contentList: [
  9. {
  10. label: "新增",
  11. type: "form",
  12. formItemList: [
  13. { label: "班级ID", model: "classId", tag: "v-text-field", idGenerate: { prefix: "C", startValue: 10001, bizId: "classId" }, attrs: { disabled: true, placeholder: "规则自动生成" }, hidden: true },
  14. { label: "班级名称", model: "className", tag: "v-text-field", rules: "validationRules.requireRules", required: true },
  15. { label: "班级类型", model: "classType", tag: "v-select", rules: "validationRules.requireRules", required: true, default: '"普通班"', attrs: { ':items': 'constantObj.classType' } },
  16. { label: "备注", model: "remarks", tag: "v-text-field", },
  17. ],
  18. action: {
  19. tag: "v-btn",
  20. value: "新增",
  21. attrs: {
  22. color: "success",
  23. ':small': true,
  24. '@click': "doUiAction('createItem')"
  25. }
  26. },
  27. },
  28. ]
  29. },
  30. {
  31. tag: 'jh-update-drawer',
  32. key: "update",
  33. attrs: {},
  34. title: '编辑班级',
  35. headSlot: [
  36. { tag: 'v-spacer' },
  37. { tag: 'v-btn', value: '自定义按钮', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("123")', small: true } },
  38. ],
  39. contentList: [
  40. {
  41. label: "编辑",
  42. type: "form",
  43. formItemList: [
  44. { tag: 'h3', value: '分组1', cols: '12', colsAttrs: { class: 'pb-0' } }, // 表单分组
  45. { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules", required: true, attrs: { disabled: true }},
  46. { label: "班级名称", model: "className", tag: "v-text-field", rules: "validationRules.requireRules", required: true },
  47. { tag: 'h3', value: '分组2', cols: '12', colsAttrs: { class: 'pb-0' } }, // 表单分组
  48. { label: "班级类型", model: "classType", tag: "v-select", rules: "validationRules.requireRules", attrs: { ':items': 'constantObj.classType' }, required: true },
  49. { label: "备注", model: "remarks", tag: "v-text-field", },
  50. ],
  51. action: {
  52. tag: "v-btn",
  53. value: "编辑",
  54. attrs: {
  55. color: "success",
  56. ':small': true,
  57. '@click': "doUiAction('updateItem')"
  58. }
  59. },
  60. },
  61. { label: "操作记录", type: "component", componentPath: "recordHistory" },
  62. { label: "学生列表", type: "component", componentPath: "example/studentOfClass", bind: ['classId'] },
  63. ]
  64. },
  65. {
  66. tag: 'jh-drawer',
  67. key: "updateBalance", // 自动变量 isUpdateBalanceDrawerShown updateBalanceItem updateBalanceDrawerTab
  68. title: "班级费用",
  69. contentList: [
  70. { label: "详细信息", type: "form", formItemList: [
  71. { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules", attrs: {
  72. disabled: true
  73. } },
  74. { label: "修改班费", model: "classBalance", tag: "v-text-field", rules: "validationRules.requireRules", required: true },
  75. ], action: {
  76. tag: "v-btn",
  77. value: "提交",
  78. attrs: {
  79. color: "success",
  80. ':small': true,
  81. '@click': "doUiAction('updateBalance')"
  82. }
  83. }
  84. },
  85. ]
  86. },
  87. {
  88. tag: 'jh-drawer',
  89. key: "classStudent",
  90. // title: "班级学生列表",
  91. contentList: [
  92. { label: "学生列表", type: "component", componentPath: "example/studentOfClass", bind: ['classId'] },
  93. ]
  94. },
  95. ]
  • 其他示例
  1. actionContent: [
  2. ...ohter,
  3. {
  4. tag: 'v-dialog'
  5. attrs: {},
  6. value: []
  7. },
  8. {
  9. tag: 'v-overlay'
  10. attrs: {},
  11. value: []
  12. }
  13. ]

style 样式

原生自定义样式写入支持

  1. style: `
  2. .table {
  3. width: 100%;
  4. }
  5. `

使用技巧

table列设置

配置 showTableColumnSettingBtn,就可以显示列设置按钮。

  1. pageContent: [
  2. {
  3. tag: 'jh-table',
  4. attrs: { },
  5. value: [],
  6. showTableColumnSettingBtn: true,
  7. headActionList: [],
  8. rowActionList: [],
  9. }
  10. ],

还支持列设置的模式设定,在common.data里配置 columnSettingGroup,用于在不同模式下显示不同的table列。

  1. columnSettingGroup: {
  2. '01模式': [
  3. "netName",
  4. "stage",
  5. "followUpDate",
  6. "district",
  7. "memberId",
  8. "followUpBy",
  9. "currentResidence",
  10. "openVisitationStatus",
  11. "totalVisitationCount",
  12. "visitorAssignInfo",
  13. "operationAt",
  14. "action"
  15. ],
  16. '02模式': [
  17. "netName",
  18. "stage",
  19. "duoxingRoomName",
  20. "followUpDate",
  21. "tag",
  22. "projectList",
  23. "followUpBy",
  24. "district",
  25. "memberId",
  26. "currentResidence",
  27. "operationAt",
  28. "action"
  29. ],
  30. '03模式': [
  31. "netName",
  32. "orgId",
  33. "orgName",
  34. "roleId",
  35. "isDefaultOrg"
  36. ],
  37. },

场景搜索

headContent 中配置 tag 为 jh-scene,可以配置场景搜索,还可以在 formItemList 中配置自定义场景的表单选择

  1. headContent: [
  2. {
  3. tag: 'jh-scene',
  4. attrs: {},
  5. value: [],
  6. formItemList: [
  7. { label: '城市', tag: 'v-select', model: 'city', items: []},
  8. { label: '状态', tag: 'v-select', model: 'status', items: []},
  9. ],
  10. },
  11. ],

common.data 中配置 defaultSceneList ,可以设置默认的场景

  1. defaultSceneList: [
  2. { form: {}, name: "全部", default: true, id: "scene-custom-all", 'system': true },
  3. { form: { isChild: true }, name: "不显示未成年", default: null, id: "scene-custom-1", 'system': true },
  4. ]

配置自定义场景的表单,

  1. headContent: [
  2. {
  3. tag: 'jh-scene',
  4. attrs: {},
  5. value: [],
  6. formItemList: [
  7. {}
  8. ],
  9. },
  10. ],