336 lines
		
	
	
		
			9.0 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			336 lines
		
	
	
		
			9.0 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <div class="app-container">
 | 
						|
    <div class="ImageReviewTask-list app-container">
 | 
						|
      <el-collapse v-model="activeNames">
 | 
						|
        <el-collapse-item
 | 
						|
          title="Timepoint Efficacy Assessment"
 | 
						|
          name="TimepointEfficacy"
 | 
						|
        >
 | 
						|
          <el-table
 | 
						|
            ref="TimepointEfficacyTable"
 | 
						|
            :data="timepointEfficacyList"
 | 
						|
            stripe
 | 
						|
            size="small"
 | 
						|
          >
 | 
						|
            <el-table-column type="index" width="60" />
 | 
						|
            <el-table-column
 | 
						|
              prop="VisitName"
 | 
						|
              label="Visit"
 | 
						|
              show-overflow-tooltip
 | 
						|
              min-width="120"
 | 
						|
            >
 | 
						|
              <template
 | 
						|
                slot-scope="scope"
 | 
						|
              >{{ scope.row.VisitName + '    ' }}
 | 
						|
                <el-button
 | 
						|
                  type="text"
 | 
						|
                  size="small"
 | 
						|
                  @click="goCRF(scope.row)"
 | 
						|
                >CRF</el-button>
 | 
						|
                <el-button
 | 
						|
                  type="text"
 | 
						|
                  size="small"
 | 
						|
                  @click="goVisitImage(scope.row)"
 | 
						|
                >Image</el-button>
 | 
						|
              </template>
 | 
						|
            </el-table-column>
 | 
						|
            <el-table-column
 | 
						|
              prop="OverallResponse"
 | 
						|
              label="Timepoint Efficacy Assessment"
 | 
						|
              show-overflow-tooltip
 | 
						|
              min-width="100"
 | 
						|
            />
 | 
						|
 | 
						|
            <el-table-column
 | 
						|
              prop="Agree"
 | 
						|
              label="Agree or not"
 | 
						|
              show-overflow-tooltip
 | 
						|
              min-width="100"
 | 
						|
            >
 | 
						|
              <template slot-scope="scope">
 | 
						|
                <el-select
 | 
						|
                  v-model="scope.row.GlobalRSSelect.Agree"
 | 
						|
                  style="width: 100%"
 | 
						|
                  size="small"
 | 
						|
                >
 | 
						|
                  <!-- <el-option label="Please select" /> -->
 | 
						|
                  <el-option :value="true" label="Agree" />
 | 
						|
                  <el-option :value="false" label="Disagree" />
 | 
						|
                </el-select>
 | 
						|
              </template>
 | 
						|
            </el-table-column>
 | 
						|
 | 
						|
            <el-table-column
 | 
						|
              prop="newRS"
 | 
						|
              label="Updated Timepoint Efficacy Assessment"
 | 
						|
              show-overflow-tooltip
 | 
						|
              min-width="100"
 | 
						|
            >
 | 
						|
              <template slot-scope="scope">
 | 
						|
                <el-select
 | 
						|
                  v-model="scope.row.GlobalRSSelect.NewRS"
 | 
						|
                  style="width: 100%"
 | 
						|
                  size="small"
 | 
						|
                >
 | 
						|
                  <!-- <el-option
 | 
						|
                    v-for="item in VisitLymphNodeTargetList"
 | 
						|
                    :key="item.value"
 | 
						|
                    :label="item.TRORRES"
 | 
						|
                    :value="item.TRORRES"
 | 
						|
                  /> -->
 | 
						|
                  <el-option value="test1" label="test1" />
 | 
						|
                  <el-option value="test2" label="test2" />
 | 
						|
                </el-select>
 | 
						|
              </template>
 | 
						|
            </el-table-column>
 | 
						|
 | 
						|
            <el-table-column
 | 
						|
              prop="Note"
 | 
						|
              label="Comments for This Timepoint"
 | 
						|
              min-width="100"
 | 
						|
            >
 | 
						|
              <template slot-scope="scope">
 | 
						|
                <el-input
 | 
						|
                  v-model="scope.row.GlobalRSSelect.Note"
 | 
						|
                  type="text"
 | 
						|
                  placeholder=""
 | 
						|
                  size="small"
 | 
						|
                  :disabled="isReportSaved"
 | 
						|
                />
 | 
						|
              </template>
 | 
						|
            </el-table-column>
 | 
						|
          </el-table>
 | 
						|
        </el-collapse-item>
 | 
						|
 | 
						|
        <el-collapse-item
 | 
						|
          title="Comments for the Subject"
 | 
						|
          name="CommentsForSubject"
 | 
						|
        >
 | 
						|
          <el-input
 | 
						|
            v-model="subjectNote"
 | 
						|
            type="text"
 | 
						|
            placeholder=""
 | 
						|
            size="small"
 | 
						|
            :disabled="isReportSaved"
 | 
						|
          />
 | 
						|
        </el-collapse-item>
 | 
						|
 | 
						|
        <el-collapse-item
 | 
						|
          title="Previous Global Reads"
 | 
						|
          name="PreviousGlobalReads"
 | 
						|
        >
 | 
						|
          <el-table
 | 
						|
            ref="GlobalReadsTable"
 | 
						|
            :data="previousGlobalReadsList"
 | 
						|
            stripe
 | 
						|
            size="small"
 | 
						|
          >
 | 
						|
            <el-table-column type="index" width="60" />
 | 
						|
            <el-table-column
 | 
						|
              prop="VisitName"
 | 
						|
              label="Visit"
 | 
						|
              show-overflow-tooltip
 | 
						|
              min-width="100"
 | 
						|
            />
 | 
						|
            <el-table-column
 | 
						|
              prop="OverallResponse"
 | 
						|
              label="Timepoint Efficacy Assessment"
 | 
						|
              show-overflow-tooltip
 | 
						|
              min-width="100"
 | 
						|
            />
 | 
						|
          </el-table>
 | 
						|
        </el-collapse-item>
 | 
						|
      </el-collapse>
 | 
						|
      <div id="footer">
 | 
						|
        <el-button
 | 
						|
          type="primary"
 | 
						|
          style="float: left; margin-left: 500px"
 | 
						|
          :disabled="isReportSaved"
 | 
						|
          @click="AddGlobalReport"
 | 
						|
        >Save</el-button>
 | 
						|
        <!-- <el-button
 | 
						|
          type="primary"
 | 
						|
          style="float: left; margin-left: 600px"
 | 
						|
          :disabled="isReportSaved"
 | 
						|
          @click="submiteReport"
 | 
						|
          >Submit Report</el-button
 | 
						|
        > -->
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
    <div v-if="dialogVisible">
 | 
						|
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%">
 | 
						|
        <baseline-task v-if="rowVisitNum == 1" />
 | 
						|
        <visit-task
 | 
						|
          v-if="rowVisitNum != 1"
 | 
						|
          :global-row-visit-num="rowVisitNum"
 | 
						|
          :visit-tp-code="rowTpCode"
 | 
						|
        />
 | 
						|
      </el-dialog>
 | 
						|
    </div>
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
import {
 | 
						|
  getHistoryVisitRsList,
 | 
						|
  getHistoryGlobalRsList,
 | 
						|
  AddGlobalReport
 | 
						|
} from '@/api/reading'
 | 
						|
