irc_web/.svn/pristine/e8/e8a729a807924f2e49c1fd3cf8f67cb01533f640.svn-base

<template>
  <div>
    <div v-for="(qs,index) in questions" :key="index" v-loading="loading" class="lesions lesions_wrapper">
      <h4 v-if="qs.Type === 'group'" style="color: #ddd;padding: 5px 0px;margin: 0;">
        {{ qs.GroupName }}
      </h4>
      <div class="lesion_list">
        <div v-for="item in qs.Childrens" v-show="!(isBaseLineTask && item.LesionType === 2)" :key="item.Id">
          <div v-if="item.Type === 'table'" class="flex-row">
            <div class="title">{{ item.QuestionName }}</div>
            <div v-if="readingTaskState<2 && (isBaseLineTask || item.LesionType === 2)" class="add-icon" @click.prevent="handleAdd(item)">
              <i class="el-icon-plus" />
            </div>
          </div>
          <!-- @change="handleCollapseChange(qs.Childrens,item)" -->
          <el-collapse
            v-if="item.Type === 'table' && item.TableQuestions"
            v-model="activeName"
            accordion
            @change="handleCollapseChange"
          >
            <el-collapse-item
              v-for="(q,i) in item.TableQuestions.Answers"
              :key="i"
              :name="`${item.Id}_${q.RowIndex}`"
            >
              <template slot="title">

                <div style="width:300px;position: relative;" :style="{color:(activeName===item.Id+q.RowIndex?'#ffeb3b':'#fff')}">

                  <el-tooltip v-show="readingTaskState<2 && !!item.TableQuestions.Answers[i].RowId && !isBaseLineTask" class="item" content="分裂" placement="left">
                    <i class="el-icon-plus" style="color:#fff;font-size: 16px;" @click.stop="handleSplit(item.TableQuestions.Answers[i].RowId,item.Id)" />
                  </el-tooltip>
                  {{ getLesionName(item.OrderMark,q.RowIndex) }}
                  <el-tooltip v-if="!item.TableQuestions.Answers[i].isLesionSaved" class="item" effect="dark" content="未保存" placement="bottom">
                    <i class="el-icon-warning" style="color:red" />
                  </el-tooltip>
                  <div style="position: absolute;left: 60px;top: 2px;">
                    <div style="display: flex;flex-direction: row;font-size: 10px;width:200px;">
                      <div v-if="item.TableQuestions.Answers[i].lesionPart" style="margin-left:10px;margin-bottom:5px;">
                        {{ item.TableQuestions.Answers[i].lesionPart }}
                      </div>
                      <div style="margin-left:10px;margin-bottom:5px;">
                            <span v-if="item.TableQuestions.Answers[i].lesionLength && item.TableQuestions.Answers[i].lesionShort">
                              {{ item.TableQuestions.Answers[i].lesionShort }}mm
                            </span>
                        <span v-else>
                              {{ item.TableQuestions.Answers[i].lesionLength? `${item.TableQuestions.Answers[i].lesionLength}mm`:'' }}
                            </span>
                      </div>

                    </div>
                  </div>
                </div>

              </template>
              <MeasurementForm
                :ref="`${item.Id}_${q.RowIndex}`"
                :questions="item.TableQuestions.Questions"
                :answers="item.TableQuestions.Answers[i]"
                :lesion-type="item.LesionType"
                :order-mark="item.OrderMark"
                :table-questions="tableQuestions"
                :row-index="String(q.RowIndex)"
                :question-name="item.QuestionName"
                :parent-qs-id="item.Id"
                :visit-task-id="visitTaskId"
                :is-current-task="isCurrentTask"
                :reading-task-state="readingTaskState"
                :is-base-line-task="isBaseLineTask"
                @getReadingQuestionAndAnswer="getReadingQuestionAndAnswer"
                @determineExistsUnsavedLession="determineExistsUnsavedLession"
                @resetQuestions="resetQuestions"
                @close="close"
              />
            </el-collapse-item>

          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DicomEvent from '../DicomEvent'
export default {
name: "PCWG3Questions",
  data() {
    return {
      loading: false,
      activeName: null,
      isBaseLineTask: false
    }
  },
  props: {
    questions: {
      type: Array,
      default() { return [] }
    }
  },
  mounted() {
    console.log('questions', this.questions)
    DicomEvent.$on('loadMeasurementList', async obj => {
      this.initPage(obj)
      console.log('loadMeasurementList')
    })
  },
  methods: {
    initPage(obj) {
      if (this.visitTaskId !== obj.visitTaskId) {
        this.visitTaskId = obj.visitTaskId
        this.taskBlindName = obj.taskBlindName
        this.activeName = ''
        this.activeItem.activeRowIndex = null
        this.activeItem.activeCollapseId = null
        this.$refs['ecrf'].getQuestions(obj.visitTaskId)
      }
      var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === obj.visitTaskId)
      if (idx > -1) {
        if (this.visitTaskList[idx].ReadingQuestions.length > 0) {
          this.questions = this.visitTaskList[idx].ReadingQuestions
        }
        this.readingTaskState = this.visitTaskList[idx].ReadingTaskState
        this.isBaseLineTask = this.visitTaskList[idx].IsBaseLineTask
        this.isCurrentTask = this.visitTaskList[idx].IsCurrentTask
        this.getTableQuestions()
        if (this.isFirstRender) {
          this.$nextTick(() => {
            this.tableQuestions.forEach(item => {
              item.TableQuestions.Answers.forEach(i => {
                var refName = `${item.Id}_${i.RowIndex}`
                this.$refs[refName][0].initForm()
              })
            })
          })
        }
      }
      if (!this.isFirstRender) {
        this.isFirstRender = true
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.measurement-wrapper{
  overflow-y: auto;
  // overflow: hidden;

  .container{
    padding: 10px;
  }
  .title{
    padding: 5px;
    font-weight: bold;
    color: #ddd;
    font-size: 15px;

  }
  .add-icon{
    padding: 5px;
    font-weight: bold;
    color: #ddd;
    font-size: 15px;
    border: 1px solid #938b8b;
    margin-bottom: 2px;
    cursor: pointer;
  }
  .add-icon:hover{
    background-color: #607d8b;
  }

  .flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #424242;

  }
  .lesion_list{
    position: relative;
  }
  .el-collapse{
    border-bottom:none;
    >>>.el-collapse-item{
      background-color: #000!important;
      color: #ddd;

    }
    >>>.el-collapse-item__header{
      background-color: #000!important;
      color: #ddd;
      border-bottom-color:#5a5a5a;
      padding-left: 5px;
      height: 35px;
      line-height: 35px;
    }
    >>>.el-collapse-item__wrap{
      background-color: #000!important;
      color: #ddd;
    }
    >>>.el-collapse-item__content{
      width:260px;
      position: absolute;
      top: 0px;
      right: 0px;
      border: 1px solid #ffeb3b;
      z-index: 1;
      color: #ddd;
      padding: 5px;
      background-color:#1e1e1e;
    }

  }
}
</style>