preliminary/src/components/AddContent.vue

<template>
  <div class="symp-wrap">
    <div class="choose">
      <ul class="addPart">
        <li v-for="(item,idx) in dataTrd">
          <p class="question">{{idx+1 + '. ' +item.name}}</p>
          <Radio v-if="item.controlType==1" 
            :item="item"
            :key="item.id"
            @updata="updataData"/>
          <CheckBox v-if="item.controlType==2" 
            :item="item"
            :key="item.id"
            @updata="updataData"/>
          <ComTextArea
            v-if="item.controlType == 5"
            :item="item"
            @updata="updataData"
            @changeAreaVal="changeAreaVal($event,idx)"
          ></ComTextArea>
          <Input v-if="item.controlType==6 || item.controlType==7"
            :item="item"
            :key="item.id"
            @updata="updataData"/>
          <template
            v-if="item.controlType == 3"
            v-for="(part,index) in item.questionDetailList"
          >
            <MultiLineInput
              v-if="item.controlType == 3"
              :msg="part.name"
              :part="part"
              @updata="updataData($event,index,item)"
            ></MultiLineInput>
          </template>
        </li>
      </ul>
      <div class="thanks">
        <p>感谢您的回答，您的病历已经自动生成。</p>
        <p>您可以点击预览病历回顾病情；或者点击顶部修改病历采集信息。</p>
        <p>如果没有需要修改的内容，请点击提交，医生便能看到您的病历。</p>
      </div>
    </div>
    <div class="foot">
      <span class="back" @click="back">{{'返回'+ preName}}</span>
      <span class="next" @click="next">预览</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';

