Symptom.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <template>
  2. <div class="symp-wrap">
  3. <div class="choose" v-if="chooseSymp.length>0">
  4. <p class="quest">已选症状</p>
  5. <p class="choo-symp" v-for="(v,i) in chooseSymp">
  6. <span @click="showChecked(v)">{{v.name}}</span>
  7. <span @click="deletSymp(v,i)"><img src="../images/delete.png" alt=""></span>
  8. </p>
  9. </div>
  10. <div class="label">
  11. <p class="quest">请问您有哪些不适?</p>
  12. <span class="symp"
  13. v-for="(it,ind) in symp"
  14. :key="it.conceptId"
  15. @click="showDetil(it)">{{it.name}}</span>
  16. </div>
  17. <div class="result" v-if="JSON.stringify(checkText) !== '{}'">
  18. <p class="title">症状情况</p>
  19. <p v-for="(value,key,index) in checkText">{{value}}</p>
  20. </div>
  21. <div :class="['footer',{'nofoot':chooseSymp.length==0}]" @click="toNext">下一步</div>
  22. <div class="detail" v-if="show">
  23. <DetailBox @close="closeDetal"
  24. :data="labelDetail"
  25. v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
  26. @pComplete="complete"/>
  27. </div>
  28. <Toast :message="delText"
  29. :show="showToast"
  30. @comfirn="comfirnDel"
  31. @cancel="cancelDel"/>
  32. </div>
  33. </template>
  34. <script type="text/javascript">
  35. import api from '@utils/api.js';
  36. import DetailBox from './DetailBox.vue';
  37. import Toast from '../common/Toast.vue';
  38. export default {
  39. name:'Symptom',
  40. data(){
  41. let {datas,update} = this.$store.state;
  42. const {pathInfo,originDatas} = this.$store.state;
  43. return {
  44. age:pathInfo.patientAge,
  45. sexType:pathInfo.patientSex=='男'?1:(pathInfo.patientSex=='女'?2:3),
  46. deptName:pathInfo.selfDeptName,
  47. hosCode:pathInfo.hospitalCode,
  48. choose:false,
  49. check:false,
  50. show:false, //显示明细
  51. chooseSymp:[], //已选症状
  52. symp:[], //症状
  53. labelDetail:{}, //明细
  54. checkText:{}, //选中拼好的明细
  55. questId:null, //id
  56. // symptomName:'', //点击的症状名称
  57. delText:"是否删除该信息? (已填内容将清除)",
  58. delIndex:null,
  59. showToast:false,
  60. finished:false, //是否填写了明细
  61. upData:update
  62. }
  63. },
  64. created(){
  65. this.getSympList();
  66. },
  67. mounted(){
  68. // 从store中取数据
  69. },
  70. methods:{
  71. getSympList(){
  72. const param = {
  73. "age":this.age,
  74. "deptName":this.deptName,
  75. "sexType":this.sexType
  76. }
  77. api.getSymptom(param).then((res)=>{
  78. const result = res.data;
  79. if(result.code==0){
  80. this.symp = result.data;
  81. }
  82. })
  83. },
  84. toNext(){
  85. // 把1切换成完成图标,且2高亮
  86. if(this.chooseSymp.length==0){return}
  87. this.$emit('next');
  88. // 把症状情况的数据存起-已选、详情、拼好的文字
  89. },
  90. showDetil(item){
  91. this.chooseSymp.push(item);
  92. // this.questId = item.conceptId;
  93. this.questId = item.questionId;
  94. const param = {
  95. "age":this.age,
  96. "id":item.questionId,
  97. "sexType":this.sexType
  98. }
  99. api.getById(param).then((res)=>{
  100. const result = res.data;
  101. if(result.code==0){
  102. const mapping = result.data.questionMapping;
  103. this.labelDetail = result.data;
  104. this.$store.commit('setOrigin',{type:"1",data:result.data});
  105. // this.$store.commit('getUpdate');
  106. if(mapping&&mapping.length>0){
  107. this.show = true;
  108. }
  109. }
  110. })
  111. // 推理
  112. const sympText = this.getSympText();
  113. this.getPush(sympText);
  114. },
  115. getSympText(){
  116. let sympText = "";
  117. for(let k in this.chooseSymp){
  118. sympText += this.chooseSymp[k].name;
  119. }
  120. return sympText;
  121. },
  122. getPush(symptoms){//推理
  123. const param = {
  124. "age":this.age,
  125. "hosCode":this.hosCode,
  126. "sex":this.sexType,
  127. "symptom":symptoms //症状+选择的明细,string
  128. }
  129. api.getPush(param).then((res)=>{
  130. const result = res.data;
  131. if(result.code==0){
  132. this.symp = result.data.symptom;
  133. }
  134. })
  135. },
  136. closeDetal(msg){
  137. const questId = this.questId;
  138. this.getPush(msg);
  139. // this.checkText = Object.assign({},this.checkText,{[questId]:msg});
  140. this.show = false;
  141. this.questId = null;
  142. },
  143. deletSymp(item,index){
  144. this.delIndex = index;
  145. this.questId = item.questionId;
  146. if(this.chooseSymp.length==1){
  147. this.delText = "是否删除该信息?删除后将重新填写预问诊流程 (已填内容将清除)"
  148. }
  149. this.showToast = true;
  150. },
  151. comfirnDel(){
  152. this.chooseSymp.splice(this.delIndex,1);
  153. delete(this.checkText[this.questId]);
  154. // 删除完-常见;其他-推送
  155. if(this.chooseSymp.length>0){
  156. const sympText = this.getSympText();
  157. this.getPush(sympText);//删除后重新调推理-入参:拼好的内容
  158. }else{
  159. this.getSympList();
  160. }
  161. this.cancelDel();
  162. },
  163. cancelDel(){
  164. this.showToast = false;
  165. this.delIndex = null;
  166. this.questId = null;
  167. this.delText = "是否删除该信息? (已填内容将清除)";
  168. },
  169. complete(msg){//明细填写完成
  170. // 获取选择后的明细数据-拼接症状情况-关闭明细弹窗
  171. // let text = this.symptomName + text;
  172. this.checkText = Object.assign({},this.checkText,{[this.questId]:msg});
  173. this.show = false;
  174. this.questId = null;
  175. },
  176. showChecked(item){
  177. const origin = this.$store.state.symptom.origin;
  178. const read = this.$store.state.symptom.datas;
  179. console.log(1111,item,origin,read,)
  180. const data = read[item.questionId] || origin[item.questionId];
  181. if(data.questionMapping&&data.questionMapping.length>0){
  182. this.labelDetail = data;
  183. this.show = true;
  184. }
  185. }
  186. },
  187. components:{
  188. DetailBox,
  189. Toast
  190. },
  191. computed:{
  192. getQuestId(){
  193. return this.upData;
  194. }
  195. },
  196. watch:{
  197. getQuestId:{
  198. handler(newVal,oldVal){
  199. console.log("数据更新了",newVal,oldVal);
  200. let datas = this.$store.state.datas;
  201. let originDatas = this.$store.state.originDatas;
  202. this.labelDetail = datas[this.questId] || originDatas[this.questId];
  203. },
  204. deep:true
  205. }
  206. }
  207. }
  208. </script>
  209. <style lang="less" scoped>
  210. @import '../less/base.less';
  211. .symp-wrap{
  212. font-size: .3rem;
  213. .quest{
  214. color: #000;
  215. margin-bottom: .36rem;
  216. font-weight: 700;
  217. }
  218. }
  219. .choose{
  220. padding-bottom: .2rem;
  221. .choo-symp{
  222. display: inline-block;
  223. width:1.9rem;
  224. height: .74rem;
  225. background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
  226. box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
  227. border-radius: .08rem;
  228. white-space: nowrap;
  229. margin: 0 .3rem .3rem 0;
  230. span{
  231. display: inline-block;
  232. vertical-align: top;
  233. }
  234. span:first-child{
  235. width:1.34rem;
  236. height: .74rem;
  237. line-height: .74rem;
  238. text-align: center;
  239. color: #fff;
  240. }
  241. img{
  242. width:.56rem;
  243. height: .74rem;
  244. }
  245. }
  246. }
  247. .label{
  248. padding-bottom: .2rem;
  249. .symp{
  250. display: inline-block;
  251. width:1.9rem;
  252. height: .74rem;
  253. line-height: .74rem;
  254. border: 1px solid #DFE0E4;
  255. border-radius: .08rem;
  256. text-align: center;
  257. color: #7C828E;
  258. margin: 0 0 .3rem .3rem;
  259. box-sizing: border-box;
  260. }
  261. .symp:nth-child(3n+2){
  262. margin-left: 0;
  263. }
  264. }
  265. .result{
  266. .title{
  267. color: #4F50FF;
  268. padding-left: .1rem;
  269. border-left: .08rem solid #4F50FF;
  270. margin-bottom: .19rem;
  271. font-weight: 700;
  272. }
  273. p{
  274. color: #666;
  275. line-height: .44rem;
  276. }
  277. }
  278. .footer{
  279. .footer;
  280. }
  281. .nofoot{
  282. opacity: 0.3;
  283. background: linear-gradient(-270deg,#4F4FFF, #4F8BFF);
  284. }
  285. .detail{
  286. .mask;
  287. z-index: 66;
  288. }
  289. </style>