AddCommonSymptom.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <!-- 添加常见科室症状 -->
  2. <template>
  3. <div class="addCommonSymptomWrapper">
  4. <div class="groupTitle"><i
  5. class="el-icon-back"
  6. @click="back"
  7. ></i> 常见症状维护系统--添加科室常见症状</div>
  8. <el-form :model="form" ref="ruleForm" :rules="rules" class="addDepartForm">
  9. <el-form-item label="选择科室" prop="department">
  10. <el-select v-model="form.department" placeholder="请添加科室" class="selectDepart">
  11. <el-option v-for="item in departList" :key="item.id" :label="item.name" :value="item.id"></el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="选择类型" prop="type">
  15. <el-select v-model="form.department" placeholder="请选择类型" class="selectDepart">
  16. <el-option v-for="item in departList" :key="item.id" :label="item.name" :value="item.id"></el-option>
  17. </el-select>
  18. </el-form-item>
  19. </el-form>
  20. <div class="symptomList">
  21. <div class="bottomPartLeft fl">
  22. <p class="symptomPoolTitle">症状池</p>
  23. <div class="symptomPool">
  24. <el-input
  25. placeholder="请输入搜索内容"
  26. v-model="searchVal"
  27. >
  28. <i
  29. slot="prefix"
  30. class="el-input__icon el-icon-search"
  31. ></i>
  32. </el-input>
  33. <ul class="tagList tagPool">
  34. <li v-for="(item, index) in leftTagsList"
  35. class = "tagItem"
  36. :key='item.id'
  37. :title="'[ '+item.tagName+' ]'"
  38. :style="getStyle(item)?styles:null"
  39. @click='selectLeftTag(item, index)'
  40. >
  41. <p class="tagName ellipsis" >{{item.tagName}} </p>
  42. </li>
  43. </ul>
  44. </div>
  45. </div>
  46. <div class="bottomPartMid fl">
  47. <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
  48. <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
  49. </div>
  50. <div class="bottomPartRight fl">
  51. <p class="symptomPoolTitle">常见症状:</p>
  52. <ul class="tagList operationPool">
  53. <li class = "tagItem"
  54. v-for="(item,index) in rightTagsList"
  55. :key='item.id'
  56. :style="index === selectRightTagIndex?styles:null"
  57. @click='selectRightTag(index)'
  58. >
  59. <p v-if="item.tagName" class="tagName ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
  60. </li>
  61. </ul>
  62. </div>
  63. <div class="bottomPartMid fl">
  64. <p><span class="el-icon-arrow-up" @click="toUp"></span></p>
  65. <p><span class="el-icon-arrow-down" @click="toDown"></span></p>
  66. </div>
  67. </div>
  68. <div class="btn">
  69. <el-button
  70. type="primary"
  71. @click="submitForm('ruleForm')"
  72. >确 定</el-button>
  73. </div>
  74. </div>
  75. </template>
  76. <script>
  77. import api from '@api/icss.js';
  78. export default {
  79. name: 'AddCommonSymptom',
  80. data() {
  81. return{
  82. rules: {
  83. department:[{required: true, message: '请选择科室', trigger: ['blur']}],
  84. type:[{required: true, message: '请选择科室', trigger: ['blur']}]
  85. },
  86. form: {
  87. department: '',
  88. type:''
  89. },
  90. departList: [],
  91. searchVal: '',
  92. leftTagsList:[],
  93. rightTagsList:[],
  94. selectLeftTagsList: [],
  95. selectRightTagIndex: -1,
  96. styles:{
  97. background:'#eae7e7'
  98. },
  99. }
  100. },
  101. created(){
  102. this.getDepartmentList()
  103. this.getSymptomList()
  104. },
  105. watch: {
  106. searchVal(newVal, preVal) {
  107. if(newVal.trim() == ''){
  108. this.getSymptomList()
  109. }else if(newVal.trim() != preVal.trim()){
  110. this.getSymptomList()
  111. }
  112. }
  113. },
  114. methods: {
  115. back(){
  116. this.$router.go(-1);
  117. },
  118. getDepartmentList() {
  119. api.getDepartmentList().then((res)=>{
  120. if(res.data.code === '0') {
  121. this.departList = res.data.data
  122. }
  123. })
  124. },
  125. getSymptomList() {
  126. let noIds = []
  127. for (let i =0; i < this.rightTagsList.length; i++) {
  128. noIds.push(this.rightTagsList[i].id)
  129. }
  130. const param = {
  131. "deptId": this.form.department,
  132. "tagName": this.searchVal,
  133. "noIds": noIds
  134. }
  135. api.getSymptomList(param).then((res)=>{
  136. if(res.data.code === '0') {
  137. this.leftTagsList = res.data.data
  138. }
  139. })
  140. },
  141. selectLeftTag(tag, index, e) {
  142. const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
  143. if (hasTag) {
  144. this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
  145. } else {
  146. this.selectLeftTagsList.push(tag);
  147. }
  148. },
  149. selectRightTag(index) {
  150. this.selectRightTagIndex = this.selectRightTagIndex === index ? -1 : index
  151. },
  152. toRightList(){
  153. this.rightTagsList.push(...this.selectLeftTagsList);
  154. this.selectLeftTagsList = [];
  155. this.selectRightTagsList = [];
  156. this.getSymptomList()
  157. },
  158. toLeftList(){
  159. for(let i = 0; i < this.selectRightTagsList.length; i++) {
  160. this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
  161. }
  162. this.selectLeftTagsList = [];
  163. this.selectRightTagsList = [];
  164. this.getSymptomList()
  165. },
  166. toUp(){
  167. if(this.selectRightTagIndex === 0 || this.selectRightTagIndex === -1) {
  168. return
  169. }
  170. const tempItem = this.rightTagsList[this.selectRightTagIndex]
  171. this.rightTagsList.splice(this.selectRightTagIndex, 1)
  172. this.rightTagsList.splice(this.selectRightTagIndex-1, 0,tempItem)
  173. this.selectRightTagIndex = -1
  174. },
  175. toDown(){
  176. if(this.selectRightTagIndex === this.rightTagsList.length-1 || this.selectRightTagIndex === -1) {
  177. return
  178. }
  179. const tempItem = this.rightTagsList[this.selectRightTagIndex]
  180. this.rightTagsList.splice(this.selectRightTagIndex, 1)
  181. this.rightTagsList.splice(this.selectRightTagIndex+1, 0,tempItem)
  182. this.selectRightTagIndex = -1
  183. },
  184. isHasTag(item, arr) {
  185. for ( let i = 0; i <arr.length; i++) {
  186. if(arr[i].id === item.id) {
  187. return true;
  188. }
  189. }
  190. return false;
  191. },
  192. getStyle(item){ //左侧选中状态
  193. return this.isHasTag(item, this.selectLeftTagsList)
  194. },
  195. getStyle2(item) {
  196. return this.isHasTag(item, this.selectRightTagsList)
  197. },
  198. submitForm(formName) {
  199. this.$refs[formName].validate((valid) => {
  200. if (valid) {
  201. return
  202. } else {
  203. console.log('error submit!!');
  204. return false;
  205. }
  206. });
  207. if(!this.form.department) {
  208. return
  209. }
  210. this.showDelDialog()
  211. },
  212. showDelDialog() {
  213. let questionId = []
  214. for (let i =0; i < this.rightTagsList.length; i++) {
  215. questionId.push(this.rightTagsList[i].id)
  216. }
  217. const param ={
  218. "deptId": this.form.department,
  219. "questionId": questionId
  220. }
  221. this.showConfirmDialog('是否保存该标签组?', () => {
  222. api.addCommonSymptom(param).then((res) => {
  223. if (res.data.code === '0') {
  224. this.warning(res.data.msg || '保存成功', 'success','1000')
  225. setTimeout(() => {
  226. this.$router.push({
  227. path:'/admin/LT-YXSJWH-CJZZWH'
  228. })
  229. }, 1000);
  230. } else {
  231. this.warning(res.data.msg)
  232. }
  233. }).catch((err) => {
  234. this.warning(err);
  235. })
  236. });
  237. },
  238. showConfirmDialog(msg, resolve) {
  239. this.$alert(msg, '提示', {
  240. confirmButtonText: '确定',
  241. type: 'warning'
  242. }).then(() => {
  243. resolve();
  244. }).catch(() => {});
  245. },
  246. warning(msg, type,time) {
  247. this.$message({
  248. showClose: true,
  249. message: msg,
  250. type: type || 'warning',
  251. duration:time || '3000'
  252. })
  253. },
  254. }
  255. }
  256. </script>
  257. <style lang="less">
  258. @import '../../less/common.less';
  259. .addCommonSymptomWrapper {
  260. .groupTitle {
  261. background-color: #fff;
  262. height: 40px;
  263. line-height: 40px;
  264. padding-left: 20px;
  265. }
  266. .addDepartForm {
  267. background-color: #fff;
  268. padding: 20px;
  269. margin: 20px 20px 0px 20px;
  270. }
  271. .symptomList {
  272. background-color: #fff;
  273. padding: 20px;
  274. margin: 20px 20px 0px 20px;
  275. height: 500px;
  276. }
  277. .bottomPartLeft {
  278. width: 32%;
  279. }
  280. .symptomPoolTitle {
  281. height: 40px;
  282. line-height: 40px;
  283. }
  284. .symptomPool {
  285. width: 100%;
  286. }
  287. .tagList {
  288. width: 100%;
  289. height: 300px;
  290. border: 1px solid @icssBorder;
  291. box-sizing: border-box;
  292. }
  293. .tagList {
  294. border: 1px solid @icssBorder;
  295. }
  296. .tagPool {
  297. height: 300px;
  298. overflow-y: auto;
  299. }
  300. .tagItem {
  301. position: relative;
  302. line-height: 30px;
  303. cursor: pointer;
  304. padding: 0 10px;
  305. }
  306. .tagName:before {
  307. content: '['
  308. }
  309. .tagName::after {
  310. content: ']'
  311. }
  312. .bottomPartMid {
  313. width: 8%;
  314. margin-top: 60px;
  315. p {
  316. width: 100%;
  317. text-align: center;
  318. span {
  319. cursor: pointer;
  320. display: inline-block;
  321. width: 30px;
  322. height: 40px;
  323. line-height: 40px;
  324. margin: 0 auto;
  325. border: 1px solid @icssBorder;
  326. margin-bottom: 15px;
  327. font-size: 18px;
  328. }
  329. }
  330. }
  331. .bottomPartRight {
  332. width: 32%;
  333. }
  334. .operationPool {
  335. position: relative;
  336. width: 100%;
  337. height: 340px;
  338. padding: 10px 0;
  339. }
  340. .btn {
  341. position: relative;
  342. background-color: #fff;
  343. margin: 0px 20px;
  344. padding: 20px;
  345. .el-button {
  346. position: absolute;
  347. right: 20px;
  348. top: -20px;
  349. }
  350. }
  351. .selectDepart {
  352. }
  353. }
  354. </style>