423 lines
14 KiB
Plaintext
423 lines
14 KiB
Plaintext
<template>
|
|
<div class="measurement-wrapper" :style="{'height':height+10+'px'}">
|
|
|
|
<div class="container" :style="{'height':height+'px'}">
|
|
<h3 style="color: #ddd;padding: 5px 0px;margin: 0;">
|
|
{{ taskBlindName }}
|
|
</h3>
|
|
<!-- 非测量问题 -->
|
|
<div class="lesions">
|
|
<ECRF ref="ecrf" />
|
|
</div>
|
|
<!-- 测量问题 -->
|
|
<div v-for="(qs,index) in questions" :key="index" v-loading="loading" class="lesions">
|
|
<h4 v-if="qs.Type === 'group'" style="color: #ddd;padding: 5px 0px;margin: 0;">
|
|
{{ qs.GroupName }}
|
|
</h4>
|
|
<div v-for="item in qs.Childrens" :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>
|
|
|
|
<el-collapse
|
|
v-if="item.Type === 'table' && item.TableQuestions"
|
|
v-model="activeName"
|
|
accordion
|
|
@change="handleCollapseChange(qs.Childrens,item)"
|
|
>
|
|
<el-collapse-item
|
|
v-for="(q,i) in item.TableQuestions.Answers"
|
|
:key="i"
|
|
:name="item.Id+q.RowIndex"
|
|
>
|
|
<template slot="title">
|
|
<span>{{ `${item.OrderMark}${String(q.RowIndex).padStart(2, '0')}` }}</span>
|
|
</template>
|
|
<MeasurementForm
|
|
:ref="`${item.Id}${q.RowIndex}`"
|
|
:questions="item.TableQuestions.Questions"
|
|
:answers="item.TableQuestions.Answers[i]"
|
|
:lesion-type="item.LesionType"
|
|
:order-mark="item.OrderMark"
|
|
:parent-qs-id="item.Id"
|
|
:visit-task-id="visitTaskId"
|
|
:is-current-task="isCurrentTask"
|
|
:reading-task-state="readingTaskState"
|
|
:is-base-line-task="isBaseLineTask"
|
|
@refreshReadingQuestionAndAnswer="refreshReadingQuestionAndAnswer"
|
|
@determineExistsUnsavedLession="determineExistsUnsavedLession"
|
|
/>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getReadingQuestionAndAnswer } from '@/api/trials'
|
|
import Store from './Store'
|
|
import ECRF from './ECRF.vue'
|
|
import MeasurementForm from './MeasurementForm'
|
|
export default {
|
|
name: 'MeasurementList',
|
|
components: {
|
|
ECRF,
|
|
MeasurementForm
|
|
},
|
|
props: {
|
|
isCurrentTask: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
height: window.innerHeight - 140,
|
|
questions: [],
|
|
activeName: '',
|
|
activeItem: {
|
|
activeRowIndex: null,
|
|
activeCollapseId: null
|
|
},
|
|
visitTaskId: '',
|
|
loading: false,
|
|
unSaveTargets: [],
|
|
readingTaskState: 2,
|
|
isBaseLineTask: false,
|
|
taskBlindName: '',
|
|
tableQuestions: []
|
|
}
|
|
},
|
|
mounted() {
|
|
// Store.$on('getMeasuredData', visitTaskId => {
|
|
// this.visitTaskId = visitTaskId
|
|
// this.$refs['ecrf'].getQuestions(visitTaskId)
|
|
// this.getReadingQuestionAndAnswer(visitTaskId)
|
|
// })
|
|
|
|
Store.$on('loadMeasurementList', obj => {
|
|
if (this.visitTaskId === obj.visitTaskId) return
|
|
this.visitTaskId = obj.visitTaskId
|
|
this.taskBlindName = obj.taskBlindName
|
|
this.$refs['ecrf'].getQuestions(obj.visitTaskId)
|
|
this.getReadingQuestionAndAnswer(obj.visitTaskId)
|
|
console.log('loadMeasurementList')
|
|
})
|
|
Store.$on('setCollapseActive', measuredData => {
|
|
this.setCollapseActive(measuredData)
|
|
console.log('setCollapseActive')
|
|
})
|
|
|
|
window.addEventListener('resize', this.setHeight)
|
|
},
|
|
beforeDestroy() {
|
|
Store.$off('loadMeasurementList')
|
|
Store.$off('setCollapseActive')
|
|
},
|
|
methods: {
|
|
|
|
getReadingQuestionAndAnswer(visitTaskId) {
|
|
// this.loading = true
|
|
const loading = this.$loading({ fullscreen: true })
|
|
var params = {
|
|
trialId: this.$router.currentRoute.query.trialId,
|
|
visitTaskId: visitTaskId
|
|
}
|
|
getReadingQuestionAndAnswer(params).then(res => {
|
|
this.questions = res.Result.SinglePage
|
|
this.readingTaskState = res.OtherInfo.readingTaskState
|
|
this.isBaseLineTask = res.Result.IsBaseLineTask
|
|
// this.loading = false
|
|
this.getTableQuestions()
|
|
loading.close()
|
|
}).catch(() => {
|
|
// this.loading = false
|
|
loading.close()
|
|
})
|
|
},
|
|
getTableQuestions() {
|
|
this.tableQuestions = []
|
|
this.questions.map(item => {
|
|
if (item.Type === 'table') {
|
|
this.tableQuestions.push(item)
|
|
}
|
|
if (item.Childrens.length > 0) {
|
|
this.getTableQuestionsChild(item.Childrens)
|
|
}
|
|
})
|
|
},
|
|
getTableQuestionsChild(obj) {
|
|
obj.map(item => {
|
|
if (item.Type === 'table') {
|
|
this.tableQuestions.push(item)
|
|
}
|
|
if (item.Childrens.length > 0) {
|
|
this.getTableQuestionsChild(item.Childrens)
|
|
}
|
|
})
|
|
},
|
|
refreshReadingQuestionAndAnswer(type) {
|
|
if (type === 0) {
|
|
// 删除
|
|
this.activeName = ''
|
|
this.activeItem.activeRowIndex = null
|
|
this.activeItem.activeCollapseId = null
|
|
}
|
|
|
|
this.getReadingQuestionAndAnswer(this.visitTaskId)
|
|
},
|
|
setHeight() {
|
|
this.height = window.innerHeight - 140
|
|
},
|
|
isCanActiveTool() {
|
|
this.getUnSaveTarget()
|
|
if (this.unSaveTargets.length > 0) {
|
|
var rowIndex = String(this.unSaveTargets[0].rowIndex)
|
|
var questionId = this.unSaveTargets[0].questionId
|
|
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
|
|
if (rowIndex === this.activeItem.activeRowIndex && questionId === this.activeItem.activeCollapseId && !this.$refs[refName][0].questionForm.MeasureData) {
|
|
return true
|
|
} else {
|
|
this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存，不允许继续添加！`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => {}
|
|
})
|
|
return false
|
|
}
|
|
} else {
|
|
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
|
|
if (this.activeItem.activeRowIndex && this.$refs[refName][0].questionForm.MeasureData) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
handleAdd(qs) {
|
|
// 判断是否有未保存的病灶
|
|
this.getUnSaveTarget()
|
|
if (this.unSaveTargets.length > 0) {
|
|
this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存，不允许继续添加！`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => {}
|
|
})
|
|
return
|
|
}
|
|
if (!!qs.MaxQuestionCount && qs.MaxQuestionCount <= qs.TableQuestions.Answers.length) {
|
|
this.$confirm(`病灶个数最多不能超过${qs.MaxQuestionCount}个`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => {}
|
|
})
|
|
} else {
|
|
var obj = {
|
|
isSave: false
|
|
}
|
|
qs.TableQuestions.Questions.forEach(item => {
|
|
if (item.Type === 'increment') {
|
|
obj.RowIndex = qs.TableQuestions.Answers.length + 1
|
|
obj[item.Id] = `${qs.OrderMark}${String(obj.RowIndex).padStart(2, '0')}`
|
|
} else {
|
|
obj[item.Id] = ''
|
|
}
|
|
})
|
|
qs.TableQuestions.Answers.push(obj)
|
|
this.activeItem.activeRowIndex = String(obj.RowIndex)
|
|
this.activeItem.activeCollapseId = qs.Id
|
|
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
|
|
}
|
|
},
|
|
determineExistsUnsavedLession(callback) {
|
|
this.getUnSaveTarget()
|
|
if (this.unSaveTargets.length > 0) {
|
|
var rowIndex = String(this.unSaveTargets[0].rowIndex)
|
|
var questionId = this.unSaveTargets[0].questionId
|
|
if (rowIndex === this.activeItem.activeRowIndex && questionId === this.activeItem.activeCollapseId) {
|
|
callback(true)
|
|
return
|
|
} else {
|
|
this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存，不允许执行此操作！`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => { }
|
|
})
|
|
callback(false)
|
|
return
|
|
}
|
|
}
|
|
callback(true)
|
|
return
|
|
},
|
|
getUnSaveTarget() {
|
|
this.unSaveTargets = []
|
|
this.tableQuestions.map(item => {
|
|
if (item.TableQuestions && item.TableQuestions.Answers) {
|
|
item.TableQuestions.Answers.map(t => {
|
|
const refName = `${item.Id}${t.RowIndex}`
|
|
if (this.$refs[refName][0] && this.$refs[refName][0].questionForm.isSave === false) {
|
|
this.unSaveTargets.push({ lessionName: `${item.OrderMark}${String(t.RowIndex).padStart(2, '0')}`, rowIndex: t.RowIndex, questionId: item.Id })
|
|
}
|
|
})
|
|
}
|
|
})
|
|
return this.unSaveTargets
|
|
},
|
|
handleCollapseChange() {
|
|
if (this.activeName) {
|
|
const len = this.activeName.length
|
|
this.activeItem.activeRowIndex = this.activeName.substring(len - 1, len)
|
|
this.activeItem.activeCollapseId = this.activeName.substring(0, len - 1)
|
|
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
|
|
this.$refs[refName][0].handleLocation()
|
|
} else {
|
|
this.activeItem.activeRowIndex = null
|
|
this.activeItem.activeCollapseId = null
|
|
}
|
|
},
|
|
|
|
// 创建新病灶
|
|
createNLTarget(measureData) {
|
|
var idx = this.tableQuestions.findIndex(item => item.LesionType === 2)
|
|
if (idx > -1) {
|
|
this.addNLTarget(this.tableQuestions[idx], measureData)
|
|
}
|
|
},
|
|
addNLTarget(nlTarget, measureData) {
|
|
var obj = { isSave: false }
|
|
nlTarget.TableQuestions.Questions.forEach(item => {
|
|
if (item.Type === 'increment') {
|
|
obj.RowIndex = nlTarget.TableQuestions.Answers.length + 1
|
|
|
|
obj[item.Id] = `${nlTarget.OrderMark}${String(obj.RowIndex).padStart(2, '0')}`
|
|
} else {
|
|
obj[item.Id] = ''
|
|
}
|
|
})
|
|
nlTarget.TableQuestions.Answers.push(obj)
|
|
|
|
this.activeItem.activeRowIndex = String(obj.RowIndex)
|
|
this.activeItem.activeCollapseId = nlTarget.Id
|
|
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
|
|
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
|
|
setTimeout(() => {
|
|
this.$refs[refName][0].setMeasureData(measureData)
|
|
var data = {
|
|
Id: measureData.data.uuid,
|
|
InstanceId: measureData.seriesId,
|
|
SeriesId: measureData.studyId,
|
|
MeasureData: measureData,
|
|
QuestionId: nlTarget.Id,
|
|
RowIndex: obj.RowIndex
|
|
}
|
|
Store.$emit('addTemporaryMeasuredData', data)
|
|
}, 500)
|
|
},
|
|
setCollapseActive(measuredData) {
|
|
if (measuredData) {
|
|
if (this.activeItem.activeRowIndex === measuredData.RowIndex && this.activeItem.activeCollapseId === measuredData.QuestionId) {
|
|
return
|
|
} else {
|
|
this.activeItem.activeCollapseId = measuredData.QuestionId
|
|
this.activeItem.activeRowIndex = measuredData.RowIndex
|
|
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
|
|
}
|
|
}
|
|
},
|
|
modifyMeasuredData(measureObj) {
|
|
if (measureObj.questionInfo) {
|
|
this.activeItem.activeCollapseId = measureObj.questionInfo.QuestionId
|
|
this.activeItem.activeRowIndex = String(measureObj.questionInfo.RowIndex)
|
|
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
|
|
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
|
|
this.$refs[refName][0].setMeasureData(measureObj.measureData)
|
|
}
|
|
},
|
|
// 设置测量数据
|
|
setMeasuredData(measureData) {
|
|
if (this.activeItem.activeCollapseId) {
|
|
// 判断是否存在测量数据
|
|
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
|
|
if ((this.$refs[refName][0].questionForm.MeasureData && measureData.data.uuid === this.$refs[refName][0].questionForm.MeasureData.data.uuid) || !this.$refs[refName][0].questionForm.MeasureData) {
|
|
this.$refs[refName][0].setMeasureData(measureData)
|
|
} else {
|
|
this.createNLTarget(measureData)
|
|
}
|
|
} else {
|
|
// 作为新病灶
|
|
this.createNLTarget(measureData)
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</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;
|
|
|
|
}
|
|
.el-collapse{
|
|
>>>.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{
|
|
color: #ddd;
|
|
padding: 5px;
|
|
background-color:#1e1e1e;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|