init.json指南

12003

快速开始

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

安装

在开始之前，请确保您已经安装了jianghu-init工具。可以通过以下命令进行安装：

npm uninstall -g @jianghujs/jianghu-init
npm install -g @jianghujs/jianghu-init@latest

👉 jianghu-init 工具安装详解👈

在江湖项目中生成参考示例

👉 创建jianghujs项目 👈

使用以下命令生成参考示例：

cd my-jh-project
jianghu-init json --generateType=example

执行以上命令，当前项目数据库将添加 example_class 和 example_student 数据表、并在项目目录生成以下文件：

app\view\init-json\component\exampleStudentOfClass.js
app\view\init-json\page\exampleClass.js
app\view\component\example\exampleStudentOfClass.html
app\view\page\exampleClass.html

方便参考使用

步骤一：数据表生成配置文件

当有一个新的业务数据表之后，可以使用以下命令生成数据表的配置文件，例如，现在有一个名为class的数据表：

CREATE TABLE `class` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `classId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级ID',
  `className` varchar(255) DEFAULT NULL,
  `operation` varchar(255) COLLATE utf8mb4_bin DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) 
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

要为class数据表生成基础配置文件，可以使用以下命令：

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

执行命令之后，会在项目的app/view/init-json/page/目录下生成一个名为classManagement.js的配置文件。

步骤二：配置文件生成页面

上一步生成的配置文件，需要通过以下命令生成页面：

jianghu-init json --generateType=page --pageType=page --file=classManagement

执行以上命令，将会生成项目的app/view/page/目录下生成一个名为classManagement.html的页面文件，并自动配置页面对应的数据库表_page和_resouce的数据。

👉 开启dev模式，修改配置文件自动更新页面 👈

👉 配置字符串代码语法高亮 👈

配置协议

总览

{
  pageType: "jh-page", // 页面类型
  pageId: "pageId",  // 页面唯一标识
  pageName: "班级页面", // 页面标题
  resourceList: [ // 页面resource { actionId, resourceType, resourceData }
    {
      actionId: "selectItemList",
      resourceType: "sql",
      resourceHook: {},
      desc: "✅查询列表-exampleClass",
      resourceData: {
        table: "example_class",
        operation: "select"
      }
    }
  ], 
  headContent: [], // 页面头部，常用于配置 标题、面包屑条、服务端搜索、场景搜索等 
  pageContent: [], // 页面内容区域
  actionContent: [], // 触发内容集合，一般会放新增、修改等弹框
  includeList: [ // 页面引入资源 { type, path }
    { type: 'html', path: 'component/jianghuJs/jhSceneV4.html' }
  ], 
  common: { // vue 原生变量 + uiAction {data, props, watch, methods, computed}
    data: {},
    computed: {}, 
    watch: {}, 
    methods: {},
    doUiAction: {}, // 自定义uiAction { [key]: [method1, method2, doUiAction1]}
  }, 
  style: '', // 自定义样式
}

HTML标签

在 headContent、pageCotent、actionContent 中，可以使用使用指定的对象结构来配置一个标签，也支持直接使用HTML字符串。

对象结构

pageContent: [
  {
    tag: 'v-row',
    attrs: {
      align: "center"
      "@click": "doUiAction('updateItem')"
    },
    quickAttrs: ['no-gutters'],
    value: [
      { tag: 'v-col', attrs: { cols: 12 }, value: '' },
      `<v-col cols="12"></v-col>`
    ]
  }
]

属性	类型	必填	描述
tag	string	✅	标签名称
attr	object	否	标签属性，如class、@click等
quickAttrs	array	否	标签简洁属性，如 v-else small disabled等
value	object	否	标签内的HTML内容

HTML字符串

pageContent: [
  '<v-row align="center"><v-col cols="12"></v-col></v-row>'
]

接口配置

配置江湖resource，定义的resouce将自动更新到数据库中，供前端调用。

resourceList: [
  {
    resourceHook: { "before": [], "after": [] },
    actionId: 'balance-updateItem',
    desc: '修改班费余额',
    resourceType: 'sql',
    resourceData: { "table": "class", "operation": "update" }
  }
]

👉 resouce详细配置文档 👈

资源引入

当页面需要引入组件、样式、脚本等资源时，可以通过includeList配置。支持对象结构和HTML字符串。

includeList: [
  { type: 'css', path: "/<$ ctx.app.config.appId $>/public/lib/echarts.min.css" },
  { type: 'script', path: "/<$ ctx.app.config.appId $>/public/lib/echarts.min.js" },
  { type: 'html', path: "component/exampleChart/lineChart.html" },
  { type: 'html', path: 'component/courseBatchDrawer.html', includeType: 'auto', attrs: { id: 'courseBatchDrawer' } },
  { type: 'vueComponent', name: 'v-chart', component: 'VueCharts' },
  `<script src="/<$ ctx.app.config.appId $>/public/lib/echarts.min.js"></script>`
]

属性	类型	必填	描述
type	string	✅	引入类型，可选 css、js、html、vueComponent
path	string	否	引入路径，type为css、js、html时可用
includeType	string	否	引入类型，可选 auto，当值为auto时将自动添加标签内容添加到页面末端。type为css、js、html时可用
attrs	object	否	自定引入标签属性。type为html、includeType为auto时可用
name	string	否	组件名，type为vueComponent时可用
component	string	否	引入组件，type为vueComponent时可用

配置doUiAction

提供补充doUiAction方法的配置入口

pageContent: [
  {
    tag: 'v-btn',
    value: '测试doUiAction1',
    attrs: { '@click': 'doUiAction("doSomething")' },
    quickAttrs: ['small']
  },
  `<v-btn @click="doUiAction('doSomething')">测试doUiAction2</v-btn>`
],
common: {
  doUiAction: {
    startUpdataBalance: ['method1', 'method2'],
    doSomething: ['method1(134)', 'doUiAction.startUpdataBalance']
  },
  methods: {
    method1: function (id) {
      console.log('method1', id)
    },
    method2: function () {
      console.log('method2')
    }
  }
}

调用链中支持配置方法名、方法名+参数、doUiAction方法名。

配置示例

标题-只有页面标题

headContent: [
  { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] }
]

标题-服务端搜索

headContent: [
  { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  { tag: 'v-spacer' },
  { 
    tag: 'jh-search', 
    attrs: { cols: 12, sm: 6, md:8 },
    value: [
      { tag: "v-text-field", model: "serverSearchWhereLike.className", attrs: {prefix: '前缀'} },
    ], 
    searchBtn: true
  }
]

标题-场景搜索

headContent: [
  
  { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  { tag: 'v-spacer' },
  {
    tag: 'jh-scene',
    attrs: {},
    value: [],
    formItemList: [
      { label: '年级', tag: 'v-select', model: 'form.grade', attrs: {":items":  'constantObj.grade'} },
    ],
  },
],
common: { 
  
  data: {
    constantObj: {
      grade: ['初中', '高中', '大学'],
    },
    defaultSceneList: [
      { form: { }, name: "全部", default: true, id: "scene-custom-all", 'system': true },
      { form: { grade: "高中" }, name: "高中", id: "scene-custom-1", 'system': true },
    ],
    serverSearchWhere: {},
  }
}

内容-数据表格

pageContent: [
  {
    tag: 'jh-table',
    attrs: {},
    colAttrs: { clos: 12 },
    cardAttrs: { class: 'rounded-lg elevation-0' },
    headActionList: [
      { tag: 'v-btn', value: '新增', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("startCreateItem")', small: true } },
      { tag: 'v-spacer' },
      // 默认筛选
      {
        tag: 'v-col',
        attrs: { cols: '12', sm: '6', md: '4', class: 'pa-0' },
        value: [
          { tag: 'v-text-field', attrs: {prefix: '筛选', 'v-model': 'searchInput', class: 'jh-v-input', ':dense': true, ':filled': true, ':single-line': true} },
        ],
      }
    ],
    headers: [
      { text: "id", value: "id", width: 80, sortable: true, class: "fixed", cellClass: "fixed" },
      { text: "班级ID", value: "classId", width: 80, sortable: true },
      { text: "className", value: "className", width: 80, sortable: true },
      { text: "操作", value: "operation", width: 80, sortable: true },
      { text: "操作者userId", value: "operationByUserId", width: 80, sortable: true },
      { text: "操作者用户名", value: "operationByUser", width: 80, sortable: true },
      { text: "操作时间", value: "operationAt", width: 80, sortable: true },
      { text: "操作", value: "action", type: "action", width: 'window.innerWidth < 500 ? 70 : 120', align: "center", class: "fixed", cellClass: "fixed" },
    ],
    value: [
      // v-table插槽
      // { tag: 'template', attrs: {'slot': 'body', 'slot-scope': "item"}, value: "<div>测试插槽</div>" },
      // { tag: 'template', attrs: {'slot': 'item.className', 'slot-scope': "{item, index}"}, value: "<div>{{item.className}}</div>" },
    ],
    rowActionList: [
      { text: '编辑', icon: 'mdi-note-edit-outline', color: 'success', click: 'doUiAction("startUpdateItem", item)' }, // 简写支持 pc 和 移动端折叠
      { text: '删除', icon: 'mdi-trash-can-outline', color: 'error', click: 'doUiAction("deleteItem", item)' } // 简写支持 pc 和 移动端折叠
    ],
  }
]

内容-数据表格（启用列设置）

常用


pageContent: [
  {
    tag: 'jh-table',
    attrs: {},
    headers: [],
    value: [],
    showTableColumnSettingBtn: true,
    headActionList: [],
    rowActionList: [],
  }
],

模式设定

pageContent: [
  {
    tag: 'jh-table',
    attrs: {},
    value: [],
    showTableColumnSettingBtn: true,
    headActionList: [],
    rowActionList: [],
  }
],
common: {
  data: {
    columnSettingGroup: {
      '01模式': [
        "netName",
        "stage",
        "followUpDate",
        "district",
        "memberId",
        "followUpBy",
        "currentResidence",
        "openVisitationStatus",
        "totalVisitationCount",
        "visitorAssignInfo",
        "operationAt",
        "action"
      ],
      '02模式': [
        "netName",
        "stage",
        "duoxingRoomName",
        "followUpDate",
        "tag",
        "projectList",
        "followUpBy",
        "district",
        "memberId",
        "currentResidence",
        "operationAt",
        "action"
      ],
      '03模式': [
        "netName",
        "orgId",
        "orgName",
        "roleId",
        "isDefaultOrg"
      ],
    },
  }
}

属性	类型	必填	描述
showTableColumnSettingBtn	boolean	否	是否启用列设置，默认false

弹框-新增编辑表单

actionContent: [
  {
    tag: 'jh-create-drawer',
    key: "create",
    attrs: {},
    title: '新增',
    headSlot: [
      { tag: 'v-spacer'}
    ],
    contentList: [
      { 
        label: "新增", 
        type: "form", 
        formItemList: [
          { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
        ], 
        action: [{
          tag: "v-btn",
          value: "新增",
          attrs: {
            color: "success",
            ':small': true,
            '@click': "doUiAction('createItem')"
          }
        }],
      },
    ]
  },
  {
    tag: 'jh-update-drawer',
    key: "update",
    attrs: {},
    title: '编辑',
    headSlot: [
      { tag: 'v-spacer'}
    ],
    contentList: [
      { 
        label: "编辑", 
        type: "form", 
        formItemList: [
          { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
        ], 
        action: [{
          tag: "v-btn",
          value: "编辑",
          attrs: {
            color: "success",
            ':small': true,
            '@click': "doUiAction('updateItem')"
          }
        }],
      },
      { label: "操作记录", type: "component", componentPath: "recordHistory", attrs: { table: 'class', pageId: 'classManagement', ':id': 'updateItem.id' } },
    ]
  },
]

弹框-多标签

pageContent: [
  `<v-btn @click="openTestMultiTabDrawer">打开测试多标签弹框</v-btn>`,
],
actionContent: [
  {
    tag: 'jh-drawer',
    key: "testMultiTab",
    attrs: {},
    title: '测试多标签',
    contentList: [
      { label: "操作记录", type: "component", componentPath: "recordHistory" },
      { label: "学生列表", type: "component", componentPath: "example/studentOfClass", bind: ['classId'] },
    ]
  }
]

弹框-自定义按钮

pageContent: [
    `<v-btn @click="openTestCustomBtnDrawer">打开测试自定义按钮弹框</v-btn>`
],
actionContent: [
  {
    tag: 'jh-create-drawer',
    key: "create",
    attrs: {},
    title: '测试自定义按钮',
    headSlot: [
      { tag: 'v-spacer' },
      { tag: 'v-btn', value: '自定义按钮', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("123")', small: true } },
    ],
    contentList: [ /* 内容列表 */ ]
  }
]

弹框-关闭弹框检查

actionContent: [
  {
    tag: 'jh-create-drawer',
    key: "create",
    attrs: {},
    title: '新增',
    isCheckFormBeforeClose: true,
    onCheckFormConfirm: 'doUiAction("createItem", { notConfirmed: true })',
    headSlot: [
      { tag: 'v-spacer'}
    ],
    contentList: [
      { 
        label: "新增", 
        type: "form", 
        formItemList: [
          { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
        ], 
        action: [{
          tag: "v-btn",
          value: "新增",
          attrs: {
            color: "success",
            ':small': true,
            '@click': "doUiAction('createItem')"
          }
        }],
      },
    ]
  }
]

属性	类型	必填	描述
isCheckFormBeforeClose	boolean	否	是否打开关闭弹框检查，默认false，注意检查的表单对象与弹框的key需要保持匹配，如表单对象：createItem，弹框key：create
onCheckFormConfirm	string	否	保存内容方法名称

命令详解

生成样例文件页面

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

jianghu-init json --generateType=example

生成页面配置文件

根据数据表生成页面配置文件

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

配置渲染html

根据配置文件生成页面

jianghu-init json --generateType=page --pageType=page --file=classManagement

开启Dev模式

开启dev模式，修改配置文件将自动更新页面

jianghu-init json dev

参数说明

参数	描述
generateType	生成类型，可选 example（生成示例文件）、json（数据表生成配置文件）、page（配置文件生成页面）
pageType	页面类型，可选 page、component
table	数据表名，当generateType为json可用
dev	启用开发模式，执行后会自动检测当前项目的json文件更新并自动更新html文件

其他

字符串代码语法高亮

在VSCode中，可以安装以下插件来实现字符串代码的语法高亮，以提高代码的可读性：

es6-string-html

安装以上插件之后，在字符串代码前指定语法名称，即可显示语法高亮效果。

pageContent: [
  /*html*/`<v-btn @click="openTestMultiTabDrawer">打开测试多标签弹框</v-btn>`,
],
style: /*css*/`
.jh-v-input {
  width: 100%;
}
`

## 快速开始

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

### 安装

在开始之前，请确保您已经安装了`jianghu-init`工具。可以通过以下命令进行安装：

```bash
npm uninstall -g @jianghujs/jianghu-init
npm install -g @jianghujs/jianghu-init@latest
```

> 👉[ jianghu-init 工具安装详解](/__appId__/page/article/11105)👈

### 在江湖项目中生成参考示例

- 首先，进入已有的江湖JS项目目录

> 👉[ 创建jianghujs项目 ](/__appId__/page/article/11104)👈

- 使用以下命令生成参考示例：

```bash
cd my-jh-project
jianghu-init json --generateType=example
```

执行以上命令，当前项目数据库将添加 example_class 和 example_student 数据表、并在项目目录生成以下文件：

- app\view\init-json\component\exampleStudentOfClass.js
- app\view\init-json\page\exampleClass.js
- app\view\component\example\exampleStudentOfClass.html
- app\view\page\exampleClass.html

方便参考使用

### 步骤一：数据表生成配置文件

当有一个新的业务数据表之后，可以使用以下命令生成数据表的配置文件，例如，现在有一个名为`class`的数据表：
```sql
CREATE TABLE `class` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `classId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级ID',
  `className` varchar(255) DEFAULT NULL,
  `operation` varchar(255) COLLATE utf8mb4_bin DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) 
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

```
要为`class`数据表生成基础配置文件，可以使用以下命令：
```bash
jianghu-init json --generateType=json --pageType=jh-page --table=class --pageId=classManagement
```
执行命令之后，会在项目的app/view/init-json/page/目录下生成一个名为`classManagement.js`的配置文件。

