|
@@ -1,98 +1,339 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <header class="mui-bar mui-bar-nav">
|
|
|
- <h1 class="mui-title">就医记录</h1>
|
|
|
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
- </header>
|
|
|
+ <common @asynCallBack="asynCallBack"></common>
|
|
|
+ <top-header :pageTitle="pageTitle" ></top-header>
|
|
|
+
|
|
|
<div class="mui-content margin60">
|
|
|
<div class="mui-content-padded vongi-qingjiadt vongi-editme">
|
|
|
<form class="mui-input-group">
|
|
|
<div class="mui-input-row">
|
|
|
- <label>就医医院</label>
|
|
|
- <input type="text" class="mui-input-clear" placeholder="请填写医院名称">
|
|
|
+ <label>就医医院<i style="color:red">*</i></label>
|
|
|
+ <input type="text" class="mui-input-clear" v-model="detail.hospitalName" placeholder="请填写医院名称">
|
|
|
</div>
|
|
|
<div class="mui-input-row">
|
|
|
- <label>就医时间</label>
|
|
|
- <button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
|
|
|
- 2020-10-27
|
|
|
+ <label>就医时间<i style="color:red">*</i></label>
|
|
|
+ <button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis"
|
|
|
+ @click="selectDate"
|
|
|
+ type='button' style="width:65%">
|
|
|
+
|
|
|
+ {{detail.hospitalTime?detail.hospitalTime:'请选择'}}
|
|
|
+
|
|
|
</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="vongi-meform-pho mui-content-padded">
|
|
|
- <h4>病因</h4>
|
|
|
+ <h4>病因<i style="color:red">*</i></h4>
|
|
|
<div class="mui-input-row">
|
|
|
- <textarea id="textarea" rows="5" placeholder="请填写病因"></textarea>
|
|
|
+ <textarea id="textarea" rows="5" v-model="detail.pathogeny" placeholder="请填写病因"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vongi-meform-pho mui-content-padded">
|
|
|
<h4>就医结果</h4>
|
|
|
<div class="mui-input-row">
|
|
|
- <textarea id="textarea" rows="5" placeholder="请填写就医结果"></textarea>
|
|
|
+ <textarea id="textarea" rows="5" v-model="detail.result" placeholder="请填写就医结果"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vongi-wordcard vongi-meform-pho mui-content-padded">
|
|
|
<h4>结果图片记录</h4>
|
|
|
<div class="fyy-upphoto">
|
|
|
- <div class="mui-col-xs-3 fyy-upphoto-close">
|
|
|
- <img src="~$project/assets/img/zhaop.jpg" />
|
|
|
- <a class="mui-icon mui-icon-closeempty" href=""></a>
|
|
|
+ <div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture,index) in resultImg" :key="index" >
|
|
|
+ <img v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
|
|
|
+ <a class="mui-icon mui-icon-closeempty" @click="delImg('1',index)" ></a>
|
|
|
</div>
|
|
|
<div class="mui-col-xs-3">
|
|
|
- <a><span class="mui-icon mui-icon-camera"></span></a>
|
|
|
+ <a><span class="mui-icon mui-icon-camera" @click="changeImg('1')" ></span></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vongi-meform-pho mui-content-padded">
|
|
|
<h4>使用药品</h4>
|
|
|
<div class="mui-input-row">
|
|
|
- <textarea id="textarea" rows="5" placeholder="请填写使用药品"></textarea>
|
|
|
+ <textarea id="textarea" rows="5" v-model="detail.drugs" placeholder="请填写使用药品"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vongi-wordcard vongi-meform-pho mui-content-padded">
|
|
|
<h4>药品图片记录</h4>
|
|
|
<div class="fyy-upphoto">
|
|
|
- <div class="mui-col-xs-3 fyy-upphoto-close">
|
|
|
- <img src="~$project/assets/img/zhaop.jpg" />
|
|
|
- <a class="mui-icon mui-icon-closeempty" href=""></a>
|
|
|
- </div>
|
|
|
+ <div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture,index) in drugsImg" :key="index" >
|
|
|
+ <img v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
|
|
|
+ <a class="mui-icon mui-icon-closeempty" @click="delImg('2',index)" ></a>
|
|
|
+ </div>
|
|
|
<div class="mui-col-xs-3">
|
|
|
- <a><span class="mui-icon mui-icon-camera"></span></a>
|
|
|
+ <a><span class="mui-icon mui-icon-camera" @click="changeImg('2')"></span></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mui-content-padded vongi-qingjiadt vongi-editme">
|
|
|
<form class="mui-input-group">
|
|
|
<div class="mui-input-row">
|
|
|
- <label>诊疗费用</label>
|
|
|
- <span>0 元</span>
|
|
|
+ <label>诊疗费用(元)</label>
|
|
|
+ <span style=" padding-top: 0px;
|
|
|
+ padding-bottom: 0px;">
|
|
|
+ <input v-model="detail.cost" placeholder="请填写诊疗费用" class="mui-input-clear" type="number" > </span>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="vongi-wordcard vongi-meform-pho mui-content-padded">
|
|
|
<h4>诊疗费用图</h4>
|
|
|
<div class="fyy-upphoto">
|
|
|
- <div class="mui-col-xs-3 fyy-upphoto-close">
|
|
|
- <img src="~$project/assets/img/zhaop.jpg" />
|
|
|
- <a class="mui-icon mui-icon-closeempty" href=""></a>
|
|
|
- </div>
|
|
|
+ <div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture,index) in costImg" :key="index" >
|
|
|
+ <img v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
|
|
|
+ <a class="mui-icon mui-icon-closeempty" @click="delImg('3',index)" ></a>
|
|
|
+ </div>
|
|
|
<div class="mui-col-xs-3">
|
|
|
- <a><span class="mui-icon mui-icon-camera"></span></a>
|
|
|
+ <a><span class="mui-icon mui-icon-camera" @click="changeImg('3')"></span></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fyy-footer">
|
|
|
- <div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-pink ">保 存</button></div>
|
|
|
+ <div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-pink " @click="submit()">保 存</button></div>
|
|
|
</div>
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+
|
|
|
<script>
|
|
|
+ require('$project/assets/js/mui.picker.min.js');
|
|
|
+
|
|
|
+ import * as API from '@/apis/Master/hospital'
|
|
|
+ import Common from '$project/components/Common.vue'
|
|
|
+ import Loading from '$project/components/Loading.vue'
|
|
|
+ import TopHeader from '$project/components/TopHeader.vue'
|
|
|
+ import * as WxJsApi from '$project/utils/wxJsApi'
|
|
|
+
|
|
|
+ import {
|
|
|
+ mapGetters,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex'
|
|
|
+
|
|
|
+ import {
|
|
|
+
|
|
|
+
|
|
|
+ } from '$project/utils'
|
|
|
+ export default {
|
|
|
+ name: 'MasterHospitalForm',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '就医记录',
|
|
|
+ isLoading: false,
|
|
|
+ drugsImg:[],
|
|
|
+ resultImg:[],
|
|
|
+ costImg:[],
|
|
|
+ detail:{
|
|
|
+ "cost": '',//费用
|
|
|
+ "costImg": "",
|
|
|
+
|
|
|
+ "delFlag": false,
|
|
|
+ "drugs": "",//药品
|
|
|
+ "drugsImg": "",
|
|
|
+ "hospitalName": "",//医院
|
|
|
+ "hospitalTime": "",
|
|
|
+ "id": "",
|
|
|
+ "personId": "",
|
|
|
+ "pathogeny": "",//病因
|
|
|
+ "result": "",//就医结果
|
|
|
+ "resultImg": "",//结果图片
|
|
|
+ "updateBy": "",
|
|
|
+ "updateTime": ""
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkForm(){
|
|
|
+ if (!this.detail.hospitalName) {
|
|
|
+ mui.toast('请输入就医医院');
|
|
|
+ return false;
|
|
|
+ } else if (!this.detail.hospitalTime) {
|
|
|
+ mui.toast('请选择就医时间');
|
|
|
+ return false;
|
|
|
+ } else if (!this.detail.pathogeny) {
|
|
|
+ mui.toast('请输入病因');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ submit(){
|
|
|
+
|
|
|
+ if (!this.checkForm()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.detail.personId=this.person_data.id
|
|
|
+ this.detail.resultImg=this.resultImg.join(",")
|
|
|
+ this.detail.drugsImg=this.drugsImg.join(",")
|
|
|
+ this.detail.costImg=this.costImg.join(",")
|
|
|
+
|
|
|
+ this.isLoading = true;
|
|
|
+ if(!this.detail.id){
|
|
|
+ API.medicalRecordAdd(this.detail).then(res=>{
|
|
|
+ this.$router.push({
|
|
|
+ name: 'MasterHospital',
|
|
|
+ query: {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.detail=res;
|
|
|
+ mui.toast("已提交");
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ mui.toast(error);
|
|
|
+
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ API.medicalRecordUpdate(this.detail).then(res=>{
|
|
|
+ this.$router.push({
|
|
|
+ name: 'MasterHospital',
|
|
|
+ query: {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.detail=res;
|
|
|
+ mui.toast("已提交");
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ mui.toast(error);
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ changeImg(type) {
|
|
|
+ var sz=[];
|
|
|
+ if(type==1){
|
|
|
+ sz=this.resultImg
|
|
|
+ }else if(type==2){
|
|
|
+ sz=this.drugsImg
|
|
|
+ }else if(type==3){
|
|
|
+ sz=this.costImg
|
|
|
+ }
|
|
|
+
|
|
|
+ if (sz.length >= 10) {
|
|
|
+ mui.toast("只能上传10张照片");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ WxJsApi.chooseImage().then(res => {
|
|
|
+ var localData = res.localData;
|
|
|
+
|
|
|
+ if (localData.indexOf('data:image') != 0) {
|
|
|
+ //判断是否有这样的头部
|
|
|
+ localData = 'data:image/jpeg;base64,' + localData
|
|
|
+ }
|
|
|
+ localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
|
|
|
+ this.imgBase64 = localData;
|
|
|
+ //显示裁剪图片
|
|
|
+ //_this.showCropper(field);
|
|
|
+ this.uploadpic(sz);
|
|
|
+ }).catch(error => {
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }, delImg(type,index) {
|
|
|
+ var sz;
|
|
|
+ if(type==1){
|
|
|
+ sz=this.resultImg
|
|
|
+ }else if(type==2){
|
|
|
+ sz=this.drugsImg
|
|
|
+ }else if(type==3){
|
|
|
+ sz=this.costImg
|
|
|
+ }
|
|
|
+ sz.splice(index, 1);
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadpic(sz) {
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ WxJsApi.uploadPic(this.imgBase64).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+ sz.push(response);
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectDate(){
|
|
|
+ var dtPicker = new mui.DtPicker({
|
|
|
+ type: 'date',
|
|
|
+ "beginYear": 1900,
|
|
|
+ "endDate": new Date(),
|
|
|
+ });
|
|
|
+
|
|
|
+ dtPicker.show((selectItems) => {
|
|
|
+ var year = selectItems.y.value;
|
|
|
+ var month = selectItems.m.value;
|
|
|
+ var day = selectItems.d.value;
|
|
|
+
|
|
|
+ var curDate = year + "-" + month + "-" + day;
|
|
|
+ this.detail.hospitalTime=curDate;
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDetail(){
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ API.medicalRecordDetail(this.$route.query.id).then(res=>{
|
|
|
+ this.detail=res;
|
|
|
+ this.isLoading = false;
|
|
|
+ if(this.detail.resultImg){
|
|
|
+ this.resultImg=this.detail.resultImg.split(",")
|
|
|
+ }
|
|
|
+ if(this.detail.drugsImg){
|
|
|
+ this.drugsImg=this.detail.drugsImg.split(",")
|
|
|
+
|
|
|
+ }
|
|
|
+ if(this.detail.costImg){
|
|
|
+ this.costImg=this.detail.costImg.split(",")
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ ,asynCallBack(){},
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ WxJsApi.getWxConfig();
|
|
|
+ if(this.$route.query.id){
|
|
|
+ this.getDetail();
|
|
|
+ }
|
|
|
+ //
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ openId: 'wx_openid',
|
|
|
+ token: 'token',
|
|
|
+ person_data: 'person_data',
|
|
|
+ person_popedom: 'person_popedom',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/pension.css"></style>
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
<style src="$project/assets/css/iconfont.css"></style>
|
|
|
+<style src="$project/assets/css/mui.picker.min.css"></style>
|
|
|
+
|
|
|
<style>
|
|
|
</style>
|