【新增功能】 IOT 产品管理，物模型新增

src/views/iot/product/detail/index.vue

@@ -1,18 +1,18 @@
 <template>
   <ProductDetailsHeader :loading="loading" :product="product" @refresh="() => getProductData(id)" />
   <el-col>
-    <el-tabs>
-      <el-tab-pane label="产品信息">
-        <ProductDetailsInfo :product="product" />
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="产品信息" name="info">
+        <ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="Topic 类列表">
-        <ProductTopic :product="product" />
+      <el-tab-pane label="Topic 类列表" name="topic">
+        <ProductTopic v-if="activeTab === 'topic'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="物模型">
-        <!--        <ProductDetailsModel :product="product" />-->
+      <el-tab-pane label="功能定义" name="function">
+        <ThinkModelFunction v-if="activeTab === 'function'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="消息解析" />
-      <el-tab-pane label="服务端订阅" />
+      <el-tab-pane label="消息解析" name="message" />
+      <el-tab-pane label="服务端订阅" name="subscription" />
     </el-tabs>
   </el-col>
 </template>
@@ -22,6 +22,7 @@ import { DeviceApi } from '@/api/iot/device'
 import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
 import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
+import ThinkModelFunction from '@/views/iot/product/detail/ThinkModelFunction.vue'
 
 defineOptions({ name: 'IoTProductDetail' })
 
@@ -30,6 +31,7 @@ const message = useMessage()
 const id = Number(route.params.id) // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 详情
+const activeTab = ref('info') // 默认激活的标签页
 
 /** 获取详情 */
 const getProductData = async (id: number) => {