perf(components): 优化“设备管理”设备新增功能

src/views/device-list/DeviceList.vue

@@ -3,10 +3,13 @@ import { onMounted, ref, useTemplateRef, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 
+import ModalGuidance from '@/layout/ModalGuidance.vue';
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import { useRequest } from '@/hooks/request';
 import { deviceDeletion, getPageList, groupList, queryDevicesList } from '@/api';
 
+import CreateDevice from '../create-device/CreateDevice.vue';
+
 import type { Key } from 'ant-design-vue/es/table/interface';
 import type { DeviceGroupItem, DevicesList, DevicesListItem, EquipmentTypeItem } from '@/types';
 
@@ -62,6 +65,7 @@ const devicesColumns = [
 ];
 
 const router = useRouter();
+const modalGuidanceRef = useTemplateRef('modalGuidance');
 const devicesList = ref<DevicesListItem[]>([]);
 
 const devicesKeys = ref<Key[]>([]);
@@ -165,8 +169,16 @@ watch(
     if (value === '/device-manage/device-list') equipmentListShow.value = true;
   },
 );
+const addEquipment = () => {
+  modalGuidanceRef.value?.showView();
+};
+
+const getProtocolData = () => {
+  postQueryDevicesList();
+};
 
 onMounted(() => {
+  if (route.path.includes('/device-manage/device-list/equipment-details/')) equipmentListShow.value = false;
   handleRequest(async () => {
     deviceGroup.value = await getPageList();
 
@@ -192,7 +204,7 @@ onMounted(() => {
               <span> 删除 </span>
             </AFlex>
           </AButton>
-          <AButton type="primary">
+          <AButton type="primary" @click="addEquipment">
             <AFlex align="center">
               <SvgIcon style="margin-right: 4px" name="plus" />
               <span> 添加 </span>
@@ -292,7 +304,7 @@ onMounted(() => {
             <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>
+              <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>
@@ -320,6 +332,9 @@ onMounted(() => {
       </div>
     </div>
   </div>
+  <ModalGuidance ref="modalGuidance" @finish="getProtocolData">
+    <CreateDevice />
+  </ModalGuidance>
   <ConfirmModal
     ref="modalComponent"
     :title="'删除确定'"