diff --git a/src/api/infra/codegen.js b/src/api/infra/codegen.js
index ffb3e043ab038a8c23198fd2f761b5f03897af07..0d65c93fb85defc81aba1315bf99eab819275bdc 100644
--- a/src/api/infra/codegen.js
+++ b/src/api/infra/codegen.js
@@ -9,6 +9,14 @@ export function getCodegenTablePage(query) {
   })
 }
 
+// 查询列表代码生成表定义
+export const getCodegenTableList = (dataSourceConfigId) => {
+  return request({
+    url: '/infra/codegen/table/list?dataSourceConfigId=' + dataSourceConfigId,
+    method: 'get',
+  })
+}
+
 // 获得表和字段的明细
 export function getCodegenDetail(tableId) {
   return request({
diff --git a/src/api/infra/demo01.js b/src/api/infra/demo01.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3e5ac144aab80c3e5fd332e09dcf5aa389ba01e
--- /dev/null
+++ b/src/api/infra/demo01.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 创建示例联系人
+export function createDemo01Contact(data) {
+  return request({
+    url: '/infra/demo01-contact/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新示例联系人
+export function updateDemo01Contact(data) {
+  return request({
+    url: '/infra/demo01-contact/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除示例联系人
+export function deleteDemo01Contact(id) {
+  return request({
+    url: '/infra/demo01-contact/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得示例联系人
+export function getDemo01Contact(id) {
+  return request({
+    url: '/infra/demo01-contact/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得示例联系人分页
+export function getDemo01ContactPage(params) {
+  return request({
+    url: '/infra/demo01-contact/page',
+    method: 'get',
+    params
+  })
+}
+// 导出示例联系人 Excel
+export function exportDemo01ContactExcel(params) {
+  return request({
+    url: '/infra/demo01-contact/export-excel',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
diff --git a/src/api/infra/demo02.js b/src/api/infra/demo02.js
new file mode 100644
index 0000000000000000000000000000000000000000..7d6d4cdd0567d53de57c1f97c4667481b848d564
--- /dev/null
+++ b/src/api/infra/demo02.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 创建示例分类
+export function createDemo02Category(data) {
+  return request({
+    url: '/infra/demo02-category/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新示例分类
+export function updateDemo02Category(data) {
+  return request({
+    url: '/infra/demo02-category/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除示例分类
+export function deleteDemo02Category(id) {
+  return request({
+    url: '/infra/demo02-category/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得示例分类
+export function getDemo02Category(id) {
+  return request({
+    url: '/infra/demo02-category/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得示例分类列表
+export function getDemo02CategoryList(params) {
+  return request({
+    url: '/infra/demo02-category/list',
+    method: 'get',
+    params
+  })
+}
+// 导出示例分类 Excel
+export function exportDemo02CategoryExcel(params) {
+  return request({
+    url: '/infra/demo02-category/export-excel',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
diff --git a/src/api/infra/demo03-erp.js b/src/api/infra/demo03-erp.js
new file mode 100644
index 0000000000000000000000000000000000000000..521317caec1af5a82070d2471651075538dda1d2
--- /dev/null
+++ b/src/api/infra/demo03-erp.js
@@ -0,0 +1,141 @@
+import request from '@/utils/request'
+
+// 创建学生
+export function createDemo03Student(data) {
+  return request({
+    url: '/infra/demo03-student/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新学生
+export function updateDemo03Student(data) {
+  return request({
+    url: '/infra/demo03-student/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除学生
+export function deleteDemo03Student(id) {
+  return request({
+    url: '/infra/demo03-student/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得学生
+export function getDemo03Student(id) {
+  return request({
+    url: '/infra/demo03-student/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得学生分页
+export function getDemo03StudentPage(params) {
+  return request({
+    url: '/infra/demo03-student/page',
+    method: 'get',
+    params
+  })
+}
+// 导出学生 Excel
+export function exportDemo03StudentExcel(params) {
+  return request({
+    url: '/infra/demo03-student/export-excel',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 子表（学生课程） ====================
+
+// 获得学生课程分页
+export function getDemo03CoursePage(params) {
+  return request({
+    url: '/infra/demo03-student/demo03-course/page',
+    method: 'get',
+    params
+  })
+}
+// 新增学生课程
+export function createDemo03Course(data) {
+  return request({
+    url: `/infra/demo03-student/demo03-course/create`,
+    method: 'post',
+    data
+  })
+}
+
+// 修改学生课程
+export function updateDemo03Course(data) {
+  return request({
+    url: `/infra/demo03-student/demo03-course/update`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除学生课程
+export function deleteDemo03Course(id) {
+  return request({
+    url: `/infra/demo03-student/demo03-course/delete?id=` + id,
+    method: 'delete'
+  })
+}
+
+// 获得学生课程
+export function getDemo03Course(id) {
+  return request({
+    url: `/infra/demo03-student/demo03-course/get?id=` + id,
+    method: 'get'
+  })
+}
+
+// ==================== 子表（学生班级） ====================
+
+// 获得学生班级分页
+export function getDemo03GradePage(params) {
+  return request({
+    url: '/infra/demo03-student/demo03-grade/page',
+    method: 'get',
+    params
+  })
+}
+// 新增学生班级
+export function createDemo03Grade(data) {
+  return request({
+    url: `/infra/demo03-student/demo03-grade/create`,
+    method: 'post',
+    data
+  })
+}
+
+// 修改学生班级
+export function updateDemo03Grade(data) {
+  return request({
+    url: `/infra/demo03-student/demo03-grade/update`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除学生班级
+export function deleteDemo03Grade(id) {
+  return request({
+    url: `/infra/demo03-student/demo03-grade/delete?id=` + id,
+    method: 'delete'
+  })
+}
+
+// 获得学生班级
+export function getDemo03Grade(id) {
+  return request({
+    url: `/infra/demo03-student/demo03-grade/get?id=` + id,
+    method: 'get'
+  })
+}
diff --git a/src/api/infra/demo03-inner.js b/src/api/infra/demo03-inner.js
new file mode 100644
index 0000000000000000000000000000000000000000..834522af03070f525cc2be763dcde3719c969956
--- /dev/null
+++ b/src/api/infra/demo03-inner.js
@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+
+// 创建学生
+export function createDemo03Student(data) {
+  return request({
+    url: '/infra/demo03-student/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新学生
+export function updateDemo03Student(data) {
+  return request({
+    url: '/infra/demo03-student/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除学生
+export function deleteDemo03Student(id) {
+  return request({
+    url: '/infra/demo03-student/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得学生
+export function getDemo03Student(id) {
+  return request({
+    url: '/infra/demo03-student/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得学生分页
+export function getDemo03StudentPage(params) {
+  return request({
+    url: '/infra/demo03-student/page',
+    method: 'get',
+    params
+  })
+}
+// 导出学生 Excel
+export function exportDemo03StudentExcel(params) {
+  return request({
+    url: '/infra/demo03-student/export-excel',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 子表（学生课程） ====================
+
+// 获得学生课程列表
+export function getDemo03CourseListByStudentId(studentId) {
+  return request({
+    url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId,
+    method: 'get'
+  })
+}
+
+// ==================== 子表（学生班级） ====================
+
+// 获得学生班级
+export function getDemo03GradeByStudentId(studentId) {
+  return request({
+    url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId,
+    method: 'get'
+  })
+}
diff --git a/src/api/infra/demo03-normal.js b/src/api/infra/demo03-normal.js
new file mode 100644
index 0000000000000000000000000000000000000000..834522af03070f525cc2be763dcde3719c969956
--- /dev/null
+++ b/src/api/infra/demo03-normal.js
@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+
+// 创建学生
+export function createDemo03Student(data) {
+  return request({
+    url: '/infra/demo03-student/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新学生
+export function updateDemo03Student(data) {
+  return request({
+    url: '/infra/demo03-student/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除学生
+export function deleteDemo03Student(id) {
+  return request({
+    url: '/infra/demo03-student/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得学生
+export function getDemo03Student(id) {
+  return request({
+    url: '/infra/demo03-student/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得学生分页
+export function getDemo03StudentPage(params) {
+  return request({
+    url: '/infra/demo03-student/page',
+    method: 'get',
+    params
+  })
+}
+// 导出学生 Excel
+export function exportDemo03StudentExcel(params) {
+  return request({
+    url: '/infra/demo03-student/export-excel',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 子表（学生课程） ====================
+
+// 获得学生课程列表
+export function getDemo03CourseListByStudentId(studentId) {
+  return request({
+    url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId,
+    method: 'get'
+  })
+}
+
+// ==================== 子表（学生班级） ====================
+
+// 获得学生班级
+export function getDemo03GradeByStudentId(studentId) {
+  return request({
+    url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId,
+    method: 'get'
+  })
+}
diff --git a/src/api/system/notice.js b/src/api/system/notice.js
index 2e0c05dcb6fde4671314bc9dc1571427f8f33711..14924f10fcd87ab2be7b790e5cbb66f616f01785 100644
--- a/src/api/system/notice.js
+++ b/src/api/system/notice.js
@@ -42,3 +42,11 @@ export function delNotice(noticeId) {
     method: 'delete'
   })
 }
+
+// 推送公告
+export function pushNotice(noticeId) {
+  return request({
+    url: '/system/notice/push?id=' + noticeId,
+    method: 'post'
+  })
+}
diff --git a/src/views/infra/codegen/editTable.vue b/src/views/infra/codegen/editTable.vue
index fee16c34e2cdf110f5ad3aa950368259cf75f9fe..767eaaf21fe1c49726af123fe31e0d93ee4cdf68 100644
--- a/src/views/infra/codegen/editTable.vue
+++ b/src/views/infra/codegen/editTable.vue
@@ -2,10 +2,11 @@
   <el-card>
     <el-tabs v-model="activeName">
       <el-tab-pane label="基本信息" name="basic">
-        <basic-info-form ref="basicInfo" :info="table" />
+        <basic-info-form ref="basicInfo" :info="formData.table"/>
       </el-tab-pane>
       <el-tab-pane label="字段信息" name="cloum">
-        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
+        <el-table ref="dragTable" :data="formData.columns" row-key="columnId"
+                  :max-height="tableHeight">
           <el-table-column
             label="字段列名"
             prop="columnName"
@@ -26,13 +27,13 @@
           <el-table-column label="Java类型" min-width="11%">
             <template v-slot="scope">
               <el-select v-model="scope.row.javaType">
-                <el-option label="Long" value="Long" />
-                <el-option label="String" value="String" />
-                <el-option label="Integer" value="Integer" />
-                <el-option label="Double" value="Double" />
-                <el-option label="BigDecimal" value="BigDecimal" />
-                <el-option label="LocalDateTime" value="LocalDateTime" />
-                <el-option label="Boolean" value="Boolean" />
+                <el-option label="Long" value="Long"/>
+                <el-option label="String" value="String"/>
+                <el-option label="Integer" value="Integer"/>
+                <el-option label="Double" value="Double"/>
+                <el-option label="BigDecimal" value="BigDecimal"/>
+                <el-option label="LocalDateTime" value="LocalDateTime"/>
+                <el-option label="Boolean" value="Boolean"/>
               </el-select>
             </template>
           </el-table-column>
@@ -64,14 +65,14 @@
           <el-table-column label="查询方式" min-width="10%">
             <template v-slot="scope">
               <el-select v-model="scope.row.listOperationCondition">
-                <el-option label="=" value="=" />
-                <el-option label="!=" value="!=" />
-                <el-option label=">" value=">" />
-                <el-option label=">=" value=">=" />
-                <el-option label="<" value="<>" />
-                <el-option label="<=" value="<=" />
-                <el-option label="LIKE" value="LIKE" />
-                <el-option label="BETWEEN" value="BETWEEN" />
+                <el-option label="=" value="="/>
+                <el-option label="!=" value="!="/>
+                <el-option label=">" value=">"/>
+                <el-option label=">=" value=">="/>
+                <el-option label="<" value="<>"/>
+                <el-option label="<=" value="<="/>
+                <el-option label="LIKE" value="LIKE"/>
+                <el-option label="BETWEEN" value="BETWEEN"/>
               </el-select>
             </template>
           </el-table-column>
@@ -83,15 +84,15 @@
           <el-table-column label="显示类型" min-width="12%">
             <template v-slot="scope">
               <el-select v-model="scope.row.htmlType">
-                <el-option label="文本框" value="input" />
-                <el-option label="文本域" value="textarea" />
-                <el-option label="下拉框" value="select" />
-                <el-option label="单选框" value="radio" />
-                <el-option label="复选框" value="checkbox" />
-                <el-option label="日期控件" value="datetime" />
-                <el-option label="图片上传" value="imageUpload" />
-                <el-option label="文件上传" value="fileUpload" />
-                <el-option label="富文本控件" value="editor" />
+                <el-option label="文本框" value="input"/>
+                <el-option label="文本域" value="textarea"/>
+                <el-option label="下拉框" value="select"/>
+                <el-option label="单选框" value="radio"/>
+                <el-option label="复选框" value="checkbox"/>
+                <el-option label="日期控件" value="datetime"/>
+                <el-option label="图片上传" value="imageUpload"/>
+                <el-option label="文件上传" value="fileUpload"/>
+                <el-option label="富文本控件" value="editor"/>
               </el-select>
             </template>
           </el-table-column>
@@ -99,10 +100,10 @@
             <template v-slot="scope">
               <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                 <el-option
-                    v-for="dict in dictOptions"
-                    :key="dict.id"
-                    :label="dict.name"
-                    :value="dict.type"
+                  v-for="dict in dictOptions"
+                  :key="dict.id"
+                  :label="dict.name"
+                  :value="dict.type"
                 />
               </el-select>
             </template>
@@ -115,7 +116,7 @@
         </el-table>
       </el-tab-pane>
       <el-tab-pane label="生成信息" name="genInfo">
-        <gen-info-form ref="genInfo" :info="table" :tables="tables" :menus="menus"/>
+        <gen-info-form ref="genInfo" :form-data="formData.table" :columns="formData.columns" :menus="menus"/>
       </el-tab-pane>
     </el-tabs>
     <el-form label-width="100px">
@@ -127,9 +128,9 @@
   </el-card>
 </template>
 <script>
-import { getCodegenDetail, updateCodegen } from "@/api/infra/codegen";
-import { listAllSimple as listAllSimpleDictType } from "@/api/system/dict/type";
-import { listSimpleMenus } from "@/api/system/menu";
+import {getCodegenDetail, updateCodegen} from "@/api/infra/codegen";
+import {listAllSimple as listAllSimpleDictType} from "@/api/system/dict/type";
+import {listSimpleMenus} from "@/api/system/menu";
 import basicInfoForm from "./basicInfoForm";
 import genInfoForm from "./genInfoForm";
 import Sortable from 'sortablejs'
@@ -146,16 +147,11 @@ export default {
       activeName: "cloum",
       // 表格的高度
       tableHeight: document.documentElement.scrollHeight - 245 + "px",
-      // 表信息
-      tables: [],
-      // 表列信息
-      columns: [],
       // 字典信息
       dictOptions: [],
+      formData: {},
       // 菜单信息
-      menus: [],
-      // 表详细信息
-      table: {}
+      menus: []
     };
   },
   created() {
@@ -163,8 +159,7 @@ export default {
     if (tableId) {
       // 获取表详细信息
       getCodegenDetail(tableId).then(res => {
-        this.table = res.data.table;
-        this.columns = res.data.columns;
+        this.formData = res.data;
       });
       /** 查询字典下拉列表 */
       listAllSimpleDictType().then(response => {
@@ -187,7 +182,7 @@ export default {
         if (validateResult) {
           const genTable = {};
           genTable.table = Object.assign({}, basicForm.model, genForm.model);
-          genTable.columns = this.columns;
+          genTable.columns = this.formData.columns;
           genTable.params = {
             treeCode: genTable.treeCode,
             treeName: genTable.treeName,
@@ -213,8 +208,9 @@ export default {
     /** 关闭按钮 */
     close() {
       this.$tab.closeOpenPage({
-        path: "/infra/codegen",
-        query: { t: Date.now(), pageNum: this.$route.query.pageNum } }
+          path: "/infra/codegen",
+          query: {t: Date.now(), pageNum: this.$route.query.pageNum}
+        }
       );
     }
   },
diff --git a/src/views/infra/codegen/genInfoForm.vue b/src/views/infra/codegen/genInfoForm.vue
index a9a6ac8fd5867ef2d35de0e48fc3e0e3bebf7ca0..d44b2226c6f37d58efdedd4d91e5f80b5a74b07c 100644
--- a/src/views/infra/codegen/genInfoForm.vue
+++ b/src/views/infra/codegen/genInfoForm.vue
@@ -1,10 +1,10 @@
 <template>
-  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
+  <el-form ref="genInfoForm" :model="formData" :rules="rules" label-width="150px">
     <el-row>
       <el-col :span="12">
         <el-form-item prop="templateType">
           <span slot="label">生成模板</span>
-          <el-select v-model="info.templateType" @change="tplSelectChange">
+          <el-select v-model="formData.templateType">
             <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
                 :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
           </el-select>
@@ -13,7 +13,7 @@
       <el-col :span="12">
         <el-form-item prop="templateType">
           <span slot="label">前端类型</span>
-          <el-select v-model="info.frontType">
+          <el-select v-model="formData.frontType">
             <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
                        :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
           </el-select>
@@ -23,7 +23,7 @@
       <el-col :span="12">
         <el-form-item prop="scene">
           <span slot="label">生成场景</span>
-          <el-select v-model="info.scene">
+          <el-select v-model="formData.scene">
             <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CODEGEN_SCENE)"
                        :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
           </el-select>
@@ -37,7 +37,7 @@
               <i class="el-icon-question"></i>
             </el-tooltip>
           </span>
-          <treeselect :append-to-body="true" v-model="info.parentMenuId" :options="menus"
+          <treeselect :append-to-body="true" v-model="formData.parentMenuId" :options="menus"
                       :normalizer="normalizer" :show-count="true" placeholder="请选择系统菜单" />
         </el-form-item>
       </el-col>
@@ -50,7 +50,7 @@
 <!--              <i class="el-icon-question"></i>-->
 <!--            </el-tooltip>-->
 <!--          </span>-->
-<!--          <el-input v-model="info.packageName" />-->
+<!--          <el-input v-model="formData.packageName" />-->
 <!--        </el-form-item>-->
 <!--      </el-col>-->
 
@@ -62,7 +62,7 @@
               <i class="el-icon-question"></i>
             </el-tooltip>
           </span>
-          <el-input v-model="info.moduleName" />
+          <el-input v-model="formData.moduleName" />
         </el-form-item>
       </el-col>
 
@@ -74,7 +74,7 @@
               <i class="el-icon-question"></i>
             </el-tooltip>
           </span>
-          <el-input v-model="info.businessName" />
+          <el-input v-model="formData.businessName" />
         </el-form-item>
       </el-col>
 
@@ -86,7 +86,7 @@
 <!--              <i class="el-icon-question"></i>-->
 <!--            </el-tooltip>-->
 <!--          </span>-->
-<!--          <el-input v-model="info.businessPackage" />-->
+<!--          <el-input v-model="formData.businessPackage" />-->
 <!--        </el-form-item>-->
 <!--      </el-col>-->
 
@@ -98,7 +98,7 @@
               <i class="el-icon-question"></i>
             </el-tooltip>
           </span>
-          <el-input v-model="info.className" />
+          <el-input v-model="formData.className" />
         </el-form-item>
       </el-col>
 
@@ -110,11 +110,11 @@
               <i class="el-icon-question"></i>
             </el-tooltip>
           </span>
-          <el-input v-model="info.classComment" />
+          <el-input v-model="formData.classComment" />
         </el-form-item>
       </el-col>
 
-      <el-col :span="24" v-if="info.genType === '1'">
+      <el-col :span="24" v-if="formData.genType === '1'">
         <el-form-item prop="genPath">
           <span slot="label">
             自定义路径
@@ -122,14 +122,14 @@
               <i class="el-icon-question"></i>
             </el-tooltip>
           </span>
-          <el-input v-model="info.genPath">
+          <el-input v-model="formData.genPath">
             <el-dropdown slot="append">
               <el-button type="primary">
                 最近路径快速选择
                 <i class="el-icon-arrow-down el-icon--right"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
+                <el-dropdown-item @click.native="formData.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-input>
@@ -137,119 +137,133 @@
       </el-col>
     </el-row>
 
-    <el-row v-show="info.tplCategory === 'tree'">
-      <h4 class="form-header">其他信息</h4>
-      <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            树编码字段
-            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeCode" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in info.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
-          </el-select>
-        </el-form-item>
+    <!-- 树表信息 -->
+    <el-row v-if="formData.templateType == 2">
+      <el-col :span="24">
+        <h4 class="form-header">树表信息</h4>
       </el-col>
       <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            树父编码字段
-            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeParentCode" placeholder="请选择">
+        <el-form-item prop="treeParentColumnId">
+          <template #label>
+            <span>
+              父编号字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeParentColumnId" placeholder="请选择">
             <el-option
-              v-for="(column, index) in info.columns"
+              v-for="(column, index) in columns"
               :key="index"
               :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
+              :value="column.id"
+            />
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            树名称字段
-            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeName" placeholder="请选择">
+        <el-form-item prop="treeNameColumnId">
+          <template #label>
+            <span>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeNameColumnId" placeholder="请选择">
             <el-option
-              v-for="(column, index) in info.columns"
+              v-for="(column, index) in columns"
               :key="index"
               :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
+              :value="column.id"
+            />
           </el-select>
         </el-form-item>
       </el-col>
     </el-row>
-    <el-row v-show="info.tplCategory === 'sub'">
-      <h4 class="form-header">关联信息</h4>
+
+    <!-- 主表信息 -->
+    <el-row v-if="formData.templateType == 15">
+      <el-col :span="24">
+        <h4 class="form-header">主表信息</h4>
+      </el-col>
       <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            关联子表的表名
-            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+        <el-form-item prop="masterTableId">
+          <template #label>
+            <span>
+              关联的主表
+              <el-tooltip content="关联主表（父表）的表名， 如：system_user" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.masterTableId" placeholder="请选择">
             <el-option
-              v-for="(table, index) in tables"
+              v-for="(table0, index) in tables"
               :key="index"
-              :label="table.tableName + '：' + table.tableComment"
-              :value="table.tableName"
-            ></el-option>
+              :label="table0.tableName + '：' + table0.tableComment"
+              :value="table0.id"
+            />
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            子表关联的外键名
-            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.subTableFkName" placeholder="请选择">
+        <el-form-item prop="subJoinColumnId">
+          <template #label>
+            <span>
+              子表关联的字段
+              <el-tooltip content="子表关联的字段， 如：user_id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.subJoinColumnId" placeholder="请选择">
             <el-option
-              v-for="(column, index) in subColumns"
+              v-for="(column, index) in columns"
               :key="index"
               :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
+              :value="column.id"
+            />
           </el-select>
         </el-form-item>
       </el-col>
+      <el-col :span="12">
+        <el-form-item prop="subJoinMany">
+          <template #label>
+            <span>
+              关联关系
+              <el-tooltip content="主表与子表的关联关系" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-radio-group v-model="formData.subJoinMany" placeholder="请选择">
+            <el-radio :label="true">一对多</el-radio>
+            <el-radio :label="false">一对一</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
     </el-row>
   </el-form>
 </template>
 <script>
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getCodegenTableList } from "@/api/infra/codegen";
 
 export default {
-  name: "BasicInfoForm",
+  name: "GenInfoForm",
   components: { Treeselect },
   props: {
-    info: {
+    formData: {
       type: Object,
       default: null
     },
-    tables: {
+    columns:{
       type: Array,
-      default: null
+      default: []
     },
     menus: {
       type: Array,
@@ -258,42 +272,36 @@ export default {
   },
   data() {
     return {
-      subColumns: [],
       rules: {
-        templateType: [
-          { required: true, message: "请选择生成模板", trigger: "blur" }
-        ],
-        scene: [
-          { required: true, message: "请选择生成场景", trigger: "blur" }
-        ],
-        frontType: [
-          { required: true, message: "请选择前端类型", trigger: "blur" }
-        ],
-        // packageName: [
-        //   { required: true, message: "请输入生成包路径", trigger: "blur" }
-        // ],
-        moduleName: [
-          { required: true, message: "请输入生成模块名", trigger: "blur" }
-        ],
-        businessName: [
-          { required: true, message: "请输入生成业务名", trigger: "blur" }
-        ],
-        businessPackage: [
-          { required: true, message: "请输入生成业务包", trigger: "blur" }
-        ],
-        className: [
-          { required: true, message: "请输入生成类名称", trigger: "blur" }
-        ],
-        classComment: [
-          { required: true, message: "请输入生成类描述", trigger: "blur" }
-        ],
-      }
+        templateType: [ { required: true, message: "请选择生成模板", trigger: "blur" }],
+        frontType: [ { required: true, message: "请选择前端类型", trigger: "blur" }],
+        scene: [ { required: true, message: "请选择生成场景", trigger: "blur" }],
+        moduleName: [ { required: true, message: "请输入生成模块名", trigger: "blur" }],
+        businessName: [ { required: true, message: "请输入生成业务名", trigger: "blur" }],
+        businessPackage: [ { required: true, message: "请输入生成业务包", trigger: "blur" }],
+        className: [ { required: true, message: "请输入生成类名称", trigger: "blur" }],
+        classComment: [ { required: true, message: "请输入生成类描述", trigger: "blur" }],
+        masterTableId: [ { required: true, message: "请选择关联的主表", trigger: "blur" }],
+        subJoinColumnId: [ { required: true, message: "请选择子表关联的字段", trigger: "blur" }],
+        subJoinMany: [ { required: true, message: "请选择关联关系", trigger: "blur" }],
+        treeParentColumnId: [ { required: true, message: "请选择父编号字段", trigger: "blur" }],
+        treeNameColumnId: [ { required: true, message: "请选择树名称字段", trigger: "blur" }]
+      },
+      tables:[] // 表定义列表
     };
   },
-  created() {},
   watch: {
-    'info.subTableName': function(val) {
-      this.setSubTableColumns(val);
+    formData: {
+      handler(val){
+        // 加载表列表
+        if (val.dataSourceConfigId >= 0) {
+          getCodegenTableList(val.dataSourceConfigId).then(res=>{
+            this.tables = res.data
+          })
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   methods: {
@@ -307,32 +315,6 @@ export default {
         label: node.name,
         children: node.children
       };
-    },
-    /** 选择子表名触发 */
-    subSelectChange(value) {
-      this.info.subTableFkName = '';
-    },
-    /** 选择生成模板触发 */
-    tplSelectChange(value) {
-      if (value !== 1) {
-        // TODO 芋艿：暂时不考虑支持树形结构
-        this.$modal.msgError('暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发');
-        return false;
-      }
-      if(value !== 'sub') {
-        this.info.subTableName = '';
-        this.info.subTableFkName = '';
-      }
-    },
-    /** 设置关联外键 */
-    setSubTableColumns(value) {
-      for (let item in this.tables) {
-        const name = this.tables[item].tableName;
-        if (value === name) {
-          this.subColumns = this.tables[item].columns;
-          break;
-        }
-      }
     }
   }
 };
diff --git a/src/views/infra/demo/demo01/Demo01ContactForm.vue b/src/views/infra/demo/demo01/Demo01ContactForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1a5295b3e0cebb8bf152669cbbeb05af5d57ac5
--- /dev/null
+++ b/src/views/infra/demo/demo01/Demo01ContactForm.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="formData.sex">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                      :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="出生年" prop="birthday">
+          <el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生年" />
+        </el-form-item>
+        <el-form-item label="简介">
+          <Editor v-model="formData.description" :min-height="192"/>
+        </el-form-item>
+        <el-form-item label="头像" prop="avatar">
+          <el-input v-model="formData.avatar" placeholder="请输入头像" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo01ContactApi from '@/api/infra/demo01'
+import Editor from '@/components/Editor';
+export default {
+  name: "Demo01ContactForm",
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+        avatar: undefined,
+      },
+      // 表单校验
+      formRules: {
+        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+        sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+        birthday: [{ required: true, message: '出生年不能为空', trigger: 'blur' }],
+        description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+      },
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo01ContactApi.getDemo01Contact(id).then(res=>{
+            that.formData = res.data;
+            that.title = "修改示例联系人";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.title = "新增示例联系人";
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        const that = this;
+        let data = this.formData;
+
+        this.getRef("formRef").validate(valid => {
+          if (!valid) {
+            return;
+          }
+          // 修改的提交
+          if (data.id) {
+            Demo01ContactApi.updateDemo01Contact(data).then(response => {
+              that.$modal.msgSuccess("修改成功");
+              that.dialogVisible = false;
+              that.$emit('success');
+            });
+            return;
+          }
+          // 添加的提交
+          Demo01ContactApi.createDemo01Contact(data).then(response => {
+            that.$modal.msgSuccess("新增成功");
+            that.dialogVisible = false;
+            that.$emit('success');
+          });
+        });
+      }finally {
+        this.formLoading = false
+      }
+    },
+    getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
+      return this.$refs[refName]
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+        avatar: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo01/index.vue b/src/views/infra/demo/demo01/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7be7f779ae3c42c8601c0bf08064cea92745dc5
--- /dev/null
+++ b/src/views/infra/demo/demo01/index.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="出生年" prop="birthday">
+        <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生年" />
+      </el-form-item>
+      <el-form-item label="头像" prop="avatar">
+        <el-input v-model="queryParams.avatar" placeholder="请输入头像" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo01-contact:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['infra:demo01-contact:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="出生年" align="center" prop="birthday" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.birthday) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo01-contact:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo01-contact:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <Demo01ContactForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script>
+import * as Demo01ContactApi from '@/api/infra/demo01';
+import Demo01ContactForm from './Demo01ContactForm.vue';
+export default {
+  name: "Demo01Contact",
+  components: {
+    Demo01ContactForm,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 示例联系人列表
+      list: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 选中行
+      currentRow: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        sex: null,
+        birthday: null,
+        description: null,
+        avatar: null,
+        createTime: [],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        Demo01ContactApi.getDemo01ContactPage(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.$refs["formRef"].open(id)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除示例联系人编号为"' + id + '"的数据项?').then(()=>{
+          return Demo01ContactApi.deleteDemo01Contact(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      } catch {}
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const that = this;
+      try {
+        this.$modal.confirm('是否确认导出所有示例联系人数据项?').then(() => {
+          that.exportLoading = true;
+          return Demo01ContactApi.exportDemo01ContactExcel(params);
+        }).then(response => {
+          that.$download.excel(response, '示例联系人.xls');
+        });
+      } catch {
+      } finally {
+        that.exportLoading = false;
+      }
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo02/Demo02CategoryForm.vue b/src/views/infra/demo/demo02/Demo02CategoryForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9865965114b6be85a324a3a33894b7896aebd556
--- /dev/null
+++ b/src/views/infra/demo/demo02/Demo02CategoryForm.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="父级编号" prop="parentId">
+          <TreeSelect
+            v-model="formData.parentId"
+            :options="demo02CategoryTree"
+            :normalizer="normalizer"
+            placeholder="请选择父级编号"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo02CategoryApi from '@/api/infra/demo02'
+import TreeSelect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "Demo02CategoryForm",
+  components: {
+    TreeSelect,
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        name: undefined,
+        parentId: undefined,
+      },
+      // 表单校验
+      formRules: {
+        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+        parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }],
+      },
+      demo02CategoryTree: [], // 树形结构
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo02CategoryApi.getDemo02Category(id).then(res=>{
+            that.formData = res.data;
+            that.title = "修改示例分类";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.title = "新增示例分类";
+      this.getDemo02CategoryTree()
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        const that = this;
+        let data = this.formData;
+
+        this.getRef("formRef").validate(valid => {
+          if (!valid) {
+            return;
+          }
+          // 修改的提交
+          if (data.id) {
+            Demo02CategoryApi.updateDemo02Category(data).then(response => {
+              that.$modal.msgSuccess("修改成功");
+              that.dialogVisible = false;
+              that.$emit('success');
+            });
+            return;
+          }
+          // 添加的提交
+          Demo02CategoryApi.createDemo02Category(data).then(response => {
+            that.$modal.msgSuccess("新增成功");
+            that.dialogVisible = false;
+            that.$emit('success');
+          });
+        });
+      }finally {
+        this.formLoading = false
+      }
+    },
+    getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
+      return this.$refs[refName]
+    },
+    /** 获得示例分类树 */
+    getDemo02CategoryTree() {
+      const that = this;
+      that.demo02CategoryTree = [];
+      Demo02CategoryApi.getDemo02CategoryList().then(res=>{
+        const root = { id: 0, name: '顶级示例分类', children: [] };
+        root.children = this.handleTree(res.data, 'id', 'parentId')
+        that.demo02CategoryTree.push(root)
+      });
+    },
+    /** 转换示例分类数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        name: undefined,
+        parentId: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo02/index.vue b/src/views/infra/demo/demo02/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61bca72d129a9f3edddd1a701f727edfb35a1884
--- /dev/null
+++ b/src/views/infra/demo/demo02/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="父级编号" prop="parentId">
+        <el-input v-model="queryParams.parentId" placeholder="请输入父级编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo02-category:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['infra:demo02-category:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">
+          展开/折叠
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      v-if="refreshTable"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="父级编号" align="center" prop="parentId" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo02-category:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo02-category:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 对话框(添加 / 修改) -->
+    <Demo02CategoryForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script>
+import * as Demo02CategoryApi from '@/api/infra/demo02';
+import Demo02CategoryForm from './Demo02CategoryForm.vue';
+export default {
+  name: "Demo02Category",
+  components: {
+    Demo02CategoryForm,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      // 示例分类列表
+      list: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 选中行
+      currentRow: {},
+      // 查询参数
+      queryParams: {
+        name: null,
+        parentId: null,
+        createTime: [],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        Demo02CategoryApi.getDemo02CategoryList(this.queryParams).then(response => {
+          this.list = this.handleTree(response.data, 'id', 'parentId');
+        })
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.$refs["formRef"].open(id)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除示例分类编号为"' + id + '"的数据项?').then(()=>{
+          return Demo02CategoryApi.deleteDemo02Category(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      } catch {}
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const that = this;
+      try {
+        this.$modal.confirm('是否确认导出所有示例分类数据项?').then(() => {
+          that.exportLoading = true;
+          return Demo02CategoryApi.exportDemo02CategoryExcel(params);
+        }).then(response => {
+          that.$download.excel(response, '示例分类.xls');
+        });
+      } catch {
+      } finally {
+        that.exportLoading = false;
+      }
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false
+      this.isExpandAll = !this.isExpandAll
+      this.$nextTick(function () {
+        this.refreshTable = true
+      })
+    }
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be2638d7498516e3d3f2a22b4466d73cbba4ed5e
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="formData.sex">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                      :key="dict.value" :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="出生日期" prop="birthday">
+          <el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生日期" />
+        </el-form-item>
+        <el-form-item label="简介">
+          <Editor v-model="formData.description" :min-height="192"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-erp'
+import Editor from '@/components/Editor';
+export default {
+  name: "Demo03StudentForm",
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+      },
+      // 表单校验
+      formRules: {
+        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+        sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+        birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+        description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+      },
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo03StudentApi.getDemo03Student(id).then(res=>{
+            that.formData = res.data;
+            that.title = "修改学生";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.title = "新增学生";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        const that = this;
+        let data = this.formData;
+        let validate = false;
+        // 校验主表
+        this.getRef("formRef").validate(valid => {
+          validate = valid;
+        });
+        // 所有表单校验通过后方可提交
+        if (!validate) {
+          return;
+        }
+        // 修改的提交
+        if (data.id) {
+          Demo03StudentApi.updateDemo03Student(data).then(response => {
+            that.$modal.msgSuccess("修改成功");
+            that.dialogVisible = false;
+            that.$emit('success');
+          });
+          return;
+        }
+        // 添加的提交
+        Demo03StudentApi.createDemo03Student(data).then(response => {
+          that.$modal.msgSuccess("新增成功");
+          that.dialogVisible = false;
+          that.$emit('success');
+        });
+      }finally {
+        this.formLoading = false;
+      }
+    },
+    getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
+      return this.$refs[refName]
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4cefc1647eb6be1c4b5094c567729ec3c9e3d872
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="分数" prop="score">
+          <el-input v-model="formData.score" placeholder="请输入分数" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-erp'
+export default {
+  name: "Demo03CourseForm",
+  components: {
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        score: undefined,
+      },
+      // 表单校验
+      formRules: {
+        studentId: [{ required: true, message: "学生编号不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
+        score: [{ required: true, message: "分数不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id, studentId) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      this.formData.studentId = studentId;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo03StudentApi.getDemo03Course(id).then(res=>{
+            that.formData = res.data;
+            that.dialogTitle = "修改学生课程";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.dialogTitle = "新增学生课程";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        let data = this.formData;
+        this.$refs["formRef"].validate(valid => {
+          if (!valid) {
+            return;
+          }
+          // 修改的提交
+          if (data.id) {
+            Demo03StudentApi.updateDemo03Course(data).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.dialogVisible = false;
+              this.$emit('success');
+            });
+            return;
+          }
+          // 添加的提交
+          Demo03StudentApi.createDemo03Course(data).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.dialogVisible = false;
+            this.$emit('success');
+          });
+        });
+      }finally {
+        this.formLoading = false
+      }
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        score: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81c9ff674862c9113c356f59b4494132d274a382
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo03-student:create']">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="分数" align="center" prop="score" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+    <!-- 对话框(添加 / 修改) -->
+    <Demo03CourseForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-erp'
+import Demo03CourseForm from './Demo03CourseForm.vue'
+export default {
+  name: "Demo03CourseList",
+  components: {
+    Demo03CourseForm
+  },
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 列表的数据
+      list: [],
+      // 列表的总页数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        studentId: undefined
+      }
+    };
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        this.queryParams.studentId = val;
+        if (val){
+          this.handleQuery();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        const that = this;
+        Demo03StudentApi.getDemo03CoursePage(this.queryParams).then(response => {
+          that.list = response.data.list;
+          that.total = response.data.total;
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      if (!this.studentId) {
+        that.$modal.msgError('请选择一个学生');
+        return;
+      }
+      this.$refs["formRef"].open(id, this.studentId);
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(()=>{
+          return Demo03StudentApi.deleteDemo03Course(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      } catch {}
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f77fa58b42cb9ef06a132ea8833b793171191106
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="班主任" prop="teacher">
+          <el-input v-model="formData.teacher" placeholder="请输入班主任" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-erp'
+export default {
+  name: "Demo03GradeForm",
+  components: {
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        teacher: undefined,
+      },
+      // 表单校验
+      formRules: {
+        studentId: [{ required: true, message: "学生编号不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
+        teacher: [{ required: true, message: "班主任不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id, studentId) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      this.formData.studentId = studentId;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo03StudentApi.getDemo03Grade(id).then(res=>{
+            that.formData = res.data;
+            that.dialogTitle = "修改学生班级";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.dialogTitle = "新增学生班级";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        let data = this.formData;
+        this.$refs["formRef"].validate(valid => {
+          if (!valid) {
+            return;
+          }
+          // 修改的提交
+          if (data.id) {
+            Demo03StudentApi.updateDemo03Grade(data).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.dialogVisible = false;
+              this.$emit('success');
+            });
+            return;
+          }
+          // 添加的提交
+          Demo03StudentApi.createDemo03Grade(data).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.dialogVisible = false;
+            this.$emit('success');
+          });
+        });
+      }finally {
+        this.formLoading = false
+      }
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        teacher: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..298ac2610298307d096a171437c1c6d290257171
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo03-student:create']">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="班主任" align="center" prop="teacher" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+    <!-- 对话框(添加 / 修改) -->
+    <Demo03GradeForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-erp'
+import Demo03GradeForm from './Demo03GradeForm.vue'
+export default {
+  name: "Demo03GradeList",
+  components: {
+    Demo03GradeForm
+  },
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 列表的数据
+      list: [],
+      // 列表的总页数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        studentId: undefined
+      }
+    };
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        this.queryParams.studentId = val;
+        if (val){
+          this.handleQuery();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        const that = this;
+        Demo03StudentApi.getDemo03GradePage(this.queryParams).then(response => {
+          that.list = response.data.list;
+          that.total = response.data.total;
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      if (!this.studentId) {
+        that.$modal.msgError('请选择一个学生');
+        return;
+      }
+      this.$refs["formRef"].open(id, this.studentId);
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(()=>{
+          return Demo03StudentApi.deleteDemo03Grade(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      } catch {}
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/erp/index.vue b/src/views/infra/demo/demo03/erp/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a47bd5fbcdd20d08dafe79ff7a843bb7cf38735
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd"
+                        placeholder="选择出生日期"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
+                        type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                        :default-time="['00:00:00', '23:59:59']"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo03-student:create']">新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                   :loading="exportLoading"
+                   v-hasPermi="['infra:demo03-student:export']">导出
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :highlight-current-row="true"
+      :show-overflow-tooltip="true"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="编号" align="center" prop="id"/>
+      <el-table-column label="名字" align="center" prop="name"/>
+      <el-table-column label="性别" align="center" prop="sex">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="出生日期" align="center" prop="birthday" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.birthday) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="简介" align="center" prop="description"/>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+    <!-- 对话框(添加 / 修改) -->
+    <Demo03StudentForm ref="formRef" @success="getList"/>
+    <!-- 子表的列表 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="学生课程" name="demo03Course">
+        <Demo03CourseList v-if="currentRow.id" :student-id="currentRow.id"/>
+      </el-tab-pane>
+      <el-tab-pane label="学生班级" name="demo03Grade">
+        <Demo03GradeList v-if="currentRow.id" :student-id="currentRow.id"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-erp';
+import Demo03StudentForm from './Demo03StudentForm.vue';
+import Demo03CourseList from './components/Demo03CourseList.vue'
+import Demo03GradeList from './components/Demo03GradeList.vue'
+
+export default {
+  name: "Demo03Student",
+  components: {
+    Demo03StudentForm,
+    Demo03CourseList,
+    Demo03GradeList,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 学生列表
+      list: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 选中行
+      currentRow: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        sex: null,
+        birthday: null,
+        description: null,
+        createTime: [],
+      },
+      /** 子表的列表 */
+      subTabsName: 'demo03Course'
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        Demo03StudentApi.getDemo03StudentPage(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.$refs["formRef"].open(id);
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(() => {
+          return Demo03StudentApi.deleteDemo03Student(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {
+        });
+      } catch {
+      }
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const that = this;
+      try {
+        this.$modal.confirm('是否确认导出所有学生数据项?').then(() => {
+          that.exportLoading = true;
+          return Demo03StudentApi.exportDemo03StudentExcel(params);
+        }).then(response => {
+          that.$download.excel(response, '学生.xls');
+        });
+      } catch {
+      } finally {
+        that.exportLoading = false;
+      }
+    },
+    /** 选中行操作 */
+    handleCurrentChange(row) {
+      this.currentRow = row;
+      /** 子表的列表 */
+      this.subTabsName = 'demo03Course';
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bb8d4a8a21ca7fdc72c86b48b1120e27a175a04b
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="formData.sex">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                      :key="dict.value" :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="出生日期" prop="birthday">
+          <el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生日期" />
+        </el-form-item>
+        <el-form-item label="简介">
+          <Editor v-model="formData.description" :min-height="192"/>
+        </el-form-item>
+      </el-form>
+      <!-- 子表的表单 -->
+      <el-tabs v-model="subTabsName">
+        <el-tab-pane label="学生课程" name="demo03Course">
+          <Demo03CourseForm ref="demo03CourseFormRef" :student-id="formData.id" />
+        </el-tab-pane>
+        <el-tab-pane label="学生班级" name="demo03Grade">
+          <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData.id" />
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-inner'
+import Editor from '@/components/Editor';
+import Demo03CourseForm from './components/Demo03CourseForm.vue'
+import Demo03GradeForm from './components/Demo03GradeForm.vue'
+export default {
+  name: "Demo03StudentForm",
+  components: {
+    Editor,
+    Demo03CourseForm,
+    Demo03GradeForm,
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+      },
+      // 表单校验
+      formRules: {
+        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+        sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+        birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+        description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+      },
+      /** 子表的表单 */
+      subTabsName: 'demo03Course'
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo03StudentApi.getDemo03Student(id).then(res=>{
+            that.formData = res.data;
+            that.title = "修改学生";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.title = "新增学生";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        const that = this;
+        let data = this.formData;
+        let validate = false;
+        // 校验主表
+        this.getRef("formRef").validate(valid => {
+          validate = valid;
+        });
+        // 校验子表
+        this.validateSubFrom01().then(() => {
+          // 全部校验通过-拼接子表的数据
+          // 拼接子表的数据
+          data.demo03Courses = that.getRef('demo03CourseFormRef').getData();
+          data.demo03Grade = that.getRef('demo03GradeFormRef').getData();
+        }).catch((err) => {
+          validate = false;
+          that.subTabsName = err.replace("FormRef", ""); // 定位到没有校验通过的子表单
+        })
+        // 所有表单校验通过后方可提交
+        if (!validate) {
+          return;
+        }
+        // 修改的提交
+        if (data.id) {
+          Demo03StudentApi.updateDemo03Student(data).then(response => {
+            that.$modal.msgSuccess("修改成功");
+            that.dialogVisible = false;
+            that.$emit('success');
+          });
+          return;
+        }
+        // 添加的提交
+        Demo03StudentApi.createDemo03Student(data).then(response => {
+          that.$modal.msgSuccess("新增成功");
+          that.dialogVisible = false;
+          that.$emit('success');
+        });
+      }finally {
+        this.formLoading = false;
+      }
+    },
+    getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
+      return this.$refs[refName];
+    },
+    /** 校验子表单 */
+    validateSubFrom(item) {
+      return new Promise((resolve, reject) => {
+        this.getRef(item).validate()
+          .then(() => {
+            resolve();
+          })
+          .catch(() => {
+            reject(item);
+          })
+      })
+    },
+    /** 校验所有子表单 */
+    validateSubFrom01() {
+      // 需要校验的表单 ref
+      const validFormRefArr = [
+        "demo03CourseFormRef",
+        "demo03GradeFormRef",
+      ];
+      const validArr = []; // 校验
+      for (const item of validFormRefArr) {
+        validArr.push(this.validateSubFrom(item));
+      }
+      return new Promise((resolve, reject) => {
+        // 校验所有
+        Promise.all(validArr).then(() => {
+          resolve();
+        }).catch((err) => {
+          reject(err);
+        })
+      })
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c5fe9f02129a1c242ee4abe26b213cb91cb9fdf
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      v-loading="formLoading"
+      label-width="0px"
+      :inline-message="true"
+    >
+      <el-table :data="formData" class="-mt-10px">
+        <el-table-column label="序号" type="index" width="100" />
+        <el-table-column label="名字" min-width="150">
+          <template v-slot="{ row, $index }">
+            <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
+              <el-input v-model="row.name" placeholder="请输入名字" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="分数" min-width="150">
+          <template v-slot="{ row, $index }">
+            <el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
+              <el-input v-model="row.score" placeholder="请输入分数" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" fixed="right" label="操作" width="60">
+          <template v-slot="{ $index }">
+            <el-link @click="handleDelete($index)">—</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <el-row justify="center" class="mt-3">
+      <el-button @click="handleAdd" round>+ 添加学生课程</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-inner'
+export default {
+  name: "Demo03CourseForm",
+  components: {
+  },
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: [],
+      // 表单校验
+      formRules: {
+        studentId: [{ required: true, message: "学生编号不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
+        score: [{ required: true, message: "分数不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        // 1. 重置表单
+        this.formData = []
+        // 2. val 非空，则加载数据
+        if (!val) {
+          return;
+        }
+        try {
+          this.formLoading = true;
+          const that = this;
+          Demo03StudentApi.getDemo03CourseListByStudentId(val).then(res=>{
+            that.formData = res.data;
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 新增按钮操作 */
+    handleAdd() {
+      const row = {
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        score: undefined,
+      }
+      row.studentId = this.studentId
+      this.formData.push(row)
+    },
+    /** 删除按钮操作 */
+    handleDelete(index) {
+      this.formData.splice(index, 1)
+    },
+    /** 表单校验 */
+    validate(){
+      return this.$refs["formRef"].validate()
+    },
+    /** 表单值 */
+    getData(){
+      return this.formData
+    }
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..504bad93951825891b4a53e0a09fdb1bc750cf7a
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="分数" align="center" prop="score" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-inner'
+export default {
+  name: "Demo03CourseList",
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 列表的数据
+      list: [],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        this.queryParams.studentId = val;
+        if (val){
+          this.handleQuery();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        const that = this;
+        Demo03StudentApi.getDemo03CourseListByStudentId(this.studentId).then(response=>{
+          that.list = response.data;
+        })
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a663f8529e72fe6e162df3db8a27181e0245550
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="班主任" prop="teacher">
+        <el-input v-model="formData.teacher" placeholder="请输入班主任" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-inner'
+export default {
+  name: "Demo03GradeForm",
+  components: {
+  },
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: [],
+      // 表单校验
+      formRules: {
+        studentId: [{ required: true, message: "学生编号不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
+        teacher: [{ required: true, message: "班主任不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        // 1. 重置表单
+        this.formData = {
+          id: undefined,
+          studentId: undefined,
+          name: undefined,
+          teacher: undefined,
+        }
+        // 2. val 非空，则加载数据
+        if (!val) {
+          return;
+        }
+        try {
+          this.formLoading = true;
+          const that = this;
+          Demo03StudentApi.getDemo03GradeByStudentId(val).then(res=>{
+            const data = res.data;
+            if (!data) {
+              return
+            }
+            that.formData = data;
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 表单校验 */
+    validate(){
+      return this.$refs["formRef"].validate()
+    },
+    /** 表单值 */
+    getData(){
+      return this.formData
+    }
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2adf2ec9eca71d2beb00d1faea74511910f9118
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="班主任" align="center" prop="teacher" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-inner'
+export default {
+  name: "Demo03GradeList",
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 列表的数据
+      list: [],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        this.queryParams.studentId = val;
+        if (val){
+          this.handleQuery();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        const that = this;
+        Demo03StudentApi.getDemo03GradeByStudentId(this.studentId).then(response=>{
+          const data = response.data;
+          if (!data) {
+            return
+          }
+          that.list.push(data)
+        })
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/inner/index.vue b/src/views/infra/demo/demo03/inner/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..92da05078607031ae477ff79951afd206771aafa
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生日期" />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo03-student:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['infra:demo03-student:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <!-- 子表的列表 -->
+      <el-table-column type="expand">
+        <template #default="scope">
+          <el-tabs value="demo03Course">
+            <el-tab-pane label="学生课程" name="demo03Course">
+              <Demo03CourseList :student-id="scope.row.id" />
+            </el-tab-pane>
+            <el-tab-pane label="学生班级" name="demo03Grade">
+              <Demo03GradeList :student-id="scope.row.id" />
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+      </el-table-column>
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="出生日期" align="center" prop="birthday" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.birthday) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+    <!-- 对话框(添加 / 修改) -->
+    <Demo03StudentForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-inner';
+import Demo03StudentForm from './Demo03StudentForm.vue';
+import Demo03CourseList from './components/Demo03CourseList.vue'
+import Demo03GradeList from './components/Demo03GradeList.vue'
+export default {
+  name: "Demo03Student",
+  components: {
+    Demo03StudentForm,
+    Demo03CourseList,
+    Demo03GradeList,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 学生列表
+      list: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 选中行
+      currentRow: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        sex: null,
+        birthday: null,
+        description: null,
+        createTime: [],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        Demo03StudentApi.getDemo03StudentPage(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.$refs["formRef"].open(id);
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(()=>{
+          return Demo03StudentApi.deleteDemo03Student(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      } catch {}
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const that = this;
+      try {
+        this.$modal.confirm('是否确认导出所有学生数据项?').then(() => {
+          that.exportLoading = true;
+          return Demo03StudentApi.exportDemo03StudentExcel(params);
+        }).then(response => {
+          that.$download.excel(response, '学生.xls');
+        });
+      } catch {
+      } finally {
+        that.exportLoading = false;
+      }
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07a36a5bf52f08df992537123d6bedcde968b2ff
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="名字" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名字" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="formData.sex">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                      :key="dict.value" :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="出生日期" prop="birthday">
+          <el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生日期" />
+        </el-form-item>
+        <el-form-item label="简介">
+          <Editor v-model="formData.description" :min-height="192"/>
+        </el-form-item>
+      </el-form>
+      <!-- 子表的表单 -->
+      <el-tabs v-model="subTabsName">
+        <el-tab-pane label="学生课程" name="demo03Course">
+          <Demo03CourseForm ref="demo03CourseFormRef" :student-id="formData.id" />
+        </el-tab-pane>
+        <el-tab-pane label="学生班级" name="demo03Grade">
+          <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData.id" />
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-normal'
+import Editor from '@/components/Editor';
+import Demo03CourseForm from './components/Demo03CourseForm.vue'
+import Demo03GradeForm from './components/Demo03GradeForm.vue'
+export default {
+  name: "Demo03StudentForm",
+  components: {
+    Editor,
+    Demo03CourseForm,
+    Demo03GradeForm,
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+      },
+      // 表单校验
+      formRules: {
+        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+        sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+        birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+        description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+      },
+      /** 子表的表单 */
+      subTabsName: 'demo03Course'
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    open(id) {
+      this.dialogVisible = true;
+      this.reset();
+      const that = this;
+      // 修改时，设置数据
+      if (id) {
+        this.formLoading = true;
+        try {
+          Demo03StudentApi.getDemo03Student(id).then(res=>{
+            that.formData = res.data;
+            that.title = "修改学生";
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      }
+      this.title = "新增学生";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.formLoading = true;
+      try {
+        const that = this;
+        let data = this.formData;
+        let validate = false;
+        // 校验主表
+        this.getRef("formRef").validate(valid => {
+          validate = valid;
+        });
+        // 校验子表
+        this.validateSubFrom01().then(() => {
+          // 全部校验通过-拼接子表的数据
+          // 拼接子表的数据
+          data.demo03Courses = that.getRef('demo03CourseFormRef').getData();
+          data.demo03Grade = that.getRef('demo03GradeFormRef').getData();
+        }).catch((err) => {
+          validate = false;
+          that.subTabsName = err.replace("FormRef", ""); // 定位到没有校验通过的子表单
+        })
+        // 所有表单校验通过后方可提交
+        if (!validate) {
+          return;
+        }
+        // 修改的提交
+        if (data.id) {
+          Demo03StudentApi.updateDemo03Student(data).then(response => {
+            that.$modal.msgSuccess("修改成功");
+            that.dialogVisible = false;
+            that.$emit('success');
+          });
+          return;
+        }
+        // 添加的提交
+        Demo03StudentApi.createDemo03Student(data).then(response => {
+          that.$modal.msgSuccess("新增成功");
+          that.dialogVisible = false;
+          that.$emit('success');
+        });
+      }finally {
+        this.formLoading = false;
+      }
+    },
+    getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
+      return this.$refs[refName];
+    },
+    /** 校验子表单 */
+    validateSubFrom(item) {
+      return new Promise((resolve, reject) => {
+        this.getRef(item).validate()
+          .then(() => {
+            resolve();
+          })
+          .catch(() => {
+            reject(item);
+          })
+      })
+    },
+    /** 校验所有子表单 */
+    validateSubFrom01() {
+      // 需要校验的表单 ref
+      const validFormRefArr = [
+        "demo03CourseFormRef",
+        "demo03GradeFormRef",
+      ];
+      const validArr = []; // 校验
+      for (const item of validFormRefArr) {
+        validArr.push(this.validateSubFrom(item));
+      }
+      return new Promise((resolve, reject) => {
+        // 校验所有
+        Promise.all(validArr).then(() => {
+          resolve();
+        }).catch((err) => {
+          reject(err);
+        })
+      })
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        id: undefined,
+        name: undefined,
+        sex: undefined,
+        birthday: undefined,
+        description: undefined,
+      };
+      this.resetForm("formRef");
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..064de802f0dc5eb950cf40b05f75fb99f67f9c55
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      v-loading="formLoading"
+      label-width="0px"
+      :inline-message="true"
+    >
+      <el-table :data="formData" class="-mt-10px">
+        <el-table-column label="序号" type="index" width="100"/>
+        <el-table-column label="名字" min-width="150">
+          <template v-slot="{ row, $index }">
+            <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
+              <el-input v-model="row.name" placeholder="请输入名字"/>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="分数" min-width="150">
+          <template v-slot="{ row, $index }">
+            <el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
+              <el-input v-model="row.score" placeholder="请输入分数"/>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" fixed="right" label="操作" width="60">
+          <template v-slot="{ $index }">
+            <el-link @click="handleDelete($index)">—</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <el-row justify="center" class="mt-3">
+      <el-button @click="handleAdd" round>+ 添加学生课程</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-normal'
+
+export default {
+  name: "Demo03CourseForm",
+  components: {},
+  props: [
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: [],
+      // 表单校验
+      formRules: {
+        studentId: [{required: true, message: "学生编号不能为空", trigger: "blur"}],
+        name: [{required: true, message: "名字不能为空", trigger: "blur"}],
+        score: [{required: true, message: "分数不能为空", trigger: "blur"}],
+      },
+    };
+  },
+  watch: {
+    /** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId: {
+      handler(val) {
+        // 1. 重置表单
+        this.formData = []
+        // 2. val 非空，则加载数据
+        if (!val) {
+          return;
+        }
+        try {
+          this.formLoading = true;
+          const that = this;
+          Demo03StudentApi.getDemo03CourseListByStudentId(val).then(res => {
+            that.formData = res.data;
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 新增按钮操作 */
+    handleAdd() {
+      const row = {
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        score: undefined,
+      }
+      row.studentId = this.studentId
+      this.formData.push(row)
+    },
+    /** 删除按钮操作 */
+    handleDelete(index) {
+      this.formData.splice(index, 1)
+    },
+    /** 表单校验 */
+    validate() {
+      return this.$refs["formRef"].validate()
+    },
+    /** 表单值 */
+    getData() {
+      return this.formData
+    }
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f426d2db8f93da9381fe378c6ddc5eac43ebed78
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="名字" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入名字" />
+    </el-form-item>
+    <el-form-item label="班主任" prop="teacher">
+      <el-input v-model="formData.teacher" placeholder="请输入班主任" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-normal'
+export default {
+  name: "Demo03GradeForm",
+  components: {
+  },
+  props:[
+    'studentId'
+  ],// 学生编号（主表的关联字段）
+  data() {
+    return {
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: [],
+      // 表单校验
+      formRules: {
+        studentId: [{ required: true, message: "学生编号不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
+        teacher: [{ required: true, message: "班主任不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
+    studentId:{
+      handler(val) {
+        // 1. 重置表单
+        this.formData = {
+          id: undefined,
+          studentId: undefined,
+          name: undefined,
+          teacher: undefined,
+        }
+        // 2. val 非空，则加载数据
+        if (!val) {
+          return;
+        }
+        try {
+          this.formLoading = true;
+          const that = this;
+          Demo03StudentApi.getDemo03GradeByStudentId(val).then(res=>{
+            const data = res.data;
+            if (!data) {
+              return
+            }
+            that.formData = data;
+          })
+        } finally {
+          this.formLoading = false;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 表单校验 */
+    validate(){
+      return this.$refs["formRef"].validate()
+    },
+    /** 表单值 */
+    getData(){
+      return this.formData
+    }
+  }
+};
+</script>
diff --git a/src/views/infra/demo/demo03/normal/index.vue b/src/views/infra/demo/demo03/normal/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd82a4f84d86874b4b83b853a38dd274e83eb51b
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/index.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生日期" />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+                   v-hasPermi="['infra:demo03-student:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['infra:demo03-student:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="出生日期" align="center" prop="birthday" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.birthday) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                     v-hasPermi="['infra:demo03-student:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+    <!-- 对话框(添加 / 修改) -->
+    <Demo03StudentForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script>
+import * as Demo03StudentApi from '@/api/infra/demo03-normal';
+import Demo03StudentForm from './Demo03StudentForm.vue';
+export default {
+  name: "Demo03Student",
+  components: {
+    Demo03StudentForm,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 学生列表
+      list: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 选中行
+      currentRow: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        sex: null,
+        birthday: null,
+        description: null,
+        createTime: [],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      try {
+        this.loading = true;
+        Demo03StudentApi.getDemo03StudentPage(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.$refs["formRef"].open(id)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      try {
+        const id = row.id;
+        this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(()=>{
+          return Demo03StudentApi.deleteDemo03Student(id);
+        }).then(() => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      } catch {}
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const that = this;
+      try {
+        this.$modal.confirm('是否确认导出所有学生数据项?').then(() => {
+          that.exportLoading = true;
+          return Demo03StudentApi.exportDemo03StudentExcel(params);
+        }).then(response => {
+          that.$download.excel(response, '学生.xls');
+        });
+      } catch {
+      } finally {
+        that.exportLoading = false;
+      }
+    },
+  }
+};
+</script>
diff --git a/src/views/infra/webSocket/index.vue b/src/views/infra/webSocket/index.vue
index d48ffd3c17c133d58f830957e524fff262905f9b..1b8c2eee97db3b51a6dd0010a6cbb0bb7f2577fe 100644
--- a/src/views/infra/webSocket/index.vue
+++ b/src/views/infra/webSocket/index.vue
@@ -16,8 +16,19 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-form-item label="发给谁" size="small">
+        <el-select v-model="sendUserId" placeholder="请选择">
+          <el-option label="所有人" :value="null"/>
+          <el-option
+              v-for="item in userList"
+              :key="item.id"
+              :label="item.nickname"
+              :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="发送内容" size="small">
-        <el-input type="textarea" v-model="message" :rows="5"/>
+        <el-input type="textarea" v-model="sendText" :rows="5"/>
       </el-form-item>
       <el-form-item label="" size="small">
         <el-button type="success" @click="send">发送消息</el-button>
@@ -33,20 +44,29 @@
 </template>
 
 <script>
-import store from "@/store";
 import {getNowDateTime} from "@/utils/ruoyi";
+import {getAccessToken} from "@/utils/auth";
+import {listSimpleUsers} from "@/api/system/user";
 
 export default {
   data() {
     return {
-      url: process.env.VUE_APP_BASE_API + "/websocket/message",
-      message: "",
+      url: "",
+      sendText: "",
       content: "",
       ws: null,
+      userList: [], // 用户列表
+      sendUserId: null // 发给谁，默认所有人
     };
   },
   created() {
-    this.url = this.url.replace("http", "ws")
+    const wsUrl = process.env.VUE_APP_BASE_API + "/infra/ws" + '?token=' + getAccessToken();
+    this.url = wsUrl.replace("http", "ws");
+    // 获取用户精简信息列表
+    const self = this;
+    listSimpleUsers().then(res => {
+      self.userList = res.data;
+    });
   },
   methods: {
     connect() {
@@ -54,14 +74,43 @@ export default {
         this.$modal.msgError("您的浏览器不支持WebSocket");
         return;
       }
-      const userId = store.getters.userId;
-      this.ws = new WebSocket(this.url + "?userId=" + userId);
+      this.ws = new WebSocket(this.url);
       const self = this;
       this.ws.onopen = function (event) {
         self.content = self.content + "\n**********************连接开始**********************\n";
       };
       this.ws.onmessage = function (event) {
-        self.content = self.content + "接收时间：" + getNowDateTime() + "\n" + event.data + "\n";
+        try {
+          const data = event.data
+          // 1. 收到心跳
+          if (data === 'pong') {
+            return
+          }
+          // 2.1 解析 type 消息类型
+          const jsonMessage = JSON.parse(data)
+          const type = jsonMessage.type
+          const content = JSON.parse(jsonMessage.content)
+          if (!type) {
+            self.$modal.msgError('未知的消息类型：' + data)
+            return
+          }
+          // 2.2 消息类型：demo-message-receive
+          if (type === 'demo-message-receive') {
+            const single = content.single
+            self.content = self.content + "接收时间：" + getNowDateTime() + "\n" +
+                `【${single ? '单发' : '群发'}】用户编号(${content.fromUserId})：${content.text}` + "\n";
+            return
+          }
+          // 2.3 消息类型：notice-push
+          if (type === 'notice-push') {
+            self.content = self.content + "接收时间：" + getNowDateTime() + "\n" + `【系统通知】：${content.title}` + "\n";
+            return
+          }
+          self.$modal.msgError('未处理消息：' + data)
+        } catch (error) {
+          self.$modal.msgError('处理消息发生异常：' + event.data)
+          console.error(error)
+        }
       };
       this.ws.onclose = function (event) {
         self.content = self.content + "**********************连接关闭**********************\n";
@@ -81,11 +130,24 @@ export default {
         this.$modal.msgError("未连接到服务器");
         return;
       }
-      if (!this.message) {
+      if (!this.sendText) {
         this.$modal.msgError("请输入发送内容");
         return;
       }
-      this.ws.send(this.message);
+
+      // 1.1 先 JSON 化 message 消息内容
+      const messageContent = JSON.stringify({
+        text: this.sendText,
+        toUserId: this.sendUserId
+      })
+      // 1.2 再 JSON 化整个消息
+      const jsonMessage = JSON.stringify({
+        type: 'demo-message-send',
+        content: messageContent
+      })
+      // 2. 最后发送消息
+      this.ws.send(jsonMessage)
+      this.sendText = ''
     }
   },
 };
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index a322b6a721248a2e8b26f281684cfdd9233bf379..9e6bd297640c94b56cb7e544fe6a5d34012b5200 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -6,7 +6,8 @@
       </el-form-item>
       <el-form-item label="公告状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="公告状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
+                     :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -18,13 +19,14 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:notice:create']"s>新增</el-button>
+                   v-hasPermi="['system:notice:create']" s>新增
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="noticeList">
-      <el-table-column label="序号" align="center" prop="id" width="100" />
+      <el-table-column label="序号" align="center" prop="id" width="100"/>
       <el-table-column label="公告标题" align="center" prop="title" :show-overflow-tooltip="true"/>
       <el-table-column label="公告类型" align="center" prop="type" width="100">
         <template v-slot="scope">
@@ -36,7 +38,7 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="创建者" align="center" prop="createBy" width="100" />
+      <el-table-column label="创建者" align="center" prop="createBy" width="100"/>
       <el-table-column label="创建时间" align="center" prop="createTime" width="100">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
@@ -45,9 +47,14 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:notice:update']">修改</el-button>
+                     v-hasPermi="['system:notice:update']">修改
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:notice:delete']">删除</el-button>
+                     v-hasPermi="['system:notice:delete']">删除
+          </el-button>
+          <el-button size="mini" type="text" @click="handlePush(scope.row.id)"
+                     v-hasPermi="['system:notice:update']">推送
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -61,7 +68,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="title">
-              <el-input v-model="form.title" placeholder="请输入公告标题" />
+              <el-input v-model="form.title" placeholder="请输入公告标题"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -83,7 +90,8 @@
                     v-for="dict in statusDictDatas"
                     :key="parseInt(dict.value)"
                     :label="parseInt(dict.value)"
-                >{{dict.label}}</el-radio>
+                >{{ dict.label }}
+                </el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -103,11 +111,11 @@
 </template>
 
 <script>
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+import {addNotice, delNotice, getNotice, listNotice, pushNotice, updateNotice} from "@/api/system/notice";
 import Editor from '@/components/Editor';
 
 import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import {DICT_TYPE, getDictDatas} from '@/utils/dict'
 
 export default {
   name: "SystemNotice",
@@ -140,10 +148,10 @@ export default {
       // 表单校验
       rules: {
         title: [
-          { required: true, message: "公告标题不能为空", trigger: "blur" }
+          {required: true, message: "公告标题不能为空", trigger: "blur"}
         ],
         type: [
-          { required: true, message: "公告类型不能为空", trigger: "change" }
+          {required: true, message: "公告类型不能为空", trigger: "change"}
         ]
       },
 
@@ -210,7 +218,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id !== undefined) {
@@ -232,12 +240,27 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除公告编号为"' + ids + '"的数据项?').then(function() {
-          return delNotice(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal.confirm('是否确认删除公告编号为"' + ids + '"的数据项?').then(function () {
+        return delNotice(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 推送按钮操作 */
+    handlePush(id) {
+      try {
+        const self = this;
+        // 推送的二次确认
+        this.$modal.confirm('是否推送所选中通知？').then(() => {
+          // 发起推送
+          pushNotice(id).then(() => {
+            self.$modal.success('推送成功');
+          })
+        })
+      } catch {
+      }
     }
   }
 };