admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(views): 统一搜索表单样式并优化布局 

- 为多个视图的搜索表单添加flex布局和一致的间距样式
- 调整表单内边距和元素间距，提升视觉一致性
- 移除部分视图中的重置按钮，简化搜索表单
- 为MQTT服务管理视图重构表格容器样式
This commit is contained in:
dzq 2025-05-28 10:22:50 +08:00
parent 8a3cd9fec9
commit 9862f8bff8
7 changed files with 88 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/cabinet/mqtt-server/index.vue
View File

@ -120,12 +120,12 @@ getList();
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
<el-form-item label="服务地址：" prop="serverUrl">
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item prop="serverUrl">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.serverUrl" placeholder="请输入服务地址" clearable
class="!w-[200px]" />
</el-form-item>
<el-form-item label="用户名：" prop="username">
<el-form-item prop="username">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.username" placeholder="请输入用户名" clearable
class="!w-[200px]" />
</el-form-item>
@ -133,22 +133,17 @@ getList();
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
重置
</el-form-item>
<el-form-item class="space-item">
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
新增服务
</el-button>
</el-form-item>
</el-form>
<PureTableBar title="MQTT服务管理" @refresh="getList">
<template #buttons>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
新增服务
</el-button>
<el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
@click="handleBulkDelete">
批量删除
</el-button>
</template>
<div class="table-container">
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
@selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" />
@ -174,10 +169,41 @@ getList();
</el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" />
</PureTableBar>
@size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
<MqttServerFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" />
<MqttServerFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val"
@refresh="handleRefresh" />
</div>
</template>
</template>
<style scoped lang="scss">
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
.space-item {
flex: 1;
width: 100%;
}
.table-container {
margin-top: 8px;
background-color: var(--el-bg-color);
border-radius: 4px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
.el-table {
flex: 1;
overflow: hidden;
}
.pagination {
margin-top: 10px;
}
}
</style>

8
src/views/cabinet/operation/index.vue
View File

@ -82,7 +82,7 @@ getList();
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item prop="cellId">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.cellId" placeholder="请输入格口ID" clearable
class="!w-[200px]" />
@ -140,6 +140,12 @@ getList();
</template>
<style scoped lang="scss">
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
.table-container {
margin-top: 8px;
background-color: var(--el-bg-color);

8
src/views/shop/approval/index.vue
View File

@ -127,7 +127,7 @@ getList();
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item>
<el-date-picker v-model="searchFormParams.approvalTime" type="date" placeholder="选择审批时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
@ -274,6 +274,12 @@ getList();
</template>
<style scoped lang="scss">
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
:deep(.el-image-viewer__wrapper) {
z-index: 9999 !important;
}

9
src/views/shop/order/index.vue
View File

@ -129,7 +129,7 @@ getList();
</div>
<div class="flex-1">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<!-- <el-form-item label="时间范围：">
<el-date-picker v-model="searchFormParams.startTime" type="date" placeholder="开始时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
@ -253,6 +253,13 @@ getList();
</template>
<style scoped lang="scss">
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
.right-btn {
margin: 0;
}

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

@ -30,103 +30,46 @@ const {
<template>
<div class="main">
<el-form
ref="formRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
>
<el-form-item label="菜单名称：" prop="menuName">
<el-input
v-model="searchFormParams.menuName"
placeholder="请输入菜单名称"
clearable
class="!w-[200px]"
/>
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item prop="menuName">
<el-input v-model="searchFormParams.menuName" placeholder="请输入菜单名称" clearable class="!w-[200px]" />
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="searchFormParams.status"
placeholder="请选择状态"
clearable
class="!w-[180px]"
>
<el-form-item prop="status">
<el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon(Search)"
:loading="loading"
@click="onSearch"
>
<el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="onSearch">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar
title="菜单列表"
:columns="columns"
:tableRef="tableRef?.getTableRef()"
@refresh="onSearch"
>
<PureTableBar title="菜单列表" :columns="columns" :tableRef="tableRef?.getTableRef()" @refresh="onSearch">
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog()"
>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
新增菜单
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
adaptive
:adaptiveConfig="{ offsetBottom: 32 }"
align-whole="center"
row-key="id"
showOverflowTooltip
table-layout="auto"
:loading="loading"
:size="size"
:data="dataList"
:columns="dynamicColumns"
:header-cell-style="{
<pure-table ref="tableRef" adaptive :adaptiveConfig="{ offsetBottom: 32 }" align-whole="center" row-key="id"
showOverflowTooltip table-layout="auto" :loading="loading" :size="size" :data="dataList"
:columns="dynamicColumns" :header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
>
}">
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('编辑', row)"
>
<el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
@click="openDialog('编辑', row)">
编辑
</el-button>
<el-popconfirm
:title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
@confirm="handleDelete(row)"
>
<el-popconfirm :title="`是否确认删除菜单名称为${row.menuName}的这条数据`" @confirm="handleDelete(row)">
<template #reference>
<el-button
class="reset-margin"
link
type="danger"
:size="size"
:icon="useRenderIcon(Delete)"
>
<el-button class="reset-margin" link type="danger" :size="size" :icon="useRenderIcon(Delete)">
删除
</el-button>
</template>
@ -142,6 +85,7 @@ const {
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
</style>

3
src/views/user/ab98/index.vue
View File

@ -114,7 +114,7 @@ onMounted(() => {
<div class="main">
<div class="float-right w-full">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item prop="search">
<el-input v-model="searchFormParams.search" placeholder="请输入姓名/手机号/身份证" clearable class="!w-[300px]"
@keydown.enter.prevent="onSearch" @change="handleSearchInput" />
@ -181,6 +181,7 @@ onMounted(() => {
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}

7
src/views/user/qy/index.vue
View File

@ -50,17 +50,14 @@ watch(
<div class="search-form-container">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
<el-form-item label="姓名：" prop="name">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.name" placeholder="请输入" clearable
<el-form-item prop="name">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.name" placeholder="请输入姓名" clearable
class="!w-[160px]" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>