ChronicDisease.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. <template>
  2. <window-size :showTitle="false">
  3. <div class="tip-box">
  4. 当前就诊人信息不是我,前往
  5. <span class="tip-link" @click="toMyCards">我的就诊人</span>
  6. 修改默认就诊人。
  7. </div>
  8. <div class="u-demo-block__title" style="margin: 0 0 8px 18px">基本信息</div>
  9. <van-form ref="loginFormRef">
  10. <van-cell-group inset>
  11. <van-field
  12. v-model="crmPatientMi.pName"
  13. label="姓名"
  14. placeholder="请填写姓名"
  15. required
  16. :rules="[{ required: true, message: '请填写姓名' }]"
  17. />
  18. <van-field
  19. v-model="crmPatientMi.sexLabel"
  20. label="性别"
  21. placeholder="请选择性别"
  22. required
  23. readonly
  24. @click="clickCommonPicker('sex')"
  25. :rules="[{ required: true, message: '请选择性别' }]"
  26. />
  27. <van-field
  28. v-model="crmPatientMi.age"
  29. label="年龄"
  30. placeholder="请填写年龄"
  31. required
  32. :rules="[{ required: true, message: '请填写年龄' }]"
  33. />
  34. <van-field
  35. v-model="crmPatientMi.socialNo"
  36. label="身份证号"
  37. placeholder="请填写身份证号"
  38. required
  39. :rules="[{ required: true, validator: socialNoPattern, message: '请填写正确的身份证号' }]"
  40. />
  41. <van-field
  42. v-model="crmPatientMi.relTel"
  43. label="手机号"
  44. placeholder="请填写本人手机号"
  45. required
  46. :rules="[{ required: true, message: '请填写本人手机号' }]"
  47. />
  48. <van-field
  49. v-model="crmPatientMi.typeLabel"
  50. label="患者来源"
  51. placeholder="请选择患者来源"
  52. required
  53. readonly
  54. @click="clickCommonPicker('pType')"
  55. :rules="[{ required: true, message: '请选择患者来源' }]"
  56. />
  57. <van-field
  58. v-model="crmPatientMi.chronicDiseaseTypeLabel"
  59. label="慢病类型"
  60. placeholder="请选择慢病类型"
  61. required
  62. readonly
  63. @click="clickCommonPicker('chronicDiseaseType')"
  64. :rules="[{ required: true, message: '请选择慢病类型' }]"
  65. />
  66. <van-field
  67. v-model="crmPatientMi.relNameTel"
  68. label="联系人电话"
  69. placeholder="请填写家属电话"
  70. />
  71. <van-field
  72. v-model="crmPatientMi.relLabel"
  73. label="联系人关系"
  74. placeholder="请选择联系人关系"
  75. readonly
  76. @click="clickCommonPicker('relCode')"
  77. />
  78. <van-field
  79. v-model="crmPatientMi.lastDate"
  80. label="确诊时间"
  81. placeholder="请选择确诊时间"
  82. readonly
  83. @click="showTimePicker = true"
  84. />
  85. <van-field
  86. v-model="crmPatientMi.districtLabel"
  87. label="省市区选择"
  88. placeholder="请选择省市区"
  89. readonly
  90. @click="showAddressPicker = true"
  91. />
  92. <van-field
  93. v-model="crmPatientMi.detailAdress"
  94. label="详细地址"
  95. placeholder="请填写详细地址"
  96. />
  97. </van-cell-group>
  98. </van-form>
  99. <!-- 体征信息 -->
  100. <div class="box">
  101. <div class="u-demo-block__title">体征信息</div>
  102. <div class="info">
  103. <div class="flex">
  104. <div class="left">身高</div>
  105. <input type="number" v-model="crmPatientMi.height" placeholder="填写身高"/>
  106. <div class="btn">cm</div>
  107. </div>
  108. <div class="flex">
  109. <div class="left">体重</div>
  110. <input type="number" v-model="crmPatientMi.weight" placeholder="填写体重"/>
  111. <div class="btn">kg</div>
  112. </div>
  113. <div class="flex">
  114. <div class="left">体温</div>
  115. <input type="number" v-model="crmPatientMi.temperature" placeholder="填写体温"/>
  116. <div class="btn">℃</div>
  117. </div>
  118. <div class="flex">
  119. <div class="left">心率</div>
  120. <input type="number" v-model="crmPatientMi.heartRate" placeholder="填写心率"/>
  121. <div class="btn">次</div>
  122. </div>
  123. <div class="flex">
  124. <div class="left">收缩压</div>
  125. <input type="number" v-model="crmPatientMi.bloodPressureHigh" placeholder="填写收缩压"/>
  126. <div class="btn">mmHg</div>
  127. </div>
  128. <div class="flex">
  129. <div class="left">舒张压</div>
  130. <input type="number" v-model="crmPatientMi.bloodPressureLow" placeholder="填写舒张压"/>
  131. <div class="btn">mmHg</div>
  132. </div>
  133. <div class="flex">
  134. <div class="left">血糖</div>
  135. <input type="number" v-model="crmPatientMi.bloodSugar" placeholder="填写血糖"/>
  136. <div class="btn">mmol/L</div>
  137. </div>
  138. <div class="flex">
  139. <div class="left">血氧</div>
  140. <input type="number" v-model="crmPatientMi.bloodOxygen" placeholder="填写血氧"/>
  141. <div class="btn">%</div>
  142. </div>
  143. </div>
  144. </div>
  145. <van-button style="margin-top:20px" block type="primary" @click="submitChronicDiseaseInfo">提交</van-button>
  146. <!-- 日期选择器 -->
  147. <van-popup v-model:show="showTimePicker" round position="bottom">
  148. <van-date-picker
  149. v-model="currentDate"
  150. title="选择日期"
  151. :min-date="minDate"
  152. :max-date="maxDate"
  153. @confirm="timeConfirm"
  154. @cancel="showTimePicker = false"
  155. />
  156. </van-popup>
  157. <!-- 普通滑轮选择器 -->
  158. <van-popup v-model:show="showCommonPicker" round position="bottom">
  159. <van-picker :columns-field-names="commonPickerField" :columns="commonPickerSelections"
  160. @cancel="showCommonPicker = false" @confirm="handleSelectCommonPicker"/>
  161. </van-popup>
  162. <van-popup v-model:show="showAddressPicker" position="bottom">
  163. <van-area :area-list="allArea" v-model="crmPatientMi.districtCode"
  164. @confirm="onConfirmArea" @cancel="showAddressPicker = false"/>
  165. </van-popup>
  166. <van-dialog v-model:show="showPickCardDialog" title="请选择就诊人" @confirm="handleConfirmCard">
  167. <div style="margin: 20px 0 20px 20px">
  168. <van-radio-group v-model="crmPatientMi.patientId">
  169. <van-radio v-for="card in defaultCards" :name="card.patientId" style="margin-bottom: 12px">
  170. {{ card.name }} / {{ card.socialNo }}
  171. </van-radio>
  172. </van-radio-group>
  173. </div>
  174. </van-dialog>
  175. </window-size>
  176. </template>
  177. <script setup>
  178. import {onMounted, ref} from 'vue'
  179. import {
  180. getCrmDictionary, selectCrmPatientMiByCode, saveCrmPatientMi
  181. } from '@/api/chronic-disease';
  182. import {showFailToast, showSuccessToast} from 'vant'
  183. import allArea from '@/utils/area'
  184. import store from "@/store"
  185. import router from "@/router";
  186. import {getDate} from "@/utils/date";
  187. import Cookies from "js-cookie";
  188. const loginFormRef = ref()
  189. const commonPickerField = {
  190. text: 'name',
  191. value: 'label',
  192. }
  193. const showAddressPicker = ref(false)
  194. const onConfirmArea = (values) => {
  195. crmPatientMi.value.provinceCode = values.selectedValues[0]
  196. crmPatientMi.value.cityCode = values.selectedValues[1]
  197. crmPatientMi.value.areaCode = values.selectedValues[2]
  198. crmPatientMi.value.districtLabel = values.selectedOptions.filter((item) => !!item)
  199. .map((item) => item.text).join('/')
  200. showAddressPicker.value = false
  201. }
  202. const crmPatientMi = ref({})
  203. const socialNoPattern = (val) => /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X)$/.test(val)
  204. function submitChronicDiseaseInfo() {
  205. if (!validForm()) {
  206. return
  207. }
  208. if (!crmPatientMi.value.lastDate) {
  209. crmPatientMi.value.lastDate = null;
  210. }
  211. saveCrmPatientMi(crmPatientMi.value).then(() => {
  212. showSuccessToast('提交成功')
  213. });
  214. }
  215. function validForm() {
  216. if (!crmPatientMi.value.pName) {
  217. showFailToast('请填写姓名');
  218. return false;
  219. }
  220. if (!crmPatientMi.value.sexLabel) {
  221. showFailToast('请选择性别');
  222. return false;
  223. }
  224. if (!crmPatientMi.value.age) {
  225. showFailToast('请填写年龄');
  226. return false;
  227. }
  228. if (!crmPatientMi.value.socialNo) {
  229. showFailToast('请填写身份证号');
  230. return false;
  231. }
  232. if (!crmPatientMi.value.relTel) {
  233. showFailToast('请填写本人手机号');
  234. return false;
  235. }
  236. if (!crmPatientMi.value.typeLabel) {
  237. showFailToast('请选择患者来源');
  238. return false;
  239. }
  240. if (!crmPatientMi.value.chronicDiseaseTypeLabel) {
  241. showFailToast('请选择慢病类型');
  242. return false;
  243. }
  244. return true
  245. }
  246. const showTimePicker = ref(false)
  247. function timeConfirm({selectedValues}) {
  248. showTimePicker.value = false
  249. crmPatientMi.value.lastDate =
  250. `${selectedValues[0]}-${selectedValues[1]}-${selectedValues[2]}`
  251. }
  252. const showCommonPicker = ref(false)
  253. const commonPickerSelections = ref([])
  254. const currentCommonPickerKey = ref(null)
  255. function clickCommonPicker(e) {
  256. currentCommonPickerKey.value = e
  257. if (e === 'sex') {
  258. commonPickerSelections.value = dictData.value.getSexCode
  259. } else if (e === 'certificateType') {
  260. commonPickerSelections.value = dictData.value.getPsnCertType
  261. } else if (e === 'chronicDiseaseType') {
  262. commonPickerSelections.value = dictData.value.getCrmClass
  263. } else if (e === 'relCode') {
  264. commonPickerSelections.value = dictData.value.getRelations
  265. } else if (e === 'pType') {
  266. commonPickerSelections.value = dictData.value.getAdmissWay
  267. }
  268. showCommonPicker.value = true;
  269. }
  270. function handleSelectCommonPicker(e) {
  271. showCommonPicker.value = false
  272. if (currentCommonPickerKey.value === 'sex') {
  273. crmPatientMi.value.sex = e.selectedOptions[0].code
  274. crmPatientMi.value.sexLabel = e.selectedOptions[0].name
  275. } else if (currentCommonPickerKey.value === "source") {
  276. crmPatientMi.value.source = e.selectedOptions[0].name
  277. } else if (currentCommonPickerKey.value === "chronicDiseaseType") {
  278. crmPatientMi.value.chronicDiseaseType = e.selectedOptions[0].code
  279. crmPatientMi.value.chronicDiseaseTypeLabel = e.selectedOptions[0].name
  280. } else if (currentCommonPickerKey.value === "relCode") {
  281. crmPatientMi.value.relCode = e.selectedOptions[0].code
  282. crmPatientMi.value.relLabel = e.selectedOptions[0].name
  283. } else if (currentCommonPickerKey.value === "pType") {
  284. crmPatientMi.value.pType = e.selectedOptions[0].code
  285. crmPatientMi.value.typeLabel = e.selectedOptions[0].name
  286. }
  287. }
  288. const toMyCards = () => {
  289. router.push('/myPatientIdCards')
  290. }
  291. const fetchCrmPatientInfo = (card) => {
  292. selectCrmPatientMiByCode(card.patientId).then(res => {
  293. crmPatientMi.value = res
  294. if (res.districtCode) {
  295. crmPatientMi.value.districtLabel = getFullRegionNameByDistrict(res.districtCode)
  296. }
  297. })
  298. }
  299. const getFullRegionNameByDistrict = (districtCode) => {
  300. let districtName = allArea.county_list[districtCode]
  301. if (!districtName) {
  302. return null
  303. }
  304. let cityCode = districtCode.substring(0, 4) + '00';
  305. let cityName = allArea.city_list[cityCode]
  306. let provinceCode = cityCode.substring(0, 2) + '0000'
  307. let provinceName = allArea.province_list[provinceCode]
  308. return provinceName + '/' + cityName + '/' + districtName
  309. }
  310. const defaultCards = ref([])
  311. const showPickCardDialog = ref(false)
  312. const handleConfirmCard = () => {
  313. for (let i = 0; i < defaultCards.value.length; i++) {
  314. const tempCard = defaultCards.value[i]
  315. if (tempCard.patientId === crmPatientMi.value.patientId) {
  316. fetchCrmPatientInfo(tempCard)
  317. return
  318. }
  319. }
  320. }
  321. const minDate = ref(new Date(2020, 1, 23))
  322. const maxDate = ref(new Date())
  323. const currentDate = ref(getDate().split('-'))
  324. const analyzeDefaultCard = () => {
  325. const allCards = store.state.patientCards
  326. allCards.forEach(card => {
  327. if (card.isDefault === 1) {
  328. defaultCards.value.push(card)
  329. }
  330. })
  331. if (defaultCards.value.length === 1) {
  332. fetchCrmPatientInfo(defaultCards.value[0]);
  333. }
  334. store.commit('SET_LOADING', false)
  335. if (defaultCards.value.length > 1) {
  336. showPickCardDialog.value = true
  337. }
  338. }
  339. const dictData = ref({})
  340. onMounted(() => {
  341. getCrmDictionary().then((res) => {
  342. dictData.value = res
  343. if (Cookies.get('token')) {
  344. store.commit('SET_LOADING', true);
  345. setTimeout(() => {
  346. analyzeDefaultCard()
  347. }, 700)
  348. }
  349. });
  350. })
  351. </script>
  352. <style scoped>
  353. :deep label {
  354. color: #000 !important;
  355. }
  356. .tip-box {
  357. color: #6e6e6e;
  358. font-size: 12px;
  359. margin: 8px 0 8px 18px;
  360. }
  361. .tip-link {
  362. color: dodgerblue;
  363. text-decoration: underline;
  364. }
  365. .u-demo-block__title {
  366. font-size: 16px;
  367. color: #95959b;
  368. margin: 15px 0 0 12px;
  369. }
  370. .box {
  371. padding: 5px;
  372. font-size: 12px;
  373. box-sizing: border-box;
  374. }
  375. .info {
  376. width: 100%;
  377. display: flex;
  378. justify-content: space-between;
  379. flex-wrap: wrap;
  380. margin-top: 20rpx;
  381. }
  382. .flex {
  383. display: flex;
  384. height: 30rpx;
  385. width: 50%;
  386. align-items: center;
  387. margin-top: 15px;
  388. }
  389. .left {
  390. width: 50px;
  391. text-align: center;
  392. }
  393. input {
  394. height: 30px;
  395. line-height: 30px;
  396. border-radius: 4px;
  397. width: 70px;
  398. border: 1px solid #e5e8ed;
  399. padding: 0 5px;
  400. box-sizing: border-box;
  401. margin-left: 5px;
  402. }
  403. .btn {
  404. background-color: #f5f7fa;
  405. text-align: center;
  406. width: 50px;
  407. border: 1px solid #e5e8ed;
  408. height: 28px;
  409. line-height: 28px;
  410. }
  411. </style>