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

refactor(views): 优化组件样式和结构调整 

- 将`Icon`组件替换为`IconifyIconOffline`以统一图标组件使用
- 移除商品和智能柜相关页面中不再需要的归属类型字段
- 调整商品列表和智能柜详情页的布局样式，包括表单间距和表格容器样式
- 移除商品柜配置相关代码，简化商品管理功能
- 统一搜索表单布局，使用flex布局优化按钮位置
This commit is contained in:
dzq 2025-05-27 15:12:49 +08:00
parent cab3eeaecc
commit fc6889cd10
7 changed files with 97 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/cabinet/shop/index.vue
View File

@ -136,7 +136,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="shopName">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入商店名称" clearable
class="!w-[200px]" />
@ -146,14 +146,17 @@ getList();
搜索
</el-button>
</el-form-item>
</el-form>
<PureTableBar title="" @refresh="getList">
<template #buttons>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
<el-form-item class="space-item">
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true"
style="margin-right: 10px;">
新增商店
</el-button>
</template>
</el-form-item>
</el-form>
<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" />
@ -180,7 +183,7 @@ getList();
<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" class="pagination" />
</PureTableBar>
</div>
<ShopFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" />
<ShopFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val"
@refresh="handleRefresh" />
@ -198,7 +201,32 @@ getList();
</template>
<style scoped lang="scss">
.pagination {
margin-top: 10px;
.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>

12
src/views/cabinet/smart-cabinet-card/detail.vue
View File

@ -304,16 +304,16 @@ onMounted(() => {
<el-descriptions :column="2" border>
<el-descriptions-item label="主柜ID">{{ cabinetInfo.mainCabinet || '-' }}</el-descriptions-item>
<el-descriptions-item label="主柜名称">{{ cabinetInfo.mainCabinetName || '-' }}</el-descriptions-item>
<el-descriptions-item label="归属类型">
<!-- <el-descriptions-item label="归属类型">
{{ cabinetInfo.belongType === 0 ? '借还柜' : '固资通' }}
</el-descriptions-item>
</el-descriptions-item> -->
<el-descriptions-item label="MQTT服务器ID">{{ cabinetInfo.mqttServerId || '-' }}</el-descriptions-item>
<el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
<div class="cell-details" v-if="activeTab === 'cells'">
<div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 0px;">
<el-form :inline="true" :model="searchCellParams" class="search-form">
<el-form-item>
<el-input @keydown.enter.prevent="fetchCellList" v-model="searchCellParams.goodsName"
@ -439,6 +439,12 @@ onMounted(() => {
</template>
<style scoped lang="scss">
:deep(.el-tabs__header) {
margin-bottom: 8px;
}
.el-form-item {
margin-bottom: 8px;
}
.detail-container {
display: flex;
flex-direction: column;

4
src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue
View File

@ -96,12 +96,12 @@ watch(() => props.cabinetInfo, (newVal) => {
</el-select>
</el-form-item>
<el-form-item label="归属类型" prop="belongType">
<!-- <el-form-item label="归属类型" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择归属类型">
<el-option label="借还柜" :value="0" />
<el-option label="固资通" :value="1" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">

4
src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue
View File

@ -93,12 +93,12 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
</el-select>
</el-form-item>
<el-form-item label="归属类型" prop="belongType">
<!-- <el-form-item label="归属类型" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择归属类型">
<el-option label="借还柜" :value="0" />
<el-option label="固资通" :value="1" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">

2
src/views/shop/goods/goods-edit-modal.vue
View File

@ -147,7 +147,7 @@ const handleDelete = async () => {
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="formData.coverImg" :src="formData.coverImg" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Icon :icon="Upload" />
<IconifyIconOffline :icon="Upload" />
</el-icon>
</el-upload>
</el-form-item>

2
src/views/shop/goods/goods-form-modal.vue
View File

@ -106,7 +106,7 @@ const beforeAvatarUpload = (rawFile) => {
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="formData.coverImg" :src="formData.coverImg" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Icon :icon="Upload" />
<IconifyIconOffline :icon="Upload" />
</el-icon>
</el-upload>
</el-form-item>

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

@ -11,7 +11,6 @@ import Refresh from "@iconify-icons/ep/refresh";
import Setting from "@iconify-icons/ep/setting";
import GoodsFormModal from "./goods-form-modal.vue";
import GoodsEditModal from "./goods-edit-modal.vue";
import GoodsCabinetConfigModal from "./goods-cabinet-config-modal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteGoodsApi } from "@/api/shop/goods";
@ -31,7 +30,7 @@ const searchFormParams = ref({
// 分页参数
const pagination = ref({
pageSize: 10,
pageSize: 6,
currentPage: 1,
total: 0
});
@ -41,7 +40,6 @@ const loading = ref(false);
const dataList = ref<GoodsDTO[]>([]);
const multipleSelection = ref<number[]>([]);
const editVisible = ref(false);
const configVisible = ref(false);
const currentRow = ref<GoodsDTO>();
const getList = async () => {
@ -132,7 +130,7 @@ const handleEdit = (row: GoodsDTO) => {
<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 label="商品名称：" prop="goodsName">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.goodsName" placeholder="请输入商品名称" clearable
class="!w-[200px]" />
@ -147,22 +145,18 @@ const handleEdit = (row: GoodsDTO) => {
<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"
style="margin-right: 10px;">
新增商品
</el-button>
</el-form-item>
</el-form>
<PureTableBar title="商品列表" @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" />
@ -209,21 +203,20 @@ const handleEdit = (row: GoodsDTO) => {
删除
</el-button>
</template>
</el-popconfirm> -->
</el-popconfirm> -->
</template>
</el-table-column>
</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>
:page-sizes="[6, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
<!-- 新增商品弹窗 -->
<goods-form-modal v-model:visible="modalVisible" @refresh="getList" />
<goods-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
<goods-cabinet-config-modal v-model:visible="configVisible" :row-data="currentRow" @refresh="getList" />
</div>
</template>
<style scoped>
<style scoped lang="scss">
/* 覆盖预览层样式 */
:deep(.el-image-viewer__wrapper) {
z-index: 9999 !important;
@ -233,8 +226,37 @@ const handleEdit = (row: GoodsDTO) => {
opacity: 1;
background-color: rgba(0, 0, 0, 0.8);
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
.space-item {
flex: 1;
width: 100%;
}
.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>