AddConceptRelation.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  1. <template>
  2. <div class="addConceptRelationBox" @click="close">
  3. <crumbs
  4. :title="'医学术语关联维护-'+titleText"
  5. class="topBack"
  6. :param="$route.params"
  7. linkTo="ConceptRelation"
  8. ></crumbs>
  9. <el-form :model="form" ref="ruleForm" class="addDepartForm">
  10. <p class="assayTitle">选择医学标准术语</p>
  11. <el-form-item v-if="!isEdit" label="术语搜索:" prop="department">
  12. <input class="searchInput" @focus="focuInput" type="text" v-model = "searchDiagVal">
  13. <span class="searchName" @click="searchDiag">搜索</span>
  14. <!-- <ul class="itemList conceptList" ref="conceptList"> -->
  15. <ul class="itemList" v-show="conceptList.length>0">
  16. <li
  17. v-for="item in conceptList"
  18. class="diagItem ellipsis"
  19. :title="item.conceptNameType"
  20. @click="selectDiag(item)"
  21. :key="item.conceptId">
  22. {{item.conceptNameType||item.conceptName}}
  23. </li>
  24. </ul>
  25. </el-form-item>
  26. <el-form-item class="isRequired" label="已选择术语:" prop="type">
  27. {{form.conceptNameType}}
  28. </el-form-item>
  29. </el-form>
  30. <div class="symptomList">
  31. <div class="bottomPartLeft fl">
  32. <p class="assayTitle">关联标准术语</p>
  33. <p class="symptomPoolTitle">术语搜索</p>
  34. <!-- <el-form>
  35. <el-form-item label="类型:">
  36. <el-select v-model="type" placeholder="请选择" size="small">
  37. <el-option
  38. v-for="item in typeList"
  39. :key="item.key"
  40. :label="item.name"
  41. :value="item.key">
  42. </el-option>
  43. </el-select>
  44. </el-form-item>
  45. </el-form> -->
  46. <div class="symptomPool">
  47. <el-input
  48. placeholder="请输入搜索内容"
  49. v-model="searchTagVal">
  50. <i slot="prefix" class="el-input__icon el-icon-search"></i>
  51. </el-input>
  52. <ul class="tagList tagPool">
  53. <li v-for="(item, index) in leftTagsList"
  54. class = "tagItem"
  55. :key='item.conceptId'
  56. :title="item.conceptNameType"
  57. :style="getStyle(item)?styles:null"
  58. @click='selectLeftTag(item, index)'
  59. >
  60. <!-- <p class="tagName ellipsis" >{{item.conceptName}} </p> -->
  61. <p class="ellipsis" >{{item.conceptNameType}} </p>
  62. </li>
  63. </ul>
  64. </div>
  65. </div>
  66. <div class="bottomPartMid fl">
  67. <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
  68. <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
  69. </div>
  70. <div class="bottomPartRight fl">
  71. <p class="symptomPoolTitle">已选内容:</p>
  72. <ul class="tagList operationPool">
  73. <li class = "tagItem"
  74. v-for="(item,index) in rightTagsList"
  75. :key='item.conceptId'
  76. :style="index === selectRightTagIndex?styles:null"
  77. @click='selectRightTag(index)'
  78. >
  79. <!-- <p v-if="item.conceptName" class="tagName ellipsis" :title="'[ '+item.conceptName+' ]'">{{item.conceptName}} </p> -->
  80. <p v-if="item.conceptName" class="ellipsis" :title="item.conceptNameType">{{item.conceptNameType}} </p>
  81. </li>
  82. </ul>
  83. </div>
  84. <div class="bottomPartMid fl" >
  85. <p><span class="el-icon-arrow-up" @click="toUp"></span></p>
  86. <p><span class="el-icon-arrow-down" @click="toDown"></span></p>
  87. </div>
  88. </div>
  89. <div class="btn">
  90. <el-button
  91. type="primary"
  92. :disabled = 'saveDisable'
  93. @click="submitForm('ruleForm')"
  94. >确 定</el-button>
  95. </div>
  96. </div>
  97. </template>
  98. <script>
  99. import api from '@api/icss.js';
  100. export default {
  101. name: 'AddConceptRelation',
  102. data() {
  103. return{
  104. form: {
  105. conceptId: '',
  106. conceptName:'',
  107. conceptNameType:''
  108. },
  109. titleText: '添加',
  110. conceptList: [],
  111. searchDiagVal: '',
  112. searchTagVal: '',
  113. isEdit: false,
  114. leftTagsList:[],
  115. rightTagsList:[], //右侧已选的左侧不能再搜出--去重处理
  116. selectLeftTagsList: [],
  117. selectRightTagIndex: -1,
  118. styles:{
  119. background:'#eae7e7'
  120. },
  121. type:null,
  122. typeList:[],
  123. nodeList:[],
  124. saveDisable: false, //保存按钮禁止点击
  125. conceptType:'',
  126. searchType:'',
  127. relationId: ''
  128. }
  129. },
  130. created(){
  131. const { isEdit, data , filter,relationId} = this.$route.params;
  132. const typeL = filter.type.toString().split('101');
  133. this.conceptType = typeL[0];
  134. this.searchType = typeL[1];
  135. this.relationId = relationId;
  136. if(isEdit) {
  137. this.titleText = '修改';
  138. this.isEdit = isEdit;
  139. this.rightTagsList = data.nodeList;
  140. this.form.conceptId =data.conceptId;
  141. this.form.conceptName =data.conceptName;
  142. this.form.conceptNameType =data.conceptNameType;
  143. }
  144. let typeList = JSON.parse(localStorage.getItem("knowledgeEnumsData"));
  145. // this.typeList = typeList.lexiconTypeEnum;
  146. this.typeList = typeList.concatLexiconTypeEnum; //7-8 RGB
  147. this.getTagList();//获取标签池内容
  148. },
  149. watch: {
  150. searchTagVal(newVal, preVal) {
  151. if(newVal.trim() != preVal.trim()){
  152. this.getTagList(false)
  153. }
  154. },
  155. type(newVal,preVal){
  156. if(newVal != preVal){
  157. this.getTagList(true)
  158. }
  159. }
  160. },
  161. methods: {
  162. close() {
  163. this.conceptList =[];
  164. },
  165. back(){
  166. this.$router.go(-1);
  167. },
  168. searchDiag() {
  169. const param = {
  170. "name": this.searchDiagVal,
  171. "relationId": this.relationId,
  172. "relationPosition": 1,
  173. "typeId":this.conceptType,
  174. "relationTypeId":this.searchType //9-19新增
  175. }
  176. api.getConceptInfoAssay(param).then((res)=>{
  177. if(res.data.code === '0') {
  178. this.conceptList = res.data.data
  179. }
  180. })
  181. },
  182. selectDiag(item) {
  183. this.form.conceptId = item.conceptId;
  184. this.form.conceptName = item.conceptName;
  185. this.form.conceptNameType = item.conceptNameType;
  186. this.searchDiagVal = '';
  187. this.conceptList=[];
  188. },
  189. focuInput() {
  190. },
  191. getTagList(flag) {
  192. const notIds = this.selectedTags();
  193. //2019-8-15 需求修改:搜索结果与类型关联bug2045
  194. let param = {
  195. "name": this.searchTagVal.trim(),
  196. "relationId": this.relationId,
  197. "relationPosition": 2,
  198. // "typeId": this.type, //选中类型的id
  199. "typeId": this.searchType, //选中类型的id
  200. "relationConceptId":this.form.conceptId,
  201. "excludedConceptIds":notIds
  202. }
  203. // let param;
  204. /*if(flag){
  205. param = {
  206. "name": this.searchTagVal,
  207. "relationId": 17,
  208. "relationPosition": 2,
  209. "typeId": this.type, //选中类型的id
  210. "relationConceptId":this.form.conceptId,
  211. "excludedConceptIds":notIds
  212. }
  213. }else{// 单独搜索时不带类型限制
  214. param = {
  215. "name": this.searchTagVal,
  216. "relationId": 17,
  217. "relationPosition": 2,
  218. "relationConceptId":this.form.conceptId,
  219. "excludedConceptIds":notIds
  220. }
  221. }*/
  222. api.getConceptInfoAssay(param).then((res)=>{
  223. if(res.data.code === '0') {
  224. this.leftTagsList = res.data.data
  225. }
  226. })
  227. },
  228. selectedTags() {//右侧选项ids
  229. let selectedTags = []
  230. for (let i =0; i < this.rightTagsList.length; i++) {
  231. selectedTags.push(this.rightTagsList[i].conceptId)
  232. }
  233. return selectedTags
  234. },
  235. selectLeftTag(tag, index, e) {
  236. const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
  237. if (hasTag) {
  238. this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.conceptId !== tag.conceptId)
  239. } else {
  240. this.selectLeftTagsList.push(tag);
  241. }
  242. },
  243. selectRightTag(index) {
  244. this.selectRightTagIndex = this.selectRightTagIndex === index ? -1 : index
  245. },
  246. toRightList(){
  247. if(this.selectLeftTagsList.length==0){
  248. return
  249. }
  250. this.rightTagsList.push(...this.selectLeftTagsList);
  251. this.selectLeftTagsList = [];
  252. this.selectRightTagIndex = -1;
  253. if(this.searchTagVal.trim()){
  254. this.getTagList(false);
  255. }else{
  256. this.getTagList(true)
  257. }
  258. },
  259. toLeftList(){
  260. if(this.selectRightTagIndex == -1) {
  261. return
  262. }
  263. this.rightTagsList.splice(this.selectRightTagIndex, 1)
  264. this.selectLeftTagsList = [];
  265. this.selectRightTagIndex -= 1;
  266. if(this.searchTagVal.trim()){
  267. this.getTagList(false);
  268. }else{
  269. this.getTagList(true)
  270. }
  271. },
  272. toUp(){
  273. if(this.selectRightTagIndex === 0 || this.selectRightTagIndex === -1) {
  274. return
  275. }
  276. const tempItem = this.rightTagsList[this.selectRightTagIndex]
  277. this.rightTagsList.splice(this.selectRightTagIndex, 1)
  278. this.rightTagsList.splice(this.selectRightTagIndex-1, 0,tempItem)
  279. this.selectRightTagIndex -= 1
  280. },
  281. toDown(){
  282. if(this.selectRightTagIndex === this.rightTagsList.length-1 || this.selectRightTagIndex === -1) {
  283. return
  284. }
  285. const tempItem = this.rightTagsList[this.selectRightTagIndex]
  286. this.rightTagsList.splice(this.selectRightTagIndex, 1)
  287. this.rightTagsList.splice(this.selectRightTagIndex+1, 0,tempItem)
  288. this.selectRightTagIndex += 1
  289. },
  290. isHasTag(item, arr) {
  291. for ( let i = 0; i <arr.length; i++) {
  292. if(arr[i].conceptId === item.conceptId) {
  293. return true;
  294. }
  295. }
  296. return false;
  297. },
  298. getStyle(item){ //左侧选中状态
  299. return this.isHasTag(item, this.selectLeftTagsList)
  300. },
  301. getStyle2(item) {
  302. return this.isHasTag(item, this.selectRightTagsList)
  303. },
  304. submitForm(formName) {
  305. if(!this.form.conceptId) {
  306. this.warning('请选择术语')
  307. return
  308. }
  309. if(this.rightTagsList.length === 0) {
  310. this.warning('请添加关联术语')
  311. return
  312. }
  313. this.showDelDialog()
  314. },
  315. showDelDialog() {
  316. const rightTagsList = this.rightTagsList;
  317. for (let i = 0; i < rightTagsList.length; i++) {
  318. let item = {};
  319. item.conceptId = rightTagsList[i].conceptId;
  320. item.relationId = this.relationId;
  321. this.nodeList.push(item);
  322. }
  323. const param ={
  324. "conceptId": this.form.conceptId,
  325. "nodeList": this.nodeList,
  326. "sonRelationId": this.relationId,
  327. "sonTypeId":this.searchType //9-20新增
  328. }
  329. this.showConfirmDialog('是否建立该关联?', () => {
  330. this.saveDisable = true; //提交保存按钮不可点击,返回结果时才可点击,防止频繁发送请求
  331. api.addConceptRelation(param).then((res) => {
  332. if (res.data.code === '0') {
  333. this.warning(res.data.msg || '关联成功', 'success','1000')
  334. setTimeout(() => {
  335. //返回带搜索条件的首页
  336. this.$router.push({
  337. name:'ConceptRelation',
  338. params: Object.assign({}, this.$route.params, {currentPage: 1})
  339. })
  340. }, 1000);
  341. } else {
  342. this.warning(res.data.msg)
  343. }
  344. this.saveDisable = false
  345. }).catch((err) => {
  346. this.warning(err);
  347. })
  348. });
  349. },
  350. showConfirmDialog(msg, resolve) {
  351. this.$alert(msg, '提示', {
  352. confirmButtonText: '确定',
  353. type: 'warning'
  354. }).then(() => {
  355. resolve();
  356. }).catch(() => {});
  357. },
  358. warning(msg, type,time) {
  359. this.$message({
  360. showClose: true,
  361. message: msg,
  362. type: type || 'warning',
  363. duration:time || '3000'
  364. })
  365. },
  366. }
  367. }
  368. </script>
  369. <style lang="less">
  370. @import '../../less/common.less';
  371. .addConceptRelationBox {
  372. color: #606266;
  373. font-size: 14px;
  374. .topBack {
  375. top: 0;
  376. }
  377. .groupTitle {
  378. background-color: #fff;
  379. height: 40px;
  380. line-height: 40px;
  381. padding-left: 20px;
  382. }
  383. .searchInput, .searchName {
  384. display: inline-block;
  385. height: 32px;
  386. line-height: 32px;
  387. border: 1px solid #a9a9a9;
  388. margin: 0px 0 0 0;
  389. padding: 0 5px;
  390. float: left;
  391. }
  392. .isRequired .el-form-item__label::before {
  393. content: '*';
  394. color: red;
  395. }
  396. .searchName {
  397. border-left: none;
  398. cursor: pointer;
  399. padding: 0 12px;
  400. font-size: 16px;
  401. }
  402. .itemList {
  403. position: absolute;
  404. background: #fff;
  405. width: 162px;
  406. max-height: 150px;
  407. border: 1px solid #a9a9a9;
  408. left: 82px;
  409. top: 33px;
  410. z-index: 2;
  411. overflow-y: auto;
  412. }
  413. .diagItem {
  414. padding: 0 5px;
  415. height: 30px;
  416. line-height: 30px;
  417. font-size: 14px;
  418. cursor: pointer;
  419. }
  420. .diagItem:hover {
  421. background: #f5f7fa;
  422. }
  423. .addDepartForm {
  424. background-color: #fff;
  425. // padding: 20px;
  426. padding: 20px 20px 0 20px;
  427. margin: 70px 20px 0px 20px;
  428. border-bottom: 1px solid #a9a9a9;
  429. }
  430. .symptomList {
  431. background-color: #fff;
  432. padding: 20px;
  433. margin: 0px 20px 0px 20px;
  434. height: 500px;
  435. }
  436. .bottomPartLeft {
  437. width: 32%;
  438. }
  439. .symptomPoolTitle {
  440. height: 40px;
  441. line-height: 40px;
  442. }
  443. .symptomPool {
  444. width: 100%;
  445. .el-input__inner {
  446. border-radius: 0;
  447. }
  448. }
  449. .tagList {
  450. width: 100%;
  451. height: 300px;
  452. border: 1px solid @icssBorder;
  453. box-sizing: border-box;
  454. // border-top: none;
  455. }
  456. /* .tagList {
  457. border: 1px solid @icssBorder;
  458. } */
  459. .tagPool {
  460. height: 300px;
  461. overflow-y: auto;
  462. border-top: none;
  463. }
  464. .tagItem {
  465. position: relative;
  466. line-height: 30px;
  467. cursor: pointer;
  468. padding: 0 10px;
  469. }
  470. .tagName:before {
  471. content: '['
  472. }
  473. .tagName::after {
  474. content: ']'
  475. }
  476. .bottomPartMid {
  477. width: 8%;
  478. margin-top: 220px;
  479. p {
  480. width: 100%;
  481. text-align: center;
  482. span {
  483. cursor: pointer;
  484. display: inline-block;
  485. width: 30px;
  486. height: 40px;
  487. line-height: 40px;
  488. margin: 0 auto;
  489. border: 1px solid @icssBorder;
  490. margin-bottom: 15px;
  491. font-size: 18px;
  492. }
  493. }
  494. }
  495. .bottomPartRight {
  496. width: 32%;
  497. margin-top: 101px;
  498. }
  499. .operationPool {
  500. position: relative;
  501. width: 100%;
  502. height: 340px;
  503. padding: 10px 0;
  504. overflow-y: auto;
  505. }
  506. .btn {
  507. position: relative;
  508. background-color: #fff;
  509. margin: 0px 20px;
  510. padding: 20px;
  511. .el-button {
  512. position: absolute;
  513. right: 20px;
  514. top: -20px;
  515. }
  516. }
  517. .assayTitle{
  518. font-weight: bold;
  519. margin-bottom: 20px;
  520. }
  521. }
  522. </style>