feat: 添加VITE_PUBLIC_IMG_PATH环境变量并更新图片路径

为了支持不同环境下的图片路径配置，添加了VITE_PUBLIC_IMG_PATH环境变量，并在相关组件中更新了图片路径的引用方式。同时，调整了标签组件的样式以提升用户体验。

.env.development

@@ -9,3 +9,5 @@ VITE_ROUTER_HISTORY = "hash"
 
 # 后端地址
 VITE_APP_BASE_API = '/dev-api'
+
+VITE_PUBLIC_IMG_PATH = "/"

.env.production

@@ -14,3 +14,5 @@ VITE_COMPRESSION = "none"
 
 # 后端地址
 VITE_APP_BASE_API = '/shop-back-end'
+
+VITE_PUBLIC_IMG_PATH = "/shop-admin/"

.env.staging

@@ -17,3 +17,5 @@ VITE_COMPRESSION = "none"
 
 # 后端地址
 VITE_APP_BASE_API = '/shop-back-end'
+
+VITE_PUBLIC_IMG_PATH = "/shop-admin/"

src/api/cabinet/smart-cabinet.ts

@@ -11,8 +11,11 @@ export interface SmartCabinetDTO {
   cabinetId?: number;
   cabinetName: string;
   cabinetType: number;
+  mainCabinet?: number;
+  mainCabinetName?: string;
   mqttServerId?: number;
   shopId?: number;
+  shopName?: string;
   templateNo: string;
   lockControlNo: number;
   location: number;
@@ -22,6 +25,7 @@ export interface SmartCabinetDTO {
 export interface AddSmartCabinetCommand {
   cabinetName: string;
   cabinetType: number;
+  mainCabinet?: number;
   mqttServerId?: number;
   shopId?: number;
   templateNo: string;
@@ -33,6 +37,7 @@ export interface UpdateSmartCabinetCommand {
   cabinetId: number;
   cabinetName?: string;
   cabinetType?: number;
+  mainCabinet?: number;
   mqttServerId?: number;
   shopId?: number;
   templateNo?: string;
@@ -74,3 +79,7 @@ export const getAllCabinetsWithCells = () => {
 export const allCabinets = () => {
   return http.request<ResponseData<Array<SmartCabinetDTO>>>('get', '/cabinet/smartCabinet/allCabinets');
 };
+
+export const getSmartCabinetDetailApi = (cabinetId: number) => {
+  return http.request<ResponseData<SmartCabinetDTO>>("get", `/cabinet/smartCabinet/detail/${cabinetId}`);
+};

src/layout/components/appMain.vue

@@ -143,6 +143,6 @@ const transitionMain = defineComponent({
 }
 
 .main-content {
-  margin: 24px;
+  margin: 12px;
 }
 </style>

src/layout/components/sidebar/horizontal.vue

@@ -77,6 +77,10 @@ nextTick(() => {
   opacity: 0.45;
 }
 
+/* :deep(.el-sub-menu.is-active .el-sub-menu__title) {
+  border-bottom: 0;
+} */
+
 .logout {
   max-width: 120px;
 

src/layout/components/tag/index.scss

@@ -51,18 +51,19 @@
   .scroll-item {
     position: relative;
     display: inline-block;
-    height: 28px;
-    padding: 0 6px;
+    height: 38px;
+    padding: 2px 6px;
     margin-right: 4px;
-    line-height: 28px;
+    line-height: 34px;
     cursor: pointer;
-    border-radius: 3px 3px 0 0;
-    box-shadow: 0 0 1px #888;
+    border-color: transparent;
+    border-radius: 6px 6px 0 0;
+    /* box-shadow: 0 0 1px #888; */
     transition: all 0.4s;
 
     .el-icon-close {
       position: absolute;
-      top: 50%;
+      top: 48%;
       font-size: 10px;
       color: var(--el-color-primary);
       cursor: pointer;
@@ -99,7 +100,7 @@
   .scroll-container {
     position: relative;
     flex: 1;
-    padding: 5px 0;
+    padding: 0;
     overflow: hidden;
     white-space: nowrap;
 
@@ -194,7 +195,31 @@
 
 .scroll-item.is-active {
   position: relative;
-  color: #fff;
+  background-color: #e6f7ff;
+  border-bottom: none;
+  z-index: 1;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    width: 18px;
+    height: 18px;
+    background: transparent;
+  }
+
+  &::before {
+    left: -18px;
+    border-bottom-right-radius: 18px;
+    box-shadow: 9px 0 0 0 #e6f7ff;
+  }
+
+  &::after {
+    right: -18px;
+    border-bottom-left-radius: 18px;
+    box-shadow: -9px 0 0 0 #e6f7ff;
+  }
 
   &:not(:first-child) {
     padding-right: 18px;

src/layout/components/tag/index.vue

@@ -548,11 +548,11 @@ onBeforeUnmount(() => {
           >
             <IconifyIconOffline :icon="CloseBold" />
           </span>
-          <div
+          <!-- <div
             :ref="'schedule' + index"
             v-if="showModel !== 'card'"
             :class="[scheduleIsActive(item)]"
-          />
+          /> -->
         </div>
       </div>
     </div>

src/router/modules/global.ts

@@ -23,6 +23,14 @@ export default {
       meta: {
         title: "会员详情"
       }
+    },
+    {
+      path: "/cabinet/card/detail",
+      name: "smartCabinetCardDetail",
+      component: () => import("@/views/cabinet/smart-cabinet-card/detail.vue"),
+      meta: {
+        title: "柜机详情"
+      }
     }
   ]
 } as RouteConfigsTable;

src/utils/cabinetImgMap.ts

@@ -0,0 +1,34 @@
+export const CabinetImgMap = {
+  1: {
+    img: "cabinet_16.jpg",
+    name: "16口机柜",
+  },
+  2: {
+    img: "cabinet_20.jpg",
+    name: "20口机柜",
+  },
+  3: {
+    img: "cabinet_22.jpg",
+    name: "22口机柜",
+  },
+  4: {
+    img: "cabinet_24.jpg",
+    name: "24口机柜",
+  },
+  5: {
+    img: "cabinet_40.jpg",
+    name: "40口机柜",
+  },
+  6: {
+    img: "cabinet_48.jpg",
+    name: "48口机柜",
+  },
+  7: {
+    img: "cabinet_60.jpg",
+    name: "60口机柜",
+  },
+  8: {
+    img: "cabinet_120.jpg",
+    name: "120口机柜",
+  },
+}

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { getSmartCabinetDetailApi, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
+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";
+const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
+
+defineOptions({
+  name: "SmartCabinetDetail"
+});
+
+const route = useRoute();
+const cabinetInfo = ref<SmartCabinetDTO>({
+  cabinetName: "",
+  cabinetType: 0,
+  templateNo: "",
+  lockControlNo: 0,
+  location: 0
+});
+const loading = ref(false);
+const activeTab = ref('basic');
+const cabinetId = ref<number>(0);
+const gatewayConfigVisible = ref(false);
+const shopConfigVisible = ref(false);
+const mainCabinetConfigVisible = ref(false);
+
+async function fetchCabinetDetail() {
+  try {
+    loading.value = true;
+    const { data } = await getSmartCabinetDetailApi(cabinetId.value);
+    cabinetInfo.value = data;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  cabinetId.value = Number(route.query.id);
+  fetchCabinetDetail();
+});
+</script>
+
+<template>
+  <div class="detail-container">
+    <div class="flex-container">
+      <el-card class="cabinet-info-card">
+        <div class="cabinet-header">
+          <img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[cabinetInfo.templateNo]?.img || 'default.jpg'}`"
+            class="cabinet-image" />
+          <div class="cabinet-name">{{ cabinetInfo.cabinetName }}</div>
+        </div>
+
+        <el-divider />
+
+        <el-descriptions class="cabinet-details" :column="1" border>
+          <el-descriptions-item label="柜体ID">{{ cabinetInfo.cabinetId }}</el-descriptions-item>
+          <el-descriptions-item label="柜体类型">
+            {{ cabinetInfo.cabinetType === 0 ? '主柜' : '副柜' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="模板">
+            {{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="归属商店">
+            {{ cabinetInfo.shopName || '-' }}
+            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="shopConfigVisible = true">
+              配置
+            </el-button>
+          </el-descriptions-item>
+          <el-descriptions-item label="MQTT网关">
+            {{ cabinetInfo.mqttServerId || '-' }}
+            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
+              @click="gatewayConfigVisible = true">
+              配置
+            </el-button>
+          </el-descriptions-item>
+          <el-descriptions-item label="归属主柜" v-if="cabinetInfo.cabinetType === 1">
+            {{ cabinetInfo.mainCabinetName || '-' }}
+            <el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="mainCabinetConfigVisible = true">
+              配置
+            </el-button>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card class="info-card">
+        <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-tabs>
+        </div>
+
+        <el-descriptions class="info-details" v-if="activeTab === 'basic'" :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="MQTT服务器ID">{{ cabinetInfo.mqttServerId || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="info-details" v-if="activeTab === 'cells'">
+          <!-- 单元格配置内容 -->
+        </div>
+      </el-card>
+      <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId"
+        @refresh="fetchCabinetDetail" />
+      <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
+      <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
+        @refresh="fetchCabinetDetail" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .flex-container {
+    display: flex;
+    flex: 1;
+    gap: 20px;
+    min-height: 0;
+
+    .cabinet-info-card {
+      width: 30%;
+    }
+
+    .info-card {
+      width: 70%;
+    }
+  }
+
+  .cabinet-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .cabinet-image {
+      width: 100%;
+      height: 420px;
+      object-fit: contain;
+      margin-bottom: 15px;
+    }
+
+    .cabinet-name {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .tab-header {
+    margin-bottom: 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { getSmartCabinetList, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
+import { type PaginationProps } from "@pureadmin/table";
+import { CommonUtils } from "@/utils/common";
+import { useRouter } from "vue-router";
+import { CabinetImgMap } from "@/utils/cabinetImgMap";
+
+import Search from "@iconify-icons/ep/search";
+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";
+const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
+
+defineOptions({
+  name: "SmartCabinetCard"
+});
+
+const router = useRouter();
+const formRef = ref();
+const modalVisible = ref(false);
+const searchFormParams = ref({
+  cabinetName: "",
+  cabinetType: null
+});
+
+const pageLoading = ref(false);
+const dataList = ref<SmartCabinetDTO[]>([]);
+const pagination = ref<PaginationProps>({
+  total: 0,
+  pageSize: 12,
+  currentPage: 1,
+  background: true
+});
+
+async function onSearch() {
+  pagination.value.currentPage = 1;
+  getList();
+}
+
+async function getList() {
+  try {
+    pageLoading.value = true;
+    const { data } = await getSmartCabinetList({
+      ...searchFormParams.value,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    dataList.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    pageLoading.value = false;
+  }
+}
+
+const resetForm = formEl => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+const handleViewDetail = (row: SmartCabinetDTO) => {
+  router.push({
+    path: '/cabinet/card/detail',
+    query: {
+      id: row.cabinetId
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="main">
+    <div class="float-right w-full">
+      <el-form ref="formRef" :inline="true" :model="searchFormParams"
+        class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
+        <el-form-item label="" prop="cabinetName">
+          <el-input v-model="searchFormParams.cabinetName" placeholder="请输入柜体名称" clearable class="!w-[200px]" />
+        </el-form-item>
+        <el-form-item label="" prop="cabinetType">
+          <el-select v-model="searchFormParams.cabinetType" placeholder="请选择柜体类型" clearable class="!w-[180px]">
+            <el-option label="主柜" :value="0" />
+            <el-option label="副柜" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
+            搜索
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+            重置
+          </el-button>
+        </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>
+
+      <div class="grid-container">
+        <el-row :gutter="12">
+          <el-col v-for="(item, index) in dataList" :key="item.cabinetId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
+            <el-card class="cabinet-card" :body-style="{ padding: '8px 20px' }">
+              <div class="card-content">
+                <img
+                  :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
+                  class="cabinet-image" />
+                <el-descriptions class="cabinet-info" :column="2">
+                  <el-descriptions-item class="name" :span="2">柜体名称：{{ item.cabinetName }}
+                  </el-descriptions-item>
+                  <!-- <div class="type">柜体类型：{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
+                  <el-descriptions-item class="template">模板：{{ CabinetImgMap[item.templateNo]?.name || '-' }}
+                  </el-descriptions-item>
+                  <el-descriptions-item class="shop">商店：{{ item.shopName || '-' }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </div>
+              <el-divider class="divider" />
+              <el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
+            </el-card>
+          </el-col>
+        </el-row>
+        <div class="pagination-wrapper">
+          <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
+            :total="pagination.total" v-model:current-page="pagination.currentPage" @current-change="getList"
+            @size-change="getList" />
+        </div>
+      </div>
+    </div>
+    <smart-cabinet-card-form-modal v-model:visible="modalVisible" @refresh="getList" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+}
+
+:deep(.el-descriptions__cell) {
+  padding-bottom: 1px !important;
+}
+
+.cabinet-card {
+  margin-bottom: 12px;
+  min-height: 210px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .cabinet-image {
+    width: 100%;
+    height: 200px;
+    object-fit: contain;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+
+  .card-content {
+    flex: 1;
+    margin: 15px 0px;
+
+    .cabinet-info {
+      text-align: left;
+
+      .name,
+      .type,
+      .shop,
+      .location,
+      .template {
+        width: 100%;
+        font-size: 14px;
+        color: #606266;
+        margin-bottom: 6px;
+        line-height: 1;
+        text-align: left;
+      }
+
+      .name {
+        width: 100%;
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+  }
+
+  .divider {
+    margin: 5px 0px;
+  }
+
+  .detail-btn {
+    width: 100%;
+    border: 0;
+    margin-top: auto;
+    padding: 8px 0;
+  }
+}
+
+.grid-container {
+  margin: 12px 0;
+  position: relative;
+
+  .el-row {
+    margin-bottom: -20px;
+  }
+}
+
+.pagination-wrapper {
+  position: relative;
+  background: var(--el-bg-color);
+  padding: 8px 12px;
+  margin-top: 20px;
+  text-align: center;
+
+  :deep(.el-pagination) {
+    margin: 0;
+    padding: 4px 0;
+  }
+}
+
+.space-item {
+  flex: 1;
+  width: 100%;
+}
+</style>

src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { addSmartCabinet } from "@/api/cabinet/smart-cabinet";
+import Confirm from "@iconify-icons/ep/check";
+import type { FormRules } from 'element-plus';
+import { CabinetImgMap } from "@/utils/cabinetImgMap";
+
+export interface FormDTO {
+  cabinetName: string;
+  cabinetType: number;
+  templateNo: string;
+  lockControlNo: number;
+  location: number;
+}
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(["update:visible", "refresh"]);
+
+const formRef = ref();
+const formData = reactive<FormDTO>({
+  cabinetName: "",
+  cabinetType: 1,
+  templateNo: "",
+  lockControlNo: 0,
+  location: 0
+});
+
+const rules = reactive<FormRules>({
+  cabinetName: [{ required: true, message: "柜体名称必填", trigger: "blur" }],
+  cabinetType: [{ required: true, message: "请选择柜体类型", trigger: "change" }],
+  templateNo: [{ required: true, message: "请选择模板编号", trigger: "change" }],
+  lockControlNo: [
+    { required: true, message: "锁控板序号", trigger: "blur" }
+  ],
+  location: [
+    { required: true, message: "位置信息必填", trigger: "blur" },
+    { type: 'number', min: 0, message: '位置编号不能为负数', trigger: 'blur' }
+  ]
+});
+
+const handleConfirm = async () => {
+  try {
+    await formRef.value.validate();
+    await addSmartCabinet(formData);
+    ElMessage.success("新增成功");
+    emit("refresh");
+    closeDialog();
+  } catch (error) {
+    console.error("表单提交失败", error);
+  }
+};
+
+const closeDialog = () => {
+  formRef.value.resetFields();
+  emit("update:visible", false);
+};
+
+const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
+  label: item.name,
+  value
+}));
+</script>
+
+<template>
+  <el-dialog title="新增智能柜" :model-value="visible" width="600px" @close="closeDialog">
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+      <el-form-item label="柜体名称" prop="cabinetName">
+        <el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
+      </el-form-item>
+
+      <el-form-item label="柜体类型" prop="cabinetType">
+        <el-select v-model="formData.cabinetType" placeholder="请选择类型">
+          <el-option label="主柜" :value="0" />
+          <el-option label="副柜" :value="1" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="模板编号" prop="templateNo">
+        <el-select v-model="formData.templateNo" placeholder="请选择模板编号">
+          <el-option v-for="option in templateOptions" :key="option.value" :label="option.label"
+            :value="option.value" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
+        确认
+      </el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/cabinet/smart-cabinet/GatewayConfigModal.vue

@@ -4,6 +4,7 @@
       <el-table-column prop="mqttServerId" label="服务ID" width="100" />
       <el-table-column prop="serverUrl" label="服务地址" />
       <el-table-column prop="username" label="用户名" width="120" />
+      <el-table-column prop="publishTopic" label="发布主题" />
       <el-table-column label="操作" width="80" fixed="right">
         <template #default="{ row }">
           <el-button link type="primary" @click="handleConfig(row)">配置</el-button>
@@ -17,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { getMqttServerList } from '@/api/cabinet/mqttServer';
 import { MqttServerDTO } from '@/api/cabinet/mqttServer';
 import { ElMessage } from 'element-plus';
@@ -28,9 +29,12 @@ const props = defineProps<{
   cabinetId: number;
 }>();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'refresh']);
 
-const visible = ref(props.modelValue);
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
 const mqttList = ref<MqttServerDTO[]>([]);
 const loading = ref(false);
 const currentCabinetId = ref<number>();
@@ -66,6 +70,9 @@ const onCurrentChange = (val: number) => {
 
 watch(() => props.modelValue, (val) => {
   visible.value = val;
+  if (val) {
+    loadMqttServers();
+  }
 });
 
 watch(() => props.cabinetId, (newVal) => {
@@ -83,6 +90,7 @@ const handleConfig = async (row: MqttServerDTO) => {
     });
     ElMessage.success('配置成功');
     emit('update:modelValue', false);
+    emit('refresh');
   } catch (error) {
     console.error('配置失败', error);
   }

src/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dialog v-model="visible" title="主柜配置" width="800px">
+    <el-table :data="cabinetList" v-loading="loading" border>
+      <el-table-column prop="cabinetId" label="柜体ID" width="100" />
+      <el-table-column prop="cabinetName" label="柜体名称" />
+      <el-table-column label="柜体类型" width="120">
+        <template #default="{ row }">
+          <el-tag :type="row.cabinetType === 0 ? 'success' : 'warning'">
+            {{ row.cabinetType === 0 ? '主柜' : '副柜' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="80" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="handleConfig(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" />
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { SmartCabinetDTO } from '@/api/cabinet/smart-cabinet';
+import { ElMessage } from 'element-plus';
+import { getSmartCabinetList } from '@/api/cabinet/smart-cabinet';
+import { updateSmartCabinet } from '@/api/cabinet/smart-cabinet';
+
+const props = defineProps<{
+  modelValue: boolean;
+  cabinetId: number;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'refresh']);
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+const cabinetList = ref<SmartCabinetDTO[]>([]);
+const loading = ref(false);
+const currentCabinetId = ref<number>();
+const pagination = ref({
+  pageSize: 10,
+  currentPage: 1,
+  total: 0
+});
+
+const loadMainCabinets = async () => {
+  try {
+    loading.value = true;
+    const { data } = await getSmartCabinetList({
+      cabinetType: 0,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    cabinetList.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onSizeChange = (val: number) => {
+  pagination.value.pageSize = val;
+  loadMainCabinets();
+};
+
+const onCurrentChange = (val: number) => {
+  pagination.value.currentPage = val;
+  loadMainCabinets();
+};
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val;
+});
+
+watch(() => props.cabinetId, (newVal) => {
+  if (newVal) {
+    currentCabinetId.value = newVal;
+    loadMainCabinets();
+  }
+});
+
+const handleConfig = async (row: SmartCabinetDTO) => {
+  try {
+    await updateSmartCabinet(currentCabinetId.value, {
+      cabinetId: currentCabinetId.value,
+      mainCabinet: row.cabinetId
+    });
+    ElMessage.success('配置成功');
+    emit('update:modelValue', false);
+    emit('refresh');
+  } catch (error) {
+    console.error('配置失败', error);
+  }
+};
+</script>

src/views/cabinet/smart-cabinet/ShopConfigModal.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { getShopList } from '@/api/shop/shop';
 import { ShopDTO } from '@/api/shop/shop';
 import { ElMessage } from 'element-plus';
@@ -27,9 +27,12 @@ const props = defineProps<{
   cabinetId: number;
 }>();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'refresh']);
 
-const visible = ref(props.modelValue);
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
 const shopList = ref<ShopDTO[]>([]);
 const loading = ref(false);
 const currentCabinetId = ref<number>();
@@ -65,6 +68,9 @@ const onCurrentChange = (val: number) => {
 
 watch(() => props.modelValue, (val) => {
   visible.value = val;
+  if (val) {
+    loadShops();
+  }
 });
 
 watch(() => props.cabinetId, (newVal) => {
@@ -82,6 +88,7 @@ const handleConfig = async (row: ShopDTO) => {
     });
     ElMessage.success('配置成功');
     emit('update:modelValue', false);
+    emit('refresh');
   } catch (error) {
     console.error('配置失败', error);
   }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getSmartCabinetList, SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
@@ -16,6 +16,7 @@ import { deleteSmartCabinet } from "@/api/cabinet/smart-cabinet";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import GatewayConfigModal from "./GatewayConfigModal.vue";
 import ShopConfigModal from "./ShopConfigModal.vue";
+import MainCabinetConfigModal from "./MainCabinetConfigModal.vue";
 
 defineOptions({
   name: "SmartCabinet"
@@ -37,13 +38,14 @@ const pagination = ref({
 });
 
 const loading = ref(false);
-const dataList = ref([]);
+const dataList = ref<SmartCabinetDTO[]>([]);
 const multipleSelection = ref<number[]>([]);
 const editVisible = ref(false);
 const currentRow = ref<SmartCabinetDTO>();
 const gatewayConfigVisible = ref(false);
 const shopConfigVisible = ref(false);
-const currentCabinetId = ref<number>();
+const mainCabinetConfigVisible = ref(false);
+const currentCabinetId = ref<number>(0);
 
 const getList = async () => {
   try {
@@ -145,6 +147,11 @@ const handleShopConfig = (row: SmartCabinetDTO) => {
   shopConfigVisible.value = true;
 };
 
+const handleMainCabinetConfig = (row: SmartCabinetDTO) => {
+  currentCabinetId.value = row.cabinetId;
+  mainCabinetConfigVisible.value = true;
+};
+
 getList();
 </script>
 
@@ -185,14 +192,43 @@ getList();
         @selection-change="handleSelectionChange" border>
         <el-table-column type="selection" width="55" />
         <el-table-column label="柜体名称" prop="cabinetName" />
+        <el-table-column label="归属商店" prop="shopName" width="180">
+          <template #default="{ row }">
+            <span>{{ row.shopName }}</span>
+            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="handleShopConfig(row)">
+              配置
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属主柜" prop="mainCabinetName" width="180">
+          <template #default="{ row }">
+            <template v-if="row.cabinetType === 1">
+              <span>{{ row.mainCabinetName || '-' }}</span>
+              <el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="handleMainCabinetConfig(row)">
+                配置
+              </el-button>
+            </template>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
         <el-table-column label="柜体类型" prop="cabinetType" width="120">
           <template #default="{ row }">
-            {{ row.cabinetType === 0 ? '主柜' : '副柜' }}
+            <el-tag :type="row.cabinetType === 0 ? 'success' : 'warning'">
+              {{ row.cabinetType === 0 ? '主柜' : '副柜' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="模板编号" prop="templateNo" width="180" />
         <el-table-column label="锁控编号" prop="lockControlNo" width="120" />
-        <el-table-column label="网关ID" prop="mqttServerId" width="120" />
+        <el-table-column label="网关ID" prop="mqttServerId" width="180">
+          <template #default="{ row }">
+            <span>{{ row.mqttServerId }}</span>
+            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
+              @click="handleGatewayConfig(row)">
+              配置
+            </el-button>
+          </template>
+        </el-table-column>
         <el-table-column label="位置" prop="location" width="120" />
         <el-table-column label="操作" width="150" fixed="right">
           <template #default="{ row }">
@@ -202,13 +238,6 @@ getList();
             <el-button type="warning" link :icon="useRenderIcon(EditPen)" @click="goCellManagement(row)">
               格口
             </el-button>
-            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
-              @click="handleGatewayConfig(row)">
-              配置网关
-            </el-button>
-            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="handleShopConfig(row)">
-              配置商店
-            </el-button>
             <el-popconfirm :title="`确认删除【${row.cabinetName}】？`" @confirm="handleDelete(row)">
               <template #reference>
                 <el-button type="danger" link :icon="useRenderIcon(Delete)">
@@ -225,7 +254,8 @@ getList();
     </PureTableBar>
     <smart-cabinet-form-modal v-model:visible="modalVisible" @refresh="getList" />
     <smart-cabinet-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
-    <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="currentCabinetId" />
-    <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="currentCabinetId" />
+    <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
+    <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
+    <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
   </div>
 </template>

src/views/cabinet/smart-cabinet/smart-cabinet-edit-modal.vue

@@ -7,7 +7,7 @@ import Confirm from "@iconify-icons/ep/check";
 import type { FormRules } from 'element-plus';
 
 export interface FormDTO {
-  cabinetId?: number;
+  cabinetId: number;
   cabinetName: string;
   cabinetType: number;
   templateNo: string;
@@ -30,6 +30,7 @@ const emit = defineEmits(["update:visible", "refresh"]);
 
 const formRef = ref();
 const formData = reactive<FormDTO>({
+  cabinetId: 0,
   cabinetName: "",
   cabinetType: 1,
   templateNo: "",

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

@@ -311,7 +311,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
           </el-table-column>
         </el-table>
         <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+          :page-sizes="[5,8,10,11,12,13,14,15,16,18,20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
           @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
       </div>
       <el-dialog v-model="configVisible" title="配置商品" width="80%">

src/views/user/ab98/index.vue

@@ -88,6 +88,8 @@ onMounted(() => {
           <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
             搜索
           </el-button>
+        </el-form-item>
+        <el-form-item>
           <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
             重置
           </el-button>