From 1d82d1a5beb873debfdfa074fcdb0b16b238b866 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 17 Jun 2025 15:10:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E6=B7=BB=E5=8A=A0=E6=9C=BA?=
 =?UTF-8?q?=E6=9F=9C=E6=95=B0=E9=87=8F=E6=98=BE=E7=A4=BA=E5=8F=8A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=85=8D=E7=BD=AE=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在ShopDTO接口中添加cabinetCount字段
- 在商店卡片中显示机柜数量
- 将配置弹窗从dialog改为drawer并优化样式
- 为网关配置弹窗应用相同样式优化
---
 src/api/shop/shop.ts                          |  2 +
 src/views/cabinet/shop/card.vue               |  3 +-
 .../smart-cabinet/GatewayConfigModal.vue      | 46 ++++++++++++-------
 .../cabinet/smart-cabinet/ShopConfigModal.vue | 41 +++++++++++------
 4 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/src/api/shop/shop.ts b/src/api/shop/shop.ts
index f7ec002..3c9e644 100644
--- a/src/api/shop/shop.ts
+++ b/src/api/shop/shop.ts
@@ -25,6 +25,8 @@ export interface ShopDTO {
   mode?: number;
   /** 借呗支付（1-正常使用 0-禁止使用） */
   balanceEnable?: number;
+  /** 机柜数量 */
+  cabinetCount?: number;
 }
 
 /** 新增商店命令 */
diff --git a/src/views/cabinet/shop/card.vue b/src/views/cabinet/shop/card.vue
index 0b73bd0..a0ba1e0 100644
--- a/src/views/cabinet/shop/card.vue
+++ b/src/views/cabinet/shop/card.vue
@@ -148,7 +148,8 @@ function getPaymentMethods(mode: number): Array<{ label: string; type: string }>
                 <el-descriptions class="cabinet-info" :column="1">
                   <!-- <el-descriptions-item class="type">模式：{{ item.belongType === 0 ? '借还模式' : '固资模式' }}</el-descriptions-item> -->
                   <el-descriptions-item class="mode">运行模式：<el-tag :type="getModeType(item.mode)">{{
-                    getModeText(item.mode) }}</el-tag></el-descriptions-item>
+                      getModeText(item.mode) }}</el-tag></el-descriptions-item>
+                  <el-descriptions-item class="mode" >机柜数量：{{ item.cabinetCount }}</el-descriptions-item>
                   <!-- <el-descriptions-item class="payment-methods">支付方式：
                   </el-descriptions-item>
                   <el-descriptions-item v-for="method in getPaymentMethods(item.mode)" class="payment-methods">
diff --git a/src/views/cabinet/smart-cabinet/GatewayConfigModal.vue b/src/views/cabinet/smart-cabinet/GatewayConfigModal.vue
index eb342a9..2e21e12 100644
--- a/src/views/cabinet/smart-cabinet/GatewayConfigModal.vue
+++ b/src/views/cabinet/smart-cabinet/GatewayConfigModal.vue
@@ -1,20 +1,22 @@
 <template>
-  <el-dialog v-model="visible" title="MQTT网关配置" width="800px">
-    <el-table :data="mqttList" v-loading="loading" border>
-      <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>
-        </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>
+  <el-drawer v-model="visible" title="MQTT网关配置" size="30%" direction="rtl">
+    <div class="gateway-config-container">
+      <el-table :data="mqttList" v-loading="loading" border>
+        <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>
+          </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" class="pagination" />
+    </div>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -95,4 +97,14 @@ const handleConfig = async (row: MqttServerDTO) => {
     console.error('配置失败', error);
   }
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.gateway-config-container {
+  padding: 12px;
+  background-color: #fff !important;
+}
+
+.pagination {
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/cabinet/smart-cabinet/ShopConfigModal.vue b/src/views/cabinet/smart-cabinet/ShopConfigModal.vue
index d1362ee..3f5b433 100644
--- a/src/views/cabinet/smart-cabinet/ShopConfigModal.vue
+++ b/src/views/cabinet/smart-cabinet/ShopConfigModal.vue
@@ -1,18 +1,20 @@
 <template>
-  <el-dialog v-model="visible" title="地址配置" width="800px">
-    <el-table :data="shopList" v-loading="loading" border>
-      <el-table-column prop="shopId" label="地址ID" width="100" />
-      <el-table-column prop="shopName" label="地址名称" />
-      <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>
+  <el-drawer v-model="visible" title="地址配置" size="30%" direction="rtl">
+    <div class="shop-config-container">
+      <el-table :data="shopList" v-loading="loading" border>
+        <el-table-column prop="shopId" label="地址ID" width="100" />
+        <el-table-column prop="shopName" label="地址名称" />
+        <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" class="pagination" />
+    </div>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -95,4 +97,13 @@ const handleConfig = async (row: ShopDTO) => {
     console.error('配置失败', error);
   }
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.shop-config-container {
+ padding: 12px;
+ background-color: #fff!important;
+}
+.pagination {
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file