style(views): 调整商店管理页面样式和布局
- 移除商店名称标签和重置按钮,简化搜索表单 - 移除批量删除按钮和表格标题,精简操作区域 - 为分页组件添加统一的上边距样式 - 保持代码风格一致性,优化页面布局
This commit is contained in:
parent
0bb25784f0
commit
cab3eeaecc
|
@ -137,7 +137,7 @@ getList();
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<el-form ref="formRef" :inline="true" :model="searchFormParams"
|
<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 w-[99/100] pl-8 pt-[12px]">
|
||||||
<el-form-item label="商店名称:" prop="shopName">
|
<el-form-item prop="shopName">
|
||||||
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入商店名称" clearable
|
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入商店名称" clearable
|
||||||
class="!w-[200px]" />
|
class="!w-[200px]" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -145,21 +145,14 @@ getList();
|
||||||
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
|
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
|
||||||
搜索
|
搜索
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<PureTableBar title="商店管理" @refresh="getList">
|
<PureTableBar title="" @refresh="getList">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
|
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
|
||||||
新增商店
|
新增商店
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
|
|
||||||
@click="handleBulkDelete">
|
|
||||||
批量删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
|
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
|
||||||
@selection-change="handleSelectionChange" border>
|
@selection-change="handleSelectionChange" border>
|
||||||
|
@ -186,7 +179,7 @@ getList();
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
|
<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"
|
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
|
||||||
@size-change="onSizeChange" @current-change="onCurrentChange" />
|
@size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
|
||||||
</PureTableBar>
|
</PureTableBar>
|
||||||
<ShopFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" />
|
<ShopFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" />
|
||||||
<ShopFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val"
|
<ShopFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val"
|
||||||
|
@ -203,3 +196,9 @@ getList();
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.pagination {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -485,4 +485,7 @@ onMounted(() => {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.pagination {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue