feat: 添加4口机柜图片并更新相关逻辑

- 新增4口机柜图片文件
- 在cabinetImgMap.ts中添加4口机柜的映射
- 更新useTag.ts中的路由匹配逻辑，增加对query.id的判断
- 在smart-cabinet-card/index.vue和ab98/index.vue中添加多标签页支持
- 修改goods-edit-modal.vue中的删除逻辑，并调整弹窗为抽屉样式
- 在smart-cabinet-card/detail.vue中添加格口管理功能，支持配置商品、库存和下架操作

src/layout/components/tag/index.vue

@@ -455,7 +455,10 @@ function tagOnClick(item) {
       router.push({ name });
     }
   } else {
-    router.push({ path });
+    router.push({
+      path,
+      query: item.query
+    });
   }
   // showMenuModel(item?.path, item?.query);
 }
@@ -516,43 +519,25 @@ onBeforeUnmount(() => {
     </span>
     <div ref="scrollbarDom" class="scroll-container">
       <div class="tab select-none" ref="tabDom" :style="getTabStyle">
-        <div
+        <div :ref="'dynamic' + index" v-for="(item, index) in multiTags" :key="index" :class="[
-          :ref="'dynamic' + index"
-          v-for="(item, index) in multiTags"
-          :key="index"
-          :class="[
           'scroll-item is-closable',
           linkIsActive(item),
           route.path === item.path && showModel === 'card'
             ? 'card-active'
             : ''
-          ]"
+        ]" @contextmenu.prevent="openMenu(item, $event)" @mouseenter.prevent="onMouseenter(index)"
-          @contextmenu.prevent="openMenu(item, $event)"
+          @mouseleave.prevent="onMouseleave(index)" @click="tagOnClick(item)">
-          @mouseenter.prevent="onMouseenter(index)"
+          <router-link :to="item.path" class="dark:!text-text_color_primary dark:hover:!text-primary">
-          @mouseleave.prevent="onMouseleave(index)"
-          @click="tagOnClick(item)"
-        >
-          <router-link
-            :to="item.path"
-            class="dark:!text-text_color_primary dark:hover:!text-primary"
-          >
             {{ item.meta.title }}
           </router-link>
-          <span
+          <span v-if="
-            v-if="
             iconIsActive(item, index) ||
             (index === activeIndex && index !== 0)
-            "
+          " class="el-icon-close" @click.stop="deleteMenu(item)">
-            class="el-icon-close"
-            @click.stop="deleteMenu(item)"
-          >
             <IconifyIconOffline :icon="CloseBold" />
           </span>
-          <!-- <div
+          <div :ref="'schedule' + index" v-if="showModel !== 'card'" style="display: none;"
-            :ref="'schedule' + index"
+            :class="[scheduleIsActive(item)]" />
-            v-if="showModel !== 'card'"
-            :class="[scheduleIsActive(item)]"
-          /> -->
         </div>
       </div>
     </div>
