Form.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <div>
  3. <common @asynCallBack="asynCallBack"></common>
  4. <top-header :pageTitle="pageTitle"></top-header>
  5. <div class="mui-content margin60">
  6. <div class="mui-content-padded vongi-qingjiadt vongi-editme">
  7. <form class="mui-input-group">
  8. <div class="mui-input-row">
  9. <label>就医医院<i style="color: red">*</i></label>
  10. <input type="text" class="mui-input-clear" v-model="detail.hospitalName" placeholder="请填写医院名称" />
  11. </div>
  12. <div class="mui-input-row">
  13. <label>就医时间<i style="color: red">*</i></label>
  14. <button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" @click="selectDate" type="button" style="width: 65%">
  15. {{ detail.hospitalTime ? detail.hospitalTime : "请选择" }}
  16. </button>
  17. </div>
  18. </form>
  19. </div>
  20. <div class="vongi-meform-pho mui-content-padded">
  21. <h4>病因<i style="color: red">*</i></h4>
  22. <div class="mui-input-row">
  23. <textarea id="textarea" rows="5" v-model="detail.pathogeny" placeholder="请填写病因"></textarea>
  24. </div>
  25. </div>
  26. <div class="vongi-meform-pho mui-content-padded">
  27. <h4>就医结果</h4>
  28. <div class="mui-input-row">
  29. <textarea id="textarea" rows="5" v-model="detail.result" placeholder="请填写就医结果"></textarea>
  30. </div>
  31. </div>
  32. <div class="vongi-wordcard vongi-meform-pho mui-content-padded">
  33. <h4>结果图片记录</h4>
  34. <div class="fyy-upphoto">
  35. <div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture, index) in resultImg" :key="index">
  36. <img v-image-preview v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
  37. <a class="mui-icon mui-icon-closeempty" @click="delImg('1', index)"></a>
  38. </div>
  39. <div class="mui-col-xs-3">
  40. <a><span class="mui-icon mui-icon-camera" @click="changeImg('1')"></span></a>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="vongi-meform-pho mui-content-padded">
  45. <h4>使用药品</h4>
  46. <div class="mui-input-row">
  47. <textarea id="textarea" rows="5" v-model="detail.drugs" placeholder="请填写使用药品"></textarea>
  48. </div>
  49. </div>
  50. <div class="vongi-wordcard vongi-meform-pho mui-content-padded">
  51. <h4>药品图片记录</h4>
  52. <div class="fyy-upphoto">
  53. <div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture, index) in drugsImg" :key="index">
  54. <img v-image-preview v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
  55. <a class="mui-icon mui-icon-closeempty" @click="delImg('2', index)"></a>
  56. </div>
  57. <div class="mui-col-xs-3">
  58. <a><span class="mui-icon mui-icon-camera" @click="changeImg('2')"></span></a>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="mui-content-padded vongi-qingjiadt vongi-editme">
  63. <form class="mui-input-group">
  64. <div class="mui-input-row">
  65. <label>诊疗费用(元)</label>
  66. <span style="padding-top: 0px; padding-bottom: 0px">
  67. <input v-model="detail.cost" placeholder="请填写诊疗费用" class="mui-input-clear" type="number" />
  68. </span>
  69. </div>
  70. </form>
  71. </div>
  72. <div class="vongi-wordcard vongi-meform-pho mui-content-padded">
  73. <h4>诊疗费用图</h4>
  74. <div class="fyy-upphoto">
  75. <div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture, index) in costImg" :key="index">
  76. <img v-image-preview v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
  77. <a class="mui-icon mui-icon-closeempty" @click="delImg('3', index)"></a>
  78. </div>
  79. <div class="mui-col-xs-3">
  80. <a><span class="mui-icon mui-icon-camera" @click="changeImg('3')"></span></a>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="fyy-footer">
  86. <div class="bindfyy-btn">
  87. <button type="submit" class="mui-btn mui-btn-pink" @click="submit()">
  88. 保 存
  89. </button>
  90. </div>
  91. </div>
  92. <loading :visible="isLoading"></loading>
  93. </div>
  94. </template>
  95. <script>
  96. require("$project/assets/js/mui.picker.min.js");
  97. import * as API from "@/apis/Master/hospital";
  98. import Common from "$project/components/Common.vue";
  99. import Loading from "$project/components/Loading.vue";
  100. import TopHeader from "$project/components/TopHeader.vue";
  101. import * as WxJsApi from "$project/utils/wxJsApi";
  102. import {
  103. mapGetters,
  104. mapMutations
  105. } from "vuex";
  106. import {} from "$project/utils";
  107. export default {
  108. name: "MasterHospitalForm",
  109. components: {
  110. Common,
  111. Loading,
  112. TopHeader,
  113. },
  114. data() {
  115. return {
  116. pageTitle: "就医记录",
  117. isLoading: false,
  118. drugsImg: [],
  119. resultImg: [],
  120. costImg: [],
  121. detail: {
  122. cost: "", //费用
  123. costImg: "",
  124. delFlag: false,
  125. drugs: "", //药品
  126. drugsImg: "",
  127. hospitalName: "", //医院
  128. hospitalTime: "",
  129. id: "",
  130. popedomId: "",
  131. pathogeny: "", //病因
  132. result: "", //就医结果
  133. resultImg: "", //结果图片
  134. updateBy: "",
  135. updateTime: "",
  136. },
  137. };
  138. },
  139. created() {
  140. },
  141. methods: {
  142. checkForm() {
  143. if (!this.detail.hospitalName) {
  144. mui.toast("请输入就医医院");
  145. return false;
  146. } else if (!this.detail.hospitalTime) {
  147. mui.toast("请选择就医时间");
  148. return false;
  149. } else if (!this.detail.pathogeny) {
  150. mui.toast("请输入病因");
  151. return false;
  152. }
  153. return true;
  154. },
  155. submit() {
  156. if (!this.checkForm()) {
  157. return;
  158. }
  159. this.detail.popedomId = this.$route.query.popedomId;
  160. this.detail.resultImg = this.resultImg.join(",");
  161. this.detail.drugsImg = this.drugsImg.join(",");
  162. this.detail.costImg = this.costImg.join(",");
  163. this.isLoading = true;
  164. if (!this.detail.id) {
  165. API.medicalRecordAdd(this.detail)
  166. .then((res) => {
  167. this.$router.push({
  168. name: "MasterHospital",
  169. query: {},
  170. });
  171. this.detail = res;
  172. mui.toast("已提交");
  173. })
  174. .catch((error) => {
  175. this.isLoading = false;
  176. mui.toast(error);
  177. });
  178. } else {
  179. API.medicalRecordUpdate(this.detail)
  180. .then((res) => {
  181. this.$router.push({
  182. name: "MasterHospital",
  183. query: {},
  184. });
  185. this.detail = res;
  186. mui.toast("已提交");
  187. })
  188. .catch((error) => {
  189. this.isLoading = false;
  190. mui.toast(error);
  191. });
  192. }
  193. },
  194. changeImg(type) {
  195. var sz = [];
  196. if (type == 1) {
  197. sz = this.resultImg;
  198. } else if (type == 2) {
  199. sz = this.drugsImg;
  200. } else if (type == 3) {
  201. sz = this.costImg;
  202. }
  203. if (sz.length >= 10) {
  204. mui.toast("只能上传10张照片");
  205. return;
  206. }
  207. var _this = this;
  208. WxJsApi.chooseImage()
  209. .then((res) => {
  210. var localData = res.localData;
  211. if (localData.indexOf("data:image") != 0) {
  212. //判断是否有这样的头部
  213. localData = "data:image/jpeg;base64," + localData;
  214. }
  215. localData = localData
  216. .replace(/\r|\n/g, "")
  217. .replace("data:image/jgp", "data:image/jpeg");
  218. this.imgBase64 = localData;
  219. //显示裁剪图片
  220. //_this.showCropper(field);
  221. this.uploadpic(sz);
  222. })
  223. .catch((error) => {
  224. mui.toast(error);
  225. });
  226. },
  227. delImg(type, index) {
  228. var sz;
  229. if (type == 1) {
  230. sz = this.resultImg;
  231. } else if (type == 2) {
  232. sz = this.drugsImg;
  233. } else if (type == 3) {
  234. sz = this.costImg;
  235. }
  236. sz.splice(index, 1);
  237. },
  238. //上传图片
  239. uploadpic(sz) {
  240. this.isLoading = true;
  241. WxJsApi.uploadPic(this.imgBase64)
  242. .then((response) => {
  243. this.isLoading = false;
  244. sz.push(response);
  245. })
  246. .catch((error) => {
  247. this.isLoading = false;
  248. mui.toast(error);
  249. });
  250. },
  251. selectDate() {
  252. var dtPicker = new mui.DtPicker({
  253. type: "date",
  254. beginYear: 1900,
  255. endDate: new Date(),
  256. });
  257. dtPicker.show((selectItems) => {
  258. var year = selectItems.y.value;
  259. var month = selectItems.m.value;
  260. var day = selectItems.d.value;
  261. var curDate = year + "-" + month + "-" + day;
  262. this.detail.hospitalTime = curDate;
  263. });
  264. },
  265. getDetail() {
  266. this.isLoading = true;
  267. API.medicalRecordDetail(this.$route.query.id)
  268. .then((res) => {
  269. this.detail = res;
  270. this.isLoading = false;
  271. if (this.detail.resultImg) {
  272. this.resultImg = this.detail.resultImg.split(",");
  273. }
  274. if (this.detail.drugsImg) {
  275. this.drugsImg = this.detail.drugsImg.split(",");
  276. }
  277. if (this.detail.costImg) {
  278. this.costImg = this.detail.costImg.split(",");
  279. }
  280. })
  281. .catch((error) => {
  282. this.isLoading = false;
  283. });
  284. },
  285. asynCallBack() {},
  286. },
  287. mounted() {
  288. WxJsApi.getWxConfig();
  289. if (this.$route.query.id) {
  290. this.getDetail();
  291. }
  292. //
  293. },
  294. destroyed() {},
  295. computed: {
  296. ...mapGetters({
  297. openId: "wx_openid",
  298. token: "token",
  299. person_data: "person_data",
  300. person_popedom: "person_popedom",
  301. }),
  302. },
  303. };
  304. </script>
  305. <style scoped src="$project/assets/css/pension.css"></style>
  306. <style scoped src="$project/assets/css/xpwyfyy.css"></style>
  307. <style src="$project/assets/css/iconfont.css"></style>
  308. <style src="$project/assets/css/mui.picker.min.css"></style>
  309. <style>
  310. </style>