pms 设备模板属性列表 显示表头

src/router/modules/remaining.ts

@@ -88,7 +88,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'template/detail/:id',
+        path: 'template/detail/:id/:templateName/:categoryName',
         component: () => import('@/views/pms/devicetemplate/detail/attrsModel/index.vue'),
         name: 'DeviceAttrTemplateModel',
         meta: {

src/views/pms/devicetemplate/detail/attrsModel/index.vue

@@ -1,5 +1,32 @@
 <!-- 设备分类属性列表 -->
 <template>
+  <ContentWrap>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      style="margin-right: 4em; margin-left: 0.5em; margin-top: 1em"
+      label-width="130px"
+    >
+      <div class="base-expandable-content">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="模板名称" prop="name">
+              <el-input type="text" v-model="formData.name" disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备分类名称" prop="deviceCategoryName">
+              <el-input
+                v-model="formData.deviceCategoryName"
+                disabled
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </ContentWrap>
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -10,6 +37,7 @@
       label-width="68px"
     >
       <el-form-item>
+        <!--
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
           搜索
@@ -17,7 +45,7 @@
         <el-button @click="resetQuery">
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
-        </el-button>
+        </el-button> -->
         <el-button
           v-hasPermi="[`pms:iot-device-category-template-attrs:create`]"
           plain
@@ -96,6 +124,7 @@ const { currentRoute } = useRouter()
 defineOptions({ name: 'DeviceAttrTemplateModel' })
 
 const deviceCategoryId = route.params.id // 设备分类id
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -109,6 +138,12 @@ const queryParams = reactive({
   deviceCategoryId: -1
 })
 
+// 定义表单数据
+const formData = reactive({
+  name: '',
+  deviceCategoryName: ''
+})
+
 const queryFormRef = ref() // 搜索的表单
 const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
 
@@ -164,6 +199,15 @@ onMounted(() => {
     delView(unref(currentRoute))
     return
   }
+  console.log(route.params.templateName + ' - ' + route.params.categoryName)
+  // 从路由参数获取模板名称和设备分类名称
+  if (route.params.templateName) {
+    formData.name = route.params.templateName as string
+  }
+  if (route.params.categoryName) {
+    formData.deviceCategoryName = route.params.categoryName as string
+  }
+
   getList()
 })
 </script>

src/views/pms/devicetemplate/index.vue

@@ -129,7 +129,7 @@
                 <el-button
                   type="primary"
                   link
-                  @click="openDetail(scope.row.deviceCategoryId)"
+                  @click="openDetail(scope.row)"
                 >
                   <Icon icon="ep:edit" />查看
                 </el-button>
@@ -254,8 +254,16 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 打开详情 */
-const openDetail = (id: number) => {
-  push({ name: 'DeviceAttrTemplateModel', params: { id } })
+const openDetail = (row) => {
+  push({
+    name: 'DeviceAttrTemplateModel',
+    params: {
+      id: row.deviceCategoryId,
+      // 添加额外参数
+      templateName: row.name,
+      categoryName: row.deviceCategoryName
+    }
+  })
 }
 
 /** 修改 设备属性模板 状态 */