shop-front-end/src/views/cabinet/smart-cabinet/GatewayConfigModal.vue

110 lines
3.1 KiB
Vue
Raw Normal View History

<template>
<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">
import { computed, ref, watch } from 'vue';
import { getMqttServerList } from '@/api/cabinet/mqttServer';
import { MqttServerDTO } from '@/api/cabinet/mqttServer';
import { ElMessage } from 'element-plus';
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 mqttList = ref<MqttServerDTO[]>([]);
const loading = ref(false);
const currentCabinetId = ref<number>();
const pagination = ref({
pageSize: 10,
currentPage: 1,
total: 0
});
const loadMqttServers = async () => {
try {
loading.value = true;
const { data } = await getMqttServerList({
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
mqttList.value = data.rows;
pagination.value.total = data.total;
} finally {
loading.value = false;
}
};
const onSizeChange = (val: number) => {
pagination.value.pageSize = val;
loadMqttServers();
};
const onCurrentChange = (val: number) => {
pagination.value.currentPage = val;
loadMqttServers();
};
watch(() => props.modelValue, (val) => {
visible.value = val;
if (val) {
loadMqttServers();
}
});
watch(() => props.cabinetId, (newVal) => {
if (newVal) {
currentCabinetId.value = newVal;
loadMqttServers();
}
});
const handleConfig = async (row: MqttServerDTO) => {
try {
await updateSmartCabinet(currentCabinetId.value, {
cabinetId: currentCabinetId.value,
mqttServerId: row.mqttServerId
});
ElMessage.success('配置成功');
emit('update:modelValue', false);
emit('refresh');
} catch (error) {
console.error('配置失败', error);
}
};
</script>
<style lang="scss" scoped>
.gateway-config-container {
padding: 12px;
background-color: #fff !important;
}
.pagination {
margin-top: 10px;
}
</style>