tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化搜索栏布局，统一四等分、左右对齐规范

Browse Source
This commit is contained in:
XFeng
2025-04-15 20:44:24 +08:00
parent 52790a6c10
commit 45348cca91
12 changed files with 335 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/styles/index.scss
View File

@@ -5,12 +5,34 @@
}
.search-bar {
padding: 18px 0 0 10px;
margin-bottom: 10px;
padding: 18px 18px 0;
margin-bottom: 15px;
background-color: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
box-shadow: var(--el-box-shadow-light);
//搜索表单按钮组全局样式
.search-form-btn-box {
flex: 1;
padding-right: 13px;
.search-form-btn-box-item {
display: flex;
align-items: center;
justify-content: end;
width: 100%;
}
}
:deep(.el-form-item) {
width: 100% !important;
}
.el-form--inline .el-form-item {
display: flex !important;
margin-right: 0px !important;
}
}
.table-container > .el-card__header {

54
src/views/codegen/index.vue
View File

@@ -1,30 +1,38 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="表名"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="表名"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon>
<Refresh />
</template>
重置
</el-button>
</el-form-item>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon>
<Refresh />
</template>
重置
</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

35
src/views/system/config/index.vue
View File

@@ -2,19 +2,28 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="请输入配置键\配置名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="请输入配置键\配置名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

50
src/views/system/dept/index.vue
View File

@@ -1,27 +1,37 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="部门名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="部门名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="部门状态" prop="status">
<el-select v-model="queryParams.status" placeholder="全部" clearable>
<el-option :value="1" label="正常" />
<el-option :value="0" label="禁用" />
</el-select>
</el-form-item>
</el-col>
<el-form-item label="部门状态" prop="status">
<el-select v-model="queryParams.status" placeholder="全部" clearable class="!w-[100px]">
<el-option :value="1" label="正常" />
<el-option :value="0" label="禁用" />
</el-select>
</el-form-item>
<el-form-item>
<el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
搜索
</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
搜索
</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

33
src/views/system/dict/dict-item.vue
View File

@@ -3,18 +3,27 @@
<div class="app-container">
<div class="search-bar mt-5">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="字典标签/字典值"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="字典标签/字典值"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

33
src/views/system/dict/index.vue
View File

@@ -3,18 +3,27 @@
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="字典名称/编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
<el-row :gutter="20">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="字典名称/编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

58
src/views/system/log/index.vue
View File

@@ -2,31 +2,41 @@
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="日志内容"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="createTime" label="操作时间">
<el-date-picker
v-model="queryParams.createTime"
:editable="false"
class="!w-[240px]"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="日志内容"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="24" :md="12" :lg="6">
<el-form-item prop="createTime" label="操作时间">
<el-date-picker
v-model="queryParams.createTime"
:editable="false"
class="!w-[240px]"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

34
src/views/system/menu/index.vue
View File

@@ -1,19 +1,27 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="菜单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="菜单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

53
src/views/system/notice/components/MyNotice.vue
View File

@@ -2,28 +2,37 @@
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="通知标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="关键字"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery()">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery()">
<template #icon>
<Refresh />
</template>
重置
</el-button>
</el-form-item>
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="通知标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="关键字"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
</el-col>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" @click="handleQuery()">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery()">
<template #icon>
<Refresh />
</template>
重置
</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

62
src/views/system/notice/index.vue
View File

@@ -1,31 +1,43 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
<el-form-item label="标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="标题"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="发布状态" prop="publishStatus">
<el-select
v-model="queryParams.publishStatus"
class="!w-[100px]"
clearable
placeholder="全部"
>
<el-option :value="0" label="未发布" />
<el-option :value="1" label="已发布" />
<el-option :value="-1" label="已撤回" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
<el-form
ref="queryFormRef"
:model="queryParams"
:inline="true"
label-suffix=":"
label-width="auto"
>
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="标题"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
</el-col>
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="发布状态" prop="publishStatus">
<el-select v-model="queryParams.publishStatus" clearable placeholder="全部">
<el-option :value="0" label="未发布" />
<el-option :value="1" label="已发布" />
<el-option :value="-1" label="已撤回" />
</el-select>
</el-form-item>
</el-col>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

34
src/views/system/role/index.vue
View File

@@ -1,20 +1,28 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>

79
src/views/system/user/index.vue
View File

@@ -10,46 +10,51 @@
<!-- 用户列表 -->
<el-col :lg="20" :xs="24">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-row :gutter="22">
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="全部"
clearable
class="!w-[100px]"
>
<el-option label="正常" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="全部" clearable>
<el-option label="正常" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
</el-col>
<el-form-item label="创建时间">
<el-date-picker
v-model="queryParams.createTime"
:editable="false"
class="!w-[240px]"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-col :span="24" :md="12" :lg="6">
<el-form-item label="创建时间">
<el-date-picker
v-model="queryParams.createTime"
:editable="false"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
<div class="search-form-btn-box">
<div class="search-form-btn-box-item">
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-row>
</el-form>
</div>