preliminary/src/components/AddContent.vue

<template>
  <div class="addc-wrap addper btscroll">
    <div class="content">
        <div class="choose">
        <ul class="addPart">
          <li v-for="(item,idx) in dataTrd">
            <p class="question">{{idx+1 + '. ' +(item.description||item.name)}}{{item.controlType==1?'(单选)':item.controlType==2?'(多选)':''}}</p>
            <img class="questionImg" :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
            <Radio v-if="item.controlType==1" 
              :item="item"
              :key="item.id"
              @updata="updataData($event,idx,item)"/>
            <CheckBox v-if="item.controlType==2" 
              :item="item"
              :key="item.id"
              @updata="updataData($event,idx,item)"/>
            <ComTextArea
              v-if="item.controlType == 5"
              :item="item"
              @updata="updataData($event,idx,item)"
              @changeAreaVal="changeAreaVal($event,idx)"
            ></ComTextArea>
            <Input v-if="item.controlType==6 || item.controlType==7"
              :item="item"
              :key="item.id"
              @updata="updataData($event,idx,item)"/>
            <template
              v-if="item.controlType == 3"
              v-for="(part,index) in item.questionDetailList"
            >
              <MultiLineInput
                v-if="item.controlType == 3"
                :msg="part.description||part.name"
                :part="part"
                @updata="updataData($event,index,item)"
              ></MultiLineInput>
            </template>
            <!-- 时间控件 -->
            <PickTime v-if="item.controlType==9"
              :item="item"
              :key="item.id"
              @updata="updataData($event,idx,item)"/>
          </li>
        </ul>
        <div class="result" v-if="allStr">
          <p class="title"><span class="line"></span>{{allMoudles.name}}</p>
          <p class="bgResult">{{allStr}}</p>
        </div>
        <div class="thanks">
          <p>感谢您的回答，您的病历已经自动生成。</p>
          <p>您可以点击预览并提交病历按钮预览病历。</p>
          <p>如果没有需要修改的内容，请点击提交，医生便能看到您的病历。</p>
        </div>
      </div>
    </div>
    <div class="foot">
      <span class="back" @click="back">上一步</span>
      <span class="next" @click="next(4)">预览并提交病历</span>
    </div>
  </div>
</template>
<script type="text/javascript">
import ComTextArea from '../common/ComTextArea.vue';
import MultiLineInput from '../common/MultiLineInput.vue';
import Input from '../common/Input.vue';
import Radio from '../common/Radio.vue';
import CheckBox from '../common/CheckBox.vue';
import {imageUrlPrefix,getAllStr,setScroll,getRouteName,setTitle} from '@utils/tools.js';
import BScroll from 'better-scroll';
import PickTime from '../common/PickTime.vue';
import {mapState} from 'vuex';

export default {
  name: 'AddContent',
  data() {
    return {
      imgUrl:imageUrlPrefix,
      dataTrd: [],
      val: '',
      allStr:'',
      scroll:null,
      allMoudles:{}
    }
  },
  computed:{
    ...mapState({
      activeModule: state => state.activeModule,
      datas: state => state.activeModule.obj.omhistory_show,
    }),
  },
  created(){
    let activePart = this.$store.state.activeModule;
    this.allMoudles = activePart.obj.replenish_show;

    this.dataTrd = this.allMoudles && this.allMoudles.moduleDetailDTOList;
    this.allStr = this.$store.state.addContent.txt;
  },
  beforeRouteEnter (to, from , next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      setTitle(vm.activeModule.obj.replenish_show.name)
    })
  },
  mounted() {
    this.$store.commit('setFinish',52)
    this.$nextTick(()=>{
      let scroll = setScroll(BScroll,true,'.addper')
      this.scroll = scroll
      scroll.on('scroll', this.onScroll)
    })
  },
  methods: {
    onScroll(data) {
      this.$store.commit('setScroll', data)
      document.activeElement.scrollIntoViewIfNeeded(true);        
    },
    back() {
      this.$router.go(-1);
    },
    changeAreaVal(value, idx) {
      this.val = value
    },
    next(flg){
      let routeName = getRouteName(flg)
      this.$router.push({
        path:routeName
      })
      this.$store.commit('setText',{data:this.dataTrd,type:this.allMoudles&&this.allMoudles.type});
      this.$emit('next','preview')
    },
    setDetail(obj){
      this.labelDetail = obj.detail;
      this.ppId = obj.ppId;
      this.show = true;
    },
    updateOrig(){
      let origin = this.$store.state.diagnose.origin;
      // this.dtoList = origin;console.log("更新：",origin)
    },
    updataData(data,idx,item){
      let mapping = this.dataTrd;
      let allData = this.$store.state.allMoudles;
      let tmpTrdData = allData.filter((item) => item.type == 52);
      if(data.controlType == 3){//多行输入，多了一层需单独处理
        let tmpLis = item.questionDetailList;
        tmpLis.splice(idx,1,data);
        this.allStr=getAllStr({data:tmpTrdData&&tmpTrdData[0].moduleDetailDTOList,type:this.allMoudles&&this.allMoudles.type}).allStr;
      }else{
        for(let i in mapping){
          if(mapping[i].id==data.id){
            mapping.splice(i,1,data)
          }
        }
        this.allStr=getAllStr({data:tmpTrdData&&tmpTrdData[0].moduleDetailDTOList,type:this.allMoudles&&this.allMoudles.type}).allStr
        this.$store.commit('setDataAll',{data:data,idx:idx});
      }
      this.$store.commit('setText',{data:tmpTrdData&&tmpTrdData[0].moduleDetailDTOList,type:this.allMoudles&&this.allMoudles.type});
      this.$nextTick(()=>{
        this.scroll.refresh()
      })
    },
  },
  components: {
    ComTextArea,
    MultiLineInput,
    Input,
    Radio,
    CheckBox,
    PickTime
  }
}
</script>
<style lang="less" scoped>
@import "../less/base.less";
.comArea,.inp-wrap,.toast-wrap {
  padding-left:0 !important;
  padding-right: 0 !important;
} 
.questionImg {
  width: 100%;
}
.addc-wrap {
  font-size: 0.3rem;
  overflow: hidden;
  .content {
    // padding-right: .3rem;
  }
  // .btscroll;
  h3 {
    color: #colors[quest];
    margin-bottom: 0.36rem;
  }
}
.choose {
  padding-bottom: 0.2rem;
  .addPart {
    li {
      margin-bottom: 0.1rem;
      clear: both;
    }
    .question {
      margin-bottom: 0.2rem;
      font-weight: bold;
    }
    .comArea {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}
  .foot{
    .dbfooter;
  }
  
.result{
  margin-bottom: .3rem;
  word-break: break-all;
}
.thanks {
  font-size: .28rem /* 28/100 */;
  color: #666666;
  letter-spacing: 0;
  text-align: justify;
  line-height: .48rem /* 48/100 */;
}
.label{
  .label;
}
</style>