preliminary/src/components/Preview.vue

<template>
  <div class="wrapper">
    <div class="preview previewper">
      <div class="content">
        <div class="tmpDiv"></div>
        <div class="personMsg personMsg1">
          <p class="baseMsg">{{pathInfo.patientName}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientSex}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientAge}}岁</p>
          <table>
            <tr>
              <td colspan="2">挂号科室：{{pathInfo.selfDeptName}}</td>
            </tr>
            <tr>
              <td>门诊号：{{pathInfo.recordId}}</td>
              <td>预约医生：{{pathInfo.doctorName}}</td>
            </tr>
            <tr>
              <td colspan="2">就诊时间：{{pathInfo.systemTime}}</td>
            </tr>
          </table>
          <div class="line"></div>
          <p>采集时间：{{pathInfo.systemTime}}</p>
        </div>
        <div class="personMsg personMsg2">
          <ul class="previewParts">
            <!-- <li v-if="symptom.choose.length>0"> -->
            <li>
              <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||symptom.choose.length>0"> -->
            <li>
              <h4><i :style="{'background': '#3D69D9'}"></i> 现病史：</h4>
              <p>
                <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{trimDots&&trimDots(item.text+(idx == symptom.choose.length-1?'。':';'))}}</span>
              </p>
              <p>
                <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{trimDots&&trimDots(item.text+(idx == diagnose.text.length-1?'。':';'))}}</span>
              </p>
            </li>
            <li v-if="showLis[moduleCP['other']]==1">
              <h4><i></i> 其他史：</h4>
              <p>
                <span v-for="(item,idx) in others.text" :key="item.text+idx">{{trimDots&&trimDots(item.text+(idx == others.text.length-1?'。':';'))}}</span>
              </p>
            </li>
            <li v-if="showLis[moduleCP['suplement']]==1">
              <h4><i></i> 补充内容：</h4>
              <p>{{addContent.txt}}</p>
            </li>
            <li v-if="JSON.stringify(diagnose.imgSrc) !='{}'" class="imgLis">
              <h4 class="imgTitle"><i></i> 最近一次治疗报告：</h4>
              <div v-for="(value,key,idx) in diagnose.imgSrc" class="imgView">
                <img :src="value" alt="">
              </div>
            </li>
          </ul>
        </div>
        <div class="doctorData" @click="handleClick(true)">医生端数据展示</div>
      </div>
    </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="loadingShow"></Loading>
      <div class="personMsgDoc" v-if="showDoc">
        <div class="personMsgDocModal" @click="handleClick(false)"></div>
        <div class="personMsgDocDetail">
          <img class="close" src="../images/small-close.png" alt="" @click="handleClick(false)">
          <div class="personMsg personMsg2">
            <ul class="previewParts">
              <!-- <li v-if="symptom.choose.length>0"> -->
              <li>
                <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||symptom.choose.length>0"> -->
              <li>
                <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="showLis[moduleCP['other']]==1">
                <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="showLis[moduleCP['suplement']]==1">
                <h4><i></i> 补充内容：</h4>
                <p>{{addContent.txtDoc}}</p>
              </li>
              <li v-if="JSON.stringify(diagnose.imgSrc) !='{}'" class="imgLis">
                <h4 class="imgTitle"><i></i> 最近一次治疗报告：</h4>
                <div v-for="(value,key,idx) in diagnose.imgSrc" class="imgView">
                  <img :src="value" alt="">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import api from '@utils/api.js';
