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><span>挂号科室：</span>{{pathInfo.selfDeptName}}</td>
            </tr>
            <tr v-if="pathInfo.recordId">
              <td><span>排队号：</span>{{pathInfo.recordId}}</td>
            </tr>
            <tr v-if="pathInfo.doctorName">
              <td><span>预约医生：</span>{{pathInfo.doctorName}}</td>
            </tr>
            <tr v-if="time">
              <td><span>就诊时间：</span>{{time}}</td>
            </tr>
          </table>
          <!-- <div class="line"></div>
          <p>采集时间：{{pathInfo.systemTime}}</p> -->
        </div>
        <div class="personMsg personMsg2">
          <ul class="previewParts">
            <li>
              <h4><i></i>主诉：</h4>
              <p>
                <span v-for="(item,idx) in symptom.choose" :key="item.name+idx" v-if="item.idx == 1">
                  {{item.specialP?(item.description||item.name)+item.specialP:(item.description||item.name)}}
                </span>
              </p>
            </li>
            <li>
              <h4><i></i> 现病史：</h4>
              <p>
                <template v-for="(value,index) in checkText">
                  <!-- 患者于时间单位前诱因出现症状，其余题目的内容； -->
                  <span :key="index" v-if="index==0">{{(value.idx==1?'':'伴')+value.textP}}{{checkText.length==1?'':'，'}}</span>
                  <span :key="index" v-if="index==1">{{(checkText[0].idx == 1?'伴':'')+value.text}}{{checkText.length==2?'':'、'}}</span>
                  <span :key="index" v-if="index>1">{{value.text}}{{index == checkText.length-1?'':'、'}}</span>
                </template>
              </p>
              <p><span>{{getDetailText(diagnose.text,false).view}}</span></p>
            </li>
            <li v-if="tabType[moduleCP['other']]==1">
              <h4><i></i> 其他史：</h4>
              <p>
                <span>{{getDetailText(others.text,false).view}}</span>
              </p>
            </li>
            <li v-if="tabType[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"
        >上一步</span>
        <span
          class="next"
          @click="saveAllImage"
        >提 交</span>
      </div>
      <Submit
        v-if="submit"
        :showType="showType"
        @showSubmit="showSubmit"
      ></Submit>
      <Loading v-if="this.$store.state.loadingShow"></Loading>
      <div class="personMsgDoc" v-show="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 modal">
            <ul class="previewParts">
              <li>
                <h4><i></i> 主诉：</h4>
                <p>
                  <span v-for="(item,idx) in symptom.choose" :key="item.name+idx" v-if="item.idx == 1">
                    {{item.special?item.name+item.special:item.name}}
                  </span>
                </p>                
              </li>
              <li>
                <h4><i></i> 现病史：</h4>
                <p>
                  <template v-for="(value,index) in checkText">
                    <!-- 患者于时间单位前诱因出现症状，其余题目的内容； -->
                    <span :key="index" v-if="index==0">{{(value.idx==1?'':'伴')+value.text}}{{checkText.length==1?'':'，'}}</span>
                    <span :key="index" v-if="index==1">{{(checkText[0].idx == 1?'伴':'')+value.textP}}{{checkText.length==2?'':'、'}}</span>
                    <span :key="index" v-if="index>1">{{value.textP}}{{index == checkText.length-1?'':'、'}}</span>
                  </template>
                </p>
                <p><span>{{getDetailText(diagnose.text,false).content}}</span></p>
              </li>
              <li v-if="tabType[moduleCP['other']]==1">
                <h4><i></i> 其他史：</h4>
                <p>
                  <span>{{getDetailText(others.text,false).content}}</span>
                </p>
              </li>
              <li v-if="tabType[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,dateParser} from '@utils/tools.js'
