修改传参方式

This commit is contained in:
re-JZzzz
2025-09-20 19:27:56 +08:00
parent 3445e54da0
commit 7eabcd203f
15 changed files with 948 additions and 604 deletions

View File

@ -82,15 +82,15 @@
</el-table-column>
<el-table-column label="操作" min-width="150" fixed="right">
<template #default="scope">
<el-button type="primary" link @click="handleDetails(scope.row)" size="small">
<span style="color: #1890ff; cursor: pointer; margin-right: 15px;" @click="handleDetails(scope.row)">
查看
</el-button>
<el-button type="primary" link @click="handleConfig(scope.row)" size="small">
</span>
<span style="color: #666666; cursor: pointer; margin-right: 15px;" @click="handleConfig(scope.row)">
配置
</el-button>
<el-button type="primary" link @click="handleDelete(scope.row)" size="small">
</span>
<span style="color: #666666; cursor: pointer;" @click="handleDelete(scope.row)">
删除
</el-button>
</span>
</template>
</el-table-column>
</el-table>
@ -106,8 +106,18 @@
<script setup>
import { Search, CirclePlus, Setting } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ref, reactive, watch } from 'vue';
// 定义props接收数据
const props = defineProps({
tableData: {
type: Object,
default: () => ({
list: [],
total: 0
})
}
});
// 搜索表单数据
const searchForm = reactive({
@ -125,112 +135,17 @@ const loading = ref(false);
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 545
total: 0
});
// 设备列表数据
const deviceList = ref([
{
deviceId: 'WO-2023-0620-056',
deviceName: '逆变器-01',
deviceType: '逆变器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-057',
deviceName: '温度传感器-45',
deviceType: '传感器',
station: '兴电基站2',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'interrupt'
},
{
deviceId: 'WO-2023-0620-058',
deviceName: '智能电表-03',
deviceType: '电表',
station: '兴电基站3',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'abnormal'
},
{
deviceId: 'WO-2023-0620-059',
deviceName: '监控摄像头-02',
deviceType: '摄像头',
station: '兴电基站4',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-060',
deviceName: '控制器-07',
deviceType: '控制器',
station: '兴电基站5',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-061',
deviceName: '逆变器-02',
deviceType: '逆变器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-062',
deviceName: '电流传感器-08',
deviceType: '传感器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-063',
deviceName: '多功能电表-12',
deviceType: '电表',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-064',
deviceName: '门禁摄像头-05',
deviceType: '摄像头',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
},
{
deviceId: 'WO-2023-0620-065',
deviceName: '开关控制器-15',
deviceType: '控制器',
station: '兴电基站1',
protocol: 'Modbus TCP',
ipAddress: '192.168.1.101',
lastOnlineTime: '2023-06-30 17:00',
status: 'normal'
}
]);
const deviceList = ref([]);
// 监听props变化并更新设备列表
watch(() => props.tableData, (newData) => {
deviceList.value = newData.list || [];
pagination.total = newData.total || 0;
}, { immediate: true, deep: true });
// 获取状态文本
const getStatusText = (status) => {
@ -269,6 +184,7 @@ const getDeviceTypeTagType = (deviceType) => {
// 处理搜索
const handleSearch = () => {
loading.value = true;
pagination.currentPage = 1;
// 模拟搜索请求
setTimeout(() => {
loading.value = false;
@ -292,19 +208,19 @@ const handleBatchConfig = () => {
// 处理查看详情
const handleDetails = (row) => {
// 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
ElMessage.success(`查看设备${row.deviceCode}详情`);
ElMessage.success(`查看设备${row.deviceId}详情`);
};
// 处理配置
const handleConfig = (row) => {
// 实际项目中这里应该打开设备配置的弹窗
ElMessage.success(`配置设备${row.deviceCode}`);
ElMessage.success(`配置设备${row.deviceId}`);
};
// 处理删除
const handleDelete = (row) => {
ElMessageBox.confirm(
`确定要删除设备${row.deviceCode}吗?`,
`确定要删除设备${row.deviceId}吗?`,
'提示',
{
confirmButtonText: '确定',