Sfoglia il codice sorgente

工程信息化tree数据展示

xiebeibei 4 anni fa
parent
commit
eee4662822

+ 6 - 1
src/api/editer.js

@@ -1,6 +1,7 @@
 // 登录校验接口
 import httputils from '@/api/httputils'
 const testApi = '/serve/topology-wanda';
+const dataApi = '/data';
 // const testApi = '/serve'
 //获取图例分类结构
 export function queryByGroup(params) {
@@ -29,4 +30,8 @@ export function uploadImg({
 //查询图元素类型信息
 export function getGraphElementType(params){
     return httputils.postJson(`${testApi}/graphElement/type/query`, params)
-}
+}
+//查询工程信息化tree数据
+export function querySystem(params){
+    return httputils.postJson(`${dataApi}/data/t_system_wzfl/query`, params)
+}

+ 4 - 1
src/components/edit/edit-dialog.vue

@@ -35,7 +35,7 @@
           </div>
         </div>
         <div class="tree">
-          <searchTree/>
+          <searchTree  @getTreeId="getTreeId"/>
         </div>
         <div class="checkbox">
           <a-checkbox-group @change="ChangeCheckbox">
@@ -122,6 +122,9 @@
             },
             pressEnter(e) {
                 console.log(e)
+            },
+          getTreeId(id){
+              console.log(id);
             }
         }
 

+ 59 - 92
src/components/edit/search_tree.vue

@@ -1,114 +1,81 @@
 <template>
   <div>
     <a-input-search style="margin: 10px;width: 90%" placeholder="搜索" @change="onChange" />
-    <a-tree
-        :expanded-keys="expandedKeys"
-        :auto-expand-parent="autoExpandParent"
-        :tree-data="gData"
-        @expand="onExpand"
-    >
-      <template slot="title" slot-scope="{ title }">
-        <span v-if="title.indexOf(searchValue) > -1">
-          {{ title.substr(0, title.indexOf(searchValue)) }}
-          <span style="color: #f50">{{ searchValue }}</span>
-          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
-        </span>
-        <span v-else>{{ title }}</span>
-      </template>
-    </a-tree>
+    <el-tree
+            class="filter-tree"
+            :data="treeData"
+            :props="defaultProps"  :default-expand-all="false"
+            :filter-node-method="filterNode" highlight-current  @node-click="checkChange"
+            ref="tree">
+    </el-tree>
   </div>
 </template>
 
 <script>
-    const x = 3;
-    const y = 2;
-    const z = 1;
-    const gData = [];
+    import {querySystem} from "@/api/editer";
 
-    const generateData = (_level, _preKey, _tns) => {
-        const preKey = _preKey || '0';
-        const tns = _tns || gData;
-
-        const children = [];
-        for (let i = 0; i < x; i++) {
-            const key = `${preKey}-${i}`;
-            tns.push({ title: key, key, scopedSlots: { title: 'title' } });
-            if (i < y) {
-                children.push(key);
-            }
-        }
-        if (_level < 0) {
-            return tns;
-        }
-        const level = _level - 1;
-        children.forEach((key, index) => {
-            tns[index].children = [];
-            return generateData(level, key, tns[index].children);
-        });
-    };
-    generateData(z);
-
-    const dataList = [];
-    const generateList = data => {
-        for (let i = 0; i < data.length; i++) {
-            const node = data[i];
-            const key = node.key;
-            dataList.push({ key, title: key });
-            if (node.children) {
-                generateList(node.children);
-            }
-        }
-    };
-    generateList(gData);
-
-    const getParentKey = (key, tree) => {
-        let parentKey;
-        for (let i = 0; i < tree.length; i++) {
-            const node = tree[i];
-            if (node.children) {
-                if (node.children.some(item => item.key === key)) {
-                    parentKey = node.key;
-                } else if (getParentKey(key, node.children)) {
-                    parentKey = getParentKey(key, node.children);
-                }
-            }
-        }
-        return parentKey;
-    };
     export default {
         data() {
             return {
-                expandedKeys: [],
-                searchValue: '',
-                autoExpandParent: true,
-                gData,
+              treeData: [],
+              filterText: '',
+              defaultProps: {
+                children: 'children',
+                label: 'label'
+              }
             };
         },
         methods: {
-            onExpand(expandedKeys) {
-                this.expandedKeys = expandedKeys;
-                this.autoExpandParent = false;
+          onChange(e){
+            this.$refs.tree.filter(e.target.value);
+            if(e.target.value==''){
+              for(let i=0;i<this.$refs.tree.$children.length;i++){
+                this.$refs.tree.$children[i].expanded = false;
+              }
+            }
+          },
+            filterNode(value, data) {
+              if (!value) return true;
+              return data.label.indexOf(value) !== -1;
             },
-            onChange(e) {
-                const value = e.target.value;
-                const expandedKeys = dataList
-                    .map(item => {
-                        if (item.title.indexOf(value) > -1) {
-                            return getParentKey(item.key, gData);
-                        }
-                        return null;
+            querySystem(){
+              querySystem().then(res =>{
+                if(res.result == 'success') {
+                  let data = res.data;
+                  (function recursion(newObj) {
+                    newObj.map(item=>{
+                      item.label = item.name;
+                      if(item.children){
+                        recursion(item.children);
+                      }
                     })
-                    .filter((item, i, self) => item && self.indexOf(item) === i);
-                Object.assign(this, {
-                    expandedKeys,
-                    searchValue: value,
-                    autoExpandParent: true,
-                });
+                  })(data)
+
+                  this.treeData = data;
+                }else{
+                  this.$message.error('获取失败');
+                }
+              })
+            },
+            checkChange(data) {
+              this.$emit('getTreeId',data.id)
             },
         },
+      mounted() {
+          this.querySystem();
+      }
     };
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+.filter-tree{
+  padding: 0 10px;
+  /deep/ .el-tree-node__content{
+    height:38px;
+  }
+  /deep/.el-tree-node:focus >.el-tree-node__content {
+    background-color: #E1F2FF!important;
+    color: #0091FF!important;
+  }
+}
 </style>

+ 8 - 0
vue.config.js

@@ -22,6 +22,14 @@ module.exports = {
                     "^/serve": "",
                 },
             },
+            "/data": {
+                target: "http://192.168.200.87:9003",
+                changeOrigin: true,
+                secure: false,
+                pathRewrite: {
+                    "^/data": "",
+                },
+            },
         }
     },
     chainWebpack: (config) => {