tab流程

src/common/Radio.vue

@@ -5,7 +5,7 @@
     <p v-for="(it,index) in item.questionDetailList" :key="it.id" class="list">
       <img :src="index==current?check:defaultPic" @click="handleClick(it,index)">
       <!-- <img :src="it.select?check:defaultPic" @click="handleClick(it,index)"> -->
-      <span>{{it.name}}</span>
+      <span :class="{'check':index==current}">{{it.name}}</span>
     </p>
   </div>
 </template>
@@ -64,6 +64,9 @@ import {deepClone} from '@utils/tools.js'
         width: .38rem;
         vertical-align: middle;
       }
+      .check{
+        color: #4F50FF;
+      }
     }
   }
 </style>

src/components/Detail.vue

@@ -40,6 +40,6 @@ import CheckBox from '../common/CheckBox.vue';
 </script>
 <style lang="less" scoped>
   .detail-wrap{
-    padding: .3rem .5rem 2.1rem .6rem;
+    padding: .3rem .5rem .3rem .6rem;
   }
 </style>

src/components/DetailBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="detailBox-wrap">
+  <div class="detailBox-wrap" ref="detailBox">
     <div class="head">
       <span class="icon" @click="close">
         <img src="../images/small-close.png">
@@ -22,6 +22,11 @@
         msg:"胸痛详情"
       }
     },
