From fc6889cd10fabf910e2a66f6e0247741a7b32a52 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 27 May 2025 15:12:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(views):=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E7=BB=93=E6=9E=84=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将`Icon`组件替换为`IconifyIconOffline`以统一图标组件使用
- 移除商品和智能柜相关页面中不再需要的归属类型字段
- 调整商品列表和智能柜详情页的布局样式，包括表单间距和表格容器样式
- 移除商品柜配置相关代码，简化商品管理功能
- 统一搜索表单布局，使用flex布局优化按钮位置
---
 src/views/cabinet/shop/index.vue              | 48 +++++++++++---
 .../cabinet/smart-cabinet-card/detail.vue     | 12 +++-
 .../edit-cabinet-drawer.vue                   |  4 +-
 .../smart-cabinet-card-form-modal.vue         |  4 +-
 src/views/shop/goods/goods-edit-modal.vue     |  2 +-
 src/views/shop/goods/goods-form-modal.vue     |  2 +-
 src/views/shop/goods/index.vue                | 66 ++++++++++++-------
 7 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/src/views/cabinet/shop/index.vue b/src/views/cabinet/shop/index.vue
index 438ecfe..c4de39b 100644
--- a/src/views/cabinet/shop/index.vue
+++ b/src/views/cabinet/shop/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/cabinet/smart-cabinet-card/detail.vue b/src/views/cabinet/smart-cabinet-card/detail.vue
index bcfbc47..87e5e30 100644
--- a/src/views/cabinet/smart-cabinet-card/detail.vue
+++ b/src/views/cabinet/smart-cabinet-card/detail.vue
@@ -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;
diff --git a/src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue b/src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue
index cdaadee..d28f6d3 100644
--- a/src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue
+++ b/src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue
@@ -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">
diff --git a/src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue b/src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue
index 384ed7d..b64e0a3 100644
--- a/src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue
+++ b/src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue
@@ -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">
diff --git a/src/views/shop/goods/goods-edit-modal.vue b/src/views/shop/goods/goods-edit-modal.vue
index f7fa836..b72c386 100644
--- a/src/views/shop/goods/goods-edit-modal.vue
+++ b/src/views/shop/goods/goods-edit-modal.vue
@@ -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>
diff --git a/src/views/shop/goods/goods-form-modal.vue b/src/views/shop/goods/goods-form-modal.vue
index 852141c..137ad8c 100644
--- a/src/views/shop/goods/goods-form-modal.vue
+++ b/src/views/shop/goods/goods-form-modal.vue
@@ -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>
diff --git a/src/views/shop/goods/index.vue b/src/views/shop/goods/index.vue
index de28461..17f4877 100644
--- a/src/views/shop/goods/index.vue
+++ b/src/views/shop/goods/index.vue
@@ -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>
\ No newline at end of file