标签页不显示内容

src/api/equipConfig/tabsManagement/index.js

@@ -32,4 +32,11 @@ export function updateLabelItem(data) {
     method: 'post',
     data,
   })
-}
+}
+// 获取所有一级
+export function getParentsList() {
+  return request({
+    url: smart + `/label-info/getParentsList`,
+    method: 'get',
+  })
+}

src/views/equipConfig/tabsManagement/index.vue

@@ -23,35 +23,40 @@
         </el-form-item>
       </el-form>
     </div>
-    <van-list>
-      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
-      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
-        <div class="list-main">
-
-          <div class="list-content">
-            <div class="list-title">{{ item.labelName}}</div>
-            <van-row class="content-1">
-              <van-col span="6">标签编号: <span>{{item.labelCode}}</span></van-col>
-              <van-col span="6">绑定设备: <span>{{item.type}}</span></van-col>
-              <van-col span="6">创建日期: <span>{{item.adress}} </span></van-col>
-              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
-            </van-row>
-            <van-row class="content-1">
-              <van-col span="6">标签类别: <span>{{item.labelClass}} </span></van-col>
-              <!-- <van-col span="6">创建人: <span>{{item.operator}} </span></van-col> -->
-              <van-col span="6">描述: <span>{{item.labelRefer}} </span></van-col>
-              <van-col span="6"></van-col>
-            </van-row>
-          </div>
-          <div class="list-btns">
-            <el-button type="primary" @click="handleDetail(item)">详情</el-button>
-            <el-button type="primary" @click="handleEdit(item)">修改</el-button>
-            <el-button type="primary" @click="handleDelete(item)">删除</el-button>
+     <!-- 使用vant收缩组件 -->
+        <van-list>
+          <div class="list boxShadow">
+            <div class="list-main">
+              <div class="list-content">
+                <van-collapse v-model="activeNames" v-for="(item, index) in list" :key="index">
+                  <div class="list-title">{{ item.title }}</div>
+                  <van-collapse-item :name="index">
+                    <!-- 自定义标题内容 (#title === v-slot:title) -->
+                    <!--<template #title>-->
+                    <template v-slot:title>
+                      <van-row class="content-1">
+                        <van-col span="6">标签编号: <span>{{item.labelCode}}</span></van-col>
+                        <van-col span="6">绑定设备: <span>{{item.type}}</span></van-col>
+                        <van-col span="6">创建日期: <span>{{item.adress}} </span></van-col>
+                        <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
+                      </van-row>
+                      <!-- 展开部分的样式 -->
+                      <div v-for="(value, ind) in item.children" :key="ind" class="children">
+                        <van-row class="content-1">
+                        <van-col span="6">标签类别: <span>{{item.labelClass}} </span></van-col>
+                        <!-- <van-col span="6">创建人: <span>{{item.operator}} </span></van-col> -->
+                        <van-col span="6">描述: <span>{{item.labelRefer}} </span></van-col>
+                        <van-col span="6"></van-col>
+                      </van-row>
+              </div>
+              <div class="list-btns">
+                <el-button type="primary" @click="handleDetail(item)">详情</el-button>
+                <el-button type="primary" @click="handleEdit(item)">修改</el-button>
+                <el-button type="primary" @click="handleDelete(item)">删除</el-button>
+              </div>
+            </div>
           </div>
-        </div>
-
-      </div>
-    </van-list>
+        </van-list>
     <div class="pagination-container">
       <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
@@ -59,7 +64,11 @@
 </template>
 
 <script>
-import { getLabelList, deleteLabelItem } from '@/api/equipConfig/tabsManagement/index'
+import {
+  getLabelList,
+  deleteLabelItem,
+  getParentsList
+ } from '@/api/equipConfig/tabsManagement/index'
 
 export default {
   filters: {
@@ -67,20 +76,28 @@ export default {
   },
   data () {
     return {
+      value: '',
+      activeNames: [''], // 默认展开的项 默认不展开
       notice: false,
       formInline: {
         labelCode: '',
         labelName: '',
         labelClass: ''
       },
-      list: [
-        {
-          title: '通风设备标签01', number: '1001', type: '45', adress: '2021-01-12', state: '蓝牙', operator: '王全德', runTime: '6h'
-        },
-      ],
+      list: [{}],
       loading: 'false',
       finished: 'false',
-
+      isAdd: false,
+      dialogFormVisible: false,
+      diaForm: {
+        id: '',
+        labelName: '',
+        labelCode: '',
+        parentId: '',
+        children: []
+      },
+      parents: [],
+      formLabelWidth: '100px',
       listQuery: {
         condition: "",
         page: 1,
@@ -157,14 +174,25 @@ export default {
       this.getList()
     },
     handleAdd () {
+      this.ThisGetParentsList();
       this.$router.push({ name: 'TabsManagementAdd' })
     },
     handleDetail (data) {
       this.$router.push({ name: 'TabsManagementDetail', params: { data: data } })
     },
     handleEdit (data) {
+      this.ThisGetParentsList();
       this.$router.push({ name: 'TabsManagementEdit', params: { data: data } })
     },
+    ThisGetParentsList() {
+     getParentsList().then(res => {
+       if (res.code === 200) {
+        this.parents = res.data;
+       }
+       }).catch(err => {
+        console.log(err)
+     });
+    },
     sizeChange (v) {
       this.listQuery.limit = v
       console.log(`每页 ${v} 条`);