preliminary/src/components/Others.vue

<template>
  <div class="other-wrap otherper btscroll">
    <div class="content">
      <div v-for="(it,i) in dtoList" 
          v-if="dtoList"
          :key="it.id"
          class="label">
        <p class="quest" :style="{'margin-bottom':it.controlType==0?'.3rem':'0'}">{{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"
              :item="it"
              :ppId="it.id" 
              :order="i"
              :moduleType="datas.type"/>
        <!-- 输入框 -->
        <Input v-if="it.controlType==6 || it.controlType==7"
            :item="it"
            :key="it.id"
            @updata="updataData($event,it.id,i)"/>
        <!-- 文本域 -->
        <ComTextArea v-if="it.controlType == 5"
            :item="it"
            @updata="updataData($event,it.id,i)"/>
        <Radio v-if="it.controlType==1" 
            :item="it"
            :key="it.id"
            @updata="updataData($event,it.id,i)"/>
        <CheckBox v-if="it.controlType==2" 
            :item="it"
            :key="it.id"
            @updata="updataData($event,it.id,i)"/>
        <!-- 多行输入-->
        <template
            v-if="it.controlType == 3"
            v-for="(part,index) in it.questionDetailList"
          >
            <MultiLineInput
              :msg="part.name"
              :part="part"
              @updata="updataData($event,it.id,i,index)"
            ></MultiLineInput>
        </template>
        <!-- 时间控件 -->
        <PickTime v-if="it.controlType==9"
            :item="it"
            :key="it.id"
            @updata="updataData($event,it.id,i)"/>
      </div>
      <div class="result" v-if="getText()">
        <p class="title"><span class="line"></span>{{datas.name}}</p>
        <p class="bgResult">{{getText()}}</p>
      </div>
    </div>
    <div class="foot" v-if="modluesLen==3&&!nextName||modluesLen==2">
      <!-- <span class="back" @click="beBack">{{'返回'+ preName}}</span> -->
      <span class="back" @click="beBack">上一步</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> -->
      <span class="back" @click="beBack">上一步</span>
      <span class="next" @click="toNext">下一步</span>
    </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,setScroll,trimDots} 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';
  import PickTime from '../common/PickTime.vue';
  export default {
    name:'Others',
    data(){
      let {origin,datas,text} = this.$store.state.others;
      return{
        msg:"其他情况",
        dtoList:datas, //模板数据
        labelDetail:{}, //标签明细
        checkText:text, //选中的文字
        ppId:null,
        show:false,
        imgUrl:imageUrlPrefix,
        scroll:null
      }
    },
    props:['datas','preName','nextName','modluesLen'],
    created(){},
    mounted(){
      this.$nextTick(()=>{
        let scroll = setScroll(BScroll,true,'.otherper')
        this.scroll = scroll
        scroll.on('scroll', this.onScroll)
      })
    },
    methods:{
      onScroll(data) {
        this.$store.commit('setScroll', data)
        document.activeElement.scrollIntoViewIfNeeded(true);
      },
      beBack(){
        this.$emit('back');
      },
      toNext(){
        if(!this.nextName){
          this.$emit('next','preview')
        }else{
          this.$emit('next');
        }
      },
      updataData(data,id,order,index){//输入框存值
        let list = this.dtoList;
        let value = "";
        let valueP = "";
        for(let i in list){
          if(list[i].id==id){
            if(list[i].controlType == 3){//多行输入
              let detailList = list[i].questionDetailList;
              detailList.splice(index,1,data);
              let temVal = "";
              for(let k in detailList){
                if(detailList[k].value){
                  temVal += detailList[k].value + '，'
                }
              }
              value = valueP = temVal?temVal.substring(0,temVal.length-1):'';
            }else{
              list.splice(i,1,data);
              value = data.value;
              valueP = data.valueP;
            }
          }
        }
        this.$store.commit('setDatas',{type:moduleCP['other'],data:data,pId:data.id,ppId:id});
        this.$store.commit('setText',{type:moduleCP['other'],text:value.replace(patt,'').replace(/\#\{/g,'').replace(/\}/g,''),textP:valueP.replace(patt,'').replace(/\#\{/g,'').replace(/\}/g,''),pId:data.id,flag:true,order:order}); 
        this.$nextTick(()=>{
          this.scroll.refresh()
        })
      },
      getText(){
        let textArr = this.checkText;
        let msg = "";
        for(let k in textArr){
          if(textArr[k] && Array.isArray(textArr[k])){
            let temp = textArr[k];
            for(let j in temp){
              if(temp[j] && temp[j].textP){
                msg += temp[j].textP + '，'
              }
            }
          }else if(textArr[k]&&textArr[k].textP){
            msg += textArr[k].textP + '，'
          }
        }    
        return trimDots(msg.substring(0,msg.length-1));
      }
    },
    components:{
      UploadImg,
      Label,
      DetailBox,
      Input,
      ComTextArea,
      Radio,
      CheckBox,
      MultiLineInput,
      PickTime
    },
    computed:{
      getItem(){
        return this.$store.state.others.text;
      }
    },
    watch:{
      getItem:{
        handler(value){
          this.checkText = value;
        },
        deep:true
      }
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .other-wrap{
    font-size: .3rem;
    // .btscroll;
    .inp-wrap,.toast-wrap,.comArea {
      padding-left: 0;
      padding-right: 0;
    }
    .bgques {
      padding-left:0;
      padding-right: 0;
    } 
    .quest{
      color: #colors[quest];
      font-weight: 700;
    }
    .label{
      .label;
      padding-bottom: 0;
    }
    .result{
      .result;
    }
  }
  .foot{
    .dbfooter;
  }
  .questionImg {
    width: 96%;
  }
  
</style>