@@ -561,17 +546,8 @@ onBeforeUnmount(() => {
     </span>
     <!-- 右键菜单按钮 -->
     <transition name="el-zoom-in-top">
-      <ul
+      <ul v-show="visible" :key="Math.random()" :style="getContextMenuStyle" class="contextmenu">
-        v-show="visible"
+        <div v-for="(item, key) in tagsViews.slice(0, 6)" :key="key" style="display: flex; align-items: center">
-        :key="Math.random()"
-        :style="getContextMenuStyle"
-        class="contextmenu"
-      >
-        <div
-          v-for="(item, key) in tagsViews.slice(0, 6)"
-          :key="key"
-          style="display: flex; align-items: center"
-        >
           <li v-if="item.show" @click="selectTag(key, item)">
             <IconifyIconOffline :icon="item.icon" />
             {{ item.text }}
@@ -580,23 +556,14 @@ onBeforeUnmount(() => {
       </ul>
     </transition>
     <!-- 右侧功能按钮 -->
-    <el-dropdown
+    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
-      trigger="click"
-      placement="bottom-end"
-      @command="handleCommand"
-    >
       <span class="arrow-down">
         <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
       </span>
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item
+          <el-dropdown-item v-for="(item, key) in tagsViews" :key="key" :command="{ key, item }" :divided="item.divided"
-            v-for="(item, key) in tagsViews"
+            :disabled="item.disabled">
-            :key="key"
-            :command="{ key, item }"
-            :divided="item.divided"
-            :disabled="item.disabled"
-          >
             <IconifyIconOffline :icon="item.icon" />
             {{ item.text }}
           </el-dropdown-item>

src/layout/hooks/useTag.ts

@@ -128,7 +128,11 @@ export function useTags() {
         return isEqual(route.params, item.params) ? previous : next;
       }
     } else {
-      return route.path === item.path ? previous : next;
+      const route_id = String(route.query?.id);
+      const item_id = String(item.query?.id);
+      return route.path === item.path &&
+        route_id == item_id
+        ? previous : next;
     }
   }
 

src/utils/cabinetImgMap.ts

@@ -31,4 +31,8 @@ export const CabinetImgMap = {
     img: "cabinet_120.jpg",
     name: "120口机柜",
   },
+  9: {
+    img: "cabinet_4.jpg",
+    name: "4口机柜",
+  },
 }

src/views/cabinet/smart-cabinet-card/detail.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { getSmartCabinetDetailApi, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
+import { changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { CabinetImgMap } from "@/utils/cabinetImgMap";
 import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal.vue";
 import ShopConfigModal from "@/views/cabinet/smart-cabinet/ShopConfigModal.vue";
 import MainCabinetConfigModal from "@/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue";
+import CabinetGoodsConfigModal from "@/views/shop/cabinet-goods/cabinet-goods-config-modal.vue";
+import { ElMessage, ElMessageBox } from "element-plus";
 const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Delete from "@iconify-icons/ep/delete";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import { getGoodsInfo } from "@/api/shop/goods";
 
 defineOptions({
   name: "SmartCabinetDetail"
 });
 
+const router = useRouter();
 const route = useRoute();
 const cabinetInfo = ref<SmartCabinetDTO>({
   cabinetName: "",
@@ -27,6 +37,69 @@ const cabinetId = ref<number>(0);
 const gatewayConfigVisible = ref(false);
 const shopConfigVisible = ref(false);
 const mainCabinetConfigVisible = ref(false);
+const cellList = ref<CabinetCellDTO[]>([]);
+const cellPagination = ref({
+  pageSize: 5,
+  currentPage: 1,
+  total: 0
+});
+const goodsConfigVisible = ref(false);
+const currentCellId = ref<number>();
+
+function handleConfigure(row: CabinetCellDTO) {
+  currentCellId.value = row.cellId;
+  goodsConfigVisible.value = true;
+}
+
+async function handleStockConfig(row: CabinetCellDTO) {
+  try {
+    const { data } = await getGoodsInfo(row.goodsId!);
+    const remainingStock = data.stock - data.totalStock + row.stock;
+
+    const { value } = await ElMessageBox.prompt(
+      `请输入${row.goodsName || '未配置商品'}的库存数量（本次最多可分配：${remainingStock}）。\n      若可分配数量不足，请先调整商品列表中的库存。`,
+      '配置库存',
+      {
+        inputPattern: /^0$|^[1-9]\d*$/,
+        inputValue: row.stock?.toString(),
+        inputErrorMessage: '请输入有效的非负整数',
+        inputValidator: (inputValue: string) => {
+          const num = Number(inputValue);
+          if (num > remainingStock) {
+            return '分配数量不能超过剩余库存';
+          }
+          return true;
+        }
+      }
+    );
+
+    if (Number(value) > remainingStock) {
+      ElMessage.warning('分配数量不能超过剩余库存');
+      return;
+    }
+
+    await changeGoodsCellsStock(row.cellId!, Number(value));
+    ElMessage.success('库存更新成功');
+    fetchCellList();
+  } catch (error) {
+    console.error('库存配置取消或失败', error);
+  }
+}
+
+async function handleClearGoods(row: CabinetCellDTO) {
+  try {
+    await ElMessageBox.confirm(
+      `确认要下架${row.goodsName || '未配置商品'}吗？`,
+      '警告',
+      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
+    );
+    await clearGoodsCells(row.cellId!);
+    ElMessage.success('商品下架成功');
+    fetchCellList();
+  } catch (error) {
+    console.error('操作取消或失败', error);
+  }
+}
 
 async function fetchCabinetDetail() {
   try {
@@ -38,9 +111,45 @@ async function fetchCabinetDetail() {
   }
 }
 
+function switchCellType(cellType: number) {
+  switch (cellType) {
+    case 1: return '小格';
+    case 2: return '中格';
+    case 3: return '大格';
+    case 4: return '超大格';
+    default: return '未知';
+  }
+}
+
+async function fetchCellList() {
+  try {
+    loading.value = true;
+    const { data } = await getCabinetCellList({
+      cabinetId: cabinetId.value,
+      pageSize: cellPagination.value.pageSize,
+      pageNum: cellPagination.value.currentPage
+    });
+    cellList.value = data.rows;
+    cellPagination.value.total = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleCellSizeChange(val: number) {
+  cellPagination.value.pageSize = val;
+  fetchCellList();
+}
+
+function handleCellPageChange(val: number) {
+  cellPagination.value.currentPage = val;
+  fetchCellList();
+}
+
 onMounted(() => {
   cabinetId.value = Number(route.query.id);
   fetchCabinetDetail();
+  fetchCellList();
 });
 </script>
 
@@ -90,7 +199,7 @@ onMounted(() => {
         <div class="tab-header">
           <el-tabs type="card" v-model="activeTab">
             <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
-            <el-tab-pane label="单元格配置" name="cells"></el-tab-pane>
+            <el-tab-pane label="格口管理" name="cells"></el-tab-pane>
           </el-tabs>
         </div>
 
@@ -101,15 +210,69 @@ onMounted(() => {
           <el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
         </el-descriptions>
 
-        <div class="info-details" v-if="activeTab === 'cells'">
+        <div class="cell-details" v-if="activeTab === 'cells'">
-          <!-- 单元格配置内容 -->
+          <el-table v-loading="loading" :data="cellList" border>
+            <el-table-column label="格口ID" prop="cellId" width="80" />
+            <el-table-column label="格口号" prop="cellNo" width="80" />
+            <el-table-column label="商品图片" width="120">
+              <template #default="{ row }">
+                <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" 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="80" />
+            <el-table-column label="库存" prop="stock" width="80" />
+            <el-table-column label="单元格类型" prop="cellType" width="120">
+              <template #default="{ row }">
+                {{ switchCellType(row.cellType) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="购买次数" prop="orderCount" width="100" />
+            <el-table-column label="相关信息" width="150" fixed="right">
+              <template #default="{ row }">
+                <el-button type="success" link :icon="useRenderIcon('document')"
+                  @click="router.push({ path: '/shop/order/index', query: { cellId: row.cellId } })">
+                  购买记录
+                </el-button>
+                <el-button type="warning" link :icon="useRenderIcon('document')"
+                  @click="router.push({ path: '/cabinet/operation/index', query: { cellId: row.cellId } })">
+                  开启记录
+                </el-button>
+              </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="cellPagination.currentPage" v-model:page-size="cellPagination.pageSize"
+            :page-sizes="[5, 8, 16, 24, 32]" layout="total, sizes, prev, pager, next, jumper" :total="cellPagination.total"
+            @size-change="handleCellSizeChange" @current-change="handleCellPageChange" class="pagination" />
         </div>
       </el-card>
-      <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId"
+      <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
-        @refresh="fetchCabinetDetail" />
       <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
       <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
         @refresh="fetchCabinetDetail" />
+      <el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
+        <CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
+      </el-drawer>
     </div>
   </div>
 </template>
@@ -123,15 +286,18 @@ onMounted(() => {
   .flex-container {
     display: flex;
     flex: 1;
-    gap: 20px;
+    gap: 12px;
     min-height: 0;
 
     .cabinet-info-card {
-      width: 30%;
+      width: 20%;
+      height: 88vh;
     }
 
     .info-card {
-      width: 70%;
+      width: 80%;
+      height: 88vh;
+      overflow-y: auto;
     }
   }
 

src/views/cabinet/smart-cabinet-card/index.vue

@@ -12,6 +12,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import View from "@iconify-icons/ep/view";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import SmartCabinetCardFormModal from "./smart-cabinet-card-form-modal.vue";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
 
 defineOptions({
@@ -62,6 +63,16 @@ const resetForm = formEl => {
 };
 
 const handleViewDetail = (row: SmartCabinetDTO) => {
+  // 保存信息到标签页
+  useMultiTagsStoreHook().handleTags("push", {
+    path: `/cabinet/card/detail`,
+    name: "smartCabinetCardDetail",
+    query: { id: row.cabinetId },
+    meta: {
+      title: `${row.cabinetName}`,
+      dynamicLevel: 3
+    }
+  });
   router.push({
     path: '/cabinet/card/detail',
     query: {

src/views/shop/goods/goods-edit-modal.vue

@@ -2,10 +2,11 @@
 import { ref, reactive, watch } from "vue";
 import { ElMessage, FormRules } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { GoodsDTO, updateGoodsApi, addGoodsApi } from "@/api/shop/goods";
+import { GoodsDTO, updateGoodsApi, addGoodsApi, deleteGoodsApi } from "@/api/shop/goods";
 import { CategoryDTO, getCategoryAllApi } from "@/api/shop/category";
 import Confirm from "@iconify-icons/ep/check";
 import Upload from "@iconify-icons/ep/upload";
+import Delete from "@iconify-icons/ep/delete";
 const { VITE_APP_BASE_API } = import.meta.env;
 
 const props = defineProps({
@@ -121,10 +122,20 @@ watch(
     if (val) initForm();
   }
 );
+const handleDelete = async () => {
+  try {
+    await deleteGoodsApi(formData.goodsId);
+    ElMessage.success("删除成功");
+    emit("refresh");
+    closeDialog();
+  } catch (error) {
+    console.error("删除失败", error);
+  }
+};
 </script>
 
 <template>
-  <el-dialog :title="isEdit ? '编辑商品' : '新增商品'" :model-value="visible" width="600px" @close="closeDialog">
+  <el-drawer :title="isEdit ? '编辑商品' : '新增商品'" :model-value="visible" size="50%" direction="rtl" @close="closeDialog">
     <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" label-position="right">
       <el-form-item label="商品名称" prop="goodsName">
         <el-input v-model="formData.goodsName" placeholder="请输入商品名称" clearable />
@@ -165,6 +176,15 @@ watch(
           <el-radio :label="2">下架</el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-form-item label="操作">
+        <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete()">
+          <template #reference>
+            <el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
+              删除该商品
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </el-form-item>
     </el-form>
 
     <template #footer>
@@ -173,7 +193,7 @@ watch(
         确认
       </el-button>
     </template>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <style scoped>

src/views/shop/goods/index.vue

@@ -202,13 +202,13 @@ const handleEdit = (row: GoodsDTO) => {
               @click="currentRow = row; configVisible = true">
               配置格口
             </el-button> -->
-            <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete(row)">
+            <!-- <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete(row)">
               <template #reference>
                 <el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
                   删除
                 </el-button>
               </template>
-            </el-popconfirm>
+            </el-popconfirm> -->
           </template>
         </el-table-column>
       </el-table>

src/views/user/ab98/index.vue

@@ -9,6 +9,7 @@ import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import View from "@iconify-icons/ep/view";
 import { useRouter } from "vue-router";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 
 defineOptions({
   name: "Ab98User"
@@ -56,7 +57,17 @@ const resetForm = formEl => {
   onSearch();
 };
 
-const handleViewDetail = (row: any) => {
+const handleViewDetail = (row: Ab98UserDTO) => {
+  // 保存信息到标签页
+  useMultiTagsStoreHook().handleTags("push", {
+    path: `/user/ab98/detail`,
+    name: "ab98Detail",
+    query: { id: row.ab98UserId },
+    meta: {
+      title: `${row.name}`,
+      dynamicLevel: 3
+    }
+  });
   router.push({
     path: '/user/ab98/detail',
     query: {