AddChronicAndIndexRelation.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. <!-- 添加常见科室症状 -->
  2. <template>
  3. <div class="AddChronicAndIndexRelationWrapper" @click="close">
  4. <!-- <div class="groupTitle"><i
  5. class="el-icon-back"
  6. @click="back"
  7. ></i> 量表管理维护--{{titleText}}</div> -->
  8. <crumbs
  9. :title="'慢病指标值关联维护-'+titleText"
  10. class="topBack"
  11. :param="$route.params"
  12. linkTo="ChronicAndIndexRelation"
  13. ></crumbs>
  14. <el-form :model="form" ref="ruleForm" class="addDepartForm">
  15. <el-form-item class="addDepartFormItem" v-if="!isEdit" label="选择慢病标准术语(概念ID):" prop="department">
  16. <input class="searchInput" @focus="focuInput" type="text" v-model = "searchDiagVal">
  17. <span class="searchName" @click="searchDiag">搜索</span>
  18. <ul class="itemList diagList" ref="diagList">
  19. <li
  20. v-for="item in diagList"
  21. class="diagItem ellipsis"
  22. :title="item.diseaseName"
  23. @click="selectDiag(item)"
  24. :key="item.diseaseId">
  25. {{item.diseaseName}}
  26. </li>
  27. </ul>
  28. </el-form-item>
  29. <el-form-item class="isRequired" label="已选择慢病标准术语:" prop="type">
  30. {{form.diseaseName}}
  31. </el-form-item>
  32. </el-form>
  33. <div class="symptomList">
  34. <div class="screenIndex clearfix">
  35. <label class="screenIndexLabel">选择化验指标公表项内容(概念ID):</label>
  36. <input class="searchInput" @focus="focuInput" type="text" v-model = "searchIndexVal">
  37. <span class="searchName" @click="searchIndex">搜索</span>
  38. <ul class="itemList indexList" ref="indexList">
  39. <li
  40. v-for="item in indexList"
  41. class="diagItem ellipsis"
  42. :title="item.conceptName"
  43. @click="selectIndex(item)"
  44. :key="item.conceptId">
  45. {{item.conceptName}}
  46. </li>
  47. </ul>
  48. </div>
  49. <table class="indexTab">
  50. <tr>
  51. <td class="selectedContent">已选择内容</td>
  52. <td class="selectedContentGroup">已选内容分组(只可输入数字,相同数字归为一组展示)</td>
  53. <td class="selectedContentOpera">操作</td>
  54. </tr>
  55. <tr v-for="(item, index) in selectedIndexList" :key="item.indexUnique">
  56. <td class="selectedContent ">{{item.indexUnique}}</td>
  57. <td class="selectedContentGroup"><input class="groupInput" type="text" v-model="item.indexDesc" @input="handleInp(index,$event)"></td>
  58. <td class="selectedContentOpera"><el-button type="text" size="small" class="delete" @click="delSelectedIndex(item, index)">删除</el-button></td>
  59. </tr>
  60. </table>
  61. </div>
  62. <div class="btn">
  63. <el-button
  64. type="primary"
  65. :disabled = 'saveDisable'
  66. @click="submitForm('ruleForm')"
  67. >确 定</el-button>
  68. </div>
  69. </div>
  70. </template>
  71. <script>
  72. import api from '@api/icss.js';
  73. export default {
  74. name: 'AddChronicAndIndexRelation',
  75. data() {
  76. return{
  77. form: {
  78. diseaseId: '', //诊断id
  79. diseaseName:'' //诊断名称
  80. },
  81. titleText: '添加关联',
  82. diagList: [],
  83. indexList: [],
  84. selectedIndexMap: [], //已经选择过的指标
  85. selectedIndexList: [], //选择的指标列表
  86. searchDiagVal: '',
  87. searchIndexVal: '',
  88. isEdit: false,
  89. saveDisable: false
  90. }
  91. },
  92. created(){
  93. const { isEdit, data } = this.$route.params;
  94. if(isEdit) {
  95. if(isEdit) {
  96. this.isEdit = isEdit;
  97. this.titleText = '修改关联';
  98. this.form.diseaseId = data.diseaseId
  99. this.form.diseaseName = data.diseaseName
  100. this.selectedIndexList = data.data
  101. for (let i = 0; i < this.selectedIndexList.length; i++) {
  102. this.selectedIndexMap.push(this.selectedIndexList[i].indexUnique)
  103. }
  104. }
  105. } else {
  106. }
  107. },
  108. watch: {
  109. // searchTagVal(newVal, preVal) {
  110. // if(newVal.trim() == ''){
  111. // this.getTagList()
  112. // }else if(newVal.trim() != preVal.trim()){
  113. // this.getTagList()
  114. // }
  115. // }
  116. },
  117. methods: {
  118. close() {
  119. this.diagList = [];
  120. this.indexList = [];
  121. if(this.diagList.length>0){this.$refs['diagList'].style.display = 'none';}
  122. if(this.indexList.length>0){this.$refs['indexList'].style.display = 'none';}
  123. },
  124. back(){
  125. this.$router.go(-1);
  126. },
  127. searchDiag() {
  128. const param = {
  129. "diseaseName": this.searchDiagVal,
  130. }
  131. api.queryIndexConfigDiseaseNames(param).then((res)=>{
  132. if(res.data.code === '0') {
  133. this.diagList = res.data.data
  134. if(this.diagList.length>0) {this.$refs['diagList'].style.display = 'block'}
  135. if(this.indexList.length>0) {this.$refs['indexList'].style.display = 'none'}
  136. }
  137. })
  138. },
  139. selectDiag(item) {
  140. this.form.diseaseId = item.diseaseId
  141. this.form.diseaseName = item.diseaseName
  142. this.$refs['diagList'].style.display='none'
  143. this.searchDiagVal = ''
  144. this.diagList=[]
  145. },
  146. focuInput() {
  147. this.$refs['diagList'].style.display='none'
  148. this.$refs['indexList'].style.display='none'
  149. },
  150. searchIndex() {
  151. const param = {
  152. conceptName: this.searchIndexVal,
  153. excludedConceptNames: this.selectedIndexMap
  154. }
  155. api.getAllLisConcept(param).then((res)=>{
  156. if(res.data.code === '0') {
  157. this.indexList = res.data.data
  158. // this.indexList =[
  159. // {conceptName : '空腹血糖'},
  160. // {conceptName : '餐后2小时血糖'},
  161. // {conceptName : '随机血糖'},
  162. // {conceptName : '糖化血红蛋白'},
  163. // {conceptName : '血常规'},
  164. // ]
  165. if(this.indexList.length > 0){this.$refs['indexList'].style.display='block'}
  166. if(this.diagList.length>0) {this.$refs['diagList'].style.display = 'none'}
  167. }
  168. })
  169. },
  170. selectIndex(item) {
  171. this.selectedIndexList.push({indexUnique: item.conceptName, conceptId: item.conceptId, indexDesc:''})
  172. this.selectedIndexMap.push(item.conceptName)
  173. this.indexList = []
  174. this.$refs['indexList'].style.display='none'
  175. },
  176. delSelectedIndex(selectedItem, index) {
  177. this.selectedIndexMap = this.selectedIndexMap.filter((item) => {return item != selectedItem.indexUnique})
  178. this.selectedIndexList.splice(index, 1)
  179. },
  180. submitForm(formName) {
  181. if(!this.form.diseaseId) {
  182. this.warning('请选择诊断')
  183. return
  184. }
  185. if(this.selectedIndexList.length === 0) {
  186. this.warning('请选择指标')
  187. return
  188. }
  189. for (let i = 0; i < this.selectedIndexList.length; i++) {
  190. if(!this.selectedIndexList[i].indexDesc) {
  191. this.warning('请填写内容分组')
  192. return
  193. }
  194. }
  195. this.showDelDialog()
  196. },
  197. showDelDialog() {
  198. this.selectedIndexList.map((item) => {
  199. item.diseaseId = this.form.diseaseId
  200. return item
  201. })
  202. const param ={
  203. "diseaseId": this.form.diseaseId,
  204. "indexConfigData": this.selectedIndexList
  205. }
  206. this.showConfirmDialog('是否建立该关联?', () => {
  207. const url = this.isEdit ?api.updateIndexConfigList(param) : api.saveIndexConfigLists(param)
  208. this.saveDisable = true //提交保存按钮不可点击,返回结果时才可点击,防止频繁发送请求
  209. url.then((res) => {
  210. if (res.data.code === '0') {
  211. this.warning(res.data.msg || '关联成功', 'success','1000')
  212. setTimeout(() => {
  213. //返回带搜索条件的首页
  214. this.$router.push({
  215. path:'ChronicAndIndexRelation',
  216. params: Object.assign({}, this.$route.params, {currentPage: 1})
  217. })
  218. }, 1000);
  219. } else {
  220. this.warning(res.data.msg)
  221. }
  222. this.saveDisable = false
  223. }).catch((err) => {
  224. this.warning(err);
  225. })
  226. });
  227. },
  228. showConfirmDialog(msg, resolve) {
  229. this.$alert(msg, '提示', {
  230. confirmButtonText: '确定',
  231. type: 'warning'
  232. }).then(() => {
  233. resolve();
  234. }).catch(() => {});
  235. },
  236. warning(msg, type,time) {
  237. this.$message({
  238. showClose: true,
  239. message: msg,
  240. type: type || 'warning',
  241. duration:time || '3000'
  242. })
  243. },
  244. handleInp(index,e){ //分组不能输入负数
  245. const value = e.target.value;
  246. const item = this.selectedIndexList[index].indexDesc;
  247. e.target.value = value.replace(/[^\d]/g,'');
  248. this.selectedIndexList[index].indexDesc = item.replace(/[^\d]/g,'');
  249. }
  250. }
  251. }
  252. </script>
  253. <style lang="less">
  254. @import '../../less/common.less';
  255. .AddChronicAndIndexRelationWrapper {
  256. color: #606266;
  257. .topBack {
  258. top: 0;
  259. }
  260. .groupTitle {
  261. background-color: #fff;
  262. height: 40px;
  263. line-height: 40px;
  264. padding-left: 20px;
  265. }
  266. .searchInput, .searchName {
  267. display: inline-block;
  268. height: 32px;
  269. line-height: 32px;
  270. border: 1px solid #a9a9a9;
  271. margin: 0px 0 0 0;
  272. padding: 0 5px;
  273. float: left;
  274. margin-top: 4px;
  275. }
  276. .isRequired .el-form-item__label::before {
  277. content: '*';
  278. color: red;
  279. }
  280. .searchName {
  281. border-left: none;
  282. cursor: pointer;
  283. font-size: 16px;
  284. padding: 0 14px;
  285. }
  286. .itemList {
  287. position: absolute;
  288. display: none;
  289. background: #fff;
  290. width: 162px;
  291. max-height: 150px;
  292. border: 1px solid #a9a9a9;
  293. left: 209px;
  294. top: 37px;
  295. z-index: 2;
  296. overflow-y: auto;
  297. }
  298. .diagItem {
  299. padding: 0 5px;
  300. height: 30px;
  301. line-height: 30px;
  302. font-size: 14px;
  303. cursor: pointer;
  304. }
  305. .diagItem:hover {
  306. background: #f5f7fa;
  307. }
  308. .addDepartForm {
  309. position: relative;
  310. background-color: #fff;
  311. padding: 20px;
  312. margin: 70px 20px 0px 20px;
  313. border-bottom: 1px solid #c0c4cc;
  314. }
  315. .addDepartFormItem {
  316. position: relative;
  317. }
  318. .symptomList {
  319. background-color: #fff;
  320. padding: 20px;
  321. margin: 0px 20px 0px 20px;
  322. min-height: 400px;
  323. }
  324. .screenIndexLabel {
  325. float: left;
  326. height: 40px;
  327. line-height: 40px;
  328. font-size: 14px;
  329. }
  330. .indexTab {
  331. width: 100%;
  332. border-collapse: collapse;
  333. tr {
  334. td {
  335. padding: 5px 10px;
  336. border-bottom: 1px solid #a9a9a9;
  337. text-align: center;
  338. }
  339. }
  340. .selectedContent {
  341. width: 25%;
  342. }
  343. .selectedContentGroup {
  344. width: 55%;
  345. }
  346. .selectedContentOpera {
  347. width: 20%;
  348. }
  349. }
  350. .screenIndex {
  351. width: 100%;
  352. margin-bottom: 30px;
  353. position: relative;
  354. }
  355. .indexList {
  356. left: 239px;
  357. }
  358. .groupInput {
  359. text-align: center;
  360. height: 28px;
  361. color: #606266;
  362. width: 60%;
  363. }
  364. .btn {
  365. position: relative;
  366. background-color: #fff;
  367. margin: 0px 20px;
  368. height: 40px;
  369. padding: 20px;
  370. .el-button {
  371. position: absolute;
  372. right: 20px;
  373. }
  374. }
  375. .selectDepart {
  376. }
  377. }
  378. </style>