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

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

Browse Source 
Merge pull request !46 from Feng/master
This commit is contained in:
Ray.Hao
2025-04-15 14:20:18 +00:00
committed by Gitee
parent 0fa7df5e2a 45348cca91
commit f048376eb3
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 { .search-bar {
padding: 18px 0 0 10px; padding: 18px 18px 0;
margin-bottom: 10px; margin-bottom: 15px;
background-color: var(--el-bg-color-overlay); background-color: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light); border: 1px solid var(--el-border-color-light);
border-radius: 4px; border-radius: 4px;
box-shadow: var(--el-box-shadow-light); 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 { .table-container > .el-card__header {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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