按需加载二级内容

src/views/components/checkBox.vue

@@ -1,15 +1,16 @@
 <template>
-  <div>
-    <el-checkbox 
+  <div v-loading="loading">
+    <el-checkbox
       :indeterminate="isIndeterminate" 
       v-model="checkAll" 
       @change="handleCheckAllChange">全选</el-checkbox>
     <div style="margin: 15px 0;"></div>
-    <el-checkbox-group v-model="checkedList" @change="handleChange">
+    <el-checkbox-group v-if="boxList.length > 0" v-model="checkedList" @change="handleChange">
       <div v-for="n in boxList" :key="n.itemId" class="mb10">
         <el-checkbox :label="n.itemId">{{n.label}}</el-checkbox>
       </div>
     </el-checkbox-group>
+    <div v-else class="no-data">暂无数据</div>
   </div>
 </template>
 
@@ -37,6 +38,7 @@ export default {
       checkedList: [],
       isIndeterminate: false,
       pid: '',
+      loading: false
     }
   },
   created() {
@@ -53,8 +55,9 @@ export default {
       this.$emit('change', { list: this.filterArr(this.checkedList), pid: this.pid })
     },
     handleChange(value) {
+      console.log('value----', value)
       let checkedCount = value.length;
-      this.checkAll = checkedCount === this.list.length;
+      this.checkAll = checkedCount === this.boxList.length;
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.boxList.length;
       this.$emit('change', { list: this.filterArr(this.checkedList), pid: this.pid })
     },
@@ -75,4 +78,10 @@ export default {
 .mb10 {
   margin-bottom: 10px;
 }
+.no-data {
+  padding-top: 30px;
+  font-size: 14px;
+  text-align: center;
+  color: #999;
+}
 </style>

src/views/modules/base/diyInfo.vue

@@ -4,10 +4,10 @@
       <el-tab-pane label="自定义模板" name="first">
         <div class="diy-wr">
           <div class="left">
-            <el-tabs tab-position="left" class="left-h">
-              <el-tab-pane v-for="item in list" :key="item.id" :label="item.label">
+            <el-tabs v-model="leftActive" tab-position="left" class="left-h" @tab-click="handleTabsClick">
+              <el-tab-pane v-for="item in leftList" :key="item.id" :label="item.label" :name="item.id">
                 <div class="pd10 dialog-h-content scroll-h">
-                  <checkBox v-if="item.queryItemList" :ref="'checkbox' + item.id" 
+                  <checkBox v-if="item.queryItemList.length > 0" :ref="'checkbox' + item.id" 
                   :list="item.queryItemList" @change="handleChangeBox" />
                 </div>
               </el-tab-pane>
@@ -19,7 +19,7 @@
               <div class="title">导出信息</div>
               <el-button plain @click="handlePreview('')">预览</el-button>
             </div>
-            <div>
+            <div class="h80 scroll-h">
               <el-collapse v-model="activeCollapse" id="collapsWr">
                 <el-collapse-item v-for="item in rightList" :key="item.id" 
                 :title="item.label" :name="item.id" class="col-h">
@@ -129,6 +129,7 @@
 import checkBox from '../../components/checkBox.vue'
 import dragItem from '../../components/dragItem.vue'
 import Sortable from 'sortablejs'
+import { requestPost } from "@/js/dai/request"
 export default {
   props: {
     list: {
@@ -149,8 +150,10 @@ export default {
       exportLoading: false,
       activeCollapse: ['1'],
       activeName: 'first',
+      leftActive: '',
       info: {},
       rightList: [],
+      leftList: [],
       form: {
         isSaveTemp: false,
         name: '',
@@ -161,11 +164,14 @@ export default {
       diyDialog: false,
     }
   },
-  created() {
+  async created() {
     this.list.forEach(item => {
       this.$set(this.info, item.id, [])
     })
-    console.log('infodiy----', this.list)
+    this.leftActive = this.list[0].id
+    this.leftList = [...this.list]
+    this.leftList[0].queryItemList = await this.getExportChildList(this.leftList[0].id)
+    console.log('infodiy----', this.leftList)
     this.getTemplateList()
   },
   watch: {
@@ -175,14 +181,24 @@ export default {
         
       },
       deep: true
-    }
+    },
+    // list: {
+    //   handler(val) {
+    //     if (val.length > 0) {
+    //       this.leftList = [...val]
+    //       this.leftList[0].queryItemList = this.getExportChildList(this.leftList[0].id)
+    //     }
+    //   },
+    //   deep: true,
+    //   // immediate: true
+    // },
   },
   methods: {
     handleChangeBox({list, pid}) {
       console.log('ccccc----', list)
       // if (list.length == 0) return
       let obj = {}
-      this.list.forEach(item =>{
+      this.leftList.forEach(item =>{
         if (item.id == pid) obj = { ...item, queryItemList: [...list] }
       })
       const groups = this.rightList.map(item => item.id)
@@ -203,12 +219,23 @@ export default {
       }
       this.activeCollapse = [...this.activeCollapse, pid]
     },
+    handleTabsClick(val) {
+      console.log('tabs-----', val)
+      this.leftList.forEach(async item => {
+        if (item.id == val.name) {
+          if (item.queryItemList.length == 0) item.queryItemList = await this.getExportChildList(item.id)
+        }
+      })
+    },
     handleDelItem(val) {
       const { item, index } = val
       console.log('item------', item, this.$refs[`checkbox${item.itemGroupId}`])
-      const checkList = this.$refs[`checkbox${item.itemGroupId}`][0].checkedList
+      let checkList = this.$refs[`checkbox${item.itemGroupId}`][0].checkedList
       checkList.forEach((n, i) => {
-        if (n == item.itemId) this.$refs[`checkbox${item.itemGroupId}`][0].checkedList.splice(i, 1)
+        if (n == item.itemId) {
+          checkList.splice(i, 1)
+          this.$refs[`checkbox${item.itemGroupId}`][0].handleChange(checkList)
+        } 
       })
       this.rightList.forEach((n, i) => {
         if (n.id === item.itemGroupId) {
@@ -387,6 +414,20 @@ export default {
           return this.$message.error('网络错误')
         })
     },
+    async getExportChildList (groupId) {
+      const url = `/oper/customize/icformitem/getItemList/${groupId}`
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+
+        return data
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
   }
 }
 </script>
@@ -422,6 +463,10 @@ export default {
     }
   }
 }
+.h80 {
+  height: calc(80vh - 160px);
+  overflow: auto;
+}
 .diy-footer {
   display: flex;
   align-items: center;

src/views/modules/base/resi.vue

@@ -1260,7 +1260,8 @@ export default {
 
         data.forEach(item => {
           (async (id) => {
-            item.queryItemList = await this.getExportChildList(id)
+            // item.queryItemList = await this.getExportChildList(id)
+            item.queryItemList = []
           })(item.id)
         })
         this.exportList = [...data]