preliminary/src/components/TabPage.vue

<template>
  <div class="tab-wrap">
    <div class="tab"
      v-if="modlues&&modlues.length>0 && moduleShow">
      <p v-for="(it,index) in modlues"
        :style="{'width':1/modlues.length*100+'%'}"
        :key="it.id">
        <span :class="{current:index==number,comp:finish[it.type]}" v-if="type[it.type]==1">
          <!-- <i>{{it.type}}</i> -->
          <i>{{index+1}}</i>
          {{it.name}}
        </span>
      </p>
    </div>
    <!-- 内容 -->
    <div class="content">
      <template v-for="(item,idx) in modlues">
        <Symptom
          v-if="flag==moduleCP['symp']&&item.type==moduleCP['symp']&&moduleShow"
          @next="toNext"
          :nameStr="item.name"
          :modluesLen="modluesLen"
        />
      
        <DiagTreat
          v-if="flag==moduleCP['diagT']&&item.type==moduleCP['diagT']&&moduleShow"
          :datas="item"
          :preName="modlues[0]&&modlues[0].name"
          :modluesLen="modluesLen"
          :nextName="modlues[2]&&modlues[2].name"
          @next="toNext"
          @back="beBack"
        />

        <Others
          v-if="flag==moduleCP['other']&&item.type==moduleCP['other']&&moduleShow"
          :modluesLen="modluesLen"
          :datas="item"
          :preName="modlues[idx-1]&&modlues[idx-1].name"
          :nextName="modlues[idx+1]&&modlues[idx+1].name"
          @next="toNext"
          @back="beBack"
        />
        <AddContent
          v-show="flag == moduleCP['suplement']&&item.type==moduleCP['suplement']&&moduleShow"
          :modluesLen="modluesLen"
          :allMoudles="item"
          :preName="modlues[idx-1]&&modlues[idx-1].name"
          @toggleModule="toggleModule"
          @next="toNext"
          @back="beBack"
        />
      </template>
      <Preview v-if="!moduleShow" 
        :preName="getPreviewName()"
        :loadingShow="this.$store.state.loadingShow"
        :showLis="type"
        @back="beBack" 
      />
    </div>
  </div>
</template>
<script type="text/javascript">
import Symptom from './Symptom.vue';
import AddContent from './AddContent.vue';
import DiagTreat from './DiagTreat.vue';
import Others from './Others.vue';
import Preview from './Preview.vue';
import {moduleConfig,moduleCP} from '../utils/tools.js';
export default {
  name: 'TabPage',
  data() {
    let sysConfig = this.$store.state.sysConfig;
    let tmpAllMoudles = this.$store.state.allMoudles;
    let allMoudles = moduleConfig(sysConfig,tmpAllMoudles);
    return {
      config: sysConfig,
      modlues: allMoudles.data,
      modluesLen: allMoudles.len,
      type: {
        "1": sysConfig.length > 0 && sysConfig.filter(item => item.code == "symptoms_show")[0].value,
        "51": sysConfig.length > 0 && sysConfig.filter(item => item.code == "diagnosis_show")[0].value,
        "3": sysConfig.length > 0 && sysConfig.filter(item => item.code == "omhistory_show")[0].value,
        "52": sysConfig.length > 0 && sysConfig.filter(item => item.code == "replenish_show")[0].value,
      },
      flag: allMoudles.order,
      moduleShow:true,
      finish:{ //标识已填
        '1':true,
        '51':false,
        '3':false,
        '52':false
      },
      number:0,
      moduleCP:moduleCP,
    }
  },
  created() {
    if (this.config.length == 0) {
      this.$router.go(-1)
    }
  },
  methods: {
    getPreviewName(){
      let len = this.modluesLen,tmpModule = this.modlues;
      let preName = '';
      if(len == 1){
        preName=tmpModule[0].name
      }else if(len == 2){
        preName=tmpModule[1].name
      }else if(len == 3){
        preName=tmpModule[2].name
      }else if(len == 4){
        preName=tmpModule[3].name
      }
      return preName
    },
    getNames(type){
      let len = this.modluesLen,tmpModule = this.modlues;
      let nextName = '';
      if(len == 1){
        preName=tmpModule[0].name
      }else if(len == 2){
        preName=tmpModule[1].name
      }else if(len == 3){
        preName=tmpModule[2].name
      }else if(len == 4){
        preName=tmpModule[3].name
      }
      return preName
    },
    toNext(preview) {
      if(preview === 'preview'){
        this.moduleShow=false
        return
      }
      let flag = parseInt(this.flag),num=this.number;
      this.number = ++num;
      
      for(let j in this.finish){
        if(j <= flag){
          this.finish[j] = true
        }
      }
      for(let i = 0;i < this.modlues.length;i++){
        let part = this.modlues[i];
        if(part.type == flag){
          if(i < (this.modlues.length-1)){
            this.flag = this.modlues[i+1].type
          }
        }
      }
    },
    beBack(preview) {
      if(preview === 'preview'){
        this.moduleShow=true
        return
      }
      let flag = parseInt(this.flag),num=this.number;
      this.number = --num;

      for(let j in this.finish){
        if(j <= flag){
          this.finish[j] = true
        }
      }
      for(let i = 0;i < this.modlues.length;i++){
        let part = this.modlues[i];
        if(part.type == flag){
          this.flag = this.modlues[i-1].type
        }
      }
    },
    toggleModule(flg){
      this.moduleShow = flg
    },
  },
  components: {
    Symptom,
    DiagTreat,
    Others,
    AddContent,
    Preview
  }
}
</script>
<style lang="less" scoped>
.tab-wrap {
  width: 100%;
  height: 100%;
  padding-bottom: 0.88rem;
  padding-top: 0.82rem;
  .tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 50;
    height: 0.82rem;
    line-height: 0.82rem;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    padding-top: 0.16rem;
    p {
      display: inline-block;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    span {
      font-size: 0.24rem;
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      color: #7c828e;
      text-align: center;
      // margin-left: 0.2rem;
      // margin-right: 0.19rem;
    }
    .current {
      color: #0043e8;
      background: #e5ecfc;
      border-radius: 25px;
    }
    .comp{
      color: #0043e8;
    }
}
  .content {
    font-size: 0.3rem;
    // padding: 0.45rem 0.6rem;
    // padding: 0.45rem 0.3rem 0.45rem 0.6rem;
    padding: 0.45rem 0 0.45rem 0.3rem;
  }
}
</style>