基于SqlSugar的开发框架循序渐进介绍（12）-- 拆分页面模块内容为组件，实现分而治之的处理

在前面随笔《基于SqlSugar的开发框架循序渐进介绍（12）-- 拆分页面模块内容为组件，实现分而治之的处理》中我们已经介绍过，对于相关的业务表的界面代码，我们已经尽可能把不同的业务逻辑封装在不同的页面组件中，隔离变化的差异，因此界面组件化后，就可以利用代码生成工具进行统一的界面代码的生成了，而且由于变化的隔离处理，我们实际上维护的代码变得更加方便维护了。本篇随笔介绍在整合代码生成工具进行前端界面的生成的一些思路和实际的界面代码的生成。

1、页面的模块化处理

在前面随笔《基于SqlSugar的开发框架循序渐进介绍（12）-- 拆分页面模块内容为组件，实现分而治之的处理》中我们已经介绍过，常规页面包含有列表界面，新增、编辑、查看、导入等界面，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意图所示。

根据以上的页面划分，我们把一个页面分为search.vue、edit.vue、import.vue、view.vue、index.vue，其中index.vue为整合各个组件的主页面，在视图中如下所示。我们每个业务模块都是如此统一划分，因此比较统一，同时也是为后续的代码生成工具批量生成做好准备。

 因此在index.vue页面中，我们整合了几个组件页面即可，如下所示。

<template>
  <div class="main">
    <!--条件及列表展示-->
    <Search ref="searchRef" @show-import="showImport" @show-add="showAdd" @show-view="showView" @show-edit="showEdit" />

    <!--查看详细组件界面-->
    <view-data ref="viewRef" />
    <!--新增、编辑组件界面-->
    <edit-data ref="editRef" @submit="refreshData" />
    <!--模板导入信息-->
    <import-data ref="importRef" @finish="finishImport" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';

import Search from './search.vue';
import ViewData from './view.vue';
import EditData from './edit.vue';
import ImportData from './import.vue';