From 51fde85acc0313afa0569acf18b99ed5d0768697 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 22 Apr 2025 15:39:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(shop):=20=E9=87=8D=E6=9E=84=E6=9F=9C?=
 =?UTF-8?q?=E6=9C=BA=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=B9=B6=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构了柜机商品管理页面的布局，将柜机列表移至左侧，提升用户体验。同时优化了 `cabinet-goods-config-modal.vue` 组件的逻辑，添加了 `watch` 和 `onMounted` 钩子以确保数据及时更新。此外，移除了导航栏和侧边栏中不必要的组件注释，保持界面简洁。
---
 src/layout/components/navbar.vue              |   8 +-
 src/layout/components/sidebar/horizontal.vue  |   8 +-
 src/layout/components/sidebar/mixNav.vue      |   8 +-
 .../cabinet-goods-config-modal.vue            |  13 +-
 src/views/shop/cabinet-goods/index.vue        | 193 ++++++++++--------
 5 files changed, 135 insertions(+), 95 deletions(-)

diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 438c4b7..d641337 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -37,9 +37,9 @@ const {
       <!-- 二维码 -->
       <QrCodeHover />
       <!-- 菜单搜索 -->
-      <Search />
+      <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
@@ -61,9 +61,9 @@ const {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
+      <!-- <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index d6f705a..4c81165 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -47,9 +47,9 @@ nextTick(() => {
       <!-- 二维码 -->
       <QrCodeHover />
       <!-- 菜单搜索 -->
-      <Search />
+      <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
@@ -65,9 +65,9 @@ nextTick(() => {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
+      <!-- <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
index 18ec4d3..b7dc5d5 100644
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -76,9 +76,9 @@ watch(
       <!-- 二维码 -->
       <QrCodeHover />
       <!-- 菜单搜索 -->
-      <Search />
+      <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
@@ -94,9 +94,9 @@ watch(
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
+      <!-- <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>
diff --git a/src/views/shop/cabinet-goods/cabinet-goods-config-modal.vue b/src/views/shop/cabinet-goods/cabinet-goods-config-modal.vue
index 6515aea..b41dbc5 100644
--- a/src/views/shop/cabinet-goods/cabinet-goods-config-modal.vue
+++ b/src/views/shop/cabinet-goods/cabinet-goods-config-modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getGoodsListApi, type GoodsDTO } from "@/api/shop/goods";
 import { configureGoodsCellsStock } from "@/api/cabinet/cabinet-cell";
@@ -76,6 +76,17 @@ const handleConfigure = async (row: GoodsDTO) => {
   }
 };
 
+watch(
+  () => props.cellId,
+  () => {
+    getList();
+  }
+);
+
+onMounted(() => {
+  getList();
+})
+
 defineExpose({ getList });
 </script>
 
diff --git a/src/views/shop/cabinet-goods/index.vue b/src/views/shop/cabinet-goods/index.vue
index c3c11b1..afa39d1 100644
--- a/src/views/shop/cabinet-goods/index.vue
+++ b/src/views/shop/cabinet-goods/index.vue
@@ -191,89 +191,118 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
 </script>
 
 <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="cabinetId">
-        <el-select v-model.number="searchFormParams.cabinetId" placeholder="请选择柜机" clearable class="!w-[200px]">
-          <el-option v-for="cabinet in cabinets" :key="cabinet.cabinetId" :label="cabinet.cabinetName"
-            :value="cabinet.cabinetId" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="单元格号：" prop="cellNo">
-        <el-input v-model.number="searchFormParams.cellNo" placeholder="请输入单元格号" clearable class="!w-[180px]" />
-      </el-form-item>
-      <el-form-item label="单元格类型：" prop="cellType">
-        <el-select v-model="searchFormParams.cellType" placeholder="请选择类型" clearable class="!w-[180px]">
-          <el-option label="小格" :value="1" />
-          <el-option label="中格" :value="2" />
-          <el-option label="大格" :value="3" />
-          <el-option label="超大格" :value="4" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
-          搜索
-        </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
+  <div class="main flex">
+    <!-- 左侧柜机列表 -->
+    <div class="w-[200px] pr-4 border-r h-full left-list">
+      <div class="text-lg font-bold mb-4 px-2">柜机列表</div>
+      <div class="h-[calc(100vh-180px)] overflow-y-auto">
+        <div class="cabinet-list">
+          <div v-for="cabinet in cabinets" :key="cabinet.cabinetId"
+            class="cabinet-item p-3 mb-2 cursor-pointer rounded hover:bg-gray-100 transition-colors"
+            :class="{ 'bg-blue-50': searchFormParams.cabinetId === cabinet.cabinetId }"
+            @click="searchFormParams.cabinetId = cabinet.cabinetId; onSearch()">
+            {{ cabinet.cabinetName }}
+          </div>
+        </div>
+      </div>
+    </div>
 
-    <PureTableBar title="柜体单元格管理" @refresh="getList">
-      <template #buttons>
-        <el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
-          @click="handleBulkDelete">
-          批量删除
-        </el-button>
-      </template>
-      <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
-        @selection-change="handleSelectionChange" border>
-        <el-table-column type="selection" width="55" />
-        <el-table-column label="商品图片" width="120">
-          <template #default="{ row }">
-            <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999" :preview-teleported="true"
-              :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
-          </template>
-        </el-table-column>
-        <el-table-column label="商品名称">
-          <template #default="{ row }">
-            {{ row.goodsId ? row.goodsName : '未配置商品' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="价格" prop="price" width="120" />
-        <el-table-column label="库存" prop="stock" width="120" />
-        <el-table-column label="单元格号" prop="cellNo" width="120" />
-        <el-table-column label="单元格类型" prop="cellType">
-          <template #default="{ row }">
-            {{ switchCellType(row.cellType) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="150" fixed="right">
-          <template #default="{ row }">
-            <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
-              配置商品
-            </el-button>
-            <el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
-              @click="handleStockConfig(row)">
-              配置库存
-            </el-button>
-            <el-button v-if="row.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
-              @click="handleClearGoods(row)">
-              下架商品
-            </el-button>
-          </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>
-    <el-dialog v-model="configVisible" title="配置商品" width="80%">
-      <CabinetGoodsConfigModal v-model="configVisible" :cell-id="currentCellId" @refresh="getList" />
-    </el-dialog>
+    <!-- 右侧内容 -->
+    <div class="flex-1 pl-4">
+      <el-form ref="formRef" :inline="true" :model="searchFormParams" class="search-form bg-bg_color w-full pt-[12px]">
+        <el-form-item label="单元格号：" prop="cellNo">
+          <el-input v-model.number="searchFormParams.cellNo" placeholder="请输入单元格号" clearable class="!w-[180px]" />
+        </el-form-item>
+        <el-form-item label="单元格类型：" prop="cellType">
+          <el-select v-model="searchFormParams.cellType" placeholder="请选择类型" clearable class="!w-[180px]">
+            <el-option label="小格" :value="1" />
+            <el-option label="中格" :value="2" />
+            <el-option label="大格" :value="3" />
+            <el-option label="超大格" :value="4" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
+            搜索
+          </el-button>
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
+            重置
+          </el-button>
+        </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>
+        <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
+          @selection-change="handleSelectionChange" border>
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="商品图片" width="120">
+            <template #default="{ row }">
+              <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999"
+                :preview-teleported="true" :hide-on-click-modal="true" fit="cover" class="rounded" width="60"
+                height="60" />
+            </template>
+          </el-table-column>
+          <el-table-column label="商品名称">
+            <template #default="{ row }">
+              {{ row.goodsId ? row.goodsName : '未配置商品' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="价格" prop="price" width="120" />
+          <el-table-column label="库存" prop="stock" width="120" />
+          <el-table-column label="单元格号" prop="cellNo" width="120" />
+          <el-table-column label="单元格类型" prop="cellType">
+            <template #default="{ row }">
+              {{ switchCellType(row.cellType) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" fixed="right">
+            <template #default="{ row }">
+              <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
+                配置商品
+              </el-button>
+              <el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
+                @click="handleStockConfig(row)">
+                配置库存
+              </el-button>
+              <el-button v-if="row.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
+                @click="handleClearGoods(row)">
+                下架商品
+              </el-button>
+            </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>
+      <el-dialog v-model="configVisible" title="配置商品" width="80%">
+        <CabinetGoodsConfigModal v-model="configVisible" :cell-id="currentCellId" @refresh="getList" />
+      </el-dialog>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.border-r {
+  border-right: 1px solid #ebeef5;
+}
+
+.left-list {
+  background: #FFFFFF;
+  padding: 15px;
+}
+
+.search-form {
+  padding-left: 10px;
+}
+</style>