调整菜单结构，增加通道列表，支持节点搜索

web/src/views/common/GroupTree.vue

@@ -1,24 +1,14 @@
 <template>
-  <div id="DeviceTree" style="border-right: 1px solid #EBEEF5; padding: 0 20px">
-    <div v-if="showHeader" class="page-header">
-      <el-form :inline="true" size="mini">
-        <el-form-item style="visibility: hidden">
-          <el-input
-            v-model="searchSrt"
-            style="margin-right: 1rem; width: 12rem;"
-            size="mini"
-            placeholder="关键字"
-            prefix-icon="el-icon-search"
-            clearable
-            @input="search"
-          />
-        </el-form-item>
-        <el-form-item label="显示编号">
-          <el-checkbox v-model="showCode" />
-        </el-form-item>
-      </el-form>
+  <div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%">
+    <div style="padding: 0 20px 0 10px;">
+      <el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
+        <!--        <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
+        <!--          <el-option label="目录" :value="0"></el-option>-->
+        <!--          <el-option label="通道" :value="1"></el-option>-->
+        <!--        </el-select>-->
+      </el-input>
     </div>
-    <div>
+    <div v-if="!searchStr">
       <el-alert
         v-if="showAlert && edit"
         title="操作提示"
@@ -26,6 +16,10 @@
         type="info"
         style="text-align: left"
       />
+      <div v-if="edit" style="float: right;margin-right: 24px;margin-top: 18px; font-size: 14px" >
+        显示编号： <el-checkbox v-model="showCode" />
+      </div>
+
       <vue-easy-tree
         ref="veTree"
         class="flow-tree"
@@ -75,6 +69,49 @@
         </template>
       </vue-easy-tree>
     </div>
+    <div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
+      <ul v-if="groupList.length > 0" style="list-style: none; margin: 0; padding: 10px">
+        <li v-for="item in groupList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
+          <span
+            v-if="chooseId !== item.deviceId"
+            style="color: #409EFF; font-size: 20px"
+            class="iconfont icon-bianzubeifen3"
+          />
+          <span
+            v-if="chooseId === item.deviceId"
+            style="color: #c60135; font-size: 20px"
+            class="iconfont icon-bianzubeifen3"
+          />
+          <div>
+            <div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.name}}</div>
+            <div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.deviceId}}</div>
+          </div>
+        </li>
+      </ul>
+
+      <ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
+        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
+          <span
+            v-if="item.gbStatus === 'ON'"
+            style="color: #409EFF; font-size: 20px"
+            class="iconfont icon-shexiangtou2"
+          />
+          <span
+            v-if="item.gbStatus !== 'ON'"
+            style="color: #808181; font-size: 20px"
+            class="iconfont icon-shexiangtou2"
+          />
+          <div>
+            <div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.gbName}}</div>
+            <div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.gbDeviceId}}</div>
+          </div>
+
+        </li>
+      </ul>
+      <div v-if="this.currentPage * this.count < this.total" style="text-align: center;">
+        <el-button type="text" @click="loadListMore">加载更多</el-button>
+      </div>
+    </div>
     <groupEdit ref="groupEdit" />
     <gbDeviceSelect ref="gbDeviceSelect" />
     <gbChannelSelect ref="gbChannelSelect" data-type="group" />
@@ -93,7 +130,7 @@ export default {
     GbChannelSelect,
     VueEasyTree, groupEdit, gbDeviceSelect
   },
-  props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
+  props: ['edit', 'enableAddChannel', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
   data() {
     return {
       props: {
@@ -102,9 +139,14 @@ export default {
       },
       showCode: false,
       showAlert: true,
-      searchSrt: '',
+      searchStr: '',
       chooseId: '',
-      treeData: []
+      treeData: [],
+      currentPage: this.defaultPage | 1,
+      count: this.defaultCount | 15,
+      total: 0,
+      groupList: [],
+      channelList: []
     }
   },
   created() {
@@ -118,8 +160,44 @@ export default {
     // this.performance = "";
   },
   methods: {
-    search() {
-
+    searchChange() {
+      this.currentPage = 1
+      this.total = 0
+      if (this.edit) {
+        this.groupList = []
+        this.queryGroup()
+      }else {
+        this.channelList = []
+        this.queryChannelList()
+      }
+    },
+    loadListMore: function() {
+      this.currentPage += 1
+      if (this.edit) {
+        this.queryGroup()
+      }else {
+        this.queryChannelList()
+      }
+    },
+    queryGroup: function() {
+      this.$store.dispatch('group/queryTree', {
+        query: this.searchStr,
+        page: this.currentPage,
+        count: this.count
+      }).then(data => {
+        this.total = data.total
+        this.groupList = this.groupList.concat(data.list)
+      })
+    },
+    queryChannelList: function() {
+      this.$store.dispatch('commonChanel/getList', {
+        page: this.currentPage,
+        count: this.count,
+        query: this.searchStr
+      }).then(data => {
+        this.total = data.total
+        this.channelList = this.channelList.concat(data.list)
+      })
     },
     loadNode: function(node, resolve) {
       if (node.level === 0) {
@@ -136,7 +214,7 @@ export default {
           return
         }
         this.$store.dispatch('group/getTreeList', {
-          query: this.searchSrt,
+          query: this.searchStr,
           parent: node.data.id,
           hasChannel: this.hasChannel
         }).then(data => {
@@ -144,6 +222,8 @@ export default {
             this.showAlert = false
           }
           resolve(data)
+        }).finally(() => {
+          this.locading = false
         })
       }
     },
@@ -348,9 +428,17 @@ export default {
     },
     nodeClickHandler: function(data, node, tree) {
       this.chooseId = data.deviceId
-      if (this.clickEvent) {
-        this.clickEvent(data)
-      }
+      this.$emit('clickEvent', data)
+    },
+    listClickHandler: function(data) {
+      this.chooseId = data.deviceId
+      this.$emit('clickEvent', data)
+    },
+    channelLstClickHandler: function(data) {
+      this.$emit('clickEvent', {
+        leaf: true,
+        id: data.gbId
+      })
     }
   }
 }
@@ -375,7 +463,7 @@ export default {
 
 .flow-tree {
   overflow: auto;
-  margin: 10px;
+  padding-top: 10px;
 }
 .flow-tree  .vue-recycle-scroller__item-wrapper{
   height: 100%;