import BaselineTask from '../tp/baselineTask.vue'
 | 
						|
import VisitTask from '../tp/visitTask.vue'
 | 
						|
 | 
						|
export default {
 | 
						|
  name: 'GlobalTask',
 | 
						|
  components: { VisitTask, BaselineTask },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      isReportSaved: false,
 | 
						|
      pageTPInfo: '',
 | 
						|
      activeNames: [
 | 
						|
        'TimepointEfficacy',
 | 
						|
        'CommentsForSubject',
 | 
						|
        'PreviousGlobalReads'
 | 
						|
      ],
 | 
						|
      subjectNote: '',
 | 
						|
      subjectCode: '',
 | 
						|
 | 
						|
      dialogVisible: false,
 | 
						|
      rowVisitNum: 0,
 | 
						|
      rowTpCode: '',
 | 
						|
      dialogTitle: '',
 | 
						|
 | 
						|
      globalInfo: {},
 | 
						|
      timepointEfficacyList: [],
 | 
						|
      previousGlobalReadsList: []
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
  created() {
 | 
						|
    this.globalInfo = this.$route.query
 | 
						|
  },
 | 
						|
 | 
						|
  mounted() {
 | 
						|
    this.getTimepointEfficacy()
 | 
						|
    this.getPreviousGlobalReads()
 | 
						|
  },
 | 
						|
 | 
						|
  methods: {
 | 
						|
    getTimepointEfficacy() {
 | 
						|
      getHistoryVisitRsList(
 | 
						|
        this.globalInfo.TrialId,
 | 
						|
        this.globalInfo.SubjectId,
 | 
						|
        this.globalInfo.VisitNum,
 | 
						|
        this.globalInfo.Id,
 | 
						|
        this.globalInfo.WorkloadCode
 | 
						|
      ).then((res) => {
 | 
						|
        this.timepointEfficacyList = res.Result
 | 
						|
      })
 | 
						|
    },
 | 
						|
 | 
						|
    getPreviousGlobalReads() {
 | 
						|
      getHistoryGlobalRsList(
 | 
						|
        this.globalInfo.TrialId,
 | 
						|
        this.globalInfo.SubjectId,
 | 
						|
        this.globalInfo.VisitNum,
 | 
						|
        this.globalInfo.Id
 | 
						|
      ).then((res) => {
 | 
						|
        this.previousGlobalReadsList = res.Result.PreviousGlobalReadsList
 | 
						|
        this.subjectNote = res.Result.SubjectNote
 | 
						|
      })
 | 
						|
    },
 | 
						|
 | 
						|
    AddGlobalReport() {
 | 
						|
      var globalData = {}
 | 
						|
 | 
						|
      globalData.GlobalId = this.globalInfo.Id
 | 
						|
      globalData.SubjectNote = this.subjectNote
 | 
						|
      globalData.SubjectCode = this.globalInfo.SubjectCode
 | 
						|
      globalData.SubjectId = this.globalInfo.SubjectId
 | 
						|
 | 
						|
      globalData.GlobalRSReportList = []
 | 
						|
      this.timepointEfficacyList.forEach((element) => {
 | 
						|
        globalData.GlobalRSReportList.push({
 | 
						|
          GlobalId: this.globalInfo.Id,
 | 
						|
          TpCode: element.TpCode,
 | 
						|
          VisitNum: element.VisitNum,
 | 
						|
          Agree: element.GlobalRSSelect.Agree,
 | 
						|
          NewRS: element.GlobalRSSelect.NewRS,
 | 
						|
          Note: element.GlobalRSSelect.Note
 | 
						|
        })
 | 
						|
      })
 | 
						|
 | 
						|
      AddGlobalReport(globalData).then((res) => {
 | 
						|
        this.$message.success('Report saved successfully')
 | 
						|
        // this.isReportSaved = true
 | 
						|
 | 
						|
        this.getTimepointEfficacy()
 | 
						|
        this.getPreviousGlobalReads()
 | 
						|
      })
 | 
						|
    },
 | 
						|
 | 
						|
    goVisitImage(row) {
 | 
						|
      const token = zzSessionStorage.getItem('TokenKey')
 | 
						|
      const routes = this.$router.resolve({
 | 
						|
        path: '/showdicom',
 | 
						|
        query: { tpCode: row.TpCode, visitNum: row.VisitNum, studyId: row.StudyId, type: 'Global', token: token }
 | 
						|
      })
 | 
						|
      window.setTimeout(function() {
 | 
						|
        window.open(routes.href, '_blank')
 | 
						|
      }, 1000)
 | 
						|
    },
 | 
						|
    goCRF(row) {
 | 
						|
      this.rowVisitNum = row.VisitNum
 | 
						|
      this.dialogVisible = true
 | 
						|
      this.rowTpCode = row.TpCode
 | 
						|
      this.dialogTitle =
 | 
						|
        this.globalInfo.TrialCode +
 | 
						|
        '/' +
 | 
						|
        this.globalInfo.SubjectCode +
 | 
						|
        '/' +
 | 
						|
        row.VisitName
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style lang="scss">
 | 
						|
.ImageReviewTask-list {
 | 
						|
  //   height: 100%;
 | 
						|
 | 
						|
  .el-collapse-item.is-disabled .el-collapse-item__header {
 | 
						|
    color: black;
 | 
						|
  }
 | 
						|
 | 
						|
  .el-collapse-item__header {
 | 
						|
    // background-color: #f0f0f0;
 | 
						|
    height: 40px;
 | 
						|
    line-height: 40px;
 | 
						|
    font-weight: bold;
 | 
						|
    padding: 0 5px;
 | 
						|
  }
 | 
						|
 | 
						|
  //   .el-collapse-item__wrap {
 | 
						|
  //     padding: 0 5px;
 | 
						|
  //   }
 | 
						|
  //   .el-collapse {
 | 
						|
  //     margin-bottom: 100px;
 | 
						|
  //   }
 | 
						|
  //   .toolbar {
 | 
						|
  //     margin: 5px 0px;
 | 
						|
  //     .mr {
 | 
						|
  //       margin-right: 5px;
 | 
						|
  //       width: 130px;
 | 
						|
  //     }
 | 
						|
  //   }
 | 
						|
 | 
						|
  #footer {
 | 
						|
    position: fixed;
 | 
						|
    bottom: 30px;
 | 
						|
    width: 100%;
 | 
						|
    // height: 30px; /*脚部的高度*/
 | 
						|
    // background: #6cf;
 | 
						|
    clear: both;
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 | 
						|
 |