### 步骤二：配置文件生成页面

上一步生成的配置文件，需要通过以下命令生成页面：

```bash
jianghu-init json --generateType=page --pageType=page --file=classManagement
```

执行以上命令，将会生成项目的app/view/page/目录下生成一个名为`classManagement.html`的页面文件，并自动配置页面对应的数据库表_page和_resouce的数据。

> 👉[ 开启dev模式，修改配置文件自动更新页面 ](#开启Dev模式)👈

> 👉[ 配置字符串代码语法高亮 ](#字符串代码语法高亮)👈

## 配置协议

### 总览
```jsx
{
  pageType: "jh-page", // 页面类型
  pageId: "pageId",  // 页面唯一标识
  pageName: "班级页面", // 页面标题
  resourceList: [ // 页面resource { actionId, resourceType, resourceData }
    {
      actionId: "selectItemList",
      resourceType: "sql",
      resourceHook: {},
      desc: "✅查询列表-exampleClass",
      resourceData: {
        table: "example_class",
        operation: "select"
      }
    }
  ], 
  headContent: [], // 页面头部，常用于配置 标题、面包屑条、服务端搜索、场景搜索等 
  pageContent: [], // 页面内容区域
  actionContent: [], // 触发内容集合，一般会放新增、修改等弹框
  includeList: [ // 页面引入资源 { type, path }
    { type: 'html', path: 'component/jianghuJs/jhSceneV4.html' }
  ], 
  common: { // vue 原生变量 + uiAction {data, props, watch, methods, computed}
    data: {},
    computed: {}, 
    watch: {}, 
    methods: {},
    doUiAction: {}, // 自定义uiAction { [key]: [method1, method2, doUiAction1]}
  }, 
  style: '', // 自定义样式
}
```

### HTML标签

在 headContent、pageCotent、actionContent 中，可以使用使用指定的对象结构来配置一个标签，也支持直接使用HTML字符串。

**对象结构**

```jsx
pageContent: [
  {
    tag: 'v-row',
    attrs: {
      align: "center"
      "@click": "doUiAction('updateItem')"
    },
    quickAttrs: ['no-gutters'],
    value: [
      { tag: 'v-col', attrs: { cols: 12 }, value: '' },
      `<v-col cols="12"></v-col>`
    ]
  }
]
```

| 属性 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| tag | string | ✅ | 标签名称 |
| attr | object | 否 | 标签属性，如class、@click等 |
| quickAttrs | array | 否 | 标签简洁属性，如 v-else small disabled等 |
| value | object | 否 | 标签内的HTML内容 |

**HTML字符串**

```jsx
pageContent: [
  '<v-row align="center"><v-col cols="12"></v-col></v-row>'
]
```

### 接口配置
配置江湖resource，定义的resouce将自动更新到数据库中，供前端调用。

```jsx
resourceList: [
  {
    resourceHook: { "before": [], "after": [] },
    actionId: 'balance-updateItem',
    desc: '修改班费余额',
    resourceType: 'sql',
    resourceData: { "table": "class", "operation": "update" }
  }
]
```
> 👉[ resouce详细配置文档 ](/__appId__/page/article/11135)👈

### 资源引入
当页面需要引入组件、样式、脚本等资源时，可以通过includeList配置。支持对象结构和HTML字符串。

```jsx
includeList: [
  { type: 'css', path: "/<$ ctx.app.config.appId $>/public/lib/echarts.min.css" },
  { type: 'script', path: "/<$ ctx.app.config.appId $>/public/lib/echarts.min.js" },
  { type: 'html', path: "component/exampleChart/lineChart.html" },
  { type: 'html', path: 'component/courseBatchDrawer.html', includeType: 'auto', attrs: { id: 'courseBatchDrawer' } },
  { type: 'vueComponent', name: 'v-chart', component: 'VueCharts' },
  `<script src="/<$ ctx.app.config.appId $>/public/lib/echarts.min.js"></script>`
]
```

| 属性 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| type | string | ✅ | 引入类型，可选 css、js、html、vueComponent |
| path | string | 否 | 引入路径，type为css、js、html时可用 |
| includeType | string | 否 | 引入类型，可选 auto，当值为auto时将自动添加标签内容添加到页面末端。type为css、js、html时可用 |
| attrs | object | 否 | 自定引入标签属性。type为html、includeType为auto时可用 |
| name | string | 否 | 组件名，type为vueComponent时可用 |
| component | string | 否 | 引入组件，type为vueComponent时可用 |

### 配置doUiAction
提供补充doUiAction方法的配置入口

```jsx
pageContent: [
  {
    tag: 'v-btn',
    value: '测试doUiAction1',
    attrs: { '@click': 'doUiAction("doSomething")' },
    quickAttrs: ['small']
  },
  `<v-btn @click="doUiAction('doSomething')">测试doUiAction2</v-btn>`
],
common: {
  doUiAction: {
    startUpdataBalance: ['method1', 'method2'],
    doSomething: ['method1(134)', 'doUiAction.startUpdataBalance']
  },
  methods: {
    method1: function (id) {
      console.log('method1', id)
    },
    method2: function () {
      console.log('method2')
    }
  }
}
```

调用链中支持配置方法名、方法名+参数、doUiAction方法名。

## 配置示例

### 标题-只有页面标题

```jsx
headContent: [
  { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] }
]
```

### 标题-服务端搜索
  
```jsx
headContent: [
  { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  { tag: 'v-spacer' },
  { 
    tag: 'jh-search', 
    attrs: { cols: 12, sm: 6, md:8 },
    value: [
      { tag: "v-text-field", model: "serverSearchWhereLike.className", attrs: {prefix: '前缀'} },
    ], 
    searchBtn: true
  }
]
```

### 标题-场景搜索
  
```jsx  
headContent: [
  
  { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  { tag: 'v-spacer' },
  {
    tag: 'jh-scene',
    attrs: {},
    value: [],
    formItemList: [
      { label: '年级', tag: 'v-select', model: 'form.grade', attrs: {":items":  'constantObj.grade'} },
    ],
  },
],
common: { 
  
  data: {
    constantObj: {
      grade: ['初中', '高中', '大学'],
    },
    defaultSceneList: [
      { form: { }, name: "全部", default: true, id: "scene-custom-all", 'system': true },
      { form: { grade: "高中" }, name: "高中", id: "scene-custom-1", 'system': true },
    ],
    serverSearchWhere: {},
  }
}
  ```

### 内容-数据表格

```jsx
pageContent: [
  {
    tag: 'jh-table',
    attrs: {},
    colAttrs: { clos: 12 },
    cardAttrs: { class: 'rounded-lg elevation-0' },
    headActionList: [
      { tag: 'v-btn', value: '新增', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("startCreateItem")', small: true } },
      { tag: 'v-spacer' },
      // 默认筛选
      {
        tag: 'v-col',
        attrs: { cols: '12', sm: '6', md: '4', class: 'pa-0' },
        value: [
          { tag: 'v-text-field', attrs: {prefix: '筛选', 'v-model': 'searchInput', class: 'jh-v-input', ':dense': true, ':filled': true, ':single-line': true} },
        ],
      }
    ],
    headers: [
      { text: "id", value: "id", width: 80, sortable: true, class: "fixed", cellClass: "fixed" },
      { text: "班级ID", value: "classId", width: 80, sortable: true },
      { text: "className", value: "className", width: 80, sortable: true },
      { text: "操作", value: "operation", width: 80, sortable: true },
      { text: "操作者userId", value: "operationByUserId", width: 80, sortable: true },
      { text: "操作者用户名", value: "operationByUser", width: 80, sortable: true },
      { text: "操作时间", value: "operationAt", width: 80, sortable: true },
      { text: "操作", value: "action", type: "action", width: 'window.innerWidth < 500 ? 70 : 120', align: "center", class: "fixed", cellClass: "fixed" },
    ],
    value: [
      // v-table插槽
      // { tag: 'template', attrs: {'slot': 'body', 'slot-scope': "item"}, value: "<div>测试插槽</div>" },
      // { tag: 'template', attrs: {'slot': 'item.className', 'slot-scope': "{item, index}"}, value: "<div>{{item.className}}</div>" },
    ],
    rowActionList: [
      { text: '编辑', icon: 'mdi-note-edit-outline', color: 'success', click: 'doUiAction("startUpdateItem", item)' }, // 简写支持 pc 和 移动端折叠
      { text: '删除', icon: 'mdi-trash-can-outline', color: 'error', click: 'doUiAction("deleteItem", item)' } // 简写支持 pc 和 移动端折叠
    ],
  }
]
```

### 内容-数据表格（启用列设置）

**常用**

```jsx

pageContent: [
  {
    tag: 'jh-table',
    attrs: {},
    headers: [],
    value: [],
    showTableColumnSettingBtn: true,
    headActionList: [],
    rowActionList: [],
  }
],
```

**模式设定**

```
pageContent: [
  {
    tag: 'jh-table',
    attrs: {},
    value: [],
    showTableColumnSettingBtn: true,
    headActionList: [],
    rowActionList: [],
  }
],
common: {
  data: {
    columnSettingGroup: {
      '01模式': [
        "netName",
        "stage",
        "followUpDate",
        "district",
        "memberId",
        "followUpBy",
        "currentResidence",
        "openVisitationStatus",
        "totalVisitationCount",
        "visitorAssignInfo",
        "operationAt",
        "action"
      ],
      '02模式': [
        "netName",
        "stage",
        "duoxingRoomName",
        "followUpDate",
        "tag",
        "projectList",
        "followUpBy",
        "district",
        "memberId",
        "currentResidence",
        "operationAt",
        "action"
      ],
      '03模式': [
        "netName",
        "orgId",
        "orgName",
        "roleId",
        "isDefaultOrg"
      ],
    },
  }
}
```

| 属性 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| showTableColumnSettingBtn | boolean | 否 | 是否启用列设置，默认false |

### 弹框-新增编辑表单

```jsx
actionContent: [
  {
    tag: 'jh-create-drawer',
    key: "create",
    attrs: {},
    title: '新增',
    headSlot: [
      { tag: 'v-spacer'}
    ],
    contentList: [
      { 
        label: "新增", 
        type: "form", 
        formItemList: [
          { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },

], 
        action: [{
          tag: "v-btn",
          value: "新增",
          attrs: {
            color: "success",
            ':small': true,
            '@click': "doUiAction('createItem')"
          }
        }],
      },

]
  },
  {
    tag: 'jh-update-drawer',
    key: "update",
    attrs: {},
    title: '编辑',
    headSlot: [
      { tag: 'v-spacer'}
    ],
    contentList: [
      { 
        label: "编辑", 
        type: "form", 
        formItemList: [
          { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },

], 
        action: [{
          tag: "v-btn",
          value: "编辑",
          attrs: {
            color: "success",
            ':small': true,
            '@click': "doUiAction('updateItem')"
          }
        }],
      },
      { label: "操作记录", type: "component", componentPath: "recordHistory", attrs: { table: 'class', pageId: 'classManagement', ':id': 'updateItem.id' } },
    ]
  },
]
```

### 弹框-多标签

```jsx
pageContent: [
  `<v-btn @click="openTestMultiTabDrawer">打开测试多标签弹框</v-btn>`,
],
actionContent: [
  {
    tag: 'jh-drawer',
    key: "testMultiTab",
    attrs: {},
    title: '测试多标签',
    contentList: [
      { label: "操作记录", type: "component", componentPath: "recordHistory" },
      { label: "学生列表", type: "component", componentPath: "example/studentOfClass", bind: ['classId'] },
    ]
  }
]
```

### 弹框-自定义按钮

```jsx
pageContent: [
    `<v-btn @click="openTestCustomBtnDrawer">打开测试自定义按钮弹框</v-btn>`
],
actionContent: [
  {
    tag: 'jh-create-drawer',
    key: "create",
    attrs: {},
    title: '测试自定义按钮',
    headSlot: [
      { tag: 'v-spacer' },
      { tag: 'v-btn', value: '自定义按钮', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("123")', small: true } },
    ],
    contentList: [ /* 内容列表 */ ]
  }
]
```

### 弹框-关闭弹框检查

```jsx
actionContent: [
  {
    tag: 'jh-create-drawer',
    key: "create",
    attrs: {},
    title: '新增',
    isCheckFormBeforeClose: true,
    onCheckFormConfirm: 'doUiAction("createItem", { notConfirmed: true })',
    headSlot: [
      { tag: 'v-spacer'}
    ],
    contentList: [
      { 
        label: "新增", 
        type: "form", 
        formItemList: [
          { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
          { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },

], 
        action: [{
          tag: "v-btn",
          value: "新增",
          attrs: {
            color: "success",
            ':small': true,
            '@click': "doUiAction('createItem')"
          }
        }],
      },

]
  }
]
```

| 属性 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| isCheckFormBeforeClose | boolean | 否 | 是否打开关闭弹框检查，默认false，注意检查的表单对象与弹框的key需要保持匹配，如 表单对象：createItem，弹框key：create |
| onCheckFormConfirm | string | 否 | 保存内容方法名称 |

## 命令详解

### 生成样例文件页面
默认生成 `example_class` 和 `example_student` 数据表、配置文件和页面，方便参考使用

```bash
jianghu-init json --generateType=example
```

### 生成页面配置文件
根据数据表生成页面配置文件

```bash
jianghu-init json --generateType=json --pageType=page --table=class --pageId=classManagement
```

### 配置渲染html
根据配置文件生成页面

```bash
jianghu-init json --generateType=page --pageType=page --file=classManagement
```

### 开启Dev模式
开启dev模式，修改配置文件将自动更新页面

```bash
jianghu-init json dev
```

### 参数说明
| 参数 | 描述 |
| --- | --- |
| generateType | 生成类型，可选 example（生成示例文件）、json（数据表生成配置文件）、page（配置文件生成页面） |
| pageType | 页面类型，可选 page、component |
| table | 数据表名，当generateType为json可用 |
| dev | 启用开发模式，执行后会自动检测当前项目的json文件更新并自动更新html文件 |

## 其他

### 字符串代码语法高亮

在VSCode中，可以安装以下插件来实现字符串代码的语法高亮，以提高代码的可读性：

- [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)

安装以上插件之后，在字符串代码前指定语法名称，即可显示语法高亮效果。

```jsx
pageContent: [
  /*html*/`<v-btn @click="openTestMultiTabDrawer">打开测试多标签弹框</v-btn>`,

],
style: /*css*/`
.jh-v-input {
  width: 100%;
}
`
```