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; mode?: number;
/** 借呗支付（1-正常使用 0-禁止使用） */ /** 借呗支付（1-正常使用 0-禁止使用） */
balanceEnable?: number; 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 class="cabinet-info" :column="1">
<!-- <el-descriptions-item class="type">模式：{{ item.belongType === 0 ? '借还模式' : '固资模式' }}</el-descriptions-item> --> <!-- <el-descriptions-item class="type">模式：{{ item.belongType === 0 ? '借还模式' : '固资模式' }}</el-descriptions-item> -->
<el-descriptions-item class="mode">运行模式：<el-tag :type="getModeType(item.mode)">{{ <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 class="payment-methods">支付方式：
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-for="method in getPaymentMethods(item.mode)" class="payment-methods"> <el-descriptions-item v-for="method in getPaymentMethods(item.mode)" class="payment-methods">

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

@ -1,20 +1,22 @@
<template> <template>
<el-dialog v-model="visible" title="MQTT网关配置" width="800px"> <el-drawer v-model="visible" title="MQTT网关配置" size="30%" direction="rtl">
<el-table :data="mqttList" v-loading="loading" border> <div class="gateway-config-container">
<el-table-column prop="mqttServerId" label="服务ID" width="100" /> <el-table :data="mqttList" v-loading="loading" border>
<el-table-column prop="serverUrl" label="服务地址" /> <el-table-column prop="mqttServerId" label="服务ID" width="100" />
<el-table-column prop="username" label="用户名" width="120" /> <el-table-column prop="serverUrl" label="服务地址" />
<el-table-column prop="publishTopic" label="发布主题" /> <el-table-column prop="username" label="用户名" width="120" />
<el-table-column label="操作" width="80" fixed="right"> <el-table-column prop="publishTopic" label="发布主题" />
<template #default="{ row }"> <el-table-column label="操作" width="80" fixed="right">
<el-button link type="primary" @click="handleConfig(row)">配置</el-button> <template #default="{ row }">
</template> <el-button link type="primary" @click="handleConfig(row)">配置</el-button>
</el-table-column> </template>
</el-table> </el-table-column>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" </el-table>
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
@size-change="onSizeChange" @current-change="onCurrentChange" /> :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
</el-dialog> @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
</el-drawer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -95,4 +97,14 @@ const handleConfig = async (row: MqttServerDTO) => {
console.error('配置失败', error); console.error('配置失败', error);
} }
}; };
</script> </script>
<style lang="scss" scoped>
.gateway-config-container {
padding: 12px;
background-color: #fff !important;
}
.pagination {
margin-top: 10px;
}
</style>

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

@ -1,18 +1,20 @@
<template> <template>
<el-dialog v-model="visible" title="地址配置" width="800px"> <el-drawer v-model="visible" title="地址配置" size="30%" direction="rtl">
<el-table :data="shopList" v-loading="loading" border> <div class="shop-config-container">
<el-table-column prop="shopId" label="地址ID" width="100" /> <el-table :data="shopList" v-loading="loading" border>
<el-table-column prop="shopName" label="地址名称" /> <el-table-column prop="shopId" label="地址ID" width="100" />
<el-table-column label="操作" width="80" fixed="right"> <el-table-column prop="shopName" label="地址名称" />
<template #default="{ row }"> <el-table-column label="操作" width="80" fixed="right">
<el-button link type="primary" @click="handleConfig(row)">配置</el-button> <template #default="{ row }">
</template> <el-button link type="primary" @click="handleConfig(row)">配置</el-button>
</el-table-column> </template>
</el-table> </el-table-column>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" </el-table>
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
@size-change="onSizeChange" @current-change="onCurrentChange" /> :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
</el-dialog> @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
</el-drawer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -95,4 +97,13 @@ const handleConfig = async (row: ShopDTO) => {
console.error('配置失败', error); console.error('配置失败', error);
} }
}; };
</script> </script>
<style lang="scss" scoped>
.shop-config-container {
padding: 12px;
background-color: #fff!important;
}
.pagination {
margin-top: 10px;
}
</style>