江湖数字化平台
登录

init.json指南

12003

快速开始

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

安装

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

  1. npm uninstall -g @jianghujs/jianghu-init
  2. npm install -g @jianghujs/jianghu-init@latest

👉 jianghu-init 工具安装详解👈

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

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

👉 创建jianghujs项目 👈

  • 使用以下命令生成参考示例：
  1. cd my-jh-project
  2. 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的数据表：

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

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

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

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

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

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

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

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

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

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

配置协议

总览

  1. {
  2.   pageType: "jh-page", // 页面类型，可选值为jh-page、jh-mobile-page、jh-component选
  3.   pageId: "pageId",  // 页面唯一标识
  4.   table: "class",  // 关联数据库表
  5.   pageName: "班级页面", // 页面标题
  6.   template: "jhTemplateV4", // 页面模板，默认为jhTemplateV4，手机端一般设置为jhMobileTemplateV4
  7.   resourceList: [ // 页面resource { actionId, resourceType, resourceData }
  8.     {
  9.       actionId: "selectItemList",
  10.       resourceType: "sql",
  11.       resourceHook: {},
  12.       desc: "✅查询列表-exampleClass",
  13.       resourceData: {
  14.         table: "example_class",
  15.         operation: "select"
  16.       }
  17.     }
  18.   ],
  19.   headContent: [], // 页面头部，常用于配置 标题、面包屑条、服务端搜索、场景搜索等
  20.   pageContent: [], // 页面内容区域
  21.   actionContent: [], // 触发内容集合，一般会放新增、修改等弹框
  22.   includeList: [ // 页面引入资源 { type, path }
  23.     { type: 'html', path: 'component/jianghuJs/jhSceneV4.html' }
  24.   ],
  25.   common: { // vue 原生变量 + uiAction {data, props, watch, methods, computed}
  26.     data: {},
  27.     computed: {},
  28.     watch: {},
  29.     methods: {},
  30.     doUiAction: {}, // 自定义uiAction { [key]: [method1, method2, doUiAction1]}
  31.   },
  32.   style: '', // 自定义样式
  33. }
属性 类型 必填 描述
pageType string ✅ 页面类型，可选值为jh-page、jh-mobile-page、jh-component、
pageId string ✅ 页面唯一标识
table string 否 关联数据表名

HTML标签

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

对象结构

  1. pageContent: [
  2.   {
  3.     tag: 'v-row',
  4.     attrs: {
  5.       align: "center"
  6.       "@click": "doUiAction('updateItem')"
  7.     },
  8.     quickAttrs: ['no-gutters'],
  9.     value: [
  10.       { tag: 'v-col', attrs: { cols: 12 }, value: '' },
  11.       `<v-col cols="12"></v-col>`
  12.     ]
  13.   }
  14. ]
属性 类型 必填 描述
tag string 否 标签名称
attr object ✅ 标签属性，如class、@click等
quickAttrs array 否 标签简洁属性，如 v-else small disabled等
value object 否 标签内的HTML内容

HTML字符串

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

接口配置

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

  1. resourceList: [
  2.   {
  3.     resourceHook: { "before": [], "after": [] },
  4.     actionId: 'balance-updateItem',
  5.     desc: '修改班费余额',
  6.     resourceType: 'sql',
  7.     resourceData: { "table": "class", "operation": "update" }
  8.   }
  9. ]

👉 resouce详细配置文档 👈

资源引入

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

  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: 'html', path: 'component/courseBatchDrawer.html', includeType: 'auto', attrs: { id: 'courseBatchDrawer' } },
  6.   { type: 'vueComponent', name: 'v-chart', component: 'VueCharts' },
  7.   `<script src="/<$ ctx.app.config.appId $>/public/lib/echarts.min.js"></script>`
  8. ]
属性 类型 必填 描述
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方法的配置入口

  1. pageContent: [
  2.   {
  3.     tag: 'v-btn',
  4.     value: '测试doUiAction1',
  5.     attrs: { '@click': 'doUiAction("doSomething")' },
  6.     quickAttrs: ['small']
  7.   },
  8.   `<v-btn @click="doUiAction('doSomething')">测试doUiAction2</v-btn>`
  9. ],
  10. common: {
  11.   doUiAction: {
  12.     startUpdataBalance: ['method1', 'method2'],
  13.     doSomething: ['method1(134)', 'doUiAction.startUpdataBalance']
  14.   },
  15.   methods: {
  16.     method1: function (id) {
  17.       console.log('method1', id)
  18.     },
  19.     method2: function () {
  20.       console.log('method2')
  21.     }
  22.   }
  23. }

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

配置示例-PC端

