irc_web/.svn/pristine/01/013ad7cfdcc3c184a52467abe1a02579e238472f.svn-base

<template>
  <div class="trialsTab">
    <el-tabs v-model="trialsTab" @tab-click="clickTab">
      <el-tab-pane v-for="item of trialsRouter.children.find(v => {return v.name == 'TrialsPanel'}).children" :key="`tab${item.path}`" :disabled="TotalNeedSignTrialDocCount !== 0" :label="$t(item.LanguageMark)" :name="item.path">
        <el-tabs v-if="!item.tabHiddn" v-model="trialsTabChild" @tab-click="clickTab">
          <el-tab-pane
            v-for="item1 of item.children"
            :key="`tab1${item1.path}`"
            :disabled="TotalNeedSignTrialDocCount !== 0 || (TrialStatusStr === 'Initializing' && (item1.path === '/trials/trials-panel/setting/personnel-manage' || item1.path === '/trials/trials-panel/setting/qc-question'))"
            :label="$t(item1.LanguageMark)"
            :name="item1.path"
          />
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <div style="position: absolute;top: 0;right: 0;display: flex;justify-content: space-between;align-items: center">
      <trials-select />
      <div>
        <i class="iconfont" style="font-size: 30px;color:#ccc">&#xe680;</i>
      </div>
      <div class="my_icon_box" title="返回项目列表" @click="goBack">
        <i class="iconfont">&#xe670;</i>
        <span>返回</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getTrialSelect } from '@/api/trials'
import TrialsSelect from '@/components/TrialsSelect/index.vue'
import { getUserDocumentList } from '@/api/trials'
import store from '@/store'
export default {
  name: 'TrialsTab',
  components: {
    TrialsSelect
  },

  data() {
    return {
      trialsRouter: this.$store.getters.routes.find(v => { return v.name === 'Trials' }),
      trialsTab: null,
      trialsTabChild: null,
      tabTrialsId: null,
      options: [],
      TrialStatusStr: null
    }
  },
  computed: {
    ...mapGetters(['TotalNeedSignTrialDocCount'])
  },
  watch: {
    $route(v, ov) {
      this.selectedTab()
      var query = ``
      var url = window.location.href
      if (~url.indexOf('?')) {
        query = url.split('?')[1]
      }
      zzSessionStorage.setItem('lastWorkbench', `${v.path}${query ? '?' : ''}${query}`)
      var firstGoIn = this.trialsRouter.children.find(v => { return v.name === 'TrialsPanel' }).children[0]
      if (this.trialsTab === '/trials/trials-panel') {
        this.$router.replace({ path: `${firstGoIn.path}${query ? '?' : ''}${query}` })
        if (firstGoIn.children && firstGoIn.children.length > 0) {
          this.$router.replace({ path: `${firstGoIn.children[0].path}${query ? '?' : ''}${query}` })
        }
      }
    }
  },
  mounted() {
    var query = ``
    var url = window.location.href
    if (~url.indexOf('?')) {
      query = url.split('?')[1]
    }
    getUserDocumentList({ TrialId: this.$route.query.trialId }).then(async res => {
      var total = res.OtherInfo.NeedSignCount
      var TrialStatusStr = res.OtherInfo.TrialStatusStr
      this.TrialStatusStr = TrialStatusStr
      await store.dispatch('user/setTotalNeedSignTrialDocCount', total)
      await store.dispatch('user/setTrialStatusStr', TrialStatusStr)
    }).catch(() => {
    })
    this.selectedTab()
    this.getTrialList()
    var firstGoIn = this.trialsRouter.children.find(v => { return v.name === 'TrialsPanel' }).children[0]
    if (this.trialsTab === '/trials/trials-panel') {
      this.$router.replace({ path: `${firstGoIn.path}${query ? '?' : ''}${query}` })
      if (firstGoIn.children && firstGoIn.children.length > 0) {
        this.$router.replace({ path: `${firstGoIn.children[0].path}${query ? '?' : ''}${query}` })
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push({ path: '/trials/trials-list' })
    },
    selectTrials(v) {
      var trial = this.options.find(o => {
        return o.Id === v
      })
      this.$router.push({ path: `/trials/trials-panel?trialId=${trial.Id}&trialCode=${trial.TrialCode}` })
    },
    getTrialList() {
      getTrialSelect()
        .then(res => {
          this.options = res.Result
          this.tabTrialsId = this.$route.query.trialId
        })
        .catch(() => {
        })
    },
    selectedTab() {
      var path = this.$route.path
      if (this.$route.path.split('/').length > 4) {
        this.trialsTab = this.getValue(path)
        this.trialsTabChild = path
      } else {
        this.trialsTab = path
      }
    },
    getValue(url) {
      var site = url.lastIndexOf('\/')
      return url.substring(0, site)
    },
    clickTab(v) {
      try {
        var query = ``
        var url = window.location.href
        if (~url.indexOf('?')) {
          query = url.split('?')[1]
        }
        this.$router.push({ path: `${v.name}${query ? '?' : ''}${query}` })
        var trialsPanelList = this.trialsRouter.children.find(v => { return v.name === 'TrialsPanel' }).children
        var isHasChild = trialsPanelList.find(c => { return c.path === v.name }) && trialsPanelList.find(c => { return c.path === v.name }).children
        if (trialsPanelList.find(c => { return c.path === v.name }) && trialsPanelList.find(c => { return c.path === v.name }).tabHiddn) {
          return
        }
        if (isHasChild && isHasChild.length > 0) {
          this.trialsTabChild = isHasChild[0].path
          this.$router.push({ path: `${this.trialsTabChild}${query ? '?' : ''}${query}` })
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss">
  .trialsTab{
    .my_icon_box{
      padding:0 20px 0 0;
      transition: color,transform .3s;
      cursor: pointer;
      color: #666;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover{
        color: #00d1b2;
      }
      span{
        margin-left: 3px;
        font-size: 14px;
      }
    }
    .el-tabs__header{
      margin-bottom: 3px;
    }
    position: relative;
    .el-input--medium .el-input__inner{
      height: 44px;line-height: 44px;width: 280px;
      border: none;
      text-align: right;
    }
  }
  .base-model-wrapper{
    .el-dialog__header{
      padding: 10px;
      .el-dialog__headerbtn{
        top: 10px;
        right: 10px;
      }
    }
    .el-dialog__body{
      padding:10px 10px 10px 10px;
      .base-modal-body{
        min-height: 100px;
        max-height:650px;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #e0e0e0;
      }
    }
    .el-dialog__footer{
      padding: 10px;
    }
  }
</style>