feat(views): “设备详情”修改为子路由并优化“设备列表”显示逻辑

src/router/index.ts

@@ -184,15 +184,16 @@ const routes: Readonly<RouteRecordRaw[]> = [
           title: 'deviceList',
           requiresAuth: true,
         },
-      },
-      {
-        path: 'equipment-details/:id',
-        name: 'equipmentDetails',
-        component: () => import('@/views/equipment-details/EquipmentDetails.vue'),
-        meta: {
-          title: 'deviceList',
-          requiresAuth: true,
-        },
+        children: [
+          {
+            path: 'equipment-details/:id',
+            name: 'equipmentDetails',
+            component: () => import('@/views/equipment-details/EquipmentDetails.vue'),
+            meta: {
+              requiresAuth: true,
+            },
+          },
+        ],
       },
     ],
   },

src/views/device-list/DeviceList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue';
-import { useRouter } from 'vue-router';
+import { onMounted, ref, useTemplateRef, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 
 import ConfirmModal from '@/components/ConfirmModal.vue';
@@ -65,7 +65,7 @@ const router = useRouter();
 const devicesList = ref<DevicesListItem[]>([]);
 
 const devicesKeys = ref<Key[]>([]);
-
+const route = useRoute();
 const devicesTotal = ref<number>();
 
 const devicePageParam = ref<DevicesList>({
@@ -86,6 +86,7 @@ const groupIdKeys = ref<number[]>([]);
 
 const deviceGroup = ref<DeviceGroupItem[]>([]);
 const equipmentType = ref<EquipmentTypeItem[]>([]);
+const equipmentListShow = ref<boolean>(true);
 
 const modalComponentRef = useTemplateRef('modalComponent');
 
@@ -154,9 +155,17 @@ const addQueryReset = () => {
 };
 
 const addEquipmentDetails = (id: number) => {
-  router.push(`${'/device-manage/equipment-details/'}${id}`);
+  router.push(`${'/device-manage/device-list/equipment-details/'}${id}`);
+  equipmentListShow.value = false;
 };
 
+watch(
+  () => route.path,
+  (value) => {
+    if (value === '/device-manage/device-list') equipmentListShow.value = true;
+  },
+);
+
 onMounted(() => {
   handleRequest(async () => {
     deviceGroup.value = await getPageList();
@@ -171,83 +180,85 @@ onMounted(() => {
 
 <template>
   <div>
-    <AFlex justify="space-between">
-      <div class="text-top">设备管理</div>
-      <div>
-        <AButton class="deletion-button default-button" @click="postDeviceDeletion">
-          <AFlex align="center">
-            <SvgIcon style="margin-right: 4px" name="delete" />
-
-            <span> 删除 </span>
-          </AFlex>
-        </AButton>
-        <AButton type="primary">
-          <AFlex align="center">
-            <SvgIcon style="margin-right: 4px" name="plus" />
-            <span> 添加 </span>
-          </AFlex>
-        </AButton>
-      </div>
-    </AFlex>
-
-    <div class="content">
-      <AFlex wrap="wrap" justify="space-between">
+    <RouterView />
+    <div v-show="equipmentListShow">
+      <AFlex justify="space-between">
+        <div class="text-top">设备管理</div>
         <div>
-          <div class="query-text">搜索</div>
-          <AInput
-            placeholder="请输入设备名称、品牌、型号、网关序列号"
-            class="query-input"
-            v-model:value="devicePageParam.searchContent"
-          />
+          <AButton class="deletion-button default-button" @click="postDeviceDeletion">
+            <AFlex align="center">
+              <SvgIcon style="margin-right: 4px" name="delete" />
+
+              <span> 删除 </span>
+            </AFlex>
+          </AButton>
+          <AButton type="primary">
+            <AFlex align="center">
+              <SvgIcon style="margin-right: 4px" name="plus" />
+              <span> 添加 </span>
+            </AFlex>
+          </AButton>
         </div>
-        <div>
-          <div class="query-text">设备组</div>
-          <ACascader
-            v-model:value="groupIdKeys"
-            class="query-input"
-            :field-names="{ label: 'groupName', value: 'id', children: 'deviceGroupChilds' }"
-            :options="deviceGroup"
-            change-on-select
-            placeholder="请选择"
-          />
-        </div>
-        <div>
-          <div class="query-text">设备类别</div>
+      </AFlex>
 
-          <ASelect
-            class="query-input"
-            v-model:value="devicePageParam.deviceType"
-            :options="equipmentType"
-            :field-names="{ label: 'dataName', value: 'id' }"
-            placeholder="请选择"
-          />
-        </div>
-        <div>
-          <div class="query-text">运行状态</div>
-          <ASelect
-            class="query-input"
-            v-model:value="devicePageParam.runningStatus"
-            placeholder="请选择"
-            :allow-clear="true"
-          >
-            <ASelectOption :value="0">离线</ASelectOption>
-            <ASelectOption :value="1">停机</ASelectOption>
-            <ASelectOption :value="2">运行</ASelectOption>
-          </ASelect>
-        </div>
-        <div>
-          <div class="query-text">故障状态</div>
-          <ASelect
-            class="query-input"
-            v-model:value="devicePageParam.errorStatus"
-            placeholder="请选择"
-            :allow-clear="true"
-          >
-            <ASelectOption :value="0">正常</ASelectOption>
-            <ASelectOption :value="1">故障</ASelectOption>
-          </ASelect>
-        </div>
-        <!-- <div>
+      <div class="content">
+        <AFlex wrap="wrap" justify="space-between">
+          <div>
+            <div class="query-text">搜索</div>
+            <AInput
+              placeholder="请输入设备名称、品牌、型号、网关序列号"
+              class="query-input"
+              v-model:value="devicePageParam.searchContent"
+            />
+          </div>
+          <div>
+            <div class="query-text">设备组</div>
+            <ACascader
+              v-model:value="groupIdKeys"
+              class="query-input"
+              :field-names="{ label: 'groupName', value: 'id', children: 'deviceGroupChilds' }"
+              :options="deviceGroup"
+              change-on-select
+              placeholder="请选择"
+            />
+          </div>
+          <div>
+            <div class="query-text">设备类别</div>
+
+            <ASelect
+              class="query-input"
+              v-model:value="devicePageParam.deviceType"
+              :options="equipmentType"
+              :field-names="{ label: 'dataName', value: 'id' }"
+              placeholder="请选择"
+            />
+          </div>
+          <div>
+            <div class="query-text">运行状态</div>
+            <ASelect
+              class="query-input"
+              v-model:value="devicePageParam.runningStatus"
+              placeholder="请选择"
+              :allow-clear="true"
+            >
+              <ASelectOption :value="0">离线</ASelectOption>
+              <ASelectOption :value="1">停机</ASelectOption>
+              <ASelectOption :value="2">运行</ASelectOption>
+            </ASelect>
+          </div>
+          <div>
+            <div class="query-text">故障状态</div>
+            <ASelect
+              class="query-input"
+              v-model:value="devicePageParam.errorStatus"
+              placeholder="请选择"
+              :allow-clear="true"
+            >
+              <ASelectOption :value="0">正常</ASelectOption>
+              <ASelectOption :value="1">故障</ASelectOption>
+            </ASelect>
+          </div>
+          <!-- <div>
           <div class="query-text">智控状态</div>
           <ASelect
             class="query-input"
@@ -257,54 +268,55 @@ onMounted(() => {
             placeholder="请选择"
           />
         </div> -->
-      </AFlex>
-      <AFlex justify="flex-end">
-        <AButton type="primary" class="query-button" @click="addQueryDevicesList">查询</AButton>
-        <AButton class="default-button" @click="addQueryReset">重置</AButton>
-      </AFlex>
-      <ATable
-        :row-selection="{
-          type: 'checkbox',
-          selectedRowKeys: devicesKeys,
-          onChange: devicesChange,
-        }"
-        row-key="id"
-        :columns="devicesColumns"
-        :data-source="devicesList"
-        :pagination="false"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'deviceName'">
-            <span class="equipment-name" @click="addEquipmentDetails(record.id)">{{ record.deviceName }}</span>
-          </template>
-          <template v-if="column.key === 'runningStatus'">
-            <div v-if="record.runningStatus == 2" class="tag-style success">运行</div>
-            <div v-else-if="record.runningStatus == 1" class="tag-style failure">停机</div>
-            <div v-else class="tag-style default">停机</div>
-          </template>
-          <template v-if="column.key === 'errorStatus'">
-            <div v-if="record.errorStatus == 0" class="tag-style success">正常</div>
-            <div v-else class="tag-style failure" style="width: 64px">设备故障</div>
+        </AFlex>
+        <AFlex justify="flex-end">
+          <AButton type="primary" class="query-button" @click="addQueryDevicesList">查询</AButton>
+          <AButton class="default-button" @click="addQueryReset">重置</AButton>
+        </AFlex>
+        <ATable
+          :row-selection="{
+            type: 'checkbox',
+            selectedRowKeys: devicesKeys,
+            onChange: devicesChange,
+          }"
+          row-key="id"
+          :columns="devicesColumns"
+          :data-source="devicesList"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'deviceName'">
+              <span class="equipment-name" @click="addEquipmentDetails(record.id)">{{ record.deviceName }}</span>
+            </template>
+            <template v-if="column.key === 'runningStatus'">
+              <div v-if="record.runningStatus == 2" class="tag-style success">运行</div>
+              <div v-else-if="record.runningStatus == 1" class="tag-style failure">停机</div>
+              <div v-else class="tag-style default">停机</div>
+            </template>
+            <template v-if="column.key === 'errorStatus'">
+              <div v-if="record.errorStatus == 0" class="tag-style success">正常</div>
+              <div v-else class="tag-style failure" style="width: 64px">设备故障</div>
+            </template>
+
+            <template v-if="column.key === 'snCode'">
+              {{ record.gatewayInfos ? record.gatewayInfos[0].snCode : '' }}
+            </template>
           </template>
-
-          <template v-if="column.key === 'snCode'">
-            {{ record.gatewayInfos ? record.gatewayInfos[0].snCode : '' }}
-          </template>
-        </template>
-      </ATable>
-      <br />
-      <br />
-      <AFlex justify="flex-end" class="footer">
-        <APagination
-          v-model:current="devicePageParam.pageIndex"
-          v-model:page-size="devicePageParam.pageSize"
-          :total="devicesTotal"
-          :show-size-changer="true"
-          @change="switchPages"
-          show-quick-jumper
-          :show-total="(total) => `共有${total}条`"
-        />
-      </AFlex>
+        </ATable>
+        <br />
+        <br />
+        <AFlex justify="flex-end" class="footer">
+          <APagination
+            v-model:current="devicePageParam.pageIndex"
+            v-model:page-size="devicePageParam.pageSize"
+            :total="devicesTotal"
+            :show-size-changer="true"
+            @change="switchPages"
+            show-quick-jumper
+            :show-total="(total) => `共有${total}条`"
+          />
+        </AFlex>
+      </div>
     </div>
   </div>
   <ConfirmModal