refactor(shop): 重构柜机商品管理页面布局并优化组件逻辑

重构了柜机商品管理页面的布局，将柜机列表移至左侧，提升用户体验。同时优化了 `cabinet-goods-config-modal.vue` 组件的逻辑，添加了 `watch` 和 `onMounted` 钩子以确保数据及时更新。此外，移除了导航栏和侧边栏中不必要的组件注释，保持界面简洁。

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>

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>

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>

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>
 

src/views/shop/cabinet-goods/index.vue

@@ -191,15 +191,25 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
 </script>
 
 <template>
-  <div class="main">
+  <div class="main flex">
-    <el-form ref="formRef" :inline="true" :model="searchFormParams"
+    <!-- 左侧柜机列表 -->
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+    <div class="w-[200px] pr-4 border-r h-full left-list">
-      <el-form-item label="柜机：" prop="cabinetId">
+      <div class="text-lg font-bold mb-4 px-2">柜机列表</div>
-        <el-select v-model.number="searchFormParams.cabinetId" placeholder="请选择柜机" clearable class="!w-[200px]">
+      <div class="h-[calc(100vh-180px)] overflow-y-auto">
-          <el-option v-for="cabinet in cabinets" :key="cabinet.cabinetId" :label="cabinet.cabinetName"
+        <div class="cabinet-list">
-            :value="cabinet.cabinetId" />
+          <div v-for="cabinet in cabinets" :key="cabinet.cabinetId"
-        </el-select>
+            class="cabinet-item p-3 mb-2 cursor-pointer rounded hover:bg-gray-100 transition-colors"
-      </el-form-item>
+            :class="{ 'bg-blue-50': searchFormParams.cabinetId === cabinet.cabinetId }"
+            @click="searchFormParams.cabinetId = cabinet.cabinetId; onSearch()">
+            {{ cabinet.cabinetName }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧内容 -->
+    <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>
@@ -233,8 +243,9 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
           <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"
+              <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999"
-              :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
+                :preview-teleported="true" :hide-on-click-modal="true" fit="cover" class="rounded" width="60"
+                height="60" />
             </template>
           </el-table-column>
           <el-table-column label="商品名称">
@@ -274,6 +285,24 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
         <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>