import { mapState } from 'vuex';
export default {
  data() {
    const { pathInfo, originDatas } = this.$store.state;
    let sysConfig = this.$store.state.sysConfig;
    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,
      checkText: symptomDate.text, //症状情况文字
      submit: false,
      showType: 'fail',
      imgList:[],
      tmpNum:0,
      moduleCP:moduleCP,
      showDoc:false,
      trimDots:trimDots,
      time:''
    }
  },
  computed:{
    ...mapState({
      tabType: state => state.tabType,
      config: state => state.sysConfig,
    })
  },
  created(){
    this.getTime();
    if (this.config.length == 0) {//登录进去返回到列表页，扫码返回到开始页
      let scan = localStorage.getItem('scan');
      let params = JSON.parse(localStorage.getItem('infoParam'));
      let param = JSON.parse(localStorage.getItem('loginParam'));
      let data = JSON.parse(localStorage.getItem('loginData'));
      if(!scan){
        if(data.length>1){
          this.$router.push({path:'/department'});
        }else{
          this.$router.push({path:'/home',query:param});
        }
      }else{
        this.$router.push({path:'/home',query:Object.assign({}, params,{scan:true})});
      }
    }
  },
  mounted() {
    let scroll = setScroll(BScroll,true,'.previewper')
    this.scroll = scroll
  },
  methods: {
    getTime() {
      let scan = localStorage.getItem('scan');
      let params = JSON.parse(localStorage.getItem('infoParam'));
      let param = JSON.parse(localStorage.getItem('loginParam'));
      let tmpArr = localStorage.getItem('recordTime')
      let tmpTime = tmpArr&&Array.isArray(JSON.parse(tmpArr))?JSON.parse(tmpArr):[];
      if(!scan){
        this.time = dateParser(param.time)
      }else{
        this.time = dateParser(params.recordTime)
      }
    },
    handleClick(flg){
      this.showDoc = flg
    },
    showSubmit(flg) {
      this.submit = flg
    },
    back() {
      this.$router.go(-1);
    },
    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')
          //     }
          //   }
          // })
        }
        api.uploadImageThums(formData).then((res) => {//获取图片
          let data = res.data;
          if (data.code == 0) {//图片提交成功再保存数据
            let reportList = [];
            let result = data.data;
            for(let i = 0;i < result.length;i++){
              let obg = {}
              obg.originalImage = result[i].url+'?width='+imgList[i].imgWidth+'&height='+imgList[i].imgHeight
              obg.originalName = result[i].original
              obg.orderNum = i+1
              obg.type = result[i].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();
      }
    },
    getDetailText(textArr,flg){
      let msg = "",obg={},msgP = "";
      if(flg == 1){
        // for(let k in textArr){
          let item = textArr[0];
          if(item.special){
            msg+=item.name+item.special
            msgP+=item.name+item.specialP
          }else{
            msg+=item.name
            msgP+=item.name
          }
        // }
      }else{
        for(let k in textArr){
          if(textArr[k] && Array.isArray(textArr[k])){
            let temp = textArr[k];
            for(let j in temp){
              if(temp[j]){
                msg += temp[j].text + '，'
                msgP += temp[j].textP + '，'
              }
            }
          }else if(textArr[k]){
            msg += textArr[k].text + '，'
            msgP += textArr[k].textP + '，'
          }
        }
      }
      obg.view=trimDots(msgP.replace(/，$/,''))
      obg.content=trimDots(msg.replace(/，$/,''))
      obg.contentJson=trimDots(msg.replace(/，$/,''))
      obg.contentValue=trimDots(msg.replace(/，$/,''))
      obg.type=flg
      return obg;
    },
    saveAllDate() {
      const {pathInfo,symptom,diagnose,others,addContent} = this
      let tmpSymptom = JSON.parse(JSON.stringify(symptom))
      let detailList = [{type:1},{type:2},{type:3},{type:4}]
      for(let i = 0;i < detailList.length;i++){
        if(i == 0){
          detailList[0]=this.getDetailText(tmpSymptom.choose,1)
        }else if(i == 1){
          let tmpArr = []
          let tmpStr = this.getDetailText(diagnose.text,2).content
          for(let j = 0;j < tmpSymptom.text.length;j++){
            if(j == 1){
              let tmpTxt = '伴'+tmpSymptom.text[1].text
              tmpSymptom.text[1].text = tmpTxt
            }
            tmpArr.push(tmpSymptom.text[j].text)
          }
          tmpStr.length>0?tmpArr.push(tmpStr):null
          detailList[1].content=tmpArr.join()
          detailList[1].contentJson=JSON.stringify(tmpArr)
          detailList[1].contentValue=tmpArr.join()
        }else if(i == 2){
          detailList[2] = this.getDetailText(others.text,3)
        }else if(i == 3){
          detailList[3].content=addContent.txtDoc
          detailList[3].contentJson=addContent.txtDoc
          detailList[3].contentValue=addContent.txtDoc
        }
      }
      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,
        "sonHospitalCode": pathInfo.sonHospitalCode,
        "sonHospitalId": pathInfo.sonHospitalId,
        "sonHospitalName": pathInfo.sonHospitalName,
        // "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;
  font-size: 14px;
}
.preview {
  color: red;
  background-color: #fff;
  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;
  .content {
    padding-top: 0;
    padding-bottom: 2rem;
  }
}
.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;
  box-shadow:0px 3px 20px 0px rgba(192,187,224,0.23);
  .previewParts {
    li {
      padding: .1rem .3rem;
      overflow: hidden;
    }
    li.imgLis {
      padding-right: 0;
      padding-left: 0;
    }
    h4 {
      color: #colors[quest];
      font-size: .32rem;
      font-weight: bold;
      position: relative;
      i {
        width: .12rem;
        height: .12rem;
        border-radius: 50%;
        background: #FFAD00;
        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: #colors[quest];
    letter-spacing: 0;
    text-align: justify;
    font-weight: bold;
    margin-bottom: 0.15rem;
  }
  table {
    width: 100%;
    font-size: 0.3rem;
    color: #333333;
    letter-spacing: 0;
    text-align: justify;
    margin-top: .2rem;
    tr {
      padding: .2rem 0;
      line-height: .5rem;
      td {
        padding-bottom: 0.1rem;
      }
      span {
        color:#777;
        width: 1.6rem;
        display: inline-block;
      }
    }
  }
  .line {
    opacity: 0.3;
    background: #d8d8d8;
    margin: 0.2rem 0;
    height: 1px;
  }
}

.personMsg2 {
  padding-right: 0;
}
.personMsg2.modal {
  margin-bottom: 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>