15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成 _生活百科

在前面随笔《基于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';1）查看视图页面
我们先以view.vue查看页面为例进行介绍，它是一个查看明细的界面，因此也是一个弹出对话框页面，我们把它的代码处理如下所示。
<template><el-dialog v-if="isVisible" v-model="isVisible" title="查看信息" append-to-body @close="closeDialog"><el-form ref="viewRef" :model="viewForm" label-width="100px"><el-tabs type="border-card"><el-tab-pane label="基本信息"><el-descriptions title="" :column="2" border><el-descriptions-item label="显示名称">{{ viewForm.name }}</el-descriptions-item><el-descriptions-item label="Web地址">{{ viewForm.url }}</el-descriptions-item><el-descriptions-item label="Web图标"><icon :icon="viewForm.webIcon" /></el-descriptions-item><el-descriptions-item label="排序">{{ viewForm.seq }}</el-descriptions-item><el-descriptions-item label="可见"><el-tag v-if="viewForm.visible" type="success" effect="dark">可见</el-tag><el-tag v-else type="danger" effect="dark">隐藏</el-tag></el-descriptions-item><el-descriptions-item label="展开"><el-tag v-if="viewForm.expand" type="success" effect="dark">展开</el-tag><el-tag v-else type="" effect="dark">收缩</el-tag></el-descriptions-item><el-descriptions-item label="创建时间"><el-date-picker v-model="viewForm.createTime" align="right" type="datetime" placeholder="选择日期"value-format="YYYY-MM-DD HH:mm" disabled /></el-descriptions-item><el-descriptions-item label="特殊标签">{{ viewForm.tag }}</el-descriptions-item></el-descriptions></el-tab-pane></el-tabs></el-form><template #footer><span class="dialog-footer"><el-button @click="closeDialog">关闭</el-button></span></template></el-dialog></template>其他的js代码采用tyepscript语法，我们把它放在
<script setup lang="ts">//逻辑代码</script>然后我们在js代码中抛出show的方法，便于父组件的调用。
//显示窗口const show = (id: string | number) => {if (!$u.test.isNullOrUnDef(id)) {menu.Get(id).then((data) => {Object.assign(viewForm, data);isVisible.value = https://www.huyubaike.com/biancheng/true; //显示对话框});}};//暴露组件属性和方法defineExpose({show,});同时在页面里面，也定义一个表单的对象引用，便于上面模板组件的显示。
const viewRef = ref<FormInstance>(); //表单引用// 表单属性定义let viewForm = reactive({iD: '',pid: '',name: '',icon: '',seq: '',functionId: '',visible: 0,expand: 0,winformType: '',url: '',webIcon: '',creator: '',createTime: '',tag: '',});