irc_web/src/views/trials/trials-panel/trial-summary/trial-document/index.vue

<template>
  <div class="trialDocument">
    <div class="left">
      <div class="top" v-if="isManage">
        <div class="viewCheck">
          <span>{{ $t('trials:trialDocument:view') }}</span>
          <el-switch
            v-model="viewStatus"
            active-color="#13ce66"
            inactive-color="#409eff"
            :active-value="false"
            :inactive-value="true"
            :active-text="$t('trials:trialDocument:viewStatus:manage')"
            :inactive-text="$t('trials:trialDocument:viewStatus:inspect')"
            @change="handleChange"
          >
          </el-switch>
        </div>
      </div>
      <div
        :class="{
          menuBox: true,
          noTop: !isManage,
        }"
      >
        <Menu
          ref="Menu"
          :viewStatus="viewStatus"
          :menuId.sync="Id"
          :SubIdentificationEnum.sync="SubIdentificationEnum"
          :ArchiveTypeEnum.sync="ArchiveTypeEnum"
          :rowData.sync="rowData"
        />
      </div>
    </div>
    <div class="main">
      <report-doc
        v-if="[0, 1].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <file-record
        v-if="[2].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <!--v-if="[4].includes(SubIdentificationEnum)"-->
      <train-record
        v-if="[4].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <temp
        v-if="[6].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <!--阅片人简历-->
      <curriculum-vitae
        v-if="[7].includes(SubIdentificationEnum)"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
      />
      <!--阅片人资质材料-->
      <certificate
        v-if="[8].includes(SubIdentificationEnum)"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        :Id="Id"
        :viewStatus="viewStatus"
      />
      <!--医学审核-->
      <medical-feedback
        v-if="[9].includes(SubIdentificationEnum)"
        :isDoc="true"
        :TITLE="TITLE"
        :viewStatus="viewStatus"
      />
      <!--阅片记录-->
      <reading-tracking
        v-if="[11].includes(SubIdentificationEnum)"
        :isDoc="true"
        :TITLE="TITLE"
        :viewStatus="viewStatus"
      />
      <!--申报方同意入项记录-->
      <entry-record
        v-if="[12].includes(SubIdentificationEnum)"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        :Id="Id"
        :viewStatus="viewStatus"
      />
      <!--培训记录/共享资料-->
      <Attachments-management
        v-if="[13].includes(SubIdentificationEnum)"
        :isDoc="true"
        :TITLE="TITLE"
        :viewStatus="viewStatus"
      />
    </div>
  </div>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import Menu from './components/menu.vue'
import reportDoc from './components/report_doc/index.vue'
import fileRecord from './components/fileRecord/index.vue'
import trainRecord from './components/trainRecord/index.vue'
import temp from './components/template/index.vue'

// 阅片人相关
import curriculumVitae from './components/viewer/curriculumVitae/index.vue'
import certificate from './components/viewer/certificate/index.vue'
import entryRecord from './components/viewer/entryRecord/index.vue'
import readingTracking from '@/views/trials/trials-panel/reading/reading-tracking/index.vue'
import medicalFeedback from '@/views/trials/trials-panel/reading/pm-medical-feedback/index.vue'
import AttachmentsManagement from '@/views/trials/trials-panel/attachments/attachment-management/index.vue'
export default {
  name: 'trialDocument',
  components: {
    BaseContainer,
    Menu,
    reportDoc,
    fileRecord,
    trainRecord,
    temp,

    entryRecord,
    certificate,
    curriculumVitae,
    readingTracking,
    AttachmentsManagement,
    medicalFeedback,
  },
  data() {
    return {
      viewStatus: true,
      Id: null,
      SubIdentificationEnum: null,
      ArchiveTypeEnum: null,
      rowData: {},
    }
  },
  computed: {
    isInspect() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:inspect',
      ])
    },
    isManage() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:manage',
      ])
    },
    TITLE() {
      return `${this.$fd('ArchiveType', this.ArchiveTypeEnum)} — ${
        this.isEN ? this.rowData.Name : this.rowData.NameCN
      }`
    },
  },
  methods: {
    handleChange() {
      // this.Id = null
      this.SubIdentificationEnum = null
      this.ArchiveTypeEnum = null
      this.rowData = {}
    },
    getMenu() {
      this.$refs.Menu.getMenu()
    },
  },
}
</script>
<style lang="scss" scoped>
.trialDocument {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  .left {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #e4e7ed;
    .top {
      width: 100%;
      max-height: 75px;
      display: flex;
      flex-wrap: wrap;
      padding: 0 15px;
      margin-bottom: 5px;
      .viewCheck {
        width: 100%;
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
    .menuBox {
      width: 100%;
      height: calc(100% - 80px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        //display: none; /* Chrome Safari */
        width: 8px;
        height: 8px;
        background-color: #e4e4e4;
        border-radius: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #a1a3a9;
        border-radius: 6px;
      }
    }
    .noTop {
      height: 100%;
    }
  }
  .main {
    width: calc(100% - 300px);
    height: 100%;
    padding: 10px;
  }
}
::v-deep .topForm {
  .el-form-item {
    margin-right: 30px;
    margin-bottom: 12px;
  }
}
::v-deep .line {
  width: 100%;
  height: 1px;
  margin: 0 0 12px 0;
  border-top: 1px solid #ebeef5;
}
::v-deep .box-body .search .base-search-form .el-form-item {
  margin-bottom: 15px;
}
</style>