feat: 设备详情中增加产品物模型页面跳转按钮

src/views/device-manage/device/components/DeviceInfo.vue

@@ -6,6 +6,7 @@ import { useDeviceProperties } from './composables/useDeviceProperties'
 import { Description } from '@/components/Description'
 import { useModelService } from '@/views/product/components/composables/useModelService'
 import { usePermission } from '@/hooks/web/usePermission'
+import { ProductTabEnums } from '@/views/product/data'
 
 const { data, scheam } = useDeviceInfo()
 
@@ -99,6 +100,9 @@ const { hasPermission } = usePermission()
         </div>
         <div v-else text="center" flex-1>
           <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+          <a-button size="small" @click="$router.push(`/product/detail/${data?.productId}/${ProductTabEnums.Model}/${selectedModelId}`)">
+            点击添加属性
+          </a-button>
         </div>
       </div>
     </Card>

src/views/product/components/Model.vue

@@ -22,7 +22,7 @@ const {
   registerModelServiceModal,
   openModelServiceModal,
   reloadModelService,
-} = useModelService(route.params.id as string)
+} = useModelService(route.params.id as string, route.params.modelId as string)
 
 const {
   registerModelAttributeTable,

src/views/product/components/composables/useModelService.ts

@@ -6,7 +6,7 @@ import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
 import type { ModelService } from '@/api/product/types'
 
-export function useModelService(productId: MaybeRefOrGetter<string | undefined>) {
+export function useModelService(productId: MaybeRefOrGetter<string | undefined>, defaultModelId?: string) {
   const selectedModelId = ref<string>()
 
   const { state, execute } = useAsyncState(
@@ -22,7 +22,7 @@ export function useModelService(productId: MaybeRefOrGetter<string | undefined>)
 
   watchOnce(state, () => {
     if (state.value.length > 0)
-      selectedModelId.value = state.value[0].id
+      selectedModelId.value = defaultModelId || state.value[0].id
   })
 
   const [registerModelServiceModal, { openModal }] = useModal<ModelService>()

src/views/product/data.ts

@@ -180,3 +180,9 @@ export function getFormSchema(isUpdate: Ref<boolean>): FormSchema[] {
     },
   ]
 }
+
+export enum ProductTabEnums {
+  TopicManage = '1',
+  Model = '2',
+  Subscription = '3',
+}

src/views/product/detail.vue

@@ -2,7 +2,9 @@
 import { Card, Tabs } from 'ant-design-vue'
 import { useAsyncState } from '@vueuse/core'
 import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 import { Model, Subscription, TopicManage } from './components'
+import { ProductTabEnums } from './data'
 import { Description } from '@/components/Description'
 import { getProductDetail } from '@/api/product'
 import type { DescItem } from '@/components/Description'
@@ -66,6 +68,8 @@ const schema: DescItem[] = [
   },
 ]
 
+const activeTab = ref<ProductTabEnums>(route.params.activeTab as unknown as ProductTabEnums || ProductTabEnums.TopicManage)
+
 const { hasPermission } = usePermission()
 </script>
 
@@ -76,14 +80,14 @@ const { hasPermission } = usePermission()
     </Card>
 
     <Card mt="12px">
-      <Tabs>
-        <Tabs.TabPane v-if="hasPermission('product_topic_view')" key="1" tab="Topic 管理">
+      <Tabs v-model:active-key="activeTab">
+        <Tabs.TabPane v-if="hasPermission('product_topic_view')" :key="ProductTabEnums.TopicManage" tab="Topic 管理">
           <TopicManage />
         </Tabs.TabPane>
-        <Tabs.TabPane v-if="hasPermission('product_model_view')" key="2" tab="物模型">
+        <Tabs.TabPane v-if="hasPermission('product_model_view')" :key="ProductTabEnums.Model" tab="物模型">
           <Model :tsl="state?.tsl" />
         </Tabs.TabPane>
-        <Tabs.TabPane v-if="hasPermission('product_subscription_view')" key="3" tab="服务端订阅">
+        <Tabs.TabPane v-if="hasPermission('product_subscription_view')" :key="ProductTabEnums.Subscription" tab="服务端订阅">
           <Subscription :data="state?.subscribe" />
         </Tabs.TabPane>
       </Tabs>