基础页面

  1. const content = {
  2.   pageType: "jh-page", pageId: "classManagement", pageName: "classManagement页面",
  3.   resourceList: [
  4.     {
  5.       actionId: "selectItemList",
  6.       resourceType: "sql",
  7.       resourceHook: {},
  8.       desc: "✅查询列表-classManagement",
  9.       resourceData: {
  10.         table: "class",
  11.         operation: "select"
  12.       }
  13.     },
  14.     {
  15.       actionId: "insertItem",
  16.       resourceType: "sql",
  17.       resourceHook: {},
  18.       desc: "✅添加-classManagement",
  19.       resourceData: {
  20.         table: "class",
  21.         operation: "jhInsert"
  22.       }
  23.     },
  24.     {
  25.       actionId: "updateItem",
  26.       resourceType: "sql",
  27.       resourceHook: {},
  28.       desc: "✅更新-classManagement",
  29.       resourceData: {
  30.         table: "class",
  31.         operation: "jhUpdate"
  32.       }
  33.     },
  34.     {
  35.       actionId: "deleteItem",
  36.       resourceType: "sql",
  37.       resourceHook: {},
  38.       desc: "✅删除-classManagement",
  39.       resourceData: {
  40.         table: "class",
  41.         operation: "jhDelete"
  42.       }
  43.     }
  44.   ], // { actionId: '', resourceType: '', resourceData: {}, resourceHook: {}, desc: '' }
  45.   headContent: [
  46.     { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  47.     { tag: 'v-spacer' },
  48.     {
  49.       tag: 'jh-search',
  50.       attrs: { cols: 12, sm: 6, md:8 },
  51.       value: [
  52.         { tag: "v-text-field", model: "serverSearchWhereLike.className", attrs: {prefix: '前缀'} },
  53.       ],
  54.       searchBtn: true
  55.     }
  56.   ],
  57.   pageContent: [
  58.     {
  59.       tag: 'jh-table',
  60.       attrs: {  },
  61.       colAttrs: { clos: 12 },
  62.       cardAttrs: { class: 'rounded-lg elevation-0' },
  63.       headActionList: [
  64.         { tag: 'v-btn', value: '新增', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("startCreateItem")', small: true } },
  65.         { tag: 'v-spacer' },
  66.         // 默认筛选
  67.         {
  68.           tag: 'v-col',
  69.           attrs: { cols: '12', sm: '6', md: '3', xs: 8, class: 'pa-0' },
  70.           value: [
  71.             { tag: 'v-text-field', attrs: {prefix: '筛选', 'v-model': 'searchInput', class: 'jh-v-input', ':dense': true, ':filled': true, ':single-line': true} },
  72.           ],
  73.         }
  74.       ],
  75.       headers: [
  76.         { text: "id", value: "id", width: 80, sortable: true, class: "fixed", cellClass: "fixed" },
  77.         { text: "班级ID", value: "classId", width: 80, sortable: true },
  78.         { text: "className", value: "className", width: 80, sortable: true },
  79.         { text: "操作", value: "operation", width: 80, sortable: true },
  80.         { text: "操作者userId", value: "operationByUserId", width: 80, sortable: true },
  81.         { text: "操作者用户名", value: "operationByUser", width: 80, sortable: true },
  82.         { text: "操作时间", value: "operationAt", width: 80, sortable: true },
  83.         { text: "操作", value: "action", type: "action", width: 'window.innerWidth < 500 ? 70 : 120', align: "center", class: "fixed", cellClass: "fixed" },
  85.         // width 表达式需要使用字符串包裹
  86.       ],
  87.       value: [
  88.         // vuetify table custom slot
  89.       ],
  90.       rowActionList: [
  91.         { text: '编辑', icon: 'mdi-note-edit-outline', color: 'success', click: 'doUiAction("startUpdateItem", item)' }, // 简写支持 pc 和 移动端折叠
  92.         { text: '删除', icon: 'mdi-trash-can-outline', color: 'error', click: 'doUiAction("deleteItem", item)' } // 简写支持 pc 和 移动端折叠
  93.       ],
  94.     }
  95.   ],
  96.   actionContent: [
  97.     {
  98.       tag: 'jh-create-drawer',
  99.       key: "create",
  100.       attrs: {},
  101.       title: '新增',
  102.       headSlot: [
  103.         { tag: 'v-spacer'}
  104.       ],
  105.       contentList: [
  106.         {
  107.           label: "新增",
  108.           type: "form",
  109.           formItemList: [
  110.             { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  111.             { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  112.             { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  113.             { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  114.             { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  115.             { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  116.             { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  118.           ],
  119.           action: [{
  120.             tag: "v-btn",
  121.             value: "新增",
  122.             attrs: {
  123.               color: "success",
  124.               ':small': true,
  125.               '@click': "doUiAction('createItem')"
  126.             }
  127.           }],
  128.         },
  130.       ]
  131.     },
  132.     {
  133.       tag: 'jh-update-drawer',
  134.       key: "update",
  135.       attrs: {},
  136.       title: '编辑',
  137.       headSlot: [
  138.         { tag: 'v-spacer'}
  139.       ],
  140.       contentList: [
  141.         {
  142.           label: "编辑",
  143.           type: "form",
  144.           formItemList: [
  145.             { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  146.             { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  147.             { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  148.             { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  149.             { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  150.             { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  151.             { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  153.           ],
  154.           action: [{
  155.             tag: "v-btn",
  156.             value: "编辑",
  157.             attrs: {
  158.               color: "success",
  159.               ':small': true,
  160.               '@click': "doUiAction('updateItem')"
  161.             }
  162.           }],
  163.         },
  164.         { label: "操作记录", type: "component", componentPath: "recordHistory", attrs: { table: 'class', pageId: 'classManagement', ':id': 'updateItem.id' } },
  165.       ]
  166.     },
  167.   ],
  168.   includeList: [], // { type: < js | css | html | vueComponent >, path: ''}
  169.   common: {
  171.     data: {
  172.       constantObj: {},
  173.       validationRules: {
  174.         requireRules: [
  175.           v => !!v || '必填',
  176.         ],
  177.       },
  178.       serverSearchWhereLike: { className: '' }, // 服务端like查询
  179.       serverSearchWhere: { }, // 服务端查询
  180.       serverSearchWhereIn: { }, // 服务端 in 查询
  181.       filterMap: {}, // 结果筛选条件
  182.     },
  183.     dataExpression: {
  184.       isMobile: 'window.innerWidth < 500'
  185.     }, // data 表达式
  186.     watch: {},
  187.     computed: {
  188.       tableDataComputed() {
  189.         if(this.filterMap) {
  190.           return this.tableData.filter(row => {
  191.             for (const key in this.filterMap) {
  192.               if (this.filterMap[key] && row[key] !== this.filterMap[key]) {
  193.                 return false;
  194.               }
  195.             }
  196.             return true;
  197.           });
  198.         } else {
  199.           return this.tableData;
  200.         }
  201.       },
  202.     },
  203.     doUiAction: {}, // 额外uiAction { [key]: [action1, action2]}
  204.     methods: {}
  205.   },
  207. };
  209. module.exports = content;

标题-只有页面标题

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

标题-服务端搜索

  1. headContent: [
  2.   { tag: 'jh-page-title', value: "classManagement", 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: true
  11.   }
  12. ]

标题-场景搜索

  1. headContent: [
  3.   { tag: 'jh-page-title', value: "classManagement", attrs: { cols: 12, sm: 6, md:4 }, helpBtn: true, slot: [] },
  4.   { tag: 'v-spacer' },
  5.   {
  6.     tag: 'jh-scene',
  7.     attrs: {},
  8.     value: [],
  9.     formItemList: [
  10.       { label: '年级', tag: 'v-select', model: 'form.grade', attrs: {":items":  'constantObj.grade'} },
  11.     ],
  12.   },
  13. ],
  14. common: {
  16.   data: {
  17.     constantObj: {
  18.       grade: ['初中', '高中', '大学'],
  19.     },
  20.     defaultSceneList: [
  21.       { form: { }, name: "全部", default: true, id: "scene-custom-all", 'system': true },
  22.       { form: { grade: "高中" }, name: "高中", id: "scene-custom-1", 'system': true },
  23.     ],
  24.     serverSearchWhere: {},
  25.   }
  26. }

内容-数据表格

  1. pageContent: [
  2.   {
  3.     tag: 'jh-table',
  4.     props: {
  5.       serverPagination: true  // 开启服务端分页、服务端分页默认 limit 50
  6.     },
  7.     attrs: {},
  8.     colAttrs: { clos: 12 },
  9.     cardAttrs: { class: 'rounded-lg elevation-0' },
  10.     headActionList: [
  11.       { tag: 'v-btn', value: '新增', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("startCreateItem")', small: true } },
  12.       { tag: 'v-spacer' },
  13.       // 默认筛选
  14.       {
  15.         tag: 'v-col',
  16.         attrs: { cols: '12', sm: '6', md: '4', class: 'pa-0' },
  17.         value: [
  18.           { tag: 'v-text-field', attrs: {prefix: '筛选', 'v-model': 'searchInput', class: 'jh-v-input', ':dense': true, ':filled': true, ':single-line': true} },
  19.         ],
  20.       }
  21.     ],
  22.     headers: [
  23.       { text: "id", value: "id", width: 80, sortable: true, class: "fixed", cellClass: "fixed" },
  24.       { text: "班级ID", value: "classId", width: 80, sortable: true },
  25.       { text: "className", value: "className", width: 80, sortable: true },
  26.       { text: "操作", value: "operation", width: 80, sortable: true },
  27.       { text: "操作者userId", value: "operationByUserId", width: 80, sortable: true },
  28.       { text: "操作者用户名", value: "operationByUser", width: 80, sortable: true },
  29.       { text: "操作时间", value: "operationAt", width: 80, sortable: true },
  30.       { text: "操作", value: "action", type: "action", width: 'window.innerWidth < 500 ? 70 : 120', align: "center", class: "fixed", cellClass: "fixed" },
  31.     ],
  32.     value: [
  33.       // v-table插槽
  34.       // { tag: 'template', attrs: {'slot': 'body', 'slot-scope': "item"}, value: "<div>测试插槽</div>" },
  35.       // { tag: 'template', attrs: {'slot': 'item.className', 'slot-scope': "{item, index}"}, value: "<div>{{item.className}}</div>" },
  36.     ],
  37.     rowActionList: [
  38.       { text: '编辑', icon: 'mdi-note-edit-outline', color: 'success', click: 'doUiAction("startUpdateItem", item)' }, // 简写支持 pc 和 移动端折叠
  39.       { text: '删除', icon: 'mdi-trash-can-outline', color: 'error', click: 'doUiAction("deleteItem", item)' } // 简写支持 pc 和 移动端折叠
  40.     ],
  41.   }
  42. ]

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

常用

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

模式设定

  1. pageContent: [
  2.   {
  3.     tag: 'jh-table',
  4.     attrs: {},
  5.     value: [],
  6.     showTableColumnSettingBtn: true,
  7.     headActionList: [],
  8.     rowActionList: [],
  9.   }
  10. ],
  11. common: {
  12.   data: {
  13.     columnSettingGroup: {
  14.       '01模式': [
  15.         "netName",
  16.         "stage",
  17.         "followUpDate",
  18.         "district",
  19.         "memberId",
  20.         "followUpBy",
  21.         "currentResidence",
  22.         "openVisitationStatus",
  23.         "totalVisitationCount",
  24.         "visitorAssignInfo",
  25.         "operationAt",
  26.         "action"
  27.       ],
  28.       '02模式': [
  29.         "netName",
  30.         "stage",
  31.         "duoxingRoomName",
  32.         "followUpDate",
  33.         "tag",
  34.         "projectList",
  35.         "followUpBy",
  36.         "district",
  37.         "memberId",
  38.         "currentResidence",
  39.         "operationAt",
  40.         "action"
  41.       ],
  42.       '03模式': [
  43.         "netName",
  44.         "orgId",
  45.         "orgName",
  46.         "roleId",
  47.         "isDefaultOrg"
  48.       ],
  49.     },
  50.   }
  51. }
属性 类型 必填 描述
showTableColumnSettingBtn boolean 否 是否启用列设置，默认false

弹框-新增编辑表单

  1. actionContent: [
  2.   {
  3.     tag: 'jh-create-drawer',
  4.     key: "create",
  5.     attrs: {},
  6.     title: '新增',
  7.     headSlot: [
  8.       { tag: 'v-spacer'}
  9.     ],
  10.     contentList: [
  11.       {
  12.         label: "新增",
  13.         type: "form",
  14.         formItemList: [
  15.           { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  16.           { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  17.           { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  18.           { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  19.           { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  20.           { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  21.           { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  23.         ],
  24.         action: [{
  25.           tag: "v-btn",
  26.           value: "新增",
  27.           attrs: {
  28.             color: "success",
  29.             ':small': true,
  30.             '@click': "doUiAction('createItem')"
  31.           }
  32.         }],
  33.       },
  35.     ]
  36.   },
  37.   {
  38.     tag: 'jh-update-drawer',
  39.     key: "update",
  40.     attrs: {},
  41.     title: '编辑',
  42.     headSlot: [
  43.       { tag: 'v-spacer'}
  44.     ],
  45.     contentList: [
  46.       {
  47.         label: "编辑",
  48.         type: "form",
  49.         formItemList: [
  50.           { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  51.           { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  52.           { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  53.           { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  54.           { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  55.           { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  56.           { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  58.         ],
  59.         action: [{
  60.           tag: "v-btn",
  61.           value: "编辑",
  62.           attrs: {
  63.             color: "success",
  64.             ':small': true,
  65.             '@click': "doUiAction('updateItem')"
  66.           }
  67.         }],
  68.       },
  69.       { label: "操作记录", type: "component", componentPath: "recordHistory", attrs: { table: 'class', pageId: 'classManagement', ':id': 'updateItem.id' } },
  70.     ]
  71.   },
  72. ]

弹框-详情

  1. pageContent: [
  2.   `<v-btn @click="openTestDetailDrawer">打开测试详情弹框</v-btn>`,
  3. ],
  4. actionContent: [
  5.   {
  6.     tag: 'jh-drawer',
  7.     key: "testDetail",
  8.     attrs: {},
  9.     title: '测试详情',
  10.     contentList: [
  11.       {
  12.           type: "form",
  13.           formItemList: [
  14.             { tag: 'span', value: '课程信息', md: 12, attrs: {class: 'title pl-2'}},
  15.             { tag: 'div', md: 12, value: [/*html*/ `
  16.               <div class="grey lighten-5">
  17.                 <v-row class="ma-0 pa-2">
  18.                   <v-col cols="12" md="3" v-for="(item, index) in courseInfoItems" :key="index">
  19.                     <span>{{item.title}}：{{item.value}}</span>
  20.                   </v-col>
  21.                 </v-row>
  22.               </div>
  23.               `]
  24.             }
  25.           ]
  26.       }
  27.     ]
  28.   }
  29. ],
  30. "common": {
  31.     data: {
  32.       courseInfoItems: [
  33.         { title: '课程名称', value: 'IT初级课程' }
  34.       ]
  35.     }
  36. }

弹框-自定义弹框

  1. pageContent: [
  2.   `<v-btn @click="openTestCustomDrawer">打开测试自定义弹框</v-btn>`,
  3. ],
  4. actionContent: [
  5.   {
  6.     tag: 'jh-drawer',
  7.     key: "testCustom",
  8.     attrs: {},
  9.     title: '测试自定义弹框',
  10.     contentList: [
  11.         `自定义内容`
  12.     ]
  13.   }
  14. ]

弹框-多标签

  1. pageContent: [
  2.   `<v-btn @click="openTestMultiTabDrawer">打开测试多标签弹框</v-btn>`,
  3. ],
  4. actionContent: [
  5.   {
  6.     tag: 'jh-drawer',
  7.     key: "testMultiTab",
  8.     attrs: {},
  9.     title: '测试多标签',
  10.     contentList: [
  11.       { label: "操作记录", type: "component", componentPath: "recordHistory" },
  12.       { label: "学生列表", type: "component", componentPath: "example/studentOfClass", bind: ['classId'] },
  13.     ]
  14.   }
  15. ]

弹框-自定义按钮

  1. pageContent: [
  2.     `<v-btn @click="viewTestCustomBtn">打开测试自定义按钮弹框</v-btn>`
  3. ],
  4. actionContent: [
  5.   {
  6.     tag: 'jh-create-drawer',
  7.     key: "testCustomBtn",
  8.     attrs: {},
  9.     title: '测试自定义按钮',
  10.     headSlot: [
  11.       { tag: 'v-spacer' },
  12.       { tag: 'v-btn', value: '自定义按钮', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("123")', small: true } },
  13.     ],
  14.     contentList: [ /* 内容列表 */ ]
  15.   }
  16. ]

弹框-关闭弹框检查

  1. actionContent: [
  2.   {
  3.     tag: 'jh-create-drawer',
  4.     key: "create",
  5.     attrs: {},
  6.     title: '新增',
  7.     isCheckFormBeforeClose: true,
  8.     onCheckFormConfirm: 'doUiAction("createItem", { notConfirmed: true })',
  9.     headSlot: [
  10.       { tag: 'v-spacer'}
  11.     ],
  12.     contentList: [
  13.       {
  14.         label: "新增",
  15.         type: "form",
  16.         formItemList: [
  17.           { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  18.           { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  19.           { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  20.           { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  21.           { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  22.           { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  23.           { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  25.         ],
  26.         action: [{
  27.           tag: "v-btn",
  28.           value: "新增",
  29.           attrs: {
  30.             color: "success",
  31.             ':small': true,
  32.             '@click': "doUiAction('createItem')"
  33.           }
  34.         }],
  35.       },
  37.     ]
  38.   }
  39. ]
属性 类型 必填 描述
isCheckFormBeforeClose boolean 否 是否打开关闭弹框检查，默认false，注意检查的表单对象与弹框的key需要保持匹配，如 表单对象：createItem，弹框key：create
onCheckFormConfirm string 否 保存内容方法名称
props.mergeForm boolean 否 是否合并提交form

配置示例-移动端

基础页面

  1. const content = {
  2.   pageType: "jh-mobile-page", pageId: "mobile/classManagement", pageName: "classManagement页面", template: "jhMobileTemplateV4",
  3.   resourceList: [
  4.     {
  5.       actionId: "selectItemList",
  6.       resourceType: "sql",
  7.       resourceHook: {},
  8.       desc: "✅查询列表-classManagement",
  9.       resourceData: {
  10.         table: "class",
  11.         operation: "select"
  12.       }
  13.     },
  14.     {
  15.       actionId: "insertItem",
  16.       resourceType: "sql",
  17.       resourceHook: {},
  18.       desc: "✅添加-classManagement",
  19.       resourceData: {
  20.         table: "class",
  21.         operation: "jhInsert"
  22.       }
  23.     },
  24.     {
  25.       actionId: "updateItem",
  26.       resourceType: "sql",
  27.       resourceHook: {},
  28.       desc: "✅更新-classManagement",
  29.       resourceData: {
  30.         table: "class",
  31.         operation: "jhUpdate"
  32.       }
  33.     },
  34.     {
  35.       actionId: "deleteItem",
  36.       resourceType: "sql",
  37.       resourceHook: {},
  38.       desc: "✅删除-classManagement",
  39.       resourceData: {
  40.         table: "class",
  41.         operation: "jhDelete"
  42.       }
  43.     }
  44.   ], // { actionId: '', resourceType: '', resourceData: {}, resourceHook: {}, desc: '' }
  45.   headContent: [
  46.     { tag: 'jh-page-title', value: "班级管理", helpBtn: true, slot: [] },
  48.     { tag: 'jh-order', model: 'tableDataOrder', items: 'tableDataOrderList' },
  49.     { tag: 'jh-search', searchList: [
  50.       { tag: 'v-select', model: "serverSearchWhere.semester", colAttrs: { class: 'pb-0' }, attrs: { prefix: '学期：', color: 'success', ':items': 'constantObj.semester' } },
  51.       { tag: 'v-select', model: "serverSearchWhere.segment", colAttrs: { class: 'pb-0' }, attrs: { prefix: '学部：', color: 'success', ':items': 'constantObj.segment' } },
  52.       { tag: 'v-text-field', model: "serverSearchWhereLike.name", colAttrs: { class: 'pb-0' }, attrs: { label: '学生名字:', color: 'success' }, quickAttrs: ['clearable'] },
  53.     ] },
  54.     { tag: 'v-spacer'},
  55.     { tag: 'jh-mode', title: '简单模式', icon: 'mdi-view-carousel-outline', model: 'viewMode', items: 'constantObj.viewModeList' },
  56.   ],
  57.   pageContent: [
  58.     {
  59.       tag: 'jh-list',
  60.       props: {
  61.         limit: 10,
  62.         rightArrowText: '',
  63.       },
  64.       attrs: { cols: 12, class: 'p-0 pb-7', ':style': '`height: calc(100vh - 140px); overflow-y: auto;overscroll-behavior: contain`' },
  65.       headActionList: [
  66.         { tag: 'v-btn', value: '新增', attrs: { color: 'success', class: 'mr-2', '@click': 'doUiAction("startCreateItem")', small: true } },
  67.         { tag: 'v-spacer' },
  68.         // 默认筛选
  69.         {
  70.           tag: 'v-col',
  71.           attrs: { cols: '12', sm: '6', md: '3', xs: 8, class: 'pa-0' },
  72.           value: [
  73.             { tag: 'v-text-field', attrs: {prefix: '筛选', 'v-model': 'searchInput', class: 'jh-v-input', ':dense': true, ':filled': true, ':single-line': true} },
  74.           ],
  75.         }
  76.       ],
  77.       headers: [
  78.         {text: "学生Id", value: "studentId", width: 80, isSimpleMode: true},
  79.         {text: "姓名", value: "name", width: 90, isTitle: true, slot: [`
  80.           <div v-if="item.isMonitor" class="ml-1">
  81.             <v-icon color="warning" small>mdi-shield-star</v-icon>
  82.             <span>干部</span>
  83.           </div>
  84.         `]},
  85.         {text: "性别", value: "gender", width: 60, isSimpleMode: true},
  86.         {text: "学生状态", value: "studentStatus", width: 80},
  87.         {text: "年级", value: "level", width: 70},
  88.         {text: "入学-推荐人", value: "recommendBy", width: 100, isDetailMode: true},
  89.         {text: "入学-跟进人", value: "followUpByUserName", width: 100, isDetailMode: true},
  90.         {text: "跟进阶段", value: "followUpStage", width: 80},
  91.         {text: "报名时间", value: "createAt", width: 150},
  92.         {text: "操作者", value: "operationByUser", width: 90},
  93.         {text: "操作时间", value: "operationAt", width: 150},
  94.         {text: '操作', value: 'action', align: 'center', sortable: false, width: 'window.innerWidth < 500 ? 90: 180', class: 'fixed', cellClass: 'fixed'},
  95.       ],
  96.       value: [
  97.         // vuetify table custom slot
  98.       ],
  99.       rowActionList: [
  100.         { text: "编辑", icon: 'mdi-note-edit-outline', color: 'success', click: 'doUiAction("startUpdateItem", item)' }
  101.       ],
  102.     },
  103.     {
  104.       tag: 'jh-action',
  105.       attrs: { class: 'h-16 w-16 p-2 fixed right-4 bottom-32' },
  106.       actionList: [
  107.         { tag: 'v-btn', value: '新增', icon: 'mdi-plus', color: 'success', click: "doUiAction('startCreateItem')" },
  108.         { tag: 'v-btn', value: '随机分配跟进人', icon: 'mdi-plus', color: 'success', click: "doUiAction('randomFollowUp')", ':disabled': '!tableSelected.length' },
  109.       ]
  110.     }
  111.   ],
  112.   actionContent: [
  113.     {
  114.       tag: 'jh-create-drawer',
  115.       key: "create",
  116.       attrs: {},
  117.       title: '新增',
  118.       headSlot: [
  119.         { tag: 'v-spacer'}
  120.       ],
  121.       contentList: [
  122.         {
  123.           label: "新增",
  124.           type: "form",
  125.           formItemList: [
  126.             { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  127.             { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  128.             { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  129.             { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  130.             { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  131.             { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  132.             { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  134.           ],
  135.           action: [{
  136.             tag: "v-btn",
  137.             value: "新增",
  138.             attrs: {
  139.               color: "success",
  140.               ':small': true,
  141.               '@click': "doUiAction('createItem')"
  142.             }
  143.           }],
  144.         },
  146.       ]
  147.     },
  148.     {
  149.       tag: 'jh-update-drawer',
  150.       key: "update",
  151.       attrs: {},
  152.       title: '编辑',
  153.       headSlot: [
  154.         { tag: 'v-spacer'}
  155.       ],
  156.       contentList: [
  157.         {
  158.           label: "编辑",
  159.           type: "form",
  160.           formItemList: [
  161.             { label: "id", model: "id", tag: "v-text-field", rules: "validationRules.requireRules",   },
  162.             { label: "班级ID", model: "classId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  163.             { label: "className", model: "className", tag: "v-text-field", rules: "validationRules.requireRules",   },
  164.             { label: "操作", model: "operation", tag: "v-text-field", rules: "validationRules.requireRules",   },
  165.             { label: "操作者userId", model: "operationByUserId", tag: "v-text-field", rules: "validationRules.requireRules",   },
  166.             { label: "操作者用户名", model: "operationByUser", tag: "v-text-field", rules: "validationRules.requireRules",   },
  167.             { label: "操作时间", model: "operationAt", tag: "v-text-field", rules: "validationRules.requireRules",   },
  169.           ],
  170.           action: [{
  171.             tag: "v-btn",
  172.             value: "编辑",
  173.             attrs: {
  174.               color: "success",
  175.               ':small': true,
  176.               '@click': "doUiAction('updateItem')"
  177.             }
  178.           }],
  179.         },
  180.         { label: "操作记录", type: "component", componentPath: "recordHistory", attrs: { table: 'class', pageId: 'classManagement', ':id': 'updateItem.id' } },
  181.       ]
  182.     },
  183.     {
  184.       tag: 'jh-detail-drawer',
  185.       key: "detail",
  186.       attrs: {},
  187.       title: "详情",
  188.       headSlot: [
  189.       ],
  190.       contentList: [
  191.         {
  192.           type: 'preview',
  193.           md: 12,
  194.           formItemList: [
  195.             {
  196.               tag: 'div',
  197.               colAttrs: { class: 'pa-0' },
  198.               value: `
  199.               <div class="p-3 border-b" >
  200.                 <div class="flex justify-between mb-2 items-center">
  201.                   <div>
  202.                     <span class="font-weight-bold text-base">{{ detailItem.name }}</span>
  203.                   </div>
  204.                   <span :class="'text-sm '">{{ detailItem.followUpStatus }}</span>
  205.                 </div>
  206.                 <div class="text-gray-500 flex justify-between">意向就读学部：{{ detailItem.segment }}</div>
  207.                 <div class="text-gray-500 flex justify-between">报名日期：{{ detailItem.createAt }}</div>
  208.               </div>
  209.               <div class="pa-0 h-2 bg-gray-100" ></div>
  210.               `
  211.             },
  212.             { label: "性别", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.gender }}" },
  213.             { label: "身份证件号", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.icNumber }}" },
  214.             { label: "家庭住址", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.residentialAddress }}" },
  215.             { label: "意向就读学部", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.segment }}" },
  216.             { label: "意向就读年级", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.level }}" },
  217.             { label: "意向就读方式", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.afterSchoolCareType }}" },
  218.             { label: "原就读学校", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.schoolRoll }}" },
  219.             { label: "中考分数", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.middleSchoolExamScore }}" },
  220.             { label: "中考报名序号", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.middleSchoolExamSequence }}" }
  221.           ],
  222.           action: [
  223.             {
  224.               tag: 'v-btn',
  225.               value: "编辑",
  226.               attrs: {
  227.                 color: 'primary',
  228.                 '@click': "doUiAction('startUpdateItem', detailItem); closeDetailDrawer()"
  229.               },
  230.               quickAttrs: ['small']
  231.             }
  232.           ]
  233.         }
  234.       ]
  235.     },
  236.   ],
  237.   includeList: [], // { type: < js | css | html | vueComponent >, path: ''}
  238.   common: {
  240.     data: {
  241.       constantObj: {
  242.         viewModeList: [
  243.           { text: "简洁模式", value: "simple" },
  244.           { text: "详细模式", value: "detail" }
  245.         ]
  246.       },
  247.       validationRules: {
  248.         requireRules: [
  249.           v => !!v || '必填',
  250.         ],
  251.       },
  252.       serverSearchWhereLike: { className: '' }, // 服务端like查询
  253.       serverSearchWhere: { }, // 服务端查询
  254.       serverSearchWhereIn: { }, // 服务端 in 查询
  255.       filterMap: {}, // 结果筛选条件
  256.       tableDataOrder: [
  257.         {
  258.           column: "operationAt",
  259.           order: "desc"
  260.         }
  261.       ],
  262.       tableDataOrderList: [
  263.         { text: "班级名称↓", value: [
  264.           {
  265.             column: "className",
  266.             order: "desc"
  267.           },
  268.         ] },
  269.         { text: "更新时间↓", value: [
  270.           {
  271.             column: "operationAt",
  272.             order: "desc"
  273.           },
  274.         ] },
  275.       ],
  276.     },
  277.     dataExpression: {
  278.       isMobile: 'window.innerWidth < 500'
  279.     }, // data 表达式
  280.     watch: {},
  281.     computed: {
  282.       tableDataComputed() {
  283.         if(this.filterMap) {
  284.           return this.tableData.filter(row => {
  285.             for (const key in this.filterMap) {
  286.               if (this.filterMap[key] && row[key] !== this.filterMap[key]) {
  287.                 return false;
  288.               }
  289.             }
  290.             return true;
  291.           });
  292.         } else {
  293.           return this.tableData;
  294.         }
  295.       },
  296.     },
  297.     doUiAction: {}, // 额外uiAction { [key]: [action1, action2]}
  298.     async created() {
  299.       await this.doUiAction('getTableData');
  300.     },
  301.     methods: {}
  302.   },
  304. };
  306. module.exports = content;

标题-只有页面标题

  1. headContent: [
  2.     { tag: 'jh-page-title', value: "班级管理" },
  3. ],

标题-排序&筛选&模式切换

  1. headContent: [
  2.     { tag: 'jh-page-title', value: "班级管理" },
  4.     { tag: 'jh-order' }, // 固定变量 model: 'tableDataOrder', items: 'tableDataOrderList'
  5.     { tag: 'jh-search', searchList: [
  6.         { tag: 'v-select', model: "serverSearchWhere.semester", colAttrs: { class: 'pb-0' }, attrs: { prefix: '学期：', color: 'success', ':items': 'constantObj.semester' } },
  7.         { tag: 'v-select', model: "serverSearchWhere.segment", colAttrs: { class: 'pb-0' }, attrs: { prefix: '学部：', color: 'success', ':items': 'constantObj.segment' } },
  8.         { tag: 'v-text-field', model: "serverSearchWhereLike.name", colAttrs: { class: 'pb-0' }, attrs: { label: '学生名字:', color: 'success' }, quickAttrs: ['clearable'] },
  9.     ] },
  10.     { tag: 'v-spacer'},
  11.     { tag: 'jh-mode', model: 'viewMode' }, // 固定变量：viewMode
  12. ],
  13. common: {
  15.     data: {
  16.         constantObj: {
  17.         },
  18.         viewMode: 'simple',
  19.         tableDataOrder: [
  20.             {
  21.                 column: "operationAt",
  22.                 order: "desc"
  23.             }
  24.         ],
  25.         tableDataOrderList: [
  26.             { text: "班级名称↓", value: [
  27.                 {
  28.                     column: "className",
  29.                     order: "desc"
  30.                 },
  31.             ] },
  32.             { text: "更新时间↓", value: [
  33.                 {
  34.                     column: "operationAt",
  35.                     order: "desc"
  36.                 },
  37.             ] },
  38.         ],
  39.     }
  40. }

内容-数据列表

  1. pageContent: [
  2.     {
  3.         tag: 'jh-list',
  4.         props: {
  5.             limit: 10, // 服务端搜索limit
  6.         },
  7.         attrs: { cols: 12, class: 'p-0 pb-7', ':style': '`height: calc(100vh - 140px); overflow-y: auto;overscroll-behavior: contain`' },
  8.         headers: [
  9.             {text: "学生Id", value: "studentId", width: 80, isSimpleMode: true},
  10.             {text: "姓名", value: "name", width: 90, isTitle: true, slot: [`
  11.               <div v-if="item.isMonitor" class="ml-1">
  12.                 <v-icon color="warning" small>mdi-shield-star</v-icon>
  13.                 <span>干部</span>
  14.               </div>
  15.             `]},
  16.             {text: "性别", value: "gender", width: 60, isSimpleMode: true},
  17.             {text: "学生状态", value: "studentStatus", width: 80},
  18.             {text: "年级", value: "level", width: 70},
  19.             {text: "入学-推荐人", value: "recommendBy", width: 100, isDetailMode: true},
  20.             {text: "入学-跟进人", value: "followUpByUserName", width: 100, isDetailMode: true},
  21.             {text: "跟进阶段", value: "followUpStage", width: 80},
  22.             {text: "报名时间", value: "createAt", width: 150},
  23.             {text: "操作者", value: "operationByUser", width: 90},
  24.             {text: "操作时间", value: "operationAt", width: 150},
  25.             {text: '操作', value: 'action'},
  26.         ],
  27.         rowActionList: [
  28.             
  29.         ]
  30.     }
  31. ],
  32. common: {
  33.     async created() {
  34.         await this.doUiAction('getTableData');
  35.     },
  36.     doUiAction: {
  37.       startDetailItem: ['startDetailItem']
  38.     },
  39.     methods: {
  40.       startDetailItem(item) {
  41.         console.log("点击", item)
  42.       }
  43.     }
  44. }

jh-list

属性 类型 必填 描述
props.limit string 否 分页每页数量
props.rightArrowText string 否 右边箭头文本
headers array ✅ 字段内容
headers.isSimpleMode boolean 否 是否只在简单模式显示，默认false
headers.isTitle boolean 否 是否作为行标题
rowActionList array 否 详情模式下的点击行

内容-数据列表（详情弹框）

  1. pageContent: [
  2.     {
  3.         tag: 'jh-list',
  4.         props: {
  5.             limit: 10,
  6.             rightArrowText: '',
  7.         },
  8.         attrs: { cols: 12, class: 'p-0 pb-7', ':style': '`height: calc(100vh - 140px); overflow-y: auto;overscroll-behavior: contain`' },
  9.         headers: [
  10.             {text: "学生Id", value: "studentId", width: 80, isSimpleMode: true},
  11.             {text: "姓名", value: "name", width: 90, isTitle: true, slot: [`
  12.               <div v-if="item.isMonitor" class="ml-1">
  13.                 <v-icon color="warning" small>mdi-shield-star</v-icon>
  14.                 <span>干部</span>
  15.               </div>
  16.             `]},
  17.             {text: "性别", value: "gender", width: 60, isSimpleMode: true},
  18.             {text: "学生状态", value: "studentStatus", width: 80},
  19.             {text: "年级", value: "level", width: 70},
  20.             {text: "入学-推荐人", value: "recommendBy", width: 100, isDetailMode: true},
  21.             {text: "入学-跟进人", value: "followUpByUserName", width: 100, isDetailMode: true},
  22.             {text: "跟进阶段", value: "followUpStage", width: 80},
  23.             {text: "报名时间", value: "createAt", width: 150},
  24.             {text: "操作者", value: "operationByUser", width: 90},
  25.             {text: "操作时间", value: "operationAt", width: 150},
  26.             {text: '操作', value: 'action', align: 'center', sortable: false, width: 'window.innerWidth < 500 ? 90: 180', class: 'fixed', cellClass: 'fixed'},
  27.         ],
  28.         rowActionList: [
  29.             { text: "编辑", icon: 'mdi-note-edit-outline', color: 'success', click: 'doUiAction("startUpdateItem", item)' }
  30.         ],
  31.     }
  32. ],
  33. actionContent: [
  34.     {
  35.         tag: 'jh-detail-drawer',
  36.         key: "detail",
  37.         attrs: {},
  38.         title: "详情",
  39.         headSlot: [
  40.         ],
  41.         contentList: [
  42.             {
  43.                 type: 'preview',
  44.                 md: 12,
  45.                 formItemList: [
  46.                     {
  47.                         tag: 'div',
  48.                         colAttrs: { class: 'pa-0' },
  49.                         value: `
  50.               <div class="p-3 border-b" >
  51.                 <div class="flex justify-between mb-2 items-center">
  52.                   <div>
  53.                     <span class="font-weight-bold text-base">{{ detailItem.name }}</span>
  54.                   </div>
  55.                   <span :class="'text-sm '">{{ detailItem.followUpStatus }}</span>
  56.                 </div>
  57.                 <div class="text-gray-500 flex justify-between">意向就读学部：{{ detailItem.segment }}</div>
  58.                 <div class="text-gray-500 flex justify-between">报名日期：{{ detailItem.createAt }}</div>
  59.               </div>
  60.               <div class="pa-0 h-2 bg-gray-100" ></div>
  61.               `
  62.                     },
  63.                     { label: "性别", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.gender }}" },
  64.                     { label: "身份证件号", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.icNumber }}" },
  65.                     { label: "家庭住址", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.residentialAddress }}" },
  66.                     { label: "意向就读学部", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.segment }}" },
  67.                     { label: "意向就读年级", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.level }}" },
  68.                     { label: "意向就读方式", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.afterSchoolCareType }}" },
  69.                     { label: "原就读学校", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.schoolRoll }}" },
  70.                     { label: "中考分数", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.middleSchoolExamScore }}" },
  71.                     { label: "中考报名序号", tag: "span", colAttrs: { class: 'border-b pb-2 flex justify-between' }, value: "{{ detailItem.middleSchoolExamSequence }}" }
  72.                 ],
  73.                 action: [
  74.                     {
  75.                         tag: 'v-btn',
  76.                         value: "编辑",
  77.                         attrs: {
  78.                             color: 'primary',
  79.                             '@click': "doUiAction('startUpdateItem', detailItem); closeDetailDrawer()"
  80.                         },
  81.                         quickAttrs: ['small']
  82.                     }
  83.                 ]
  84.             }
  85.         ]
  86.     }
  87. ],
  88. common: {
  89.     async created() {
  90.         await this.doUiAction('getTableData');
  91.     },
  92. }

内容-圆点操作菜单

  1. pageContent: [
  2.     {
  3.       tag: 'jh-action',
  4.       attrs: { class: 'h-16 w-16 p-2 fixed right-4 bottom-32' },
  5.       actionList: [
  6.         { tag: 'v-btn', value: '新增', icon: 'mdi-plus', color: 'success', click: "doUiAction('startCreateItem')" },
  7.         { tag: 'v-btn', value: '随机分配跟进人', icon: 'mdi-plus', color: 'success', click: "doUiAction('randomFollowUp')", ':disabled': '!tableSelected.length' },
  8.       ]
  9.     }
  10. ]

弹框相关

👉参考PC端弹框相关配置 👈

命令详解

生成样例文件页面

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

  1. jianghu-init json --generateType=example

生成页面配置文件

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

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

配置渲染html

根据配置文件生成页面

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

开启Dev模式

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

  1. jianghu-init json dev

参数说明

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

其他

字符串代码语法高亮

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

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

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