树形基本功能

src/api/config.js

@@ -519,8 +519,11 @@ export default {
     'getRunningStatusByHospitalId': '/api/cdssman/test/running/getStatusByHospitalId',   //查拉面所有测试用例运行状态
     'updateRunningStatus': '/api/cdssman/test/running/updateStatus',   //更新测试用例运行状态
     //知识库树形图
-    'searchTree':'https://www.fastmock.site/mock/84092c4be71b4d1a59434dca70c42a7c/api/search',
-    'listTree':'https://www.fastmock.site/mock/84092c4be71b4d1a59434dca70c42a7c/api/tree',
+    // 'searchTree':'https://www.fastmock.site/mock/84092c4be71b4d1a59434dca70c42a7c/api/search',
+    // 'listTree':'https://www.fastmock.site/mock/84092c4be71b4d1a59434dca70c42a7c/api/tree',
+    'getTree':'/api/cdssman/multContact/getTree',//获取当前type数据
+    'searchTreeItem':'/api/cdssman/multContact/getAllForRelation',//检索树元素
+    'addTreeRelation':'/api/cdssman/multContact/addRelation',//保存树元素
   },
   menuIconList: { //菜单对应图标
     'YH-KZT': 'el-icon-menu',

src/api/knowledgeTree.js

@@ -13,10 +13,13 @@ function request(config) {
 }
 
 export default {
+  addTreeRelation(param) {
+    return axios.post(urls.addTreeRelation, param);
+  },
   getTreeSearchList(param) {
-    return axios.post(urls.searchTree, param);
+    return axios.post(urls.searchTreeItem, param);
   },
   getlistTree(param) {
-    return axios.post(urls.listTree, param);
+    return axios.post(urls.getTree, param);
   }
 };

src/components/basicKnow/SearchList.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="conceptSearch" ref="conceptSearch">
+    <h4  class="conceptTitle">术语（概念ID）搜索</h4>
+    <img class="closeSearch" src="../../images/close-icon.png" @click="closeSearch" alt="">
+    <p class="searchWrap">
+      <img class="search" src="../../images/search.png" alt="搜索">
+      <input v-model.trim="conceptText" @input="searchConcept" type="text" ref="conceptInput" class="searchText" placeholder="请输入关键词搜索">
+    </p>
+    <ul class="conceptList" ref="conceptList">
+      <li 
+        v-for="item in conceptList" 
+        class="conceptItem ellipsis"
+        :title="item.conceptName"
+        @click="selectConcept(item)"
+        :key="item.conceptId">
+        {{item.conceptName}}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import api from '@api/knowledgeTree.js';
+
+export default {
+  props:['conceptList','addLevel'],
+  data(){
+    return {
+      conceptText: '',
+      list: [], //概念列表
+    }
+  },
+  watch:{
+    addLevel:{
+      handler(newName, oldName) {
+        this.conceptText = ''
+        this.list = []
+      },
+      deep: true
+    }
+  },
+  methods:{
+    closeSearch() {
+      this.$emit('closeSearch')
+    },
+    selectConcept(item) {
+      this.$emit('selectConcept',item)
+      this.$emit('closeSearch')
+    },
+    searchConcept() {
+      this.$emit('searchConcept',this.conceptText)
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.conceptSearch {
+  position: fixed;
+  right: 20px;
+  top: 180px;
+  bottom: 10px;
+  width: 300px;
+  background: #fff;
+  border: 1px solid #C9C9C9;
+  text-align: center;
+  z-index: 2;
+  padding: 30px;
+  box-sizing: border-box;
+  .conceptTitle {
+    width: 100%;
+    text-align: center;
+    padding: 20px 0;
+  }
+  .searchText {
+    padding: 0 35px 0 15px;
+    width: 100%;
+    height: 34px;
+    border: 1px solid #C9C9C9;
+    box-sizing: border-box;
+  }
+  .conceptList {
+    min-height: 200px;
+    max-height:300px;
+    margin: -2px auto 0;
+    border: 1px solid #E1DFDF;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .conceptItem {
+    height: 34px;
+    line-height: 34px;
+    text-align: left;
+    padding: 0 15px;
+    cursor: pointer;
+  }
+  .conceptItem:hover {
+    background: #f5f7fa;
+  }
+  .closeSearch {
+    position: absolute;
+    width: 30px;
+    right: 0;
+    top: 0;
+  }
+  .searchWrap {
+    position: relative;
+    .search {
+      position: absolute;
+      right: 7px;
+      top:8px;
+    }
+  }
+}
+</style>

src/components/basicKnow/TreeTab.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="tabList">
+    <ul class="clearfix">
+      <li :class="{'curTab':curId==item.id}" 
+        @click="()=>handleTabClick(item.id)" 
+        v-for="item in tab" :key="item.id"
+      >{{item.name}}<span v-if="curId==item.id"></span></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      curId:'1',
+        tab:[
+          {name:'ICD10疾病类别',id:'1'},
+          {name:'科室疾病类别',id:'2'},
+          {name:'药物类别',id:'3'},
+          {name:'症状类别',id:'4'},
+          {name:'手术和操作类别',id:'5'},
+          {name:'实验室检查类别',id:'6'},
+          {name:'辅助检查类别',id:'7'},
+        ],
+    }
+  },
+  methods:{
+      handleTabClick(id){
+        this.curId = id
+        this.$emit('getTreeList',id)
+      },
+  }
+}
+</script>
+<style lang="less" scoped>
+.tabList {
+  position: fixed;
+  top: 100px;
+  right: 20px;
+  left: 270px;
+  z-index: 10;
+  border-top: 10px solid #dee2ea;
+  border-bottom: 10px solid #dee2ea;
+  box-sizing: border-box;
+  ul {
+      margin: 0 0 0 20px;
+      background-color: #fff;
+    li {
+      float: left;
+      height: 60px;
+      line-height: 60px;
+      margin: 0 15px;
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      span {
+        position: absolute;
+        bottom: 10px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #21CBC7;
+      }
+    }
+    .curTab {
+        color: #48C5D7;
+    }
+  }
+}
+</style>

src/components/knowledgeExtra/KnowledgeAll.vue

@@ -1,37 +1,15 @@
 <template>
   <div class="addMedicalMultRelationWrapper">
     <crumbs :title="minTitle" fix="fixed" linkTo="MedicalMultRelation"></crumbs>
-    <div class="tabList">
-      <ul class="clearfix">
-        <li :class="{'curTab':curId==item.id}" 
-          @click="()=>handleTabClick(item.id)" 
-          v-for="item in tab" :key="item.id"
-        >{{item.name}}<span v-if="curId==item.id"></span></li>
-      </ul>
-    </div>
+    <TreeTab @getTreeList="getTreeList" />
     <div class="contents">
       <div class="content">
         <div class="addBtn" v-if="list.length == 0">
-          <el-button
+          <!-- <el-button
             @click="addConcept"
-          >+ 新 增</el-button>
+          >+ 新 增</el-button> -->
         </div>
 
-        <div class="conceptSearch" ref="conceptSearch">
-          <h4  class="conceptTitle">术语（概念ID）搜索</h4>
-          <img class="closeSearch" src="../../images/close-icon.png" @click="closeSearch" alt="">
-          <input v-model="conceptText" type="text" ref="conceptInput" class="searchText" placeholder="请输入关键词搜索">
-          <ul class="conceptList" ref="conceptList">
-            <li 
-              v-for="item in conceptList" 
-              class="conceptItem ellipsis"
-              :title="item.conceptNameType"
-              @click="selectConcept(item)"
-              :key="item.conceptId">
-              {{item.conceptNameType}}
-            </li>
-          </ul>
-        </div>
         <div class="tree">
           <el-tree
             :data="list"
@@ -41,6 +19,8 @@
             :allow-drag="allowDrag"
             :allow-drop="allowDrop"
             :expand-on-click-node="true"
+            :render-after-expand="true"
+            :highlight-current="true"
             :default-expanded-keys="defaultExpandedArr"
             @node-click = "handleNodeClick"
           >
@@ -67,7 +47,6 @@
             </span>
           </el-tree>
         </div>
-        
         <div class="btn">
           <el-button
             type="primary"
@@ -77,12 +56,25 @@
         </div>
       </div>
     </div>
+    <SearchList 
+      v-if="showSearch" 
+      :conceptList="conceptList" 
+      :addLevel="addLevel"
+      @closeSearch="closeSearch" 
+      @selectConcept="selectConcept" 
+      @searchConcept="searchConcept" />
   </div>
 </template>
 <script type="text/javascript">
 import api from '@api/knowledgeTree.js';
-  export default {
+import SearchList from '../basicKnow/SearchList.vue';
+import TreeTab from '../basicKnow/TreeTab.vue';
+
+export default {
     name:'KnowledgeAll',
+    components:{
+      SearchList,TreeTab
+    },
     data(){
       return{
         minTitle:'分诊人体图数据维护-添加',
@@ -99,42 +91,36 @@ import api from '@api/knowledgeTree.js';
         list: [],
         defaultProps: {
           children: 'nodeList',
-          label: 'conceptNameType'
+          label: 'conceptName'
         },
-        conceptText: '',
         conceptList: [], //概念列表
+        showSearch: false,
         addLevel: 0,  //添加级别
         excludedConceptIds:[],
         operaList: [],
         relationConceptId: '', //关联父类ID
         level: 0, //层级（修改时只能显示三级）
         saveDisable: false,  //保存按钮禁止点击
-        defaultExpandedArr: []
+        defaultExpandedArr: [],
+        relationTypes:[]
       }
     },
     created(){
-      this.getTreeList()
-    },
-    watch:{
-      conceptText(nextVal, prevVal) {
-        if(!nextVal.trim()) {
-          this.conceptList = []
-        }
-        if(nextVal.trim() &&nextVal != prevVal) {
-          this.searchConcept()
-        }
-      }
+      this.getTreeList(1)
     },
     methods:{
-      handleTabClick(id){
-        this.curId = id
-      },
-      getTreeList(){
-        api.getlistTree({}).then((res) => {
+      getTreeList(id){
+        const params = {
+          "type": id,
+        }
+        api.getlistTree(params).then((res) => {
           const { data } = res
           if(data.code == '0') {
-            let result = data.data
-            const item = JSON.parse(JSON.stringify(result))
+            let result = data.data.treeDTO||{}
+            this.relationTypes = data.data.types||[]
+            const itemStr = JSON.stringify(result)
+            let tmp = itemStr.replace(/nextTree/g,'nodeList').replace(/id/g,'conceptId').replace(/name/g,'conceptName')
+            let item = JSON.parse(tmp)
             item.level = 0
             item.isExpanded = false
             item.nodeList = this.IteraNodeList(item.nodeList, [], 1)
@@ -168,10 +154,11 @@ import api from '@api/knowledgeTree.js';
           }
       
       },
-      addConcept(e) {
-        this.addLevel = 0;
-        this.openSearch(e);
-      },
+      // addConcept(e) {
+      //   console.log(e)
+      //   this.addLevel = 0;
+      //   this.openSearch(e);
+      // },
       confirm() { 
         if(!this.list[0] || this.list[0].nodeList.length == 0) {
           this.message('请输入数据信息');
@@ -186,14 +173,10 @@ import api from '@api/knowledgeTree.js';
         this.IteraNodeList(this.list[0].nodeList, nodeListResult, 0)
         param.nodeList = nodeListResult
         this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
-        api.addMultRelation(param).then((res) => {
+        api.addTreeRelation(this.reparams(param)).then((res) => {
           const { data } = res
           if(data.code == '0') {
             this.message(res.data.msg||'术语关系建立成功','success');
-            setTimeout(() => {
-              //返回带搜索条件的首页
-              this.$router.push({name:'MedicalMultRelation',params:Object.assign({},this.$route.params,{currentPage:1})});
-            }, 2000);
           } else {
             this.message(data.msg);
           }
@@ -225,26 +208,20 @@ import api from '@api/knowledgeTree.js';
         }
         return nodeListResult
       },
-      searchConcept() {
+      searchConcept(txt) {
         let  excludedConceptIds = [];
         if(this.list[0]) {
           excludedConceptIds.push(this.list[0].conceptId)
           this.excludedConceptIds = this.IteraNodeList(this.list[0].nodeList,excludedConceptIds, 2)
         }
-        
-        const param = {
-          "name": this.conceptText,
+        const params = {
+          "typeId": this.addLevel === 1 ? this.relationTypes[2] : this.addLevel === 2 ? this.relationTypes[4] : 1,
+          "name": txt,
           "excludedConceptIds": this.excludedConceptIds,
-          "relationId": 17,
-          "relationPosition": 1,
-          "typeId": this.addLevel === 0 ? 52 : this.addLevel === 1 ? 3 : 1
+          "relationId": this.addLevel === 1 ? this.relationTypes[1] : this.addLevel === 2 ? this.relationTypes[3] : 1,
+          "relationConceptId": this.relationConceptId,
         }
-        if(this.addLevel > 0) {
-          param.relationPosition = 2
-          param.relationConceptId = this.relationConceptId
-        }
-        
-        api.getTreeSearchList({}).then((res) => {
+        api.getTreeSearchList(params).then((res) => {
           const { data } = res
           if(data.code == '0') {
             this.conceptList = data.data
@@ -253,11 +230,11 @@ import api from '@api/knowledgeTree.js';
       },
       selectConcept(item) {
         if(this.addLevel == 0) {
-          this.list.push(Object.assign({}, item,  {nodeList: [], level: 0, conceptId: item.conceptId, conceptNameType: item.conceptNameType, sonRelationId: 17}))
+          this.list.push(Object.assign({}, item,  {nodeList: [], level: 0, conceptId: item.conceptId, sonRelationId: 17}))
           this.list = JSON.parse(JSON.stringify(this.list))
         }else {
           const data = this.operaList
-          const newChild = Object.assign({}, item,  {nodeList: [], level: data.level+1, conceptId: item.conceptId, conceptNameType: item.conceptNameType, relationId: 17,sonRelationId: 17});
+          const newChild = Object.assign({}, item,  {nodeList: [], level: data.level+1, conceptId: item.conceptId, relationId: 17,sonRelationId: 17});
           // const newChild = { id: id++, label: 'nodeList', level: data.level+1, children: [] };
           if (!data.nodeList) {
           this.$set(data, 'nodeList', []);
@@ -268,19 +245,18 @@ import api from '@api/knowledgeTree.js';
         this.closeSearch();
       },
       openSearch(e) {
-        this.$refs['conceptSearch'].style.top=  e.pageY - 120 + 'px';
-        this.$refs['conceptSearch'].style.display= 'block'
-        this.$refs['conceptInput'].focus();
+        this.showSearch = true
       },
       closeSearch() {
         this.conceptText = ''
-        this.$refs['conceptSearch'].style.display = "none";
+        this.conceptList = []
+        this.showSearch = false
       },
       append(data, e) {
           this.addLevel = data.level+1;
           this.relationConceptId = data.conceptId
           this.operaList = data;
-          this.openSearch(e);
+          this.openSearch(data);
 
           // const newChild = { id: id++, label: 'testtest', level: data.level+1, nodeList: [] };
           // if (!data.nodeList) {
@@ -295,6 +271,27 @@ import api from '@api/knowledgeTree.js';
           const index = nodeList.findIndex(d => d.conceptId === data.conceptId);
           nodeList.splice(index, 1);
       },
+      reparams(param){
+        let params = []
+        const tmplis = param.nodeList||[];
+        for(let i = 0;i < tmplis.length;i++){
+          let item = tmplis[i],sonIds=[]
+          if(item.nodeList&&item.nodeList.length>0){
+            for(let j = 0;j < item.nodeList.length;j++){
+              sonIds.push(item.nodeList[j].conceptId)
+            }
+          }
+          let obj = {
+            "eid": item.conceptId,
+            "eids": sonIds,
+            "rid": this.relationTypes[1],
+            "sid": param.conceptId,
+            "srid": this.relationTypes[3]
+          }
+          params.push(obj)
+        }
+        return params
+      },
       message(msg,type){
         this.$message({
           showClose: true,
@@ -304,7 +301,7 @@ import api from '@api/knowledgeTree.js';
       },
       
     }
-  }
+}
 </script>
 <style lang="less" scoped>
 @import "../../less/admin.less";
@@ -316,40 +313,7 @@ import api from '@api/knowledgeTree.js';
   box-sizing: border-box;
   box-sizing: border-box;
 }
-.tabList {
-  position: fixed;
-  top: 100px;
-  right: 20px;
-  left: 270px;
-  z-index: 10;
-  border-top: 10px solid #dee2ea;
-  border-bottom: 10px solid #dee2ea;
-  box-sizing: border-box;
-  ul {
-      margin: 0 0 0 20px;
-      background-color: #fff;
-    li {
-      float: left;
-      height: 60px;
-      line-height: 60px;
-      margin: 0 15px;
-      box-sizing: border-box;
-      cursor: pointer;
-      position: relative;
-      span {
-        position: absolute;
-        bottom: 10px;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: #21CBC7;
-      }
-    }
-    .curTab {
-        color: #21CBC7;
-    }
-  }
-}
+
 .addMedicalMultRelationWrapper {
   height: calc(100% - 70px);
 }
@@ -366,6 +330,7 @@ import api from '@api/knowledgeTree.js';
 }
 .btn-del {
   color: #8F8F8F;
+  padding-left: 28px;
 }
 .addBtn {
   width: 66px;
@@ -373,49 +338,61 @@ import api from '@api/knowledgeTree.js';
   border-radius: 2px;
 }
 .conceptSearch {
-  position: absolute;
-  left: 560px;
-  width: 301px;
-  height: 300px;
-  display: none;
+  position: fixed;
+  right: 20px;
+  top: 180px;
+  bottom: 10px;
+  width: 300px;
   background: #fff;
-  border: 1px solid #ccc;
+  border: 1px solid #C9C9C9;
   text-align: center;
   z-index: 2;
-}
-.conceptTitle {
-  width: 100%;
-  text-align: center;
-  padding: 20px 0;
-}
-.searchText {
-  padding: 0 15px;
-  width: 191px;
-  height: 34px;
-}
-.conceptList {
-  width: 221px;
-  height: 170px;
-  margin: -2px auto 0;
-  border: 2px solid #E1DFDF;
-  overflow: hidden;
-  overflow-y: auto;
-}
-.conceptItem {
-  height: 34px;
-  line-height: 34px;
-  text-align: left;
-  padding: 0 15px;
-  cursor: pointer;
-}
-.conceptItem:hover {
-  background: #f5f7fa;
-}
-.closeSearch {
-  position: absolute;
-  width: 30px;
-  right: 0;
-  top: 0;
+  padding: 30px;
+  box-sizing: border-box;
+  .conceptTitle {
+    width: 100%;
+    text-align: center;
+    padding: 20px 0;
+  }
+  .searchText {
+    padding: 0 35px 0 15px;
+    width: 100%;
+    height: 34px;
+    border: 1px solid #C9C9C9;
+    box-sizing: border-box;
+  }
+  .conceptList {
+    min-height: 200px;
+    max-height:300px;
+    margin: -2px auto 0;
+    border: 1px solid #E1DFDF;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .conceptItem {
+    height: 34px;
+    line-height: 34px;
+    text-align: left;
+    padding: 0 15px;
+    cursor: pointer;
+  }
+  .conceptItem:hover {
+    background: #f5f7fa;
+  }
+  .closeSearch {
+    position: absolute;
+    width: 30px;
+    right: 0;
+    top: 0;
+  }
+  .searchWrap {
+    position: relative;
+    .search {
+      position: absolute;
+      right: 7px;
+      top:8px;
+    }
+  }
 }
 .delete {
   cursor: pointer;

src/routes.js

@@ -200,9 +200,9 @@ import BasicTermsMaintenance from '@components/basicKnow/BasicTermsMaintenance.v
 import BasicRelationship from '@components/basicKnow/BasicRelationship.vue'   //知识库基础维护-基础关系类型维护
 import BasicPartOfSpeech from '@components/basicKnow/BasicPartOfSpeech.vue'   //知识库基础维护-基础词性类型维护
 import AddTerm from '@components/basicKnow/AddTerm.vue'   //知识库基础维护-基础词性类型维护-编辑
-import StaticInfo from '@components/developKnow/StaticInfo.vue'   //知识库扩展维护-静态信息维护
-import AddDevKnow from '@components/developKnow/AddDevKnow.vue'   //知识库扩展维护-静态信息维护-编辑
-import KnowledgeAll from '@components/developKnow/KnowledgeAll.vue'   //知识库树
+import StaticInfo from '@components/knowledgeExtra/StaticInfo.vue'   //知识库扩展维护-静态信息维护
+import AddDevKnow from '@components/knowledgeExtra/AddDevKnow.vue'   //知识库扩展维护-静态信息维护-编辑
+import KnowledgeAll from '@components/knowledgeExtra/KnowledgeAll.vue'   //知识库树
 
 export default [
   {