15 基于SqlSugar的開發(fā)框架循序漸進(jìn)介紹-- 整合代碼生成工具進(jìn)行前端界面的生成 _生活百科

在前面隨筆《基于SqlSugar的開發(fā)框架循序漸進(jìn)介紹（12）-- 拆分頁面模塊內(nèi)容為組件，實(shí)現(xiàn)分而治之的處理》中我們已經(jīng)介紹過，對(duì)于相關(guān)的業(yè)務(wù)表的界面代碼，我們已經(jīng)盡可能把不同的業(yè)務(wù)邏輯封裝在不同的頁面組件中，隔離變化的差異，因此界面組件化后，就可以利用代碼生成工具進(jìn)行統(tǒng)一的界面代碼的生成了，而且由于變化的隔離處理，我們實(shí)際上維護(hù)的代碼變得更加方便維護(hù)了。本篇隨筆介紹在整合代碼生成工具進(jìn)行前端界面的生成的一些思路和實(shí)際的界面代碼的生成。
1、頁面的模塊化處理在前面隨筆《基于SqlSugar的開發(fā)框架循序漸進(jìn)介紹（12）-- 拆分頁面模塊內(nèi)容為組件，實(shí)現(xiàn)分而治之的處理》中我們已經(jīng)介紹過，常規(guī)頁面包含有列表界面，新增、編輯、查看、導(dǎo)入等界面，除了列表頁面，其他內(nèi)容以彈出層對(duì)話框的方式進(jìn)行處理，如下界面示意圖所示。

文章插圖
根據(jù)以上的頁面劃分，我們把一個(gè)頁面分為search.vue、edit.vue、import.vue、view.vue、index.vue，其中index.vue為整合各個(gè)組件的主頁面，在視圖中如下所示。我們每個(gè)業(yè)務(wù)模塊都是如此統(tǒng)一劃分，因此比較統(tǒng)一，同時(shí)也是為后續(xù)的代碼生成工具批量生成做好準(zhǔn)備。

文章插圖
因此在index.vue頁面中，我們整合了幾個(gè)組件頁面即可，如下所示。
<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查看頁面為例進(jìn)行介紹，它是一個(gè)查看明細(xì)的界面，因此也是一個(gè)彈出對(duì)話框頁面，我們把它的代碼處理如下所示。
<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圖標(biāo)"><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="創(chuàng)建時(shí)間"><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="特殊標(biāo)簽">{{ viewForm.tag }}</el-descriptions-item></el-descriptions></el-tab-pane></el-tabs></el-form><template #footer><span class="dialog-footer"><el-button @click="closeDialog">關(guān)閉</el-button></span></template></el-dialog></template>