AddChemicalAndCommonMapping.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <template>
  2. <div class="AddChemicalAndCommonMappingWrapper clearfix" @click="close">
  3. <!-- <div class="groupTitle"><i
  4. class="el-icon-back"
  5. @click="back"
  6. ></i> 化验大小项与公表项对应维护--添加关联</div> -->
  7. <crumbs
  8. title="化验大小项与公表项对应维护--添加关联"
  9. class="topBack"
  10. :param="$route.params"
  11. linkTo="ChemicalAndCommonMapping"
  12. ></crumbs>
  13. <div class="AddChemicalAndCommonMappingBox clearfix">
  14. <div class="titleBox clearfix">
  15. <p class="title">关联公表项</p>
  16. <p class="title">关联化验项</p>
  17. </div>
  18. <div class="rightBox">
  19. <div class="itemLabel">
  20. <label class="itemLabelName">选择公表项:</label>
  21. <input class="searchInput" @focus="focuInput" type="text" v-model = "uniqueText">
  22. <span class="searchName" @click="searchMealItem(3)">搜索</span>
  23. <ul class="itemList uniqueNameList" ref="uniqueNameList">
  24. <li
  25. v-for="item in uniqueNameList"
  26. class="mealNameItem ellipsis"
  27. :title="item.conceptName"
  28. @click="selectUniqueName(item)"
  29. :key="item.conceptName">
  30. {{item.conceptName}}
  31. </li>
  32. </ul>
  33. </div>
  34. <div class="itemLabel">
  35. <label class="itemLabelName isRequired">已选择公表项:</label>
  36. <span class="selectItemName">{{form.uniqueName}}</span>
  37. </div>
  38. </div>
  39. <div class="midBox">
  40. <img class="midLogo" src="../../images/relation.png" alt="">
  41. <p class="midTitle">相互关联</p>
  42. </div>
  43. <div class="leftBox clearfix" >
  44. <div class="itemLabel clearfix">
  45. <label class="itemLabelName">选择化验大项:</label>
  46. <input class="searchInput" @focus="focuInput" type="text" v-model = "mealText">
  47. <span class="searchName" @click="searchMealItem(1)">搜索</span>
  48. <ul class="itemList mealNameList" ref="mealNameList">
  49. <li
  50. v-for="item in mealNameList"
  51. class="mealNameItem ellipsis"
  52. :title="item.name"
  53. @click="selectMealName(item)"
  54. :key="item.id">
  55. {{item.name}}
  56. </li>
  57. </ul>
  58. </div>
  59. <div class="itemLabel clearfix">
  60. <label class="itemLabelName isRequired">已选择化验大项:</label>
  61. <span class="selectItemName">{{form.mealName}}</span>
  62. </div>
  63. <div class="itemLabel clearfix">
  64. <label class="itemLabelName">选择化验小项:</label>
  65. <input class="searchInput" @focus="focuInput" type="text" v-model = "itemText">
  66. <span class="searchName" @click="searchMealItem(2)">搜索</span>
  67. <ul class="itemList itemNameList" ref="itemNameList">
  68. <li
  69. v-for="item in itemNameList"
  70. class="mealNameItem ellipsis"
  71. :title="item.name+'-'+item.tagName"
  72. @click="selectItemName(item)"
  73. :key="item.id">
  74. {{item.name}}-{{item.tagName}}
  75. </li>
  76. </ul>
  77. </div>
  78. <div class="itemLabel">
  79. <label class="itemLabelName">已选择化验小项:</label>
  80. <span class="selectItemName">{{form.itemName}}</span>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="btn">
  85. <!-- <span class="sumbit" @click="submitForm">建立关联</span> -->
  86. <el-button
  87. type="primary"
  88. :disabled = 'saveDisable'
  89. @click="submitForm"
  90. >建立关联</el-button>
  91. </div>
  92. </div>
  93. </template>
  94. <script>
  95. import api from '@api/icss.js';
  96. export default {
  97. name: 'AddChemicalAndCommonMapping',
  98. data() {
  99. return {
  100. mealText: '', //化验大项搜索文字内容
  101. itemText: '', //化验小项搜索文字内容
  102. uniqueText: '', //公表项搜索文字内容
  103. isEdit: false,
  104. mealNameList:[],
  105. itemNameList: [],
  106. uniqueNameList:[],
  107. form: {
  108. mealName: '', //大项名称
  109. itemName: '', //小项名称
  110. uniqueName: '', //公表名称,必填
  111. },
  112. saveDisable: false //保存按钮禁止点击
  113. }
  114. },
  115. created() {
  116. //修改(不需要)
  117. // const { isEdit, data } = this.$route.params
  118. // if(isEdit) {
  119. // this.isEdit = isEdit;
  120. // this.form.mealName = data.mealName
  121. // this.form.itemName = data.itemName
  122. // this.form.uniqueName = data.uniqueName
  123. // }
  124. },
  125. methods: {
  126. close() {
  127. this.mealNameList = [];
  128. this.itemNameList =[];
  129. this.uniqueNameList = [];
  130. this.$refs['mealNameList'].style.display='none';
  131. this.$refs['itemNameList'].style.display='none';
  132. this.$refs['uniqueNameList'].style.display='none';
  133. },
  134. searchMealItem(type) {
  135. if( type == '1' || type == '2') {
  136. this.getTagList(type)
  137. } else if ( type == '3') {
  138. this.getAllLisConcept()
  139. }
  140. },
  141. getTagList(type) {
  142. let param = {}
  143. if (type == 1) {
  144. param.name = this.mealText
  145. param.tagType = [7]
  146. param.type = 5
  147. } else if (type == 2) {
  148. param.name = this.itemText
  149. param.tagType = [1]
  150. param.type = 5
  151. }
  152. api.searchTagList(param).then((res) => {
  153. if (res.data.code === '0') {
  154. if (type == 1) {
  155. this.mealNameList = res.data.data
  156. if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='block' }
  157. if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='none' }
  158. if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='none'}
  159. } else if (type == 2) {
  160. this.itemNameList = res.data.data
  161. if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='block' }
  162. if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='none'}
  163. if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='none' }
  164. }
  165. }
  166. })
  167. },
  168. getAllLisConcept() {
  169. const param = {
  170. conceptName: this.uniqueText
  171. }
  172. api.getAllLisConcept(param).then((res) => {
  173. if(res.data.code === '0') {
  174. this.uniqueNameList = res.data.data
  175. if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='block'}
  176. if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='none' }
  177. if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='none' }
  178. }
  179. })
  180. },
  181. focuInput() {
  182. this.$refs['mealNameList'].style.display='none'
  183. this.$refs['itemNameList'].style.display='none'
  184. this.$refs['uniqueNameList'].style.display='none'
  185. },
  186. selectMealName(item) {
  187. this.form.mealName = item.name
  188. this.$refs['mealNameList'].style.display='none'
  189. this.mealText = ''
  190. this.mealNameList = []
  191. },
  192. selectItemName(item) {
  193. this.form.itemName = item.name
  194. this.$refs['itemNameList'].style.display='none'
  195. this.itemText = ''
  196. this.itemNameList = []
  197. },
  198. selectUniqueName(item) {
  199. this.form.uniqueName = item.conceptName
  200. let nameArr = item.conceptName.split('--');
  201. this.form.mealName = nameArr[0]
  202. this.form.itemName = nameArr[1]
  203. this.$refs['uniqueNameList'].style.display='none'
  204. this.uniqueText = ''
  205. this.uniqueNameList = []
  206. },
  207. initForm() {
  208. this.form.mealName = ''
  209. this.form.itemName = ''
  210. this.form.uniqueName = ''
  211. },
  212. submitForm() {
  213. const { mealName, itemName, uniqueName } = this.form
  214. if (!mealName || !uniqueName) {
  215. this.warning('请填写相关数据')
  216. return
  217. }
  218. //通过必填验证,提交保存
  219. const param = {
  220. "itemName": itemName,
  221. "mealName": mealName,
  222. "uniqueName": uniqueName
  223. }
  224. this.showSaveDialog(param);
  225. },
  226. saveLisMapping(param, msg, type) {
  227. api.saveLisMapping(param).then((res) => {
  228. if (res.data.code === '0') {
  229. this.warning(res.data.msg || msg, type);
  230. // this.$router.push({name: 'ChemicalAndCommonMapping'});
  231. this.initForm();
  232. } else {
  233. this.warning(res.data.msg)
  234. }
  235. this.saveDisable = false
  236. })
  237. },
  238. showSaveDialog(param) {
  239. // 修改(不需要)
  240. // if(this.isEdit) {
  241. // this.saveLisMapping(param)
  242. // } else {
  243. this.saveDisable = true //提交保存按钮不可点击,返回结果时才可点击,防止频繁发送请求
  244. api.hasLisMapping(param).then((res) => {
  245. if (!res.data.data) {
  246. this.saveLisMapping(param, '关联建立成功', 'success' )
  247. } else {
  248. this.showConfirmDialog('该关联已存在是否替换旧的关系信息', () => {
  249. this.saveLisMapping(param, '关联建立成功', 'success' )
  250. });
  251. }
  252. }).catch((err) => {
  253. this.warning(err);
  254. })
  255. // }
  256. },
  257. showConfirmDialog(msg, resolve) {
  258. this.$confirm(msg, '提示', {
  259. customClass: 'confirmRealation',
  260. confirmButtonText: '是',
  261. cancelButtonText: '否',
  262. cancelButtonClass: 'cancelButton',
  263. type: 'warning'
  264. }).then(() => {
  265. resolve();
  266. }).catch(() => {
  267. this.saveDisable = false
  268. this.warning('建立失败','error')
  269. });
  270. },
  271. warning(msg, type) {
  272. this.$message({
  273. showClose: true,
  274. message: msg,
  275. type: type || 'warning'
  276. })
  277. },
  278. }
  279. }
  280. </script>
  281. <style lang="less">
  282. .AddChemicalAndCommonMappingWrapper {
  283. .AddChemicalAndCommonMappingBox {
  284. min-width: 940px;
  285. }
  286. color: #606266;
  287. .topBack {
  288. top: 0;
  289. }
  290. // .groupTitle {
  291. // width: calc(100% - 50px);
  292. // height: 40px;
  293. // background: #fff;
  294. // padding: 0 20px 0 30px;
  295. // margin-bottom: 20px;
  296. // line-height: 40px;
  297. // position: relative;
  298. // z-index: 5;
  299. // }
  300. .titleBox {
  301. padding: 0 0 10px 0px;
  302. }
  303. .title {
  304. width: 50%;
  305. float: left;
  306. font-size: 14px;
  307. }
  308. .AddChemicalAndCommonMappingBox {
  309. padding: 20px 30px 20px 30px;
  310. margin: 70px 20px 0 20px;
  311. background: #fff;
  312. }
  313. .leftBox , .midBox, .rightBox{
  314. width: 40%;
  315. float: left;
  316. height: 200px;
  317. font-size: 14px;
  318. }
  319. .midBox {
  320. width: 6%;
  321. padding: 50px 0 0 0;
  322. text-align: center;
  323. }
  324. .midTitle {
  325. width: 40px;
  326. margin: 0 auto;
  327. }
  328. .midLogo {
  329. margin: 0 auto;
  330. }
  331. .leftBox, .rightBox {
  332. border: 1px solid #a9a9a9;
  333. padding: 20px 20px;
  334. }
  335. .itemLabel {
  336. width: 100%;
  337. height: 50px;
  338. line-height: 50px;
  339. position: relative;
  340. }
  341. .itemLabelName, .searchInput, .searchName{
  342. float: left;
  343. color: #606266;
  344. }
  345. .itemLabelName {
  346. width: 150px;
  347. }
  348. .isRequired::before {
  349. content: '*';
  350. color: red;
  351. }
  352. .searchInput, .mealNameItem {
  353. padding: 0 5px;
  354. }
  355. .searchInput, .searchName {
  356. display: inline-block;
  357. height: 32px;
  358. line-height: 32px;
  359. border: 1px solid #a9a9a9;
  360. margin: 8px 0 0 0;
  361. }
  362. .searchName {
  363. text-align: center;
  364. border-left: none;
  365. cursor: pointer;
  366. padding: 0 12px;
  367. font-size: 16px;
  368. }
  369. .itemList {
  370. position: absolute;
  371. display: none;
  372. background: #fff;
  373. width: 162px;
  374. max-height: 150px;
  375. border: 1px solid #a9a9a9;
  376. left: 150px;
  377. top: 42px;
  378. z-index: 2;
  379. overflow-y: auto;
  380. }
  381. .itemList {
  382. width: calc(100% - 131px);
  383. }
  384. .mealNameItem {
  385. height: 30px;
  386. line-height: 30px;
  387. font-size: 14px;
  388. cursor: pointer;
  389. }
  390. .mealNameItem:hover {
  391. background: #f5f7fa;
  392. }
  393. .selectItemName {
  394. display: inline-block;
  395. width: calc(100% - 160px);
  396. }
  397. .btn {
  398. position: relative;
  399. background-color: #fff;
  400. margin: 0px 20px;
  401. padding: 20px;
  402. min-width: 960px;
  403. height: 80px;
  404. .el-button {
  405. position: absolute;
  406. right: 80px;
  407. top: 20px;
  408. }
  409. }
  410. .sumbit {
  411. position: absolute;
  412. display: inline-block;
  413. width: 80px;
  414. height: 30px;
  415. line-height: 30px;
  416. border: 1px solid #a9a9a9;
  417. text-align: center;
  418. right: 100px;
  419. }
  420. }
  421. .confirmRealation {
  422. .cancelButton{
  423. border: 1px solid #a9a9a9;
  424. span {
  425. color: #606266;
  426. }
  427. }
  428. }
  429. </style>