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

<template>
  <div class="trial-information">
    <el-descriptions
      :column="2"
      border
      style="width: 1000px"
      :labelStyle="{
        whiteSpace: 'nowrap',
      }"
      :contentStyle="{
        wordBreak: 'break-all',
        whiteSpace: 'nowrap',
      }"
    >
      <el-descriptions-item :label="$t('trials:trials-list:form:trialId')">
        {{ trialInfo.TrialCode }}
        <el-tag
          v-show="trialInfo.TrialStatusStr"
          size="small"
          style="margin-left: 10px"
        >
          ( {{ $fd('TrialStatusEnum', trialInfo.TrialStatusStr) }} )
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:trialType')">
        {{ $fd('TrialType', trialInfo.TrialType) }}
      </el-descriptions-item>

      <el-descriptions-item
        :label="$t('trials:trials-list:form:experimentName')"
        :contentStyle="{ 'max-width': '300px' }"
      >
        <div class="ell" :title="trialInfo.ExperimentName">
          {{ trialInfo.ExperimentName }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        :label="$t('trials:trials-list:form:researchNumber')"
        :contentStyle="{ 'max-width': '300px' }"
      >
        <div class="ell" :title="trialInfo.ResearchProgramNo">
          {{ trialInfo.ResearchProgramNo }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item :label="$t('trials:trials-list:form:researchUnit')">
        <div class="ell" :title="trialInfo.MainResearchUnit">
          {{ trialInfo.MainResearchUnit }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:pi')">
        <div class="ell" :title="trialInfo.HeadPI">
          {{ trialInfo.HeadPI }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item :label="$t('trials:trials-list:form:sponsor')">
        <div class="ell" :title="trialInfo.Sponsor">
          {{ trialInfo.Sponsor }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:cro')">
        <div class="ell" :title="trialInfo.CRO">
          {{ trialInfo.CRO }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item
        :label="$t('trials:trials-list:form:declarationType')"
      >
        <span v-if="trialInfo.DeclarationTypeEnumList">{{
          trialInfo.DeclarationTypeEnumList.map((v) =>
            $fd('DeclarationType', v)
          ).join(', ')
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:phase')">
        {{ trialInfo.Phase }}
      </el-descriptions-item>

      <el-descriptions-item
        :label="$t('trials:trials-list:form:indicationType')"
      >
        {{ $fd('IndicationType', trialInfo.IndicationTypeId, 'id') }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:indication')">
        {{ $fd('Indication', trialInfo.IndicationEnum)
        }}{{ trialInfo.Indication }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:modality')">
        <div class="ell" :title="trialInfo.Modalitys">
          {{ trialInfo.Modalitys }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:siteCount')">
        {{ trialInfo.PlanSiteCount }}
      </el-descriptions-item>

      <el-descriptions-item :label="$t('trials:trials-list:form:patientsNum')">
        {{ trialInfo.ExpectedPatients }}
      </el-descriptions-item>
      <el-descriptions-item
        :label="$t('trials:trials-list:form:timePointsPerPatient')"
      >
        {{ trialInfo.TimePointsPerPatient }}
      </el-descriptions-item>

      <el-descriptions-item
        :span="2"
        :label="$t('trials:trials-list:form:visitCount')"
      >
        {{ trialInfo.PlanVisitCount }}
      </el-descriptions-item>

      <el-descriptions-item
        :span="2"
        :label="$t('trials:trials-list:form:criterion')"
      >
        <div class="ell" :title="trialInfo.Criterion">
          {{ trialInfo.Criterion }}
        </div>
      </el-descriptions-item>
      <!--      <el-descriptions-item :label="$t('trials:trials-list:form:reviewMode')">-->
      <!--        <span>{{$fd('ReadingType', trialInfo.ReadingType)}}</span>-->
      <!--      </el-descriptions-item>-->

      <el-descriptions-item :label="$t('trials:trials-list:form:expedited')">
        {{ $fd('YesOrNoForInt', trialInfo.Expedited) }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('trials:trials-list:form:projectCycle')">
        {{ trialInfo.ProjectCycle }}
      </el-descriptions-item>

      <el-descriptions-item
        :label="$t('trials:trials-list:form:totalReviewers')"
      >
        {{ trialInfo.TotalReviewers }}
      </el-descriptions-item>
      <el-descriptions-item
        :label="$t('trials:trials-list:form:typeofReviewers')"
      >
        <span v-if="trialInfo.AttendedReviewerTypeEnumList">{{
          trialInfo.AttendedReviewerTypeEnumList.map((v) =>
            $fd('AttendedReviewerType', v)
          ).join(', ')
        }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-badge
      :value="trialInfo.UserFeedBackUnDealedCount || 0"
      :max="99"
      class="inBox"
      v-hasPermi="['role:pm', 'role:admin', 'role:apm']"
    >
      <i class="el-icon-message" @click.stop="openFeedBack"></i>
    </el-badge>
  </div>
</template>
<script>
import { getTrialInfo } from '@/api/trials'
export default {
  data() {
    return {
      trialInfo: {},
      trialId: '',
      trialStatus: '',
      formLoading: false,
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.initForm()
  },
  methods: {
    initForm() {
      this.formLoading = true
      getTrialInfo(this.trialId)
        .then((res) => {
          this.formLoading = false
          this.trialInfo = res.Result
          this.trialInfo.ReviewTypeList =
            this.trialInfo.ReviewTypeList.length > 0
              ? this.trialInfo.ReviewTypeList.join(', ')
              : ''
          var modalityArr = []
          res.Result.ModalityIds.map((i) => {
            modalityArr.push(this.$fd('Modality', i, 'id'))
          })
          this.trialInfo.ModalityList = modalityArr.join(', ')
          this.trialInfo.Criterion =
            res.Result.CriterionList && res.Result.CriterionList.length > 0
              ? res.Result.CriterionList.join(', ')
              : ''
          // this.trialInfo.Expedited = this.$fd('Trial_BasicInfo', res.Result.Expedited)
          // this.trialInfo.AttendedReviewerType = this.$fd('Trial_BasicInfo', res.Result.AttendedReviewerType)
        })
        .catch(() => {
          this.formLoading = false
        })
    },
    // 打开反馈意见列表
    openFeedBack() {
      this.$FBT({
        data: {
          code: this.$route.query.trialCode,
          name: this.$route.query.researchProgramNo,
          trialId: this.trialId,
        },
        callBack: () => {
          this.initForm()
        },
      })
    },
  },
}
</script>
<style lang="scss">
.trial-information {
  min-height: 100%;
  padding: 10px 0 0 10px;
  background: #fff;
}
.inBox {
  font-size: 32px;
  margin-top: 30px;
  cursor: pointer;
}
.ell {
  width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>