import Submit from '../common/Submit';
import Loading from '../common/Loading';
import BScroll from 'better-scroll';
import {moduleCP,trimDots,setScroll} from '@utils/tools.js'
export default {
  props: ['preName','showLis','loadingShow'],
  data() {
    const { pathInfo, originDatas,loadingShow } = 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:loadingShow,//提交等待的动画loading
      tmpNum:0,
      moduleCP:moduleCP,
      showDoc:false,
      trimDots:trimDots
    }
  },
  mounted() {
    this.$nextTick(()=>{
      let scroll = setScroll(BScroll,true,'.previewper')
      this.scroll = scroll
    })
  },
  methods: {
    handleClick(flg){
      console.log(flg)
      this.showDoc = flg
      // this.scroll = setScroll(BScroll,!flg,'.previewper')
    },
    showSubmit(flg) {
      this.submit = flg
    },
    back() {
      this.$emit('back', 'preview')
    },
    saveAllImage() {
      let formData = new FormData();
      let imgList = this.diagnose.imgFile;
      // let tmpNum = this.tmpNum;
      // var dateBegin = new Date();//获取当前时间
      if (imgList.length > 0) {//有图片先上传图片
        this.$store.commit('handleToggleShow', true);
        for (let i = 0; i < imgList.length; i++) {
          let pageFile = imgList[i].file
          formData.append('upfiles', imgList[i].file);
          // formData.append('upfile', imgList[i].file);
          formData.append('type', imgList[i].type);
          // api.uploadImageThum(formData).then((res)=>{
          //   console.log(res)
          //   let result = res.data;
          //   if (result.code == 0) {
          //     this.tmpNum = ++tmpNum
          //     if(this.tmpNum == imgList.length){
          //       var dateEnd = new Date();//获取当前时间
          //       var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
          //       var dayDiff = dateDiff / 1000;//计算出秒数
          //       alert('图片上传完成:'+dayDiff+'s')
          //     }
          //   }
          // })
        }
        // return
        api.uploadImageThums(formData).then((res) => {//获取图片
          let data = res.data;
          if (data.code == 0) {//图片提交成功再保存数据
            // this.showType = 'success'
            // this.submit = true
            let reportList = [];
            let result = data.data;
            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
                // var dateEnd = new Date();//获取当前时间
                // var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
                // var dayDiff = dateDiff / 1000;//计算出秒数
                // alert('图片上传完成:'+dayDiff+'s')
            this.saveAllDate()
          } else {//提交失败提示
            this.defaultWaring(res)
          }
        }).catch((err)=>{
          this.defaultWaring(err)
        })
        return;
      } else {//没有图片直接保存数据
        this.$store.commit('handleToggleShow', true);
        this.saveAllDate()
      }
    },
    getStr(arr,flg){
      let tmpStr = '',tmpStrDoc = '',obg={};
      for(let i = 0;i<arr.length;i++){
        tmpStr+=arr[i].text+';'
        tmpStrDoc+=arr[i].textP+';'
      }
      obg.content=tmpStr
      obg.contentValue=tmpStrDoc
      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.txtDoc
        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": pathInfo.recordId,//就诊序列号,目前是门诊号
        "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) => {
        if (res.data.code == 0) {
          this.$store.commit('handleToggleShow', false);
          this.showType = 'success'
          this.submit = true
        } else {
          this.defaultWaring(res)
        }
      }).catch((err)=>{
          this.defaultWaring(err)
        })
    },
    defaultWaring(res){
      this.$store.commit('handleToggleShow', 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;
  z-index: 998;
}
.doctorData {
  float: right;
  color: #0043E8;
  margin-bottom: 30px;
}
.preview {
  color: red;
  background-color: #f2f2f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 0.4rem 1rem .4rem;
  overflow: hidden;
  -webkit-overflow-scrolling:touch;
  .btscroll;  
}
.tmpDiv {
  height: .3rem;
}

.imgView {
  width: 1.86rem;
  height: 1.9rem;
  float: left;
  border: 1px solid #dfe0e4;
  margin: 0 0.2rem 0.3rem 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: 0.08rem;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

  }
}
.imgTitle {
  padding-bottom: .20rem;
}
.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;
    }
    li.imgLis {
      padding-right: 0;
      padding-left: 0;
    }
    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;
      word-break: break-all;
    }
  }
  .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;
    margin-top: .2rem;
    tr {
      padding: .2rem 0;
      line-height: .5rem;
    }
  }
  .line {
    opacity: 0.3;
    background: #d8d8d8;
    margin: 0.2rem 0;
    height: 1px;
  }
}

.personMsg2 {
  padding-right: 0;
}
.personMsgDoc {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: auto;
  z-index: 999;
  .personMsgDocModal {
    .mask;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .personMsgDocDetail {
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // padding: 0 .4rem;
    background-color: #fff;
    box-sizing: border-box;
    width: 90%;
    border-radius: .1rem;
    overflow: hidden;
    .personMsg {
      max-height: 9rem;
      overflow: auto;
      width: 100%;
      border-radius: 0;
      -webkit-overflow-scrolling:touch;
    }
  }
}
.close {
  width: .34rem;
  height: .34rem;
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px;
  z-index: 1001;
}
</style>