export default {
  name: 'AddContent',
  props: ['allMoudles','preName'],
  data() {
    return {
      dataTrd: [],
      val: ''
    }
  },
  mounted() {
    this.dataTrd = this.allMoudles && this.allMoudles.moduleDetailDTOList
    // this.dataTrd = [{
    //   "id": 2,
    //   "name": "请问您胸痛的部位在哪里？（可多选）",
    //   "tagName": "胸痛-疼痛部位",
    //   "type": 1,
    //   "controlType": 2,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "{imageUrlPrefix}/group1/M01/00/04/wKgC7F0CCWiAQWClAADJ_AlXG1M535.jpg",
    //   "description": "",
    //   "exclusionType": 0,
    //   "questionDetailList": [{
    //     "id": 1,
    //     "name": "部位1",
    //     "description": "部位1简述",
    //     "questionId": 2,
    //     "orderNo": 1,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 2,
    //     "name": "部位2",
    //     "description": "部位2简述",
    //     "questionId": 2,
    //     "orderNo": 2,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 3,
    //     "name": "部位3",
    //     "description": "",
    //     "questionId": 2,
    //     "orderNo": 3,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 4,
    //     "name": "部位4",
    //     "description": "",
    //     "questionId": 2,
    //     "orderNo": 4,
    //     "exclusion": 0,
    //     "remark": null
    //   }],
    //   "questionMapping": [],
    //   "remark": null
    // }, {
    //   "id": 4,
    //   "name": "请问您本次疼痛发作的持续时间如何",
    //   "tagName": "胸痛-持续时间",
    //   "type": 1,
    //   "controlType": 1,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "",
    //   "description": "",
    //   "exclusionType": 0,
    //   "questionDetailList": [{
    //     "id": 9,
    //     "name": "呈阵发性疼痛",
    //     "description": "",
    //     "questionId": 4,
    //     "orderNo": 1,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 10,
    //     "name": "呈持续性疼痛，已持续${input_时间}",
    //     "description": "",
    //     "questionId": 4,
    //     "orderNo": 2,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 11,
    //     "name": "呈一过性疼痛，只痛了一次就不痛了",
    //     "description": "",
    //     "questionId": 4,
    //     "orderNo": 3,
    //     "exclusion": 0,
    //     "remark": null
    //   }],
    //   "questionMapping": [],
    //   "remark": null
    // }, {
    //   "id": 5,
    //   "name": "请问您是否有能缓解疼痛的方法",
    //   "tagName": "胸痛-缓解方法",
    //   "type": 1,
    //   "controlType": 2,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "",
    //   "description": "",
    //   "exclusionType": 0,
    //   "questionDetailList": [{
    //     "id": 12,
    //     "name": "休息后可自行缓解",
    //     "description": "",
    //     "questionId": 5,
    //     "orderNo": 1,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 13,
    //     "name": "服用硝酸甘油后可缓解",
    //     "description": "",
    //     "questionId": 5,
    //     "orderNo": 2,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 14,
    //     "name": "其他可缓解方法:${input_}",
    //     "description": "",
    //     "questionId": 5,
    //     "orderNo": 3,
    //     "exclusion": 0,
    //     "remark": null
    //   }],
    //   "questionMapping": [],
    //   "remark": null
    // }, {
    //   "id": 7,
    //   "name": "请问您咳嗽有多长时间了？",
    //   "tagName": "胸痛-时间",
    //   "type": 1,
    //   "controlType": 6,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "",
    //   "description": "",
    //   "exclusionType": 0,
    //   "questionDetailList": [],
    //   "questionMapping": [],
    //   "remark": null
    // }, {
    //   "id": 8,
    //   "name": "请问您什么情况下感觉咳嗽加重？（可多选）",
    //   "tagName": "胸痛-咳嗽加重",
    //   "type": 1,
    //   "controlType": 2,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "",
    //   "description": "",
    //   "exclusionType": 0,
    //   "questionDetailList": [{
    //     "id": 18,
    //     "name": "晚上",
    //     "description": "",
    //     "questionId": 8,
    //     "orderNo": 1,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 19,
    //     "name": "白天",
    //     "description": "",
    //     "questionId": 8,
    //     "orderNo": 2,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 20,
    //     "name": "晨起",
    //     "description": "",
    //     "questionId": 8,
    //     "orderNo": 3,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 21,
    //     "name": "活动",
    //     "description": "",
    //     "questionId": 8,
    //     "orderNo": 4,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 22,
    //     "name": "不清楚",
    //     "description": "",
    //     "questionId": 8,
    //     "orderNo": 5,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 23,
    //     "name": "以上都不是：${input_}",
    //     "description": "",
    //     "questionId": 8,
    //     "orderNo": 6,
    //     "exclusion": 0,
    //     "remark": null
    //   }],
    //   "questionMapping": [],
    //   "remark": null
    // },{
    //   "id": 35,
    //   "name": "请填写您现在的生命体征情况",
    //   "tagName": "生命体征",
    //   "type": 52,
    //   "controlType": 3,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "",
    //   "description": "",
    //   "exclusionType": null,
    //   "questionDetailList": [{
    //     "id": 28,
    //     "name": "血压：${number_收缩压/舒张压}mmHg",
    //     "description": "",
    //     "questionId": 35,
    //     "orderNo": 1,
    //     "exclusion": 0,
    //     "remark": null
    //   }, {
    //     "id": 29,
    //     "name": "脉搏：${number_} 次/分",
    //     "description": "",
    //     "questionId": 35,
    //     "orderNo": 2,
    //     "exclusion": 0,
    //     "remark": null
    //   }],
    //   "questionMapping": [],
    //   "remark": null,
    //   "prefix": "",
    //   "suffix": "",
    //   "moduleId": 4,
    //   "questionId": 35,
    //   "flag": "",
    //   "relationModule": null,
    //   "relationModuleName": null
    // },{
    //   "id": 34,
    //   "name": "如有其他补充内容请继续输入",
    //   "tagName": "补充内容",
    //   "type": 52,
    //   "controlType": 5,
    //   "itemType": 1,
    //   "tagType": 1,
    //   "labelPrefix": "",
    //   "labelSuffix": "",
    //   "url": "",
    //   "description": "",
    //   "exclusionType": null,
    //   "questionDetailList": [],
    //   "questionMapping": [],
    //   "remark": null,
    //   "prefix": "",
    //   "suffix": "",
    //   "moduleId": 4,
    //   "questionId": 34,
    //   "flag": "",
    //   "relationModule": null,
    //   "relationModuleName": null
    // }]
  },
  methods: {
    back() {
      this.$emit("back");
    },
    changeAreaVal(value, idx) {
      // console.log(value,idx)
      this.val = value
    },
    next(){
      this.$store.commit('setText',{data:this.dataTrd,type:4});
      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;
      if(data.controlType == 3){//多行输入，多了一层需单独处理
        let tmpLis = item.questionDetailList
        tmpLis.splice(idx,1,data)
        // console.log(this.dataTrd,7878)
        // this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
        // this.$store.commit('setText',{text:msg,pId:this.checkDatas.id,type:this.type,flag:true});
        return;
      }
      for(let i in mapping){
        if(mapping[i].id==data.id){
          mapping.splice(i,1,data)
        }
      }
      this.$store.commit('setDataAll',data);
    },
  },
  components: {
    ComTextArea,
    MultiLineInput,
    Input,
    Radio,
    CheckBox
  }
}
</script>
<style lang="less" scoped>
@import "../less/base.less";
.symp-wrap {
  font-size: 0.3rem;
  padding-right: .3rem;
  h3 {
    color: #000;
    margin-bottom: 0.36rem;
  }
}
.choose {
  padding-bottom: 0.2rem;
  .addPart {
    li {
      margin-bottom: 0.1rem;
    }
    .question {
      margin-bottom: 0.2rem;
      font-weight: bold;
    }
  }
}
  .foot{
    .dbfooter;
  }
.thanks {
  font-size: .28rem /* 28/100 */;
  color: #666666;
  letter-spacing: 0;
  text-align: justify;
  line-height: .48rem /* 48/100 */;
}
.label{
  .label;
}
</style>