LtModal.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698
  1. <template>
  2. <div class="modal-container">
  3. <div class="cover"></div>
  4. <div class="modal-box">
  5. <div class="modal-title">
  6. <a class="close" @click="closeModal()">×</a>
  7. </div>
  8. <div class="modal-body">
  9. <el-form
  10. :model="form"
  11. :rules="rules"
  12. label-position="right"
  13. label-width="145px"
  14. ref="relationForm"
  15. >
  16. <div class="AddChemicalAndCommonMappingBox clearfix">
  17. <div class="titleBox clearfix">
  18. <p class="title">医院术语</p>
  19. <p class="title">标准术语</p>
  20. </div>
  21. <div class="leftBox clearfix">
  22. <el-row>
  23. <el-col :span="16">
  24. <el-form-item :label="meal+':'" prop="hisName">
  25. <el-input
  26. v-model.trim="form.hisName"
  27. clearable
  28. style="minWidth: 240px"
  29. @input="onchange"
  30. @blur="onblur"
  31. ></el-input>
  32. </el-form-item>
  33. <el-form-item :label="meal+'预览:'">
  34. <span class="previewInfo" style="minWidth: 240px">{{form.hisName}}</span>
  35. </el-form-item>
  36. <el-form-item label="科室编码:" prop="hisCode" v-if="type==7">
  37. <el-input v-model.trim="form.hisCode" clearable style="minWidth: 240px"></el-input>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="16" v-if="type == 1">
  41. <el-form-item :label="detail+':'" prop="hisDetailName">
  42. <el-input
  43. v-model.trim="form.hisDetailName"
  44. clearable
  45. style="minWidth: 240px"
  46. @input="onchange"
  47. ></el-input>
  48. </el-form-item>
  49. <el-form-item :label="detail+'预览:'">
  50. <span class="previewInfo" style="minWidth: 240px">{{form.hisDetailName}}</span>
  51. </el-form-item>
  52. </el-col>
  53. </el-row>
  54. </div>
  55. <div class="midBox">
  56. <img class="midLogo" src="../../images/relation.png" alt />
  57. <p class="midTitle">相互关联</p>
  58. </div>
  59. <div class="rightBox">
  60. <el-row>
  61. <el-col :span="16">
  62. <el-form-item :label="standard+':'" prop="searchText">
  63. <el-select
  64. style="width:100%;minWidth: 240px"
  65. v-model="form.searchText"
  66. filterable
  67. remote
  68. clearable
  69. :loading="showDrop"
  70. loading-text="加载中..."
  71. @change="changeWord"
  72. @focus="handleFocus"
  73. @visible-change="handleVisible"
  74. placeholder="搜索"
  75. :remote-method="searchTerms"
  76. reserve-keyword
  77. >
  78. <el-option
  79. v-for="item in uniqueNameList"
  80. :key="item.icd10Code"
  81. :label="item.name"
  82. :value="item"
  83. :title="item.name"
  84. ></el-option>
  85. </el-select>
  86. </el-form-item>
  87. <el-form-item v-if="tableData.length >0">
  88. <el-table
  89. :row-class-name="tableRowClassName"
  90. :row-style="selectedstyle"
  91. :data="tableData"
  92. @row-click="btn"
  93. size="mini"
  94. :class="{tabs:uniqueNameList}"
  95. class="tab"
  96. >
  97. <el-table-column prop="name" :show-overflow-tooltip="true" label="词名"></el-table-column>
  98. <el-table-column prop="address" :show-overflow-tooltip="true" label="来源">
  99. <template slot-scope="scope">
  100. <p>{{scope.row.source == 1?'标准词匹配':scope.row.source == 2?'同义词匹配':scope.row.source == 5?'相似词匹配':''}}</p>
  101. </template>
  102. </el-table-column>
  103. </el-table>
  104. </el-form-item>
  105. <el-form-item :label="standard+'预览:'">
  106. <!-- <span class="previewInfo">{{!isEdit ? form.searchText.name : form.searchText}}</span> -->
  107. <span class="previewInfo" style="minWidth: 240px">{{form.searchText}}</span>
  108. </el-form-item>
  109. <el-form-item label="ICD编码:" v-if="type == 4">
  110. <span class="previewInfo" style="minWidth: 240px">{{form.icdCode}}</span>
  111. </el-form-item>
  112. <el-form-item :label="detail+':'" v-if="type == 12 || type == 13">
  113. <span class="previewInfo" style="minWidth: 240px">{{form.icdCode}}</span>
  114. </el-form-item>
  115. <el-form-item label="药品剂型:" v-if="type == 5">
  116. <el-select
  117. style="width:100%;minWidth: 240px"
  118. v-model="form.form"
  119. filterable
  120. remote
  121. clearable
  122. :loading="showDrop"
  123. loading-text="加载中..."
  124. @change="drugchangeWord"
  125. @focus="handleFocus"
  126. @visible-change="handleVisible"
  127. placeholder="搜索"
  128. :remote-method="searchDrug"
  129. reserve-keyword
  130. >
  131. <el-option
  132. v-for="item in drugList"
  133. :key="item.icd10Code"
  134. :label="item.name"
  135. :value="item"
  136. :title="item.name"
  137. ></el-option>
  138. </el-select>
  139. </el-form-item>
  140. </el-col>
  141. </el-row>
  142. </div>
  143. </div>
  144. </el-form>
  145. </div>
  146. <div class="mapList">
  147. 已关联标准术语:
  148. <span v-for="item in mapList" :key="item.id">{{item.uniqueName}};</span>
  149. </div>
  150. <div class="modal-footer">
  151. <button class="confirm btns" :disabled="saveDisable" @click="submitForm">确定</button>
  152. <button class="cancel btns" @click="closeModal">取消</button>
  153. </div>
  154. </div>
  155. </div>
  156. </template>
  157. <script>
  158. import api from '@api/cdss.js';
  159. import config from '@api/config.js';
  160. import utils from '@api/utils.js';
  161. export default {
  162. name: 'lt-modal',
  163. props: [
  164. 'modalVisiable',
  165. 'meal',
  166. 'detail',
  167. 'standard',
  168. 'type',
  169. 'data',
  170. 'hospitalId'
  171. ],
  172. data() {
  173. return {
  174. form: {
  175. searchText: '', //搜索字段
  176. hisName: '',
  177. icdCode: '',
  178. hisDetailName: '',
  179. formConceptId: '',
  180. conceptId: '',
  181. form: '',
  182. hisCode: '',
  183. source: ''
  184. },
  185. showDrop: false, //下拉框显示文字
  186. saveDisable: false, //保存按钮禁止点击
  187. uniqueNameList: [],
  188. rules: {
  189. hisName: [
  190. { required: true, message: '请输入' + this.meal, trigger: 'change' },
  191. { max: 80, message: this.meal + '最多80字', trigger: 'change' }
  192. ],
  193. searchText: [
  194. { required: true, message: '请选择' + this.meal, trigger: 'change' }
  195. ]
  196. },
  197. isEdit: false,
  198. editId: '',
  199. drugList: [],
  200. tableData: [],
  201. mapList: [],
  202. getIndex: 6
  203. };
  204. },
  205. created() {
  206. //修改
  207. if (this.data != {}) {
  208. this.isEdit = true;
  209. this.editId = this.data.id;
  210. this.form.hisName = this.data.hisName;
  211. this.form.searchText = this.data.uniqueName;
  212. this.form.icdCode = this.data.code;
  213. this.form.conceptId = this.data.conceptId;
  214. this.form.formConceptId = this.data.formConceptId;
  215. this.form.form = this.data.form;
  216. this.form.source = this.data.source;
  217. this.form.hisCode = this.data.hisCode;
  218. this.getTermMatching();
  219. this.getRelatedMapping();
  220. }
  221. },
  222. methods: {
  223. selectedstyle({ row, rowIndex }) {
  224. if (this.getIndex === rowIndex) {
  225. return {
  226. 'background-color': '#EBEEF5'
  227. };
  228. }
  229. },
  230. tableRowClassName({ row, rowIndex }) {
  231. row.index = rowIndex;
  232. },
  233. btn(row) {
  234. if (this.getIndex == row.index) {
  235. this.getIndex = 6;
  236. this.form.searchText = '';
  237. this.form.conceptId = '';
  238. this.form.icdCode = '';
  239. this.form.source = '';
  240. } else {
  241. this.getIndex = row.index;
  242. this.form.searchText = row.name;
  243. this.form.conceptId = row.id;
  244. this.form.icdCode = row.code;
  245. this.form.source = row.source;
  246. }
  247. },
  248. // 搜索列表
  249. searchTerms(query) {
  250. if (!query) {
  251. this.uniqueNameList = [];
  252. return;
  253. }
  254. this.showDrop = true;
  255. let params = {
  256. type: this.type,
  257. inputStr: query,
  258. sex: 3,
  259. age: 0
  260. };
  261. api.retrievalSearch(params).then(res => {
  262. this.showDrop = false;
  263. if (res.data.code === '0') {
  264. this.uniqueNameList = res.data.data.nameList;
  265. }
  266. });
  267. },
  268. searchDrug(query) {
  269. if (!query) {
  270. this.drugList = [];
  271. return;
  272. }
  273. this.showDrop = true;
  274. let params = {
  275. type: 15,
  276. inputStr: query,
  277. sex: 3,
  278. age: 0
  279. };
  280. api.retrievalSearch(params).then(res => {
  281. this.showDrop = false;
  282. if (res.data.code === '0') {
  283. this.drugList = res.data.data.nameList;
  284. }
  285. });
  286. },
  287. onchange() {
  288. this.getRelatedMapping();
  289. },
  290. getRelatedMapping() {
  291. const { hisName, hisDetailName } = this.form;
  292. let params = {
  293. type: this.type,
  294. hisDetailName: hisDetailName,
  295. hisName: hisName,
  296. hospitalId: this.hospitalId
  297. };
  298. api.getRelatedMapping(params).then(res => {
  299. this.showDrop = false;
  300. if (res.data.code === '0') {
  301. this.mapList = res.data.data;
  302. }
  303. });
  304. },
  305. changeWord(newValue) {
  306. this.form.searchText = newValue.name;
  307. this.form.icdCode = newValue.code;
  308. this.form.conceptId = newValue.id;
  309. this.getIndex = 6;
  310. },
  311. drugchangeWord(newValue) {
  312. this.form.formConceptId = newValue.id;
  313. this.form.form = newValue.name;
  314. },
  315. handleVisible(flag) {
  316. if (!flag) {
  317. this.uniqueNameList = [];
  318. }
  319. },
  320. // 获取焦点
  321. handleFocus() {},
  322. onblur() {
  323. this.getTermMatching();
  324. },
  325. getTermMatching() {
  326. let params = {
  327. type: this.ty ? this.ty : this.type,
  328. inputStr: this.form.hisName
  329. };
  330. api.getTermMatching(params).then(res => {
  331. this.showDrop = false;
  332. if (res.data.code === '0') {
  333. this.tableData = res.data.data;
  334. this.getIndex = 6;
  335. }
  336. });
  337. },
  338. // 建立关联-参数处理
  339. submitForm() {
  340. this.$refs.relationForm.validate(valid => {
  341. if (valid) {
  342. const {
  343. searchText,
  344. hisName,
  345. hisDetailName,
  346. icdCode,
  347. conceptId,
  348. formConceptId,
  349. hisCode,
  350. source
  351. } = this.form;
  352. // 当标准术语是套餐时,细项必须为空
  353. let params = {
  354. hisName: hisName,
  355. uniqueName: searchText,
  356. hisDetailName: hisDetailName,
  357. type: this.type,
  358. conceptId: conceptId,
  359. formConceptId: formConceptId,
  360. hospitalId: this.hospitalId,
  361. hisCode: hisCode,
  362. source: source ? source : 1
  363. };
  364. this.showSaveDialog(params);
  365. } else {
  366. console.log('error submit!!');
  367. return false;
  368. }
  369. });
  370. },
  371. // 建立关联-映射关系是否已存在
  372. showSaveDialog(params) {
  373. this.saveDisable = true; //提交保存按钮不可点击,返回结果时才可点击,防止频繁发送请求
  374. api
  375. .diseaseIsExistRecord(params)
  376. .then(res => {
  377. if (!res.data.data) {
  378. // 不存在,创建新的关联
  379. // 如果是编辑时,需要携带id
  380. if (this.isEdit) {
  381. params = { ...params, id: this.editId };
  382. }
  383. this.saveLisMapping(params, '保存成功', 'success');
  384. } else {
  385. // 已存在,提示修改
  386. this.warning('该条关联已存在,无法添加');
  387. this.saveDisable = false;
  388. }
  389. })
  390. .catch(err => {
  391. if (err.code === '900010001') {
  392. return false;
  393. }
  394. this.warning(err);
  395. });
  396. },
  397. // 初始化表单数据
  398. initForm() {
  399. this.form.hisName = '';
  400. this.form.searchText = '';
  401. this.form.icdCode = '';
  402. this.form.hisDetailName = '';
  403. this.form.form = '';
  404. this.form.conceptId = '';
  405. this.form.source = '';
  406. },
  407. // 映射关系不存在-建立关联
  408. saveLisMapping(params, msg, type) {
  409. api.saveOrUpdateDiseaseRecord(params).then(res => {
  410. if (res.data.code === '0') {
  411. this.warning(res.data.msg || msg, type);
  412. this.initForm();
  413. this.$emit('func', 'updata');
  414. } else {
  415. this.warning(res.data.msg);
  416. }
  417. this.saveDisable = false;
  418. });
  419. },
  420. // 关联已存在模态框
  421. showConfirmDialog(msg, resolve) {
  422. this.$alert(msg, '提示', {
  423. // customClass: 'confirmRealation',
  424. confirmButtonText: '是',
  425. // cancelButtonText: '否',
  426. // cancelButtonClass: 'cancelButton',
  427. type: 'warning'
  428. })
  429. .then(() => {
  430. resolve();
  431. })
  432. .catch(() => {
  433. this.saveDisable = false;
  434. this.warning('建立失败', 'error');
  435. });
  436. },
  437. warning(msg, type) {
  438. this.$message({
  439. showClose: true,
  440. message: msg,
  441. type: type || 'warning'
  442. });
  443. },
  444. closeModal() {
  445. this.$emit('func', 'close');
  446. }
  447. }
  448. };
  449. </script>
  450. <style lang="less" scoped>
  451. .modal-container {
  452. position: fixed;
  453. top: 0;
  454. left: 0;
  455. width: 100%;
  456. height: 100%;
  457. z-index: 21;
  458. .cover {
  459. background: #000;
  460. opacity: 0.2;
  461. width: 100%;
  462. height: 100%;
  463. }
  464. .modal-box {
  465. width: 950px;
  466. background: #fff;
  467. position: absolute;
  468. top: 50%;
  469. left: 50%;
  470. transform: translate(-50%, -50%);
  471. .modal-title {
  472. height: 40px;
  473. background: #e3eaf4;
  474. .close {
  475. float: right;
  476. margin: 3px 13px 0 0;
  477. font-size: 22px;
  478. color: #979797;
  479. cursor: pointer;
  480. }
  481. }
  482. .btns {
  483. display: inline-block;
  484. width: 70px;
  485. height: 34px;
  486. line-height: 34px;
  487. background: #48c5d7;
  488. border-radius: 4px;
  489. color: #fff;
  490. text-align: center;
  491. cursor: pointer;
  492. outline: none;
  493. border: none;
  494. }
  495. .cancel {
  496. background: #fff;
  497. color: #48c5d7;
  498. border: 1px #48c5d7 solid;
  499. margin-left: 40px;
  500. }
  501. .modal-body {
  502. padding: 34px 22px;
  503. }
  504. .modal-footer {
  505. margin-bottom: 60px;
  506. width: 100%;
  507. text-align: center;
  508. }
  509. }
  510. }
  511. .tab {
  512. max-width: 240px;
  513. min-width: 240px;
  514. // position: absolute;
  515. // top: 0;
  516. z-index: 999;
  517. margin-bottom: 15px;
  518. margin-top: -40px;
  519. }
  520. // .tabs {
  521. // max-width: 240px;
  522. // min-width: 240px;
  523. // position: absolute;
  524. // top: 0;
  525. // left: 250px;
  526. // }
  527. .mapList {
  528. padding: 0 20px 20px;
  529. font-size: 14px;
  530. line-height: 24px;
  531. & span {
  532. padding: 0 3px;
  533. }
  534. }
  535. .el-select-dropdown__list,
  536. .el-select-dropdown__item {
  537. width: 219px;
  538. cursor: pointer;
  539. }
  540. .el-dropdown-menu__item:focus,
  541. .el-checkbox__input.is-checked + .el-checkbox__label,
  542. .el-dropdown-menu__item:not(.is-disabled):hover,
  543. .el-button--text,
  544. .el-date-table td.today span,
  545. .el-radio__input.is-checked + .el-radio__label,
  546. .el-pagination.is-background .el-pager li:not(.disabled):hover,
  547. .el-select-dropdown__item.selected {
  548. font-size: 14px;
  549. padding: 0 20px;
  550. position: relative;
  551. white-space: nowrap;
  552. overflow: hidden;
  553. text-overflow: ellipsis;
  554. color: #606266;
  555. height: 34px;
  556. line-height: 34px;
  557. -webkit-box-sizing: border-box;
  558. box-sizing: border-box;
  559. width: 219px;
  560. cursor: pointer;
  561. }
  562. /deep/ .el-form-item__error {
  563. width: 150px;
  564. }
  565. /*********新增编辑***********/
  566. .topBack {
  567. top: 0;
  568. }
  569. .titleBox {
  570. padding: 0 0 10px 0px;
  571. }
  572. .title {
  573. width: 50%;
  574. float: left;
  575. font-size: 14px;
  576. }
  577. .leftBox,
  578. .midBox,
  579. .rightBox {
  580. width: 380px;
  581. float: left;
  582. min-height: 200px;
  583. font-size: 14px;
  584. }
  585. .midBox {
  586. width: 6%;
  587. padding: 50px 0 0 0;
  588. text-align: center;
  589. }
  590. .midTitle {
  591. width: 40px;
  592. margin: 0 auto;
  593. }
  594. .midLogo {
  595. margin: 0 auto;
  596. }
  597. .leftBox,
  598. .rightBox {
  599. border: 1px solid #dcdfe6;
  600. padding: 20px 10px;
  601. }
  602. .rightBox {
  603. padding-right: 33px;
  604. height: 200px;
  605. overflow-y: auto;
  606. }
  607. .itemLabel {
  608. width: 100%;
  609. min-height: 50px;
  610. line-height: 50px;
  611. position: relative;
  612. }
  613. .itemLabelName,
  614. .searchInput,
  615. .searchName {
  616. float: left;
  617. color: #606266;
  618. }
  619. .itemLabelName {
  620. width: 150px;
  621. }
  622. .isRequired::before {
  623. content: '*';
  624. color: red;
  625. }
  626. .searchInput,
  627. .mealNameItem {
  628. padding: 0 5px;
  629. }
  630. .searchInput,
  631. .searchName {
  632. display: inline-block;
  633. height: 32px;
  634. line-height: 32px;
  635. border: 1px solid #a9a9a9;
  636. margin: 8px 0 0 0;
  637. }
  638. .searchName {
  639. text-align: center;
  640. border-left: none;
  641. cursor: pointer;
  642. padding: 0 12px;
  643. font-size: 16px;
  644. }
  645. .itemList {
  646. position: absolute;
  647. background: #fff;
  648. width: 162px;
  649. max-height: 150px;
  650. border: 1px solid #a9a9a9;
  651. left: 150px;
  652. top: 42px;
  653. z-index: 2;
  654. overflow-y: auto;
  655. }
  656. .itemList {
  657. width: calc(100% - 131px);
  658. }
  659. .mealNameItem {
  660. height: 30px;
  661. line-height: 30px;
  662. font-size: 14px;
  663. cursor: pointer;
  664. }
  665. .mealNameItem:hover {
  666. background: #f5f7fa;
  667. }
  668. .previewInfo {
  669. padding-left: 4px;
  670. display: inline-block;
  671. margin-top: 8px;
  672. // width: calc(100% - 160px);s
  673. line-height: 24px;
  674. overflow: hidden;
  675. word-wrap: break-word;
  676. word-break: break-all;
  677. }
  678. .sumbit {
  679. position: absolute;
  680. display: inline-block;
  681. width: 80px;
  682. height: 30px;
  683. line-height: 30px;
  684. border: 1px solid #a9a9a9;
  685. text-align: center;
  686. right: 100px;
  687. }
  688. .confirmRealation {
  689. .cancelButton {
  690. border: 1px solid #a9a9a9;
  691. span {
  692. color: #606266;
  693. }
  694. }
  695. }
  696. </style>