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

refactor(views): 优化表单和表格样式及布局 

- 移除表单项的冗余label文本，使用placeholder替代
- 统一搜索和重置按钮的间距样式
- 替换PureTableBar为自定义table-container样式
- 调整分页组件样式和默认页大小
- 为表格容器添加统一样式包括阴影、圆角和间距
```

这个提交消息遵循了以下原则：
1. 使用refactor类型，因为主要是代码结构调整和样式优化，不改变功能
2. 添加了scope(views)表明修改范围是视图组件
3. 描述简明扼要，说明了主要修改内容
4. 在正文中使用列表形式列举了主要变更点
5. 保持了中文语言环境下的简洁表达
6. 符合50字符限制且不使用句号结尾的要求
This commit is contained in:
dzq 2025-05-28 10:03:32 +08:00
parent adddd98d7d
commit 8a3cd9fec9
5 changed files with 101 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,33 +83,33 @@ getList();
<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="格口ID：" prop="cellId">
<el-form-item prop="cellId">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.cellId" placeholder="请输入格口ID" clearable
class="!w-[200px]" />
</el-form-item>
<el-form-item label="操作类型：" prop="operationType">
<el-form-item prop="operationType">
<el-select v-model="searchFormParams.operationType" placeholder="请选择类型" clearable class="!w-[180px]">
<el-option label="用户操作" :value="1" />
<el-option label="管理员操作" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="操作状态：" prop="status">
<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="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch" class="mr-2">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm" class="mr-2">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar title="格口开启记录" @refresh="getList">
<div class="table-container">
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="operationId" border>
<el-table-column label="操作ID" prop="operationId" width="120" />
<el-table-column label="格口ID" prop="cellId" width="120" />
@ -134,13 +134,28 @@ 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>
</div>
</template>
<style scoped>
.right-btn {
margin: 0;
<style scoped lang="scss">
.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>

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

@ -128,40 +128,40 @@ getList();
<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="审批时间：">
<el-form-item>
<el-date-picker v-model="searchFormParams.approvalTime" type="date" placeholder="选择审批时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
</el-form-item>
<el-form-item label="审批ID：" prop="approvalId">
<el-form-item prop="approvalId">
<el-input @keydown.enter.prevent="onSearch" v-model.number="searchFormParams.approvalId" placeholder="请输入审批ID"
clearable class="!w-[180px]" />
</el-form-item>
<el-form-item label="订单ID：" prop="orderId">
<el-form-item prop="orderId">
<el-input @keydown.enter.prevent="onSearch" v-model.number="searchFormParams.orderId" placeholder="请输入订单ID"
clearable class="!w-[180px]" />
</el-form-item>
<el-form-item label="商品ID：" prop="goodsId">
<el-form-item prop="goodsId">
<el-input @keydown.enter.prevent="onSearch" v-model.number="searchFormParams.goodsId" placeholder="请输入商品ID"
clearable class="!w-[180px]" />
</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="2" />
<el-option label="已驳回" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="支付方式：" prop="paymentMethod">
<el-form-item prop="paymentMethod">
<el-select v-model="searchFormParams.paymentMethod" placeholder="请选择支付方式" clearable class="!w-[180px]">
<el-option label="微信支付" value="wechat" />
<el-option label="余额支付" value="balance" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch" class="mr-2">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm" class="mr-2">
重置
</el-button>
<el-button type="success" :loading="exportLoading" :icon="useRenderIcon('vscode-icons:file-type-excel2')"
@ -171,13 +171,7 @@ getList();
</el-form-item>
</el-form>
<PureTableBar title="退货审批列表" @refresh="getList">
<template #buttons>
<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="approvalId"
@selection-change="rows => multipleSelection = rows.map(r => r.approvalId)" border>
<el-table-column label="审批ID" prop="approvalId" width="80" />
@ -193,7 +187,7 @@ getList();
:preview-src-list="row.coverImg.split(',')" :z-index="9999" :preview-teleported="true"
:hide-on-click-modal="true" fit="cover" class="rounded" width="40" height="40" />
</div>
<span v-else>-</span>
<span v-else>-\</span>
</template>
</el-table-column>
<el-table-column label="商品价格" prop="goodsPrice" width="90">
@ -232,7 +226,7 @@ getList();
:preview-src-list="row.returnImages.split(',')" :z-index="9999" :preview-teleported="true"
:hide-on-click-modal="true" fit="cover" class="rounded" width="40" height="40" />
</div>
<span v-else>-</span>
<span v-else>-\</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
@ -253,8 +247,8 @@ 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="handlePaginationChange" @current-change="handlePaginationChange" />
</PureTableBar>
@size-change="handlePaginationChange" @current-change="handlePaginationChange" class="pagination" />
</div>
<!-- 详情弹窗 -->
<el-dialog v-model="detailVisible" title="审批详情" width="50%">
@ -279,8 +273,27 @@ getList();
</div>
</template>
<style scoped>
<style scoped lang="scss">
:deep(.el-image-viewer__wrapper) {
z-index: 9999 !important;
}
.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>

6
src/views/shop/goods/index.vue
View File

@ -131,16 +131,16 @@ const handleEdit = (row: GoodsDTO) => {
<div class="main">
<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 label="商品名称：" prop="goodsName">
<el-form-item prop="goodsName">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.goodsName" placeholder="请输入商品名称" clearable
class="!w-[200px]" />
</el-form-item>
<el-form-item label="状态：" prop="status">
<!-- <el-form-item label="状态：" prop="status">
<el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
<el-option label="已上架" :value="1" />
<el-option label="已下架" :value="2" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
搜索

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

@ -31,7 +31,7 @@ const searchFormParams = ref<OrderQuery>({
});
const pagination = ref({
pageSize: 5,
pageSize: 8,
currentPage: 1,
total: 0
});
@ -137,20 +137,20 @@ getList();
<el-date-picker v-model="searchFormParams.endTime" type="date" placeholder="结束时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
</el-form-item> -->
<el-form-item label="支付日期：">
<el-form-item>
<el-date-picker v-model="searchFormParams.payTime" type="date" placeholder="支付时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
</el-form-item>
<el-form-item label="订单编号：" prop="orderId">
<el-form-item prop="orderId">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.orderId" placeholder="请输入订单编号" clearable
class="!w-[200px]" />
</el-form-item>
<el-form-item label="格口ID：" prop="cellId">
<el-form-item prop="cellId">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.cellId" placeholder="请输入格口ID" 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="2" />
<el-option label="已发货" :value="3" />
@ -158,7 +158,7 @@ getList();
<el-option label="已取消" :value="5" />
</el-select>
</el-form-item>
<el-form-item label="支付状态：" prop="payStatus">
<el-form-item prop="payStatus">
<el-select v-model="searchFormParams.payStatus" placeholder="请选择支付状态" clearable class="!w-[180px]">
<el-option label="未支付" :value="1" />
<el-option label="已支付" :value="2" />
@ -166,17 +166,17 @@ getList();
<el-option label="已退款" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="支付方式：" prop="paymentMethod">
<el-form-item prop="paymentMethod">
<el-select v-model="searchFormParams.paymentMethod" placeholder="请选择支付方式" clearable class="!w-[180px]">
<el-option label="微信支付" value="wechat" />
<el-option label="余额支付" value="balance" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch" style="margin-right: 10px;">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm" style="margin-right: 10px;">
重置
</el-button>
<el-button type="success" :loading="exportLoading" :icon="useRenderIcon('vscode-icons:file-type-excel2')"
@ -186,10 +186,10 @@ getList();
</el-form-item>
</el-form>
<PureTableBar title="订单列表" @refresh="getList">
<div class="table-container">
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="orderId" border>
<el-table-column label="订单ID" prop="orderId" width="120" />
<el-table-column label="商品名称" prop="goodsNames" >
<el-table-column label="商品名称" prop="goodsNames">
<template #default="{ row }">
<span v-if="row.goodsNames">
{{ row.goodsNames.split(',').join(', ') }}
@ -245,15 +245,34 @@ getList();
</el-table-column> -->
</el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" />
</PureTableBar>
:page-sizes="[8, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
</div>
</div>
</template>
<style scoped>
<style scoped lang="scss">
.right-btn {
margin: 0;
}
.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>

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

@ -115,12 +115,12 @@ onMounted(() => {
<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]">
<el-form-item label="搜索：" prop="search">
<el-form-item prop="search">
<el-input v-model="searchFormParams.search" placeholder="请输入姓名/手机号/身份证" clearable class="!w-[300px]"
@keydown.enter.prevent="onSearch" @change="handleSearchInput" />
</el-form-item>
<el-form-item label="标签：" prop="tagName">
<el-select v-model="searchFormParams.tagName" placeholder="请选择" clearable class="!w-[160px]">
<el-form-item prop="tagName">
<el-select v-model="searchFormParams.tagName" placeholder="请选择用户标签" clearable class="!w-[160px]">
<el-option v-for="item in tagOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>