admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(shop): 添加机柜数量显示及优化配置弹窗样式 

- 在ShopDTO接口中添加cabinetCount字段
- 在商店卡片中显示机柜数量
- 将配置弹窗从dialog改为drawer并优化样式
- 为网关配置弹窗应用相同样式优化
This commit is contained in:
dzq 2025-06-17 15:10:51 +08:00
parent 6a14db1ee3
commit 1d82d1a5be
4 changed files with 59 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/shop/shop.ts
View File

@ -25,6 +25,8 @@ export interface ShopDTO {
mode?: number;
/** 借呗支付（1-正常使用 0-禁止使用） */
balanceEnable?: number;
/** 机柜数量 */
cabinetCount?: number;
}
/** 新增商店命令 */

3
src/views/cabinet/shop/card.vue
View File

@ -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">

44
src/views/cabinet/smart-cabinet/GatewayConfigModal.vue
View File

@ -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">
@ -96,3 +98,13 @@ const handleConfig = async (row: MqttServerDTO) => {
}
};
</script>
<style lang="scss" scoped>
.gateway-config-container {
padding: 12px;
background-color: #fff !important;
}
.pagination {
margin-top: 10px;
}
</style>

39
src/views/cabinet/smart-cabinet/ShopConfigModal.vue
View File

@ -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">
@ -96,3 +98,12 @@ const handleConfig = async (row: ShopDTO) => {
}
};
</script>
<style lang="scss" scoped>
.shop-config-container {
padding: 12px;
background-color: #fff!important;
}
.pagination {
margin-top: 10px;
}
</style>