|
|
@@ -0,0 +1,360 @@
|
|
|
+<template>
|
|
|
+ <div class="addMedicalMultRelationWrapper">
|
|
|
+ <crumbs :title="minTitle" linkTo="/admin/LT-YXSYKWH-YXSYDCGLWH"></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="请输入关键词搜索">
|
|
|
+ <!-- <span class="searchName" @click="searchConcept">搜索</span> -->
|
|
|
+ <ul class="conceptList" ref="conceptList">
|
|
|
+ <li
|
|
|
+ v-for="item in conceptList"
|
|
|
+ class="conceptItem ellipsis"
|
|
|
+ :title="item.nameAndType"
|
|
|
+ @click="selectConcept(item)"
|
|
|
+ :key="item.id">
|
|
|
+ {{item.nameAndType}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-tree
|
|
|
+ :data="list"
|
|
|
+ show-checkbox
|
|
|
+ :props="defaultProps"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :expand-on-click-node="false">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span class="custom-tree-node-name ellipsis" :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="!isEdit|| isEdit&&data.level != 0"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="() => remove(node, data)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="confirm"
|
|
|
+ >确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script type="text/javascript">
|
|
|
+import api from '@api/icss.js';
|
|
|
+ export default {
|
|
|
+ name:'AddMedicalName',
|
|
|
+ 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: [],
|
|
|
+ isEdit: false, //是否为修改
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ const { isEdit, data } = this.$route.params
|
|
|
+ if(isEdit) {
|
|
|
+ // console.log('dataa', data)
|
|
|
+ this.isEdit = isEdit
|
|
|
+ this.minTitle = '医学术语多层关联维护-修改'
|
|
|
+ const item = JSON.parse(JSON.stringify(data))
|
|
|
+ item.level = 0
|
|
|
+ item.nodeList = this.IteraNodeList(item.nodeList, [], 1)
|
|
|
+ this.list[0] = item
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ conceptText(nextVal, prevVal) {
|
|
|
+ if(!nextVal.trim()) {
|
|
|
+ this.conceptList = []
|
|
|
+ }
|
|
|
+ if(nextVal.trim() &&nextVal != prevVal) {
|
|
|
+ this.searchConcept()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ addConcept(e) {
|
|
|
+ this.addLevel = 0;
|
|
|
+ this.openSearch(e);
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ if(this.list[0].nodeList.length == 0) {
|
|
|
+ this.message('请输入数据信息');
|
|
|
+ }
|
|
|
+ const param = {
|
|
|
+ conceptId: this.list[0].conceptId,
|
|
|
+ sonRelationId: 17,
|
|
|
+ isOrderBy: 1
|
|
|
+ }
|
|
|
+ const nodeListResult = []
|
|
|
+ this.IteraNodeList(this.list[0].nodeList, nodeListResult, 0)
|
|
|
+ param.nodeList = nodeListResult
|
|
|
+ api.addMultRelation(param).then((res) => {
|
|
|
+ const { data } = res
|
|
|
+ if(data.code == '0') {
|
|
|
+ this.message(res.data.msg||'术语建立成功','success');
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push({name:'MedicalMultRelation'});
|
|
|
+ }, 2000);
|
|
|
+ } else {
|
|
|
+ this.message(data.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ IteraNodeList(nodeList, nodeListResult, type, level = 1) {
|
|
|
+ for(let i = 0; i <nodeList.length; i++) {
|
|
|
+ let newChild;
|
|
|
+ if(type == '0') { //添加的时候保存所有的id列表
|
|
|
+ newChild = {conceptId: nodeList[i].conceptId, relationId: 17,nodeList:[]}
|
|
|
+ } else if(type == '1') { //修改的时候添加层级
|
|
|
+ const item = JSON.parse(JSON.stringify(nodeList[i]))
|
|
|
+ newChild = Object.assign(item, {level: level, nodeList: []})
|
|
|
+ } else if(type == '2') { //移除节点的时候同时移除节点（搜索时排除的id列表）
|
|
|
+ newChild = nodeList[i].conceptId
|
|
|
+ }
|
|
|
+ if(nodeList[i].nodeList.length > 0) {
|
|
|
+ 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,
|
|
|
+ "isMedical": 1,
|
|
|
+ "isConcept": 1,
|
|
|
+ "excludedConceptIds": this.excludedConceptIds,
|
|
|
+ }
|
|
|
+
|
|
|
+ api.getAllConcept(param).then((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.id, conceptNameType: item.nameAndType, 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.id, conceptNameType: item.nameAndType, relationId: 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 = 1;
|
|
|
+ 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.id === data.id);
|
|
|
+ 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);
|
|
|
+}
|
|
|
+.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;
|
|
|
+ box-shadow: 0 8px 20px 0 rgba(131,136,142,0.20);
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
zhangxc
