feat: 完善级联管理的查看设备弹窗和列表权限

src/views/iot/cascade/deviceList.vue

@@ -1,17 +1,35 @@
 <template>
-	<el-dialog v-model="visible" title="设备列表" width="800px" destroy-on-close>
+	<el-dialog v-model="visible" :title="name + '-设备列表'" width="1000px" destroy-on-close>
 		<div class="device-list">
 			<el-table :data="tableData" style="width: 100%" v-loading="loading">
-				<el-table-column prop="deviceName" label="设备名称" />
-				<el-table-column prop="deviceCode" label="设备编号" />
-				<el-table-column prop="status" label="状态">
+				<el-table-column label="标识" prop="key" min-width="150" show-overflow-tooltip>
+					<template #default="{ row }">
+						<copy :text="row.key"></copy>
+					</template>
+				</el-table-column>
+				<el-table-column label="设备名称" prop="name" min-width="160" show-overflow-tooltip />
+				<el-table-column label="设备类型" prop="product.deviceType" min-width="100" align="center" show-overflow-tooltip />
+				<el-table-column label="所属产品" prop="productName" min-width="120" align="center" show-overflow-tooltip />
+				<el-table-column prop="status" label="状态" min-width="80" align="center">
+					<template #default="scope">
+						<el-tag type="danger" size="small" v-if="scope.row.status == 1">离线</el-tag>
+						<el-tag type="success" size="small" v-if="scope.row.status == 2">在线</el-tag>
+						<el-tag type="info" size="small" v-if="scope.row.status == 0">未启用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="160"></el-table-column>
+				<el-table-column label="操作" width="100" align="center">
 					<template #default="scope">
-						<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-							{{ scope.row.status === 1 ? '在线' : '离线' }}
-						</el-tag>
+						<router-link
+							:to="'/iotmanager/device/instance/' + scope.row.key"
+							class="link-type"
+							style="font-size: 12px; color: #409eff"
+							v-auth="'detail'"
+						>
+							<span>详情</span>
+						</router-link>
 					</template>
 				</el-table-column>
-				<el-table-column prop="createTime" label="创建时间" />
 			</el-table>
 		</div>
 	</el-dialog>
@@ -23,14 +41,17 @@ import api from '/@/api/system'
 import { useSearch } from '/@/hooks/useCommon'
 
 const visible = ref(false)
