feat(shop): 添加机柜数量显示及优化配置弹窗样式
- 在ShopDTO接口中添加cabinetCount字段 - 在商店卡片中显示机柜数量 - 将配置弹窗从dialog改为drawer并优化样式 - 为网关配置弹窗应用相同样式优化
This commit is contained in:
parent
6a14db1ee3
commit
1d82d1a5be
|
@ -25,6 +25,8 @@ export interface ShopDTO {
|
||||||
mode?: number;
|
mode?: number;
|
||||||
/** 借呗支付(1-正常使用 0-禁止使用) */
|
/** 借呗支付(1-正常使用 0-禁止使用) */
|
||||||
balanceEnable?: number;
|
balanceEnable?: number;
|
||||||
|
/** 机柜数量 */
|
||||||
|
cabinetCount?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 新增商店命令 */
|
/** 新增商店命令 */
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue