feat:优化iot加载

src/views/components/DataSource.vue

@@ -1045,12 +1045,13 @@
       placeholder="设备属性搜索"
     /> -->
     <div class="input-search" style="padding: 0px 4px">
-      <div class="btn" style="left: 14px">
+      <div class="btn" style="left: 14px; top: 4px">
         <img src="/img/icon_search_gray.svg" />
       </div>
       <t-input
         style="height: 32px"
         v-model="iotSearch"
+        @focus="iotInputFocus"
         @change="onSearchIot"
         @enter="onSearchIot"
         :placeholder="$t('搜索设备属性')"
@@ -1058,6 +1059,7 @@
     </div>
     <div style="height: 320px; margin-top: 8px; overflow-y: scroll">
       <t-tree
+        ref="iotTreeRef"
         style="overflow-y: hidden"
         activeMultiple
         v-model="checkedIots"
@@ -1067,6 +1069,7 @@
         :checkStrictly="false"
         allow-fold-node-on-filter
         :filter="iotFilter"
+        :load="load" 
         :scroll="{
           // rowHeight: 34,
           bufferSize: 50,
@@ -1247,7 +1250,8 @@ const iotDialog = ref({
 
 const onOkIot = () => {
   let _iots = [];
-  iots.value.forEach((item) => {
+  let iotsValue = iotTreeRef.value.getTreeData();
+  iotsValue.forEach((item) => {
     if (checkedIots.value.includes(item.value)) {
       _iots.push(deepClone(item));
     } else {
@@ -1277,12 +1281,98 @@ const onOkIot = () => {
 };
 
 const onShowIot = async () => {
-  await getIotTree();
+  // await getIotTree();
+  await getRootTree();
   getCheckedIots();
   iotDialog.value.show = true;
 };
 
 const iots = ref([]);
+const iotTreeRef = ref();
+
+const getRootTree = async () => {
+  if (iots.value.length) {
+    return;
+  }
+  let ret = await getDevices();
+  const type = ret.type;
+  const list = ret.list;
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+    item.label = item.name;
+    item.value = item.id;
+
+    item.deviceId = item.id; //item.id
+    item.token = item.token;
+    item._type = type;
+    item.children = true;
+    // item.checkable = false;
+    // let properties = await getDeviceProperties(item.id);
+    // item.children = properties.map((prop: any) => {
+    //   return {
+    //     label: prop.name,
+    //     value: type?prop.key:item.deviceId + '#' + prop.key,
+    //     _label: item.name + '#' + prop.name,
+    //     token: item.token,
+    //     class: 'iot',
+    //     type: prop.type
+    //   };
+    // });
+    if (!item.children?.length) {
+      item.checkable = false;
+    }
+  }
+  // setTimeout(()=>{
+  iots.value = deepClone(list);
+}
+
+const load = async (node) => {
+  let properties = await getDeviceProperties(node.data.id);
+  setTimeout(()=>{
+    getCheckedIots();
+  },100);
+  let children =  properties.map((prop: any) => {
+    return {
+      label: prop.name,
+      value: node.data._type?prop.key:node.data.deviceId + '#' + prop.key,
+      _label: node.data.name + '#' + prop.name,
+      token: node.data.token,
+      class: 'iot',
+      type: prop.type
+    };
+  });
+  iots.value.forEach((item)=>{
+    if(item.id===node.data.id){
+      item.children = children;
+    }
+  });
+  // iots.value = deepClone(iots.value);
+  return children;
+}
+
+const iotInputFocus = async ()=>{
+  let flag = false;
+  for (let i = 0; i < iots.value.length; i++) {
+    const item = iots.value[i];
+    if(!item.children?.length){
+      let properties = await getDeviceProperties(item.id);
+      item.children = properties.map((prop: any) => {
+        return {
+          label: prop.name,
+          value: item._type?prop.key:item.deviceId + '#' + prop.key,
+          _label: item.name + '#' + prop.name,
+          token: item.token,
+          class: 'iot',
+          type: prop.type
+        };
+      }); 
+      flag = true;
+    }
+  }
+  if(flag){
+    iots.value = deepClone(iots.value);
+  }
+}
 
 const getIotTree = async () => {
   if (iots.value.length) {