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

web/src/views/common/RegionTree.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="regionTree" 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="regionList.length > 0" style="list-style: none; margin: 0; padding: 10px">
+        <li v-for="item in regionList" :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>
     <regionEdit ref="regionEdit" />
     <gbDeviceSelect ref="gbDeviceSelect" />
     <GbChannelSelect ref="gbChannelSelect" data-type="civilCode" />
@@ -86,6 +123,7 @@ import VueEasyTree from '@wchbrad/vue-easy-tree'
 import regionEdit from './../dialog/regionEdit'
 import gbDeviceSelect from './../dialog/GbDeviceSelect'
 import GbChannelSelect from '../dialog/GbChannelSelect.vue'
+import chooseCivilCode from '@/views/dialog/chooseCivilCode.vue'
 
 export default {
   name: 'DeviceTree',
@@ -93,17 +131,24 @@ export default {
     GbChannelSelect,
     VueEasyTree, regionEdit, gbDeviceSelect
   },
-  props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode', 'treeHeight'],
+  props: ['edit', 'enableAddChannel', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode', 'treeHeight'],
   data() {
     return {
       props: {
-        label: 'name'
+        label: 'name',
+        children: 'children'
       },
+      searchType: 0,
       showCode: false,
       showAlert: true,
-      searchSrt: '',
+      searchStr: '',
       chooseId: '',
-      treeData: []
+      treeData: [],
+      currentPage: this.defaultPage | 1,
+      count: this.defaultCount | 15,
+      total: 0,
+      regionList: [],
+      channelList: []
     }
   },
   created() {
@@ -117,8 +162,44 @@ export default {
     // this.performance = "";
   },
   methods: {
-    search() {
-
+    searchChange() {
+      this.currentPage = 1
+      this.total = 0
+      if (this.edit) {
+        this.regionList = []
+        this.queryRegion()
+      }else {
+        this.channelList = []
+        this.queryChannelList()
+      }
+    },
+    loadListMore: function() {
+      this.currentPage += 1
+      if (this.edit) {
+        this.queryRegion()
+      }else {
+        this.queryChannelList()
+      }
+    },
+    queryRegion: function() {
+      this.$store.dispatch('region/queryTree', {
+        query: this.searchStr,
+        page: this.currentPage,
+        count: this.count
+      }).then(data => {
+        this.total = data.total
+        this.regionList = this.regionList.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) {
@@ -135,7 +216,7 @@ export default {
           return
         }
         this.$store.dispatch('region/getTreeList', {
-          query: this.searchSrt,
+          query: this.searchStr,
           parent: node.data.id,
           hasChannel: this.hasChannel
         })
@@ -158,7 +239,6 @@ export default {
       if (!this.edit) {
         return
       }
-      console.log(node.level)
       if (node.data.type === 0) {
         const menuItem = [
           {
@@ -349,9 +429,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
+      })
     }
   }
 }
@@ -382,11 +470,18 @@ export default {
 
 .flow-tree {
   overflow: auto;
-  margin: 10px;
+  padding-top: 10px;
 }
 .flow-tree  .vue-recycle-scroller__item-wrapper{
   height: 100%;
   overflow-x: auto;
 }
-
+.channel-list-li {
+  height: 24px;
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  margin-bottom: 18px
+}
 </style>