+const name = ref('')
 
 const { params, tableData, getList, loading } = useSearch<any[]>(api.cascade.deviceList, 'list', {
 	tenantCode: '',
+	status: undefined,
 })
 
 // 打开弹窗
 const open = async (row: any) => {
 	tableData.value = []
+	name.value = row.name
 	params.tenantCode = row.tenantCode
 	visible.value = true
 	getList(1)

src/views/iot/cascade/index.vue

@@ -1,168 +1,168 @@
 <template>
-	<div class="page-full">
-		<div class="search flex-row mb-4 gap-4">
-			<el-card shadow="nover" class="home-card-top-part flex1">
-				<div class="top">
-					<div class="label">子平台</div>
-					<span class="font30">{{ count.PlatformTotal }}</span>
-				</div>
-				<div class="divider"></div>
-				<div class="card-bottom">
-					<div class="flex" style="gap: 10px">
-						<img src="/@/assets/ok.svg" alt="" class="icon" />
-						<span class="info" :style="{ color: '#3cd357' }">在线</span>
-						<div class="num">{{ count.PlatformOnline }}</div>
-					</div>
-					<div class="split"></div>
-					<div class="flex" style="gap: 10px">
-						<img src="/@/assets/stop.svg" alt="" class="icon" />
-						<span class="info" :style="{ color: '#FFBB73' }">离线</span>
-						<div class="num">{{ count.PlatformOffline }}</div>
-					</div>
-				</div>
-			</el-card>
-			<el-card shadow="nover" class="home-card-top-part flex1">
-				<div class="top">
-					<div class="label">设备总数</div>
-					<span class="font30">{{ count.DeviceTotal }}</span>
-				</div>
-				<div class="divider"></div>
-				<div class="card-bottom">
-					<div class="flex" style="gap: 10px">
-						<img src="/@/assets/ok.svg" alt="" class="icon" />
-						<span class="info" :style="{ color: '#3cd357' }">在线</span>
-						<div class="num">{{ count.DeviceOnline }}</div>
-					</div>
-					<div class="split"></div>
-					<div class="flex" style="gap: 10px">
-						<img src="/@/assets/stop.svg" alt="" class="icon" />
-						<span class="info" :style="{ color: '#FFBB73' }">离线</span>
-						<div class="num">{{ count.DeviceOffline }}</div>
-					</div>
-				</div>
-			</el-card>
-		</div>
-		<el-card shadow="nover" class="page-full-part">
-			<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-				<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
-				<el-table-column prop="name" label="子平台" show-overflow-tooltip v-col="'name'" align="center"></el-table-column>
-				<el-table-column prop="address" label="地址" v-col="'address'" align="center"></el-table-column>
-				<el-table-column prop="deviceOnline" label="设备" v-col="'deviceOnline'" align="center">
-					<template #default="{ row }">{{ row.deviceOnline }}/{{ row.deviceOnline + row.deviceOffline }} </template>
-				</el-table-column>
-				<el-table-column prop="status" label="状态" v-col="'status'" :formatter="(row, a) => (a ? '在线' : '离线')" align="center"></el-table-column>
-				<el-table-column prop="lastTime" label="最后更新时间" width="180" align="center" v-col="'lastTime'"></el-table-column>
-				<el-table-column label="操作" width="160" align="center">
-					<template #default="{ row }">
-						<!-- <el-button size="small" text type="warning" v-auth="'sync'" :loading="row.loading" @click="sync(row)">同步</el-button> -->
-						<el-button size="small" text type="primary" v-auth="'detail'" @click="viewDeviceList(row)">查看设备</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-		</el-card>
-		<deviceList ref="deviceListRef" />
-	</div>
+  <div class="page-full">
+    <div class="search flex-row mb-4 gap-4">
+      <el-card shadow="nover" class="home-card-top-part flex1">
+        <div class="top">
+          <div class="label">子平台</div>
+          <span class="font30">{{ count.PlatformTotal }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="card-bottom">
+          <div class="flex" style="gap: 10px">
+            <img src="/@/assets/ok.svg" alt="" class="icon" />
+            <span class="info" :style="{ color: '#3cd357' }">在线</span>
+            <div class="num">{{ count.PlatformOnline }}</div>
+          </div>
+          <div class="split"></div>
+          <div class="flex" style="gap: 10px">
+            <img src="/@/assets/stop.svg" alt="" class="icon" />
+            <span class="info" :style="{ color: '#FFBB73' }">离线</span>
+            <div class="num">{{ count.PlatformOffline }}</div>
+          </div>
+        </div>
+      </el-card>
+      <el-card shadow="nover" class="home-card-top-part flex1">
+        <div class="top">
+          <div class="label">设备总数</div>
+          <span class="font30">{{ count.DeviceTotal }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="card-bottom">
+          <div class="flex" style="gap: 10px">
+            <img src="/@/assets/ok.svg" alt="" class="icon" />
+            <span class="info" :style="{ color: '#3cd357' }">在线</span>
+            <div class="num">{{ count.DeviceOnline }}</div>
+          </div>
+          <div class="split"></div>
+          <div class="flex" style="gap: 10px">
+            <img src="/@/assets/stop.svg" alt="" class="icon" />
+            <span class="info" :style="{ color: '#FFBB73' }">离线</span>
+            <div class="num">{{ count.DeviceOffline }}</div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+    <el-card shadow="nover" class="page-full-part">
+      <el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
+        <el-table-column prop="name" label="子平台" show-overflow-tooltip v-col="'name'" align="center"></el-table-column>
+        <el-table-column prop="address" label="地址" v-col="'address'" align="center"></el-table-column>
+        <el-table-column prop="deviceOnline" label="设备" v-col="'deviceOnline'" align="center">
+          <template #default="{ row }">{{ row.deviceOnline }}/{{ row.deviceOnline + row.deviceOffline }} </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" v-col="'status'" :formatter="(_row: any, a: any) => (a ? '在线' : '离线')" align="center"></el-table-column>
+        <el-table-column prop="lastTime" label="最后更新时间" width="180" align="center" v-col="'lastTime'"></el-table-column>
+        <el-table-column label="操作" width="160" v-col="'handle'" align="center">
+          <template #default="{ row }">
+            <!-- <el-button size="small" text type="warning" v-auth="'sync'" :loading="row.loading" @click="sync(row)">同步</el-button> -->
+            <el-button size="small" text type="primary" v-auth="'detail'" @click="viewDeviceList(row)">查看设备</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+    </el-card>
+    <deviceList ref="deviceListRef" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ElMessage } from 'element-plus'
-import { ref, reactive } from 'vue'
-import api from '/@/api/system'
-import { useSearch } from '/@/hooks/useCommon'
-import deviceList from './deviceList.vue'
+import { ElMessage } from "element-plus";
+import { ref, reactive } from "vue";
+import api from "/@/api/system";
+import { useSearch } from "/@/hooks/useCommon";
+import deviceList from "./deviceList.vue";
 
-const deviceListRef = ref()
-const { params, tableData, getList, loading } = useSearch<any[]>(api.cascade.getList, 'list', {})
-getList()
+const deviceListRef = ref();
+const { params, tableData, getList, loading } = useSearch<any[]>(api.cascade.getList, "list", {});
+getList();
 
 const count = reactive({
-	PlatformTotal: '-',
-	PlatformOnline: '-',
-	PlatformOffline: '-',
-	DeviceTotal: '-',
-	DeviceOnline: '-',
-	DeviceOffline: '-',
-})
+  PlatformTotal: "-",
+  PlatformOnline: "-",
+  PlatformOffline: "-",
+  DeviceTotal: "-",
+  DeviceOnline: "-",
+  DeviceOffline: "-",
+});
 
 api.cascade.statistic().then(({ data: res = {} }: any) => {
-	Object.assign(count, res)
-})
+  Object.assign(count, res);
+});
 
 const viewDeviceList = (row: any) => {
-	deviceListRef.value?.open(row)
-}
+  deviceListRef.value?.open(row);
+};
 
 const sync = (row?: any) => {
-	row.loading = true
-	api.cascade
-		.sync()
-		.then(() => {
-			ElMessage.success('同步成功')
-		})
-		.finally(() => {
-			row.loading = false
-		})
-}
+  row.loading = true;
+  api.cascade
+    .sync()
+    .then(() => {
+      ElMessage.success("同步成功");
+    })
+    .finally(() => {
+      row.loading = false;
+    });
+};
 </script>
 <style lang="scss" scoped>
 .home-card-top-part {
-	background-color: var(--el-color-white);
-	padding: 0;
+  background-color: var(--el-color-white);
+  padding: 0;
 
-	.top {
-		display: flex;
-		justify-content: center;
-		overflow: hidden;
-		align-items: center;
-	}
+  .top {
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    align-items: center;
+  }
 
-	.icoimg {
-		width: 54px !important;
-		height: 54px !important;
-		margin-right: 12px;
-	}
+  .icoimg {
+    width: 54px !important;
+    height: 54px !important;
+    margin-right: 12px;
+  }
 
-	.label {
-		font-size: 14px;
-		font-weight: 500;
-		margin-right: 12px;
-		margin-top: 3px;
-	}
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-right: 12px;
+    margin-top: 3px;
+  }
 
-	.divider {
-		border-top: 1px solid var(--el-border-color-light);
-		margin: 5px 0 10px;
-	}
+  .divider {
+    border-top: 1px solid var(--el-border-color-light);
+    margin: 5px 0 10px;
+  }
 
-	.font30 {
-		color: #4285f4;
-		font-weight: bold;
-		font-size: 30px;
-	}
+  .font30 {
+    color: #4285f4;
+    font-weight: bold;
+    font-size: 30px;
+  }
 
-	.card-bottom {
-		font-size: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: space-around;
-		gap: 12px;
-		white-space: nowrap;
+  .card-bottom {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 12px;
+    white-space: nowrap;
 
-		.split {
-			border-right: 1px solid var(--el-border-color-light);
-			height: 20px;
-		}
+    .split {
+      border-right: 1px solid var(--el-border-color-light);
+      height: 20px;
+    }
 
-		.icon {
-			width: 17px;
-			height: 17px;
-		}
+    .icon {
+      width: 17px;
+      height: 17px;
+    }
 
-		.info {
-			font-size: 12px;
-			font-weight: 500;
-		}
-	}
+    .info {
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
 }
 </style>