preliminary/src/components/Others.vue

<template>
  <div class="other-wrap wrapper">
    <div class="content">
      <div v-for="(it,i) in dtoList" 
          v-if="dtoList"
          :key="it.id"
          class="label">
          <p class="quest">{{i + 1 +'.' + (it.description||it.name)}}</p>
          <img class="questionImg" :src="it.url.replace('{imageUrlPrefix}',imgUrl)" v-if="it.url">
          <!-- <Label v-if="it.controlType==0" -->
          <Label v-if="it.controlType==0"
                :item="it"
                :ppId="it.id" 
                :moduleType="datas.type" 
                @setDetail="setDetail"/>
          <!-- 输入框 -->
          <Input v-if="it.controlType==6 || it.controlType==7"
              :item="it"
              :key="it.id"
              @updata="updataData($event,it.id)"/>
          <!-- 文本域 -->
          <ComTextArea v-if="it.controlType == 5"
              :item="it"
              @updata="updataData($event,it.id)"/>
          <Radio v-if="it.controlType==1" 
              :item="it"
              :key="it.id"
              @updata="updataData($event,it.id)"/>
          <CheckBox v-if="it.controlType==2" 
              :item="it"
              :key="it.id"
              @updata="updataData($event,it.id)"/>
          <!-- 多行输入 存值和回读事件未处理 -->
          <!-- <template
              v-if="it.controlType == 3"
              v-for="(part,index) in it.questionDetailList"
            >
              <MultiLineInput
                v-if="it.controlType == 3"
                :msg="part.name"
                :part="part"
                @updata="updataData($event,index,it)"
              ></MultiLineInput>
          </template> -->
      </div>
      <div class="result" v-if="checkText.length>0">
        <p class="title">{{datas.name}}</p>
        <p>{{getText()}}</p>
      </div>
    </div>
    
      <div class="foot" v-if="modluesLen==3&&!nextName||modluesLen==2">
        <span class="back" @click="beBack">{{'返回'+ preName}}</span>
        <span class="next" @click="toNext">{{'预览并提交病历'}}</span>
      </div>
      <div class="foot" v-else>
        <span class="back" @click="beBack">{{'返回'+ preName}}</span>
        <span class="next" @click="toNext">{{'进入'+ nextName}}</span>
      </div>
      <div class="detail" v-if="show">
        <DetailBox @close="closeDetal" 
                :data="labelDetail" 
                :moduleType="datas.type"
                :ppId="ppId"
                v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
                @pComplete="complete"/>
      </div>
  </div>
</template>
<script type="text/javascript">
  import UploadImg from '../common/UploadImg.vue';
  import Label from '../common/Label.vue';
  import DetailBox from './DetailBox.vue';
  import Toast from '../common/Toast.vue';
  import Input from '../common/Input.vue';
  import ComTextArea from '../common/ComTextArea.vue';
  import {moduleCP,patt,imageUrlPrefix} from '@utils/tools';
  import Radio from '../common/Radio.vue';
  import CheckBox from '../common/CheckBox.vue';
  import MultiLineInput from '../common/MultiLineInput.vue';
  import BScroll from 'better-scroll';
  export default {
    name:'Others',
    data(){
      let {origin,datas,text} = this.$store.state.others;
      return{
        msg:"其他情况",
        // imgs:this.$store.state.others.imgSrc,
        // dtoList:origin, //模板数据
        dtoList:datas, //模板数据
        labelDetail:{}, //标签明细
        checkText:text, //选中的文字
        ppId:null,
        show:false,
        imgUrl:imageUrlPrefix,
        scroll:null
      }
    },
    props:['datas','preName','nextName','modluesLen'],
    created(){},
    mounted(){
      let scroll = new BScroll('.wrapper',{
          scrollY: false,
          click: true
      })
      this.scroll = scroll
    },
    methods:{
      beBack(){
        this.$emit('back');
      },
      toNext(){
        if(!this.nextName){
          this.$emit('next','preview')
        }else{
          this.$emit('next');
        }
      },
      setDetail(obj){
        this.labelDetail = obj.detail;
        this.ppId = obj.ppId;
        this.show = true;
        let tmpSc = this.scroll
        tmpSc.scrollY = false
        this.scroll = tmpSc
      },
      complete(){
        this.show = false;
        this.labelDetail = {};
        this.ppId = null;
        // 处理明细选中的值
      },
      closeDetal(){
        this.show = false;
        this.labelDetail = {};
        this.ppId = null;
      },
      updataData(data,id){//输入框存值
        let list = this.dtoList;
        for(let i in list){
          if(list[i].id==data.id){
            list.splice(i,1,data)
          }
        }
        
        // this.$store.commit('setOrigin',{type:'3',data:data,pId:data.id});
        this.$store.commit('setDatas',{type:moduleCP['other'],data:data,pId:data.id,ppId:id});
        this.$store.commit('setText',{type:moduleCP['other'],text:data.value.replace(patt,'').replace(/\#\{/g,'').replace(/\}/g,''),textP:data.valueP.replace(patt,'').replace(/\#\{/g,'').replace(/\}/g,''),pId:data.id,flag:true}); 
      },
      getText(){
        let textArr = this.checkText;
        let msg = "";
        for(let k in textArr){
          if(textArr[k].textP){
            msg += textArr[k].textP + '；'
          }          
        }
        return msg;
      }
    },
    components:{
      UploadImg,
      Label,
      DetailBox,
      Input,
      ComTextArea,
      Radio,
      CheckBox,
      MultiLineInput
    },
    /*watch:{
      dtoList:{
        handler(newVal,oldVal){
          console.log("其他史数据更新：",newVal,this.$store.state.others.text)
        },
        deep:true
      }
    },*/
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .other-wrap{
    font-size: .3rem;
    position: fixed;
    height: 100%;
    width: 100%;
    .quest{
      color: #000;
      margin-bottom: .36rem;
      font-weight: 700;
    }
    .label{
      .label;
    }
    .result{
      .result;
    }
  }
  .foot{
    .dbfooter;
  }
  .detail{
    .mask;
    z-index: 66;
  }
  .questionImg {
    width: 96%;
  }
  
</style>