preliminary/src/components/Preview.vue

<template>
  <div class="preview">
    <div class="personMsg">
      <p class="baseMsg">{{pathInfo.patientName}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientSex}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientAge}}岁</p>
      <table>
        <tr>
          <td class="fst">挂号科室：{{pathInfo.selfDeptName}}</td>
          <td class="sec">门诊号：{{pathInfo.recordId}}</td>
        </tr>
        <tr>
          <td class="fst">预约医生：{{pathInfo.doctorName}}</td>
          <td class="sec">就诊时间：{{pathInfo.systemTime}}</td>
        </tr>
      </table>
      <div class="line"></div>
      <p>采集时间：{{pathInfo.systemTime}}</p>
    </div>
    <div class="personMsg">
      <ul class="previewParts">
        <li v-if="symptom.choose.length>0">
          <h4><i :style="{'background': '#FF9A9A'}"></i> 主诉：</h4>
          <p>
            <span v-for="(item,idx) in symptom.choose" :key="item.name+idx">{{item.name+(idx == symptom.choose.length-1?'':'、')}}</span>
          </p>
        </li>
        <li v-if="diagnose.text.length>0">
          <h4><i :style="{'background': '#3D69D9'}"></i> 现病史：</h4>
          <p>
            <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{item.text+(idx == symptom.choose.length-1?'。':';')}}</span>
          </p>
          <p>
            <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{item.text+(idx == diagnose.text.length-1?'。':';')}}</span>
          </p>
        </li>
        <li v-if="others.text.length>0">
          <h4><i></i> 其他史：</h4>
          <p>
            <span v-for="(item,idx) in others.text" :key="item.text+idx">{{item.text+(idx == others.text.length-1?'。':';')}}</span>
          </p>
        </li>
        <li v-if="addContent.txt">
          <h4><i></i> 补充内容：</h4>
          <p>{{addContent.txt}}</p>
        </li>
        <li v-if="JSON.stringify(diagnose.imgSrc) !='{}'">
          <h4><i></i> 最近一次治疗报告：</h4>
          <div v-for="(value,key) in diagnose.imgSrc" class="imgView">
            <img :src="value" alt="">
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <span
        class="back"
        @click="back"
      >{{'返回'+ preName}}</span>
      <span
        class="next"
        @click="saveAllImage"
      >提 交</span>
    </div>
    <Submit
      v-if="submit"
      :showType="showType"
      @showSubmit="showSubmit"
    ></Submit>
    <Loading v-if="show"></Loading>
  </div>
