|
|
@@ -0,0 +1,426 @@
|
|
|
+<template>
|
|
|
+ <div class="addMedicalMultRelationWrapper">
|
|
|
+ <crumbs :title="minTitle" linkTo="MedicalMultRelation"></crumbs>
|
|
|
+ <div class="contents">
|
|
|
+ <div class="content">
|
|
|
+ <div class="addBtn" v-if="list.length == 0">
|
|
|
+ <el-button
|
|
|
+ @click="addConcept"
|
|
|
+ >+ 新 增</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"
|
|
|
+ :props="defaultProps"
|
|
|
+ node-key="conceptId"
|
|
|
+ draggable
|
|
|
+ :allow-drag="allowDrag"
|
|
|
+ :allow-drop="allowDrop"
|
|
|
+ :expand-on-click-node="true"
|
|
|
+ :default-expanded-keys="defaultExpandedArr"
|
|
|
+ @node-click = "handleNodeClick"
|
|
|
+ >
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }" >
|
|
|
+ <span class="custom-tree-node-name ellipsis" :class="{colorGray: data.isDeletedConcept == 'Y'}" :title="node.label">{{ node.label }}</span>
|
|
|
+ <span class="btn-box">
|
|
|
+ <el-button
|
|
|
+ class="btn-add fl"
|
|
|
+ v-if="data.level < 2"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="(e) => append(data, e)">
|
|
|
+ + 增加
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ class="btn-del fr"
|
|
|
+ v-if="data.level != 0"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="() => remove(node, data)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="btn">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :disabled = 'saveDisable'
|
|
|
+ @click="confirm"
|
|
|
+ >确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script type="text/javascript">
|
|
|
+import api from '@api/knowledgeTree.js';
|
|
|
+ export default {
|
|
|
+ name:'KnowledgeAll',
|
|
|
+ data(){
|
|
|
+ const data = [
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // label: '一级 1',
|
|
|
+ // children: [{
|
|
|
+ // id: 4,
|
|
|
+ // label: '二级 1-1',
|
|
|
+ // children: [{
|
|
|
+ // id: 9,
|
|
|
+ // label: '三级 1-1-1'
|
|
|
+ // }, {
|
|
|
+ // id: 10,
|
|
|
+ // label: '三级 1-1-2'
|
|
|
+ // }]
|
|
|
+ // }]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 2,
|
|
|
+ // label: '一级 2',
|
|
|
+ // children: [{
|
|
|
+ // id: 5,
|
|
|
+ // label: '二级 2-1'
|
|
|
+ // }, {
|
|
|
+ // id: 6,
|
|
|
+ // label: '二级 2-2'
|
|
|
+ // }]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 3,
|
|
|
+ // label: '一级 3',
|
|
|
+ // children: [{
|
|
|
+ // id: 7,
|
|
|
+ // label: '二级 3-1'
|
|
|
+ // }, {
|
|
|
+ // id: 8,
|
|
|
+ // label: '二级 3-2'
|
|
|
+ // }]
|
|
|
+ // }
|
|
|
+ ];
|
|
|
+
|
|
|
+ return{
|
|
|
+ minTitle:'分诊人体图数据维护-添加',
|
|
|
+ list: JSON.parse(JSON.stringify(data)),
|
|
|
+ defaultProps: {
|
|
|
+ children: 'nodeList',
|
|
|
+ label: 'conceptNameType'
|
|
|
+ },
|
|
|
+ conceptText: '',
|
|
|
+ conceptList: [], //概念列表
|
|
|
+ addLevel: 0, //添加级别
|
|
|
+ excludedConceptIds:[],
|
|
|
+ operaList: [],
|
|
|
+ relationConceptId: '', //关联父类ID
|
|
|
+ level: 0, //层级（修改时只能显示三级）
|
|
|
+ saveDisable: false, //保存按钮禁止点击
|
|
|
+ defaultExpandedArr: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getTreeList()
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ conceptText(nextVal, prevVal) {
|
|
|
+ if(!nextVal.trim()) {
|
|
|
+ this.conceptList = []
|
|
|
+ }
|
|
|
+ if(nextVal.trim() &&nextVal != prevVal) {
|
|
|
+ this.searchConcept()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getTreeList(){
|
|
|
+ api.getlistTree({}).then((res) => {
|
|
|
+ console.log(res.data.data,1111)
|
|
|
+ const result = res.data
|
|
|
+ const { data } = result
|
|
|
+ return
|
|
|
+ // const item = JSON.parse(JSON.stringify(data))
|
|
|
+ // item.level = 0
|
|
|
+ // item.isExpanded = false
|
|
|
+ // item.nodeList = this.IteraNodeList(item.nodeList, [], 1)
|
|
|
+ // this.list[0] = item
|
|
|
+
|
|
|
+ // 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);
|
|
|
+ // }
|
|
|
+ // this.saveDisable = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ allowDrop(draggingNode, dropNode, type) {
|
|
|
+ if(draggingNode.parent.data.conceptName !== dropNode.parent.data.conceptName){
|
|
|
+ return false
|
|
|
+ }else{
|
|
|
+ return type !== 'inner'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ allowDrag(draggingNode) {
|
|
|
+ return draggingNode.data.level != 0;//一级不可拖动
|
|
|
+ },
|
|
|
+ handleNodeClick(data) {
|
|
|
+ if(data.nodeList.length > 0) {
|
|
|
+ if(!data.isExpanded) {
|
|
|
+ this.defaultExpandedArr.push(data.conceptId)
|
|
|
+ } else {
|
|
|
+ this.defaultExpandedArr = this.defaultExpandedArr.filter(item => item !== data.conceptId)
|
|
|
+ }
|
|
|
+ this.$set(data, 'isExpanded', !data.isExpanded);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ addConcept(e) {
|
|
|
+ this.addLevel = 0;
|
|
|
+ this.openSearch(e);
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ if(!this.list[0] || this.list[0].nodeList.length == 0) {
|
|
|
+ this.message('请输入数据信息');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const param = {
|
|
|
+ conceptId: this.list[0].conceptId,
|
|
|
+ sonRelationId: 17,
|
|
|
+ isOrderBy: 1
|
|
|
+ }
|
|
|
+ const nodeListResult = []
|
|
|
+ this.IteraNodeList(this.list[0].nodeList, nodeListResult, 0)
|
|
|
+ param.nodeList = nodeListResult
|
|
|
+ this.saveDisable = true //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
|
|
|
+ api.addMultRelation(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);
|
|
|
+ }
|
|
|
+ this.saveDisable = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ IteraNodeList(nodeList, nodeListResult, type, level = 1) {
|
|
|
+ this.level= level + 1
|
|
|
+ for(let i = 0; i <nodeList.length; i++) {
|
|
|
+ let newChild;
|
|
|
+ if(type == '0') { //添加的时候保存所有的id列表
|
|
|
+ newChild = {conceptId: nodeList[i].conceptId, relationId: 17,nodeList:[],sonRelationId: 17, isExpanded:false}
|
|
|
+ } else if(type == '1') { //修改的时候添加层级
|
|
|
+ const item = JSON.parse(JSON.stringify(nodeList[i]))
|
|
|
+ newChild = Object.assign(item, {level: level, nodeList: [],sonRelationId: 17, isExpanded:false})
|
|
|
+ } else if(type == '2') { //移除节点的时候同时移除节点（搜索时排除的id列表）
|
|
|
+ newChild = nodeList[i].conceptId
|
|
|
+ }
|
|
|
+
|
|
|
+ if(nodeList[i].nodeList &&nodeList[i].nodeList.length > 0&&level < 3) {
|
|
|
+ if(type == '0' || type =='1') {
|
|
|
+ this.IteraNodeList(nodeList[i].nodeList, newChild.nodeList, type, level+1)
|
|
|
+ } else if(type == '2') {
|
|
|
+ this.IteraNodeList(nodeList[i].nodeList, nodeListResult, type, level+1)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ nodeListResult.push(newChild)
|
|
|
+ }
|
|
|
+ return nodeListResult
|
|
|
+ },
|
|
|
+ searchConcept() {
|
|
|
+ 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,
|
|
|
+ "excludedConceptIds": this.excludedConceptIds,
|
|
|
+ "relationId": 17,
|
|
|
+ "relationPosition": 1,
|
|
|
+ "typeId": this.addLevel === 0 ? 52 : this.addLevel === 1 ? 3 : 1
|
|
|
+ }
|
|
|
+ if(this.addLevel > 0) {
|
|
|
+ param.relationPosition = 2
|
|
|
+ param.relationConceptId = this.relationConceptId
|
|
|
+ }
|
|
|
+
|
|
|
+ api.getTreeSearchList({}).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ const { data } = res
|
|
|
+ if(data.code == '0') {
|
|
|
+ this.conceptList = data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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 = 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 = { id: id++, label: 'nodeList', level: data.level+1, children: [] };
|
|
|
+ if (!data.nodeList) {
|
|
|
+ this.$set(data, 'nodeList', []);
|
|
|
+ }
|
|
|
+ data.nodeList.push(newChild);
|
|
|
+ }
|
|
|
+ this.conceptList = [];
|
|
|
+ this.closeSearch();
|
|
|
+ },
|
|
|
+ openSearch(e) {
|
|
|
+ this.$refs['conceptSearch'].style.top= e.pageY - 120 + 'px';
|
|
|
+ this.$refs['conceptSearch'].style.display= 'block'
|
|
|
+ this.$refs['conceptInput'].focus();
|
|
|
+ },
|
|
|
+ closeSearch() {
|
|
|
+ this.conceptText = ''
|
|
|
+ this.$refs['conceptSearch'].style.display = "none";
|
|
|
+ },
|
|
|
+ append(data, e) {
|
|
|
+ this.addLevel = data.level+1;
|
|
|
+ this.relationConceptId = data.conceptId
|
|
|
+ this.operaList = data;
|
|
|
+ this.openSearch(e);
|
|
|
+
|
|
|
+ // const newChild = { id: id++, label: 'testtest', level: data.level+1, nodeList: [] };
|
|
|
+ // if (!data.nodeList) {
|
|
|
+ // this.$set(data, 'nodeList', []);
|
|
|
+ // }
|
|
|
+ // data.nodeList.push(newChild);
|
|
|
+ },
|
|
|
+
|
|
|
+ remove(node, data) {
|
|
|
+ const parent = node.parent;
|
|
|
+ const nodeList = parent.data.nodeList || parent.data;
|
|
|
+ const index = nodeList.findIndex(d => d.conceptId === data.conceptId);
|
|
|
+ nodeList.splice(index, 1);
|
|
|
+ },
|
|
|
+ message(msg,type){
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message:msg,
|
|
|
+ type:type||'warning'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import "../../less/admin.less";
|
|
|
+.addMedicalMultRelationWrapper {
|
|
|
+ height: calc(100% - 70px);
|
|
|
+}
|
|
|
+.tree {
|
|
|
+ margin-bottom: 230px;
|
|
|
+}
|
|
|
+.contents {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.btn-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 350px;
|
|
|
+}
|
|
|
+.btn-del {
|
|
|
+ color: #8F8F8F;
|
|
|
+}
|
|
|
+.addBtn {
|
|
|
+ width: 66px;
|
|
|
+ order: 1px solid #21CBC7;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+.conceptSearch {
|
|
|
+ position: absolute;
|
|
|
+ left: 560px;
|
|
|
+ width: 301px;
|
|
|
+ height: 300px;
|
|
|
+ display: none;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.delete {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.content{
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px 20px 30px;
|
|
|
+ color: #545455;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.custom-tree-node-name {
|
|
|
+ display: inline-block;
|
|
|
+ width: 270px;
|
|
|
+}
|
|
|
+.colorGray {
|
|
|
+ color: #c1c1c1;
|
|
|
+}
|
|
|
+</style>
|
luolei