public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-26 14:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): 统一工具栏按钮布局为el-row/el-col结构

Browse Source 
重构多个视图组件中的工具栏按钮布局，使用el-row和el-col组件统一管理按钮间距和排列。调整权限指令v-hasPerm的位置使其更规范。优化表格查询表单的样式和结构。

style(frontend): 规范v-hasPerm指令的使用位置

将v-hasPerm指令统一调整到按钮属性最前面，保持代码风格一致。移除不必要的showSearch变量，简化分页组件逻辑。

fix(gencode): 修正生成代码页面的查询重置功能

修复生成代码页面中重置按钮调用错误方法的问题，将resetQuery改为handleRefresh以保持功能一致。调整表单字段命名规范，统一使用下划线风格。
This commit is contained in:
zhangtao
2025-10-06 00:29:38 +08:00
parent d943d295d0
commit 2918c0aebb
23 changed files with 684 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/gencode/backcode/components/genInfoForm.vue
+2 -2
View File
@@ -235,7 +235,7 @@
</template>
<script setup>
import { listMenu } from "@/api/system/menu";
import MenuAPI from "@/api/system/menu";
const subColumns = ref([]);
const menuOptions = ref([]);
@@ -284,7 +284,7 @@ function setSubTableColumns(value) {
/** 查询菜单下拉树结构 */
function getMenuTreeselect() {
listMenu().then(response => {
MenuAPI.getMenuList().then(response => {
menuOptions.value = proxy.handleTree(response.data, "menuId");
});
}
frontend/src/views/gencode/backcode/components/importTable.vue
+30 -22
View File
@@ -1,10 +1,10 @@
<template>
<!-- 导入表 -->
<el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-dialog v-model="visible" title="导入表" width="800px" top="5vh" append-to-body>
<el-form ref="queryRef" :model="queryFormData" :inline="true">
<el-form-item label="表名称" prop="tableName">
<el-input
v-model="queryParams.tableName"
v-model="queryFormData.table_name"
placeholder="请输入表名称"
clearable
style="width: 180px"
@@ -13,7 +13,7 @@
</el-form-item>
<el-form-item label="表描述" prop="tableComment">
<el-input
v-model="queryParams.tableComment"
v-model="queryFormData.table_comment"
placeholder="请输入表描述"
clearable
style="width: 180px"
@@ -26,18 +26,25 @@
</el-form-item>
</el-form>
<el-row>
<el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
<el-table ref="table" :data="dbTableList" height="300px" @row-click="clickRow" @selection-change="handleSelectionChange">
<template #empty>
<el-empty :image-size="80" description="暂无数据" />
</template>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
<el-table-column label="序号" type="index" min-width="55" align="center" fixed>
<template #default="scope">
<span>{{(queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column prop="database_name" label="数据库名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="table_name" label="表名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="table_comment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="table_type" label="表类型"></el-table-column>
</el-table>
<pagination
v-show="total>0"
v-model:page="queryFormData.page_no"
v-model:limit="queryFormData.page_size"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
@@ -59,11 +66,11 @@ const tables = ref([]);
const dbTableList = ref([]);
const { proxy } = getCurrentInstance();
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
tableName: undefined,
tableComment: undefined
const queryFormData = reactive({
page_no: 1,
page_size: 10,
table_name: undefined,
table_comment: undefined
});
const emit = defineEmits(["ok"]);
@@ -81,20 +88,21 @@ function clickRow(row) {
/** 多选框选中数据 */
function handleSelectionChange(selection) {
tables.value = selection.map(item => item.tableName);
tables.value = selection.map(item => item.table_name);
}
/** 查询表数据 */
function getList() {
GencodeAPI.listDbTable(queryParams).then(res => {
dbTableList.value = res.rows;
total.value = res.total;
GencodeAPI.listDbTable(queryFormData).then(res => {
console.log(res.data);
dbTableList.value = res.data.data.items;
total.value = res.data.data.total;
});
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.pageNum = 1;
queryFormData.page_no = 1;
getList();
}
frontend/src/views/gencode/backcode/index.vue
+49 -62
View File
@@ -2,7 +2,7 @@
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<el-form v-show="showSearch" ref="queryRef" :model="queryFormData" :inline="true" label-suffix=":">
<el-form ref="queryRef" :model="queryFormData" :inline="true" label-suffix=":">
<el-form-item label="表名称" prop="table_name">
<el-input
v-model="queryFormData.table_name"
@@ -32,8 +32,8 @@
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button v-hasPermi="['generator:gencode:query']" type="primary" icon="Sesearcharch" @click="handleQuery">搜索</el-button>
<el-button v-hasPermi="['generator:gencode:query']" icon="refresh" @click="resetQuery">重置</el-button>
<el-button v-hasPerm="['generator:gencode:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
<el-button v-hasPerm="['generator:gencode:query']" icon="refresh" @click="handleRefresh">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -57,69 +57,59 @@
<el-row :gutter="10">
<el-col :span="1.5">
<el-button
v-hasPermi="['generator:gencode:code']"
v-hasPerm="['generator:gencode:create']"
type="primary"
plain
icon="Plus"
@click="openCreateTable"
>创建</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPerm="['generator:gencode:update']"
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleEditTable"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPerm="['generator:gencode:delete']"
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPerm="['generator:gencode:import']"
type="info"
plain
icon="Upload"
@click="openImportTable"
>导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPerm="['generator:gencode:code']"
type="warning"
plain
icon="Download"
:disabled="multiple"
@click="handleGenTable"
>生成</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="openCreateTable"
v-hasRole="['admin']"
>创建</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="Upload"
@click="openImportTable"
v-hasPermi="['generator:gencode:import']"
>导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleEditTable"
v-hasPermi="['generator:gencode:update']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['generator:gencode:delete']"
>删除</el-button>
</el-col>
</el-row>
</div>
<div class="data-table__toolbar--tools">
<el-row :gutter="10">
<el-col :span="1.5">
<el-tooltip content="导入">
<el-button type="info" icon="upload" circle @click="handleOpenImportDialog" v-hasPerm="['demo:example:import']" />
</el-tooltip>
</el-col>
<el-col :span="1.5">
<el-tooltip content="导出">
<el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['demo:example:export']" />
</el-tooltip>
</el-col>
<el-col :span="1.5">
<el-tooltip content="刷新">
<el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['demo:example:refresh']" />
<el-button v-hasPerm="['demo:example:refresh']" type="primary" icon="refresh" circle @click="handleRefresh"/>
</el-tooltip>
</el-col>
<el-col :span="1.5">
@@ -140,7 +130,6 @@
</el-tooltip>
</el-col>
</el-row>
</div>
</div>
@@ -187,19 +176,19 @@
<el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="预览" placement="top">
<el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['generator:gencode:query']"></el-button>
<el-button v-hasPerm="['generator:gencode:query']" link type="primary" icon="View" @click="handlePreview(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['generator:gencode:update']"></el-button>
<el-button v-hasPerm="['generator:gencode:update']" link type="primary" icon="Edit" @click="handleEditTable(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['generator:gencode:delete']"></el-button>
<el-button v-hasPerm="['generator:gencode:delete']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="同步" placement="top">
<el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['generator:gencode:edit']"></el-button>
<el-button v-hasPerm="['generator:gencode:edit']" link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="生成代码" placement="top">
<el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['generator:gencode:code']"></el-button>
<el-button v-hasPerm="['generator:gencode:code']" link type="primary" icon="Download" @click="handleGenTable(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
@@ -208,7 +197,6 @@
<!-- 分页区域 -->
<template #footer>
<pagination
v-show="total>0"
v-model:total="total"
v-model:page="queryFormData.page_no"
v-model:limit="queryFormData.page_size"
@@ -255,7 +243,6 @@ const createRef = ref();
const tableList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
@@ -391,7 +378,7 @@ function openCreateTable() {
}
/** 重置按钮操作 */
function resetQuery() {
function handleRefresh() {
dateRange.value = [];
// 手动重置表单
queryFormData.value = {
frontend/src/views/gencode/demo/index.vue
+56 -38
View File
@@ -62,45 +62,63 @@
<!-- 功能区域 -->
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['generator:demo:create']">新增</el-button>
<el-button type="danger" icon="delete" :disabled="selectIds.length === 0"
@click="handleDelete(selectIds)" v-hasPerm="['generator:demo:delete']">批量删除</el-button>
<el-dropdown trigger="click">
<el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="Check" @click="handleMoreClick(true)" v-hasPerm="['generator:demo:batch_available']">批量启用</el-dropdown-item>
<el-dropdown-item icon="CircleClose"
@click="handleMoreClick(false)" v-hasPerm="['generator:demo:batch_available']">批量停用</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['generator:demo:create']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="delete" :disabled="selectIds.length === 0"
@click="handleDelete(selectIds)" v-hasPerm="['generator:demo:delete']">批量删除</el-button>
</el-col>
<el-col :span="1.5">
<el-dropdown trigger="click">
<el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="Check" @click="handleMoreClick(true)" v-hasPerm="['generator:demo:batch_available']">批量启用</el-dropdown-item>
<el-dropdown-item icon="CircleClose"
@click="handleMoreClick(false)" v-hasPerm="['generator:demo:batch_available']">批量停用</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</div>
<div class="data-table__toolbar--tools">
<el-tooltip content="导入">
<el-button type="info" icon="upload" circle @click="handleOpenImportDialog" v-hasPerm="['generator:demo:import']" />
</el-tooltip>
<el-tooltip content="导出">
<el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['generator:demo:export']" />
</el-tooltip>
<el-tooltip content="刷新">
<el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['generator:demo:refresh']" />
</el-tooltip>
<el-tooltip content="列表筛选">
<el-dropdown trigger="click">
<el-button type="default" icon="operation" circle v-hasPerm="['generator:demo:filter']" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="column in tableColumns" :key="column.prop"
:command="column">
<el-checkbox v-model="column.show">
{{ column.label }}
</el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-row :gutter="10">
<el-col :span="1.5">
<el-tooltip content="导入">
<el-button type="info" icon="upload" circle @click="handleOpenImportDialog" v-hasPerm="['generator:demo:import']" />
</el-tooltip>
</el-col>
<el-col :span="1.5">
<el-tooltip content="导出">
<el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['generator:demo:export']" />
</el-tooltip>
</el-col>
<el-col :span="1.5">
<el-tooltip content="刷新">
<el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['generator:demo:refresh']" />
</el-tooltip>
</el-col>
<el-col :span="1.5">
<el-tooltip content="列表筛选">
<el-dropdown trigger="click">
<el-button type="default" icon="operation" circle v-hasPerm="['generator:demo:filter']" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="column in tableColumns" :key="column.prop"
:command="column">
<el-checkbox v-model="column.show">
{{ column.label }}
</el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</el-col>
</el-row>
</div>
</div>
@@ -400,7 +418,7 @@ async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: numbe
Object.assign(formData, response.data.data);
}
} else {
dialogVisible.title = "新增公告通知";
dialogVisible.title = "新增示例";
formData.id = undefined;
}
dialogVisible.visible = true;