</template>
<script>
import api from '@utils/api.js';
import Submit from '../common/Submit';
import Loading from '../common/Loading';
export default {
  props: ['preName'],
  data() {
    const { pathInfo, originDatas } = this.$store.state;
    let symptomDate = this.$store.state.symptom;
    let diagnoseDate = this.$store.state.diagnose;
    let othersDate = this.$store.state.others;
    let addContentDate = this.$store.state.addContent;
    return {
      msg: '预览',
      pathInfo: pathInfo,
      symptom: symptomDate,
      diagnose: diagnoseDate,
      others: othersDate,
      addContent: addContentDate,
      submit: false,
      showType: 'fail',
      imgList:[],
      show:false,//提交等待的动画loading
    }
  },

  methods: {
    showSubmit(flg) {
      this.submit = flg
    },
    back() {
      this.$emit('back', 'preview')
    },
    saveAllImage() {
      let formData = new FormData();
      let imgList = this.diagnose.imgFile;
      if (imgList.length > 0) {//有图片先上传图片
        this.show = true
        for (let i = 0; i < imgList.length; i++) {
          let pageFile = imgList[i].file
          formData.append('upfiles', imgList[i].file);
          formData.append('type', imgList[i].type);
        }
        api.uploadImageThums(formData).then((res) => {//获取图片
          console.log(res.data)
          let result = res.data;
          if (result.code == 0) {//图片提交成功再保存数据
            // this.showType = 'success'
            // this.submit = true
            let reportList = []
            for(let i = 0;i < result.length;i++){
              let obg = {}
              obg.narrowImage = result[i].thumbnail.url
              obg.narrowName = result[i].thumbnail.original
              obg.originalImage = result[i].source.url
              obg.originalName = result[i].source.original
              obg.orderNum = i+1
              obg.type = result[i].source.type
              reportList.push(obg)
            }
            this.imgList = reportList
            this.saveAllDate()
          } else {//提交失败提示
            this.show=false
            this.showType = 'fail'
            this.submit = true
            let timer = setTimeout(() => {
              this.submit = false
              clearTimeout(timer)
            }, 2000);
          }
        })
        return;
      } else {//没有图片直接保存数据
        this.show = true
        this.saveAllDate()
      }
    },
    getStr(arr,flg){
      let tmpStr = '',obg={};
      for(let i = 0;i<arr.length;i++){
        tmpStr+=arr[i].text+';'
      }
      obg.content=tmpStr
      obg.contentValue=tmpStr
      obg.type=flg
      return obg;
    },
    saveAllDate() {
      const {pathInfo,symptom,diagnose,others,addContent} = this
      let detailList = []
      if(symptom.text.length>0){
        detailList.push(this.getStr(symptom.text,1))
      }
      if(diagnose.text.length>0){
        detailList.push(this.getStr(diagnose.text,2))
      }
      if(others.text.length>0){
        let obg = {}
        detailList.push(this.getStr(others.text,3))
      }
      if(addContent.txt){
        let obg = {}
        obg.content=addContent.txt
        obg.contentValue=addContent.txt
        obg.type=4
        detailList.push(obg)
      }
      let params = {
        "dataJson": "1",
        "detailList": detailList,
        "hospitalId": pathInfo.hospitalId,//医院id
        "hospitalName": pathInfo.hospitalName,//医院名称
        "hospitalCode": pathInfo.hospitalCode,//医院编码
        "doctorId": pathInfo.doctorId,//医生id
        "doctorCode": pathInfo.doctorCode,//医生编码
        "doctorName": pathInfo.doctorName,//医生name
        "hospitalDeptCode": pathInfo.hospitalDeptCode,//医院科室编码
        "hospitalDeptId": pathInfo.hospitalDeptId,//科室id
        "hospitalDeptName": pathInfo.hospitalDeptName,//科室name
        "inquiryCode": '1',//就诊序列号,目前没有先写死
        "patientBirthday": pathInfo.birthday+':00',//患者出生日期，格式为：2018-11-28 17:25:30
        "patientCode": pathInfo.patientCode,//患者编号
        "patientId": pathInfo.patientId,//患者id
        "patientIdNo": pathInfo.patientIdNo,//患者证件号码(病历号)
        "patientName": pathInfo.patientName,//患者姓名
        // "patientPhone": pathInfo,//患者联系电话(非)
        "patientSex": pathInfo.patientSex=='男'?1:2,//患者性别：1男2女（非）
        // "regVisitedState": pathInfo,//就诊状态(0待接诊，1接诊中，2完成接诊)（非）
        "reportList": this.imgList,
        // "type": 0//病历分类(1:门诊,2:住院)
      }
      console.log(params)
      api.saveInquiry(params).then((res) => {
        console.log(res)
        if (res.data.code == 0) {
          this.show=false
          this.showType = 'success'
          this.submit = true
        } else {
          this.show=false
          this.showType = 'fail'
          this.submit = true
          let timer = setTimeout(() => {
            this.submit = false
            clearTimeout(timer)
          }, 2000);
        }
      })
    }
  },
  components: {
    Submit,
    Loading,
  }
}
</script>
<style lang="less" scoped>
@import "../less/base.less";
.foot {
  .dbfooter;
}
.preview {
  color: red;
  background-color: #f2f2f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem 1rem .4rem;
  overflow: auto;
}
.imgView {
  width: 2.44rem;
  height: 3.25rem;
  float: left;
  margin: .3rem .2rem 0 0;
  img {
    width: 100%;
  }
}
.personMsg {
  padding: 0.3rem 0.4rem;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.16rem;
  margin-bottom: 0.38rem;
  .previewParts {
    li {
      padding: .1rem .3rem;
      overflow: hidden;
    }
    h4 {
      color: #000;
      font-size: .32rem;
      font-weight: bold;
      position: relative;
      i {
        width: .16rem;
        height: .16rem;
        border-radius: 50%;
        background: #767676;
        display: inline-block;
        position: absolute;
        top: .15rem;
        left: -0.3rem;
      }
    }
    p {
      font-size: .28rem;
      color: #424242;
      margin: .2rem 0;
    }
  }
  .baseMsg {
    font-size: 0.32rem;
    color: #000000;
    letter-spacing: 0;
    text-align: justify;
    font-weight: bold;
    margin-bottom: 0.13rem;
  }
  table {
    width: 100%;
    font-size: 0.26rem;
    color: #333333;
    letter-spacing: 0;
    text-align: justify;
    line-height: 0.44rem /* 44/100 */;
    td.fst {
      width: 40%;
    }
    td.sec {
      width: 60%;
    }
  }
  .line {
    opacity: 0.3;
    background: #d8d8d8;
    margin: 0.2rem 0;
    height: 1px;
  }
}
</style>