Symptom.vue 8.5 KB

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