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"
        :key="it.id">
        <span :class="{current:index==parseInt(flag)-1,comp:finish[it.type]}"
          v-if="type[it.type]==1">
          <i>{{it.type}}</i>
          {{it.name}}
        </span>
      </p>
    </div>
    <!-- 内容 -->
    <div class="content">
      <Symptom
        v-if="flag==1&&moduleShow"
        @next="toNext"
      />
      <DiagTreat
        v-if="flag==2&&moduleShow"
        :datas="modlues[1]"
        :preName="modlues[0]&&modlues[0].name"
        :nextName="modlues[2]&&modlues[2].name"
        @next="toNext"
        @back="beBack"
      />
      <Others
        v-if="flag==3&&moduleShow"
        :datas="modlues[2]"
        :preName="modlues[1]&&modlues[1].name"
        :nextName="modlues[3]&&modlues[3].name"
        @next="toNext"
        @back="beBack"
      />
      <AddContent
        v-show="flag == 4&&moduleShow"
        :allMoudles="modlues[3]"
        :preName="modlues[2]&&modlues[2].name"
        @toggleModule="toggleModule"
        @next="toNext"
        @back="beBack"
      />
      <Preview v-show="!moduleShow" 
        :preName="modlues[3]&&modlues[3].name"
        @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';
export default {
  name: 'TabPage',
  data() {
    let sysConfig = this.$store.state.sysConfig;
    let allMoudles = this.$store.state.allMoudles;
    return {
      config: sysConfig,
      modlues: allMoudles,
      type: {
        "1": sysConfig.length > 0 && sysConfig.filter(item => item.code == "symptoms_show")[0].value,
        "2": 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,
        "4": sysConfig.length > 0 && sysConfig.filter(item => item.code == "replenish_show")[0].value,
      },
      flag: allMoudles.length > 0 && allMoudles[0].type,
      moduleShow:true,
      finish:{ //标识已填
        "1":true,
        "2":false,
        "3":false,
        "4":false
      }
    }
  },
  created() {
    if (this.config.length == 0) {
      this.$router.go(-1)
    }
  },
  methods: {
    toNext(preview) {
      if(preview === 'preview'){
        this.moduleShow=false
        return
      }
      let flag = parseInt(this.flag);
      if (this.modlues[flag]) {
        const type = this.modlues[flag].type;
        this.flag = type;
        // this.flag = 4;
        this.finish[type] = true;
      }
    },
    beBack(preview) {
      if(preview === 'preview'){
        this.moduleShow=true
        return
      }
      let flag = parseInt(this.flag) - 1;
      if (this.modlues[flag - 1]) {
        this.flag = this.modlues[flag - 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;
  .tab {
    height: 0.82rem;
    line-height: 0.82rem;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    padding-top: 0.16rem;
    p {
      display: inline-block;
    }
    span {
      font-size: 0.24rem;
      display: inline-block;
      vertical-align: top;
      width: 1.48rem;
      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;
  }
}
</style>