+    mounted(){
+      const box = this.$refs.detailBox;
+      const height = document.documentElement.clientHeight;
+      box.style.height = height - 100 + 'px';
+    },
     methods:{
       close(){
         this.$emit("close","胸痛");
@@ -51,17 +56,18 @@
 @import '../less/base.less';
   .detailBox-wrap{
     width: 100%;
-    height: 100%;
-    // height: calc(100%-2.03rem);
+    // height: 100%;
+    // height: calc(~"100%-1.15rem");
     overflow-y: auto;
     position: fixed;
-    top: 1.15rem;
+    // top: 1.15rem;
+    bottom: 0;
     left: 0;
     z-index: 666;
     background: #fff;
     border-radius: .08rem .08rem 0 0;
     font-size: .3rem;
-    padding-bottom: .88rem;
+    // padding-bottom: .88rem;
     .head{
       height: .88rem;
       line-height: .88rem;
@@ -89,14 +95,14 @@
 
     }
     .foot{
-      .footer;
-      // width:100%;
-      // height: .88rem;
-      // line-height: .88rem;
-      // text-align: center;
-      // color:#fff;
-      // font-size: .32rem;
-      // background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
+      // .footer;
+      width:100%;
+      height: .88rem;
+      line-height: .88rem;
+      text-align: center;
+      color:#fff;
+      font-size: .32rem;
+      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
     }
   }
 </style>

src/components/DiagTreat.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="treat-wrap">
+    <div v-for="(it,i) in datas.moduleDetailDTOList" 
+        v-if="datas&&datas.moduleDetailDTOList"
+        :key="it.id">
+      <div class="label" v-if="it.controlType==0">
+        <h3>{{it.name}}</h3>
+        <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
+      </div>
+    </div>
+    <div class="result">
+      <h4>治疗情况</h4>
+      <p>经典款了估计的结果</p>
+    </div>
+    <div class="foot">
+      <span class="back" @click="beBack">{{'返回'+ preName}}</span>
+      <span class="next" @click="toNext">{{'进入'+ nextName}}</span>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    name:'DiagTreat',
+    data(){
+      return{
+        msg:"诊疗情况",
+        chooseSymp:[{name:'未治疗'}]
+      }
+    },
+    props:['datas','preName','nextName'],
+    methods:{
+      beBack(){
+        this.$emit('back');
+      },
+      toNext(){
+        this.$emit('next');
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+@import '../less/base.less';
+  .treat-wrap{
+    font-size: .3rem;
+    h3{
+      color: #000;
+      margin-bottom: .36rem;
+    }
+    .label{
+      padding-bottom: .2rem;
+      .symp{
+        display: inline-block;
+        width:1.9rem;
+        height: .74rem;
+        line-height: .74rem;
+        border: 1px solid #DFE0E4;
+        border-radius: .08rem;
+        text-align: center;
+        color: #7C828E;
+        margin: 0 0 .3rem .3rem;
+        box-sizing: border-box;
+      }
+      .symp:nth-child(3n+2){
+        margin-left: 0;
+      }
+    }
+    .result{
+      h4{
+        color: #4F50FF;
+        padding-left: .1rem;
+        border-left: .08rem solid #4F50FF;
+        margin-bottom: .19rem;
+      }
+      p{
+        color: #666;
+        line-height: .44rem;
+      }
+    }
+  }
+  .foot{
+    .dbfooter;
+  }
+  
+</style>

src/components/Others.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="other-wrap">
+    <div v-for="(it,i) in datas.moduleDetailDTOList" 
+        v-if="datas&&datas.moduleDetailDTOList"
+        :key="it.id">
+      <div class="label" v-if="it.controlType==0">
+        <h3>{{it.name}}</h3>
+        <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
+      </div>
+    </div>
+    <div class="result">
+      <h4>治疗情况</h4>
+      <p>结果</p>
+    </div>
+    <div class="foot">
+      <span class="back" @click="beBack">{{'返回'+ preName}}</span>
+      <span class="next" @click="toNext">{{'进入'+ nextName}}</span>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    name:'Others',
+    data(){
+      return{
+        msg:"诊疗情况",
+        chooseSymp:[{name:'未治疗'}]
+      }
+    },
+    props:['datas','preName','nextName'],
+    methods:{
+      beBack(){
+        this.$emit('back');
+      },
+      toNext(){
+        this.$emit('next');
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+@import '../less/base.less';
+  .other-wrap{
+    font-size: .3rem;
+    h3{
+      color: #000;
+      margin-bottom: .36rem;
+    }
+    .label{
+      padding-bottom: .2rem;
+      .symp{
+        display: inline-block;
+        width:1.9rem;
+        height: .74rem;
+        line-height: .74rem;
+        border: 1px solid #DFE0E4;
+        border-radius: .08rem;
+        text-align: center;
+        color: #7C828E;
+        margin: 0 0 .3rem .3rem;
+        box-sizing: border-box;
+      }
+      .symp:nth-child(3n+2){
+        margin-left: 0;
+      }
+    }
+    .result{
+      h4{
+        color: #4F50FF;
+        padding-left: .1rem;
+        border-left: .08rem solid #4F50FF;
+        margin-bottom: .19rem;
+      }
+      p{
+        color: #666;
+        line-height: .44rem;
+      }
+    }
+  }
+  .foot{
+    .dbfooter;
+  }
+  
+</style>

src/components/Symptom.vue

@@ -18,7 +18,7 @@
       <h4>症状情况</h4>
       <p v-for="(value,key,index) in checkText">{{value}}</p>
     </div>
-    <div class="footer" @click="toNext">下一步</div>
+    <div :class="['footer',{'nofoot':chooseSymp.length==0}]" @click="toNext">下一步</div>
     <div class="detail" v-if="show">
       <DetailBox @close="closeDetal" 
               :data="labelDetail" 
@@ -38,12 +38,8 @@ import Toast from '../common/Toast.vue';
   export default {
     name:'Symptom',
     data(){
-      /*const pathInfo = this.$store.state.pathInfo;
-      let datas = this.$store.state.datas;
-      let originDatas = this.$store.state.originDatas;*/
       let {datas,update} = this.$store.state;
       const {pathInfo,originDatas} = this.$store.state;
-      console.log("symp组件：",update,pathInfo)
       return {
         age:pathInfo.patientAge,
         sexType:pathInfo.patientSex=='男'?1:(pathInfo.patientSex=='女'?2:3),
@@ -58,7 +54,7 @@ import Toast from '../common/Toast.vue';
         checkText:{}, //选中拼好的明细
         questId:null, //id
         // symptomName:'', //点击的症状名称
-        delText:"是否删除该信息？",
+        delText:"是否删除该信息？ （已填内容将清除）",
         delIndex:null,
         showToast:false,
         finished:false,   //是否填写了明细
@@ -84,29 +80,40 @@ import Toast from '../common/Toast.vue';
       },
       toNext(){
         // 把1切换成完成图标，且2高亮
+        if(this.chooseSymp.length==0){return}
+        this.$emit('next');
       },
       showDetil(item){
         this.chooseSymp.push(item);
         // this.questId = item.conceptId;
         this.questId = item.questionId;
-        // this.symptomName = item.name;
-        const id = item.questionId;
         const param = {
           "age":this.age,
-          "id":id,
+          "id":item.questionId,
           "sexType":this.sexType
         }
         api.getById(param).then((res)=>{
           const result = res.data;
           if(result.code==0){
+            const mapping = result.data.questionMapping;
             this.labelDetail = result.data;
             this.$store.commit('setOrigin',result.data);
             // this.$store.commit('getUpdate');
-            this.show = true;
+            if(mapping&&mapping.length>0){
+              this.show = true;
+            } 
           }
         })
-        // 推理
-        
+        // 推理 
+        const sympText = this.getSympText();
+        this.getPush(sympText);
+      },
+      getSympText(){
+        let sympText = "";
+        for(let k in this.chooseSymp){
+          sympText += this.chooseSymp[k].name;
+        }
+        return sympText;
       },
       getPush(symptoms){//推理
         const param = {
@@ -125,7 +132,7 @@ import Toast from '../common/Toast.vue';
       closeDetal(msg){
         const questId = this.questId;
         this.getPush(msg);
-        this.checkText = Object.assign({},this.checkText,{[questId]:msg});
+        // this.checkText = Object.assign({},this.checkText,{[questId]:msg});
         this.show = false;
         this.questId = null;
       },
@@ -133,21 +140,27 @@ import Toast from '../common/Toast.vue';
         this.delIndex = index;
         this.questId = item.questionId;
         if(this.chooseSymp.length==1){
-          this.delText = "是否删除该信息？删除后将重新填写预问诊流程"
+          this.delText = "是否删除该信息？删除后将重新填写预问诊流程 （已填内容将清除）"
         }
         this.showToast = true;
       },
       comfirnDel(){
         this.chooseSymp.splice(this.delIndex,1);
         delete(this.checkText[this.questId]);
-        // this.getPush(''); //删除后重新调推理-入参：拼好的内容
+        // 删除完-常见；其他-推送
+        if(this.chooseSymp.length>0){
+          const sympText = this.getSympText();
+          this.getPush(sympText);//删除后重新调推理-入参：拼好的内容
+        }else{
+          this.getSympList();
+        } 
         this.cancelDel();
-        console.log("确认删除：",this.chooseSymp,this.checkText)
       },
       cancelDel(){
         this.showToast = false;
         this.delIndex = null;
         this.questId = null;
+        this.delText = "是否删除该信息？ （已填内容将清除）";
       },
       complete(msg){//明细填写完成
         // 获取选择后的明细数据-拼接症状情况-关闭明细弹窗
@@ -249,6 +262,10 @@ import Toast from '../common/Toast.vue';
   .footer{
     .footer;
   }
+  .nofoot{
+    opacity: 0.3;
+    background: linear-gradient(-270deg,#4F4FFF, #4F8BFF);
+  }
   .detail{
     .mask;
     z-index: 66;

src/components/TabPage.vue

@@ -2,7 +2,8 @@
   <div class="tab-wrap">
     <div class="tab" v-if="modlues&&modlues.length>0">
       <p v-for="(it,index) in modlues" :key="it.id">
-        <span :class="{current:index==0}" v-if="type[it.type]==1">
+        <!-- <span :class="{current:index==0}" v-if="type[it.type]==1"> -->
+        <span :class="{current:index==parseInt(flag)-1}" v-if="type[it.type]==1">
           <i>{{it.type}}</i>
           {{it.name}}
         </span>
@@ -10,13 +11,28 @@
     </div>
     <!-- 内容 -->
     <div class="content">
-      <Symptom />
+      <Symptom v-if="flag==1" @next="toNext"/>
+      <DiagTreat v-if="flag==2" 
+            :datas="modlues[1]"
+            :preName="modlues[0]&&modlues[0].name"
+            :nextName="modlues[2]&&modlues[2].name"
+            @next="toNext"
+            @back="beBack"
+            />
+      <Others v-if="flag==3" 
+            :datas="modlues[2]"
+            :preName="modlues[1]&&modlues[1].name"
+            :nextName="modlues[3]&&modlues[3].name"
+            @next="toNext"
+            @back="beBack"
+            />
     </div>
-    <!-- <div class="footer">下一步</div> -->
   </div>
 </template>
 <script type="text/javascript">
   import Symptom from './Symptom.vue';
+  import DiagTreat from './DiagTreat.vue';
+  import Others from './Others.vue';
   export default {
     name:'TabPage',
     data(){
@@ -30,14 +46,31 @@
           "2":sysConfig.filter(item=>item.code=="diagnosis_show")[0].value,
           "3":sysConfig.filter(item=>item.code=="omhistory_show")[0].value,
           "4":sysConfig.filter(item=>item.code=="replenish_show")[0].value,
-        }
+        },
+        flag:allMoudles[0].type
       }
     },
     created(){
       // console.log('配置信息：',this.config,'type',this.type)
     },
     components:{
-      Symptom
+      Symptom,
+      DiagTreat,
+      Others
+    },
+    methods:{
+      toNext(){
+        let flag = parseInt(this.flag);
+        if(this.modlues[flag]){
+          this.flag = this.modlues[flag].type;
+        } 
+      },
+      beBack(){
+        let flag = parseInt(this.flag)-1;
+        if(this.modlues[flag-1]){
+          this.flag = this.modlues[flag-1].type;
+        }
+      }
     }
   }
 </script>

src/less/base.less

@@ -20,4 +20,30 @@
   position: fixed;
   bottom: 0;
   left: 0;
+}
+.dbfooter{
+  width:100%;
+  font-size: .32rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background: #F2F2F5;
+  .back,.next{
+    display: inline-block;
+    height: .88rem;
+    line-height: .88rem;
+    text-align: center;
+    vertical-align: top;
+  }
+  .back{
+    width: 2.5rem;
+    color: #7C828E;
+    // background: #F2F2F5;
+  }
+  .next{
+    // width: 5rem;
+    width: 4.91rem;
+    color: #fff;
+